Download as PDF, PPTX
More Related Content
![UIImageView vs Metal [日本語版] #tryswiftconf](https://cdn.slidesharecdn.com/ss_thumbnails/tryswift20180302japanese-180304220322-thumbnail.jpg?width=640&height=640&fit=bounds)
WatchKitを実際にさわってみてわかったこと
- 1. WatchKit を実際に さわってみてわかったこと 堤 修一@shu223 2015.2.14 iOS オールスターズ勉強会
- 2.
- 3. • 堤 修一（つつみしゅういち） 自己紹介
- 4. • 堤 修一（つつみしゅういち） • iOS専業フリーランス 自己紹介
- 5. • 堤 修一（つつみしゅういち） • iOS専業フリーランス • ブログ『Over&Out その後』 自己紹介
- 6. • 堤 修一（つつみしゅういち） • iOS専業フリーランス • ブログ『Over&Out その後』 • 著書『iOSアプリ開発 達人のレシピ100』 自己紹介
- 7. • 堤 修一（つつみしゅういち） • iOS専業フリーランス • ブログ『Over&Out その後』 • 著書『iOSアプリ開発 達人のレシピ100』 • GitHub - iOS7-Sampler - iOS8-Sampler 自己紹介
- 8. • 堤 修一（つつみしゅういち） • iOS専業フリーランス • ブログ『Over&Out その後』 • 著書『iOSアプリ開発 達人のレシピ100』 • GitHub - iOS7-Sampler - iOS8-Sampler 自己紹介
- 9.
- 10.
- 11.
- 12. WatchKit ベータ公開 • クラスはたったの15個！ •あれもない、これもない。
- 13. WatchKit ベータ公開 • クラスはたったの15個！ •あれもない、これもない。 ドキュメントをさらっと見て、 サンプル動かして、
- 14. WatchKit ベータ公開 • クラスはたったの15個！ •あれもない、これもない。 ドキュメントをさらっと見て、 サンプル動かして、 「あんまりできること なさそうだねー」
- 15. WatchKit ベータ公開 • クラスはたったの15個！ •あれもない、これもない。 ドキュメントをさらっと見て、 サンプル動かして、 「あんまりできること なさそうだねー」 で終了
- 16.
- 17.
- 18.
- 19. とある WatchKit 案件 数日間実際に触ってみた •意外とよくわかってなかったところがたくさん！
- 20. とある WatchKit 案件 数日間実際に触ってみた •意外とよくわかってなかったところがたくさん！ • 意外とできることは多い
- 21.
- 22.
- 23.
- 24.
- 25. アジェンダ 「WatchKit を実際にさわってみてわかったこと」 を雑多に紹介します 1. アニメーション編 2.テキスト入力編 3. UIのカスタマイズ編
- 26. アジェンダ 「WatchKit を実際にさわってみてわかったこと」 を雑多に紹介します 1. アニメーション編 2.テキスト入力編 3. UIのカスタマイズ編 持ち時間（20分？）で話せるところまで。。
- 27. ※ Appleの公開資料（ログイン不要領域より閲覧およびダウンロード可能）の 範囲で発表します • Apple WatchHuman Interface Guidelines（UIガイドライン） • WatchKit Programming Guide（プログラミングガイド） • WatchKit Framework Reference（APIリファレンス） • WatchKit Catalog（サンプルコード） • Lister（サンプルコード） • WatchKit特設サイト: https://www.apple.com/jp/watch/ （画像・動画等）
- 28.
- 30. • 親アプリは WatchKitExtension を持つ
- 31. • 親アプリは WatchKitExtension を持つ • WatchKit Extension に書いたコードは基本的に iPhone 側で実行される
- 32. • 親アプリは WatchKitExtension を持つ • WatchKit Extension に書いたコードは基本的に iPhone 側で実行される • WatchKit App （ウォッチ側）は基本的に表示だけ
- 33.
- 34.
- 35. 例）WKInterfaceImage • UIImage オブジェクトの生成はiPhone 側で行われる
- 36. 例）WKInterfaceImage • UIImage オブジェクトの生成はiPhone 側で行われる • setImage: を実行すると、引数に渡したUIImageオブ ジェクトをウォッチ側に転送し、表示する iPhone Watch画像
- 37.
- 38.
- 39. 例）WKInterfaceImage • 引数に渡した名前の画像リソースが WatchApp側に あれば、それを表示する バンドル内にある 画像を表示 iPhone Watch文字列
- 40. 例）WKInterfaceImage • 引数に渡した名前の画像リソースが WatchApp側に あれば、それを表示する • 転送するのは名前だけなので速い バンドル内にある 画像を表示 iPhone Watch文字列
- 41.
- 42.
- 43. Static なアニメーション WatchKit Appの Asset Catalog 内の連番画像（＝Static なリソース） を使用
- 44. Static なアニメーション WatchKit Appの Asset Catalog 内の連番画像（＝Static なリソース） を使用
- 45. Static なアニメーション WatchKit Appの Asset Catalog 内の連番画像（＝Static なリソース） を使用 • setImageNamed: と startAnimatingWithImagesInRange∼ がポイント
- 46. Static なアニメーション WatchKit Appの Asset Catalog 内の連番画像（＝Static なリソース） を使用 • setImageNamed: と startAnimatingWithImagesInRange∼ がポイント • WatchKit Extension の Asset Catalog にリソースがあってもダメ
- 47.
- 48.
- 49. Dynamic なアニメーション WatchKit Appの Asset Catalog にない画像（＝ Dynamic なリソース）を使用
- 50. Dynamic なアニメーション WatchKit Appの Asset Catalog にない画像（＝ Dynamic なリソース）を使用 • setImageNamed: や startAnimatingWithImagesInRange∼ が使え ない
- 51. Dynamic なアニメーション WatchKit Appの Asset Catalog にない画像（＝ Dynamic なリソース）を使用 • setImageNamed: や startAnimatingWithImagesInRange∼ が使え ない • setImage: や setImageData: を使うしかない
- 52. Dynamic なアニメーション WatchKit Appの Asset Catalog にない画像（＝ Dynamic なリソース）を使用 • setImageNamed: や startAnimatingWithImagesInRange∼ が使え ない • setImage: や setImageData: を使うしかない - 画像が動的に転送されるので、パフォーマンスの懸念あり
- 53.
- 54.
- 55.
- 56. 最初に試した方法： タイマーを利用する（非推奨！） • フレームごとの UIImageを生成して WKInterfaceImage の setImage: で転送
- 57. 最初に試した方法： タイマーを利用する（非推奨！） • フレームごとの UIImageを生成して WKInterfaceImage の setImage: で転送 • というのを NSTimer で回す
- 58. 明らかに遅い NSTimer にセットしたインターバルは 0.1、つまり10fps だ が、明らかに転送か描画が間に合っていない
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. Animated Imageを利用する • UIImageの animatedImageWithImages:duration: を利用
- 67.
- 68.
- 69.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79. presentTextInputControllerWith∼ を使うだけ テキスト入力のインターフェースを表示するメソッド - 第1引数： suggestedphrases を指定 - 第2引数： 入力タイプを指定
- 80. presentTextInputControllerWith∼ を使うだけ テキスト入力のインターフェースを表示するメソッド - 第1引数： suggestedphrases を指定 - 第2引数： 入力タイプを指定 - 第3引数： 入力完了後に呼ばれる block
- 81. Smart Replies +音声入力
- 82. Smart Replies +音声入力
- 83. Smart Replies +音声入力 • 第１引数にフレーズの配列、第２引 数に .Plain を渡す
- 84. Smart Replies +音声入力 • 第１引数にフレーズの配列、第２引 数に .Plain を渡す
- 85. Smart Replies +音声入力 • 第１引数にフレーズの配列、第２引 数に .Plain を渡す • 選択フレーズのリストはスクロール する
- 86. Smart Replies +音声入力 • 第１引数にフレーズの配列、第２引 数に .Plain を渡す • 選択フレーズのリストはスクロール する • マイクボタンを押すと "Dictation is not supported in the WatchKit Simulator
- 87.
- 88.
- 89.
- 90.
- 91. 絵文字入力 • 第２引数に .AllowEmojiを渡す • 絵文字ボタンを押すと "Emoji is not supported in the WatchKit Simulator"
- 92. 絵文字入力 • 第２引数に .AllowEmojiを渡す • 絵文字ボタンを押すと "Emoji is not supported in the WatchKit Simulator" • マイクボタンを押すと "Dictation is not supported in the WatchKit Simulator”
- 93.
- 94.
- 95.
- 96.
- 97. アニメーション絵文字 • 第２引数に .AllowAnimatedEmojiを 渡す • 絵文字ボタンを押すと "Emoji is not supported in the WatchKit Simulator"
- 98. アニメーション絵文字 • 第２引数に .AllowAnimatedEmojiを 渡す • 絵文字ボタンを押すと "Emoji is not supported in the WatchKit Simulator" • マイクボタンを押すと "Dictation is not supported in the WatchKit Simulator”
- 99.
- 100.
- 101.
- 102.
- 103. おまけ：音声入力だけ • 第1引数は nil、入力モードはPlain • 遷移してすぐに "Dictation is not supported in the WatchKit Simulator" と出る →この画面が既に Dictation インターフェー スになっていると考えられるる
- 104. おまけ：音声入力だけ • 第1引数は nil、入力モードはPlain • 遷移してすぐに "Dictation is not supported in the WatchKit Simulator" と出る →この画面が既に Dictation インターフェー スになっていると考えられるる （＝ユーザーの操作を1ステップ減らせる）
- 105.
- 106.
- 107.
- 108. Core Graphics? iOS であれば、CoreGraphics とか UIBezierPath で円弧を描画 しつつグラデーションカラーで塗る （ヒューマンインターフェースガイドラインより）
- 109. 直接 WatchKit App上で Core Graphics 的な描画ができる？
- 110. 直接 WatchKit App上で Core Graphics 的な描画ができる？ → できません
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119. カスタムフォント • iOS と同様の手順でできるか？ -WatchKit App のバンドルに フォントファイルを入れる
- 120. カスタムフォント • iOS と同様の手順でできるか？ -WatchKit App のバンドルに フォントファイルを入れる - WatchKit App の Info.plist 編集
- 121. カスタムフォント • iOS と同様の手順でできるか？ -WatchKit App のバンドルに フォントファイルを入れる - WatchKit App の Info.plist 編集 → 普通にできた
- 122. カスタムフォント • iOS と同様の手順でできるか？ -WatchKit App のバンドルに フォントファイルを入れる - WatchKit App の Info.plist 編集 → 普通にできた
- 123.
- 124. インターフェースのオーバーレイ • WKInterfaceObject は、 UIViewの subview 的にイン ターフェース同士を重ねられ ない
- 125. インターフェースのオーバーレイ • WKInterfaceObject は、 UIViewの subview 的にイン ターフェース同士を重ねられ ない → WKInterfaceGroup の setBackgroundImage: を活用
- 126. インターフェースのオーバーレイ • WKInterfaceObject は、 UIViewの subview 的にイン ターフェース同士を重ねられ ない → WKInterfaceGroup の setBackgroundImage: を活用
- 127.
- 128. origin 調整 • WKInterfaceObjectには、 （UIView における） frame.origin 的なプロパティがない
- 129. origin 調整 • WKInterfaceObjectには、 （UIView における） frame.origin 的なプロパティがない • UIEdgeInsets 的なものもない
- 130. origin 調整 • WKInterfaceObjectには、 （UIView における） frame.origin 的なプロパティがない • UIEdgeInsets 的なものもない → WKInterfaceGroup を活用
- 131. origin 調整 • WKInterfaceObjectには、 （UIView における） frame.origin 的なプロパティがない • UIEdgeInsets 的なものもない → WKInterfaceGroup を活用
- 132.
- 133. • 角丸・・・WKInterfaceGroup にそういうプロパティがある •テーブルセルの高さ変更・・・普通にコンテンツの高さで決まる
- 134. • 角丸・・・WKInterfaceGroup にそういうプロパティがある •テーブルセルの高さ変更・・・普通にコンテンツの高さで決まる • 38mm と 42mm でレイアウト設定を分ける・・・IBの+ボタンか ら設定可能
- 135. • 角丸・・・WKInterfaceGroup にそういうプロパティがある •テーブルセルの高さ変更・・・普通にコンテンツの高さで決まる • 38mm と 42mm でレイアウト設定を分ける・・・IBの+ボタンか ら設定可能 • 画面に対してn等分になるようInterfaceオブジェクトを設置す る・・・”Relative to Container”の比率をセットできる（デフォル トが 1）
- 136. • 角丸・・・WKInterfaceGroup にそういうプロパティがある •テーブルセルの高さ変更・・・普通にコンテンツの高さで決まる • 38mm と 42mm でレイアウト設定を分ける・・・IBの+ボタンか ら設定可能 • 画面に対してn等分になるようInterfaceオブジェクトを設置す る・・・”Relative to Container”の比率をセットできる（デフォル トが 1） • WKInterfaceButton のカスタマイズ・・・IB の Content を“Group” に切り替える（デフォルトは“Text”）
- 137. まとめ • 「WatchKit を実際にさわってみてわかったこと」を 雑多に紹介しました •検証サンプルのまとめOSS - https://github.com/shu223/WatchKitTrials - 近日公開予定！
- 138. 告知 iOS ✕ BLEプログラミング ∼ Core Bluetooth 徹底解説 ∼（仮） という著書が来月（2015年3月）に出る予定ですので、 ぜひよろしくお願いします！
- 139.