Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WatchKitを実際にさわってみてわかったこと

34,569 views

Published on

2015.2.14 iOS オールスターズ勉強会

Published in: Technology
  • Be the first to comment

WatchKitを実際にさわってみてわかったこと

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

×