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

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. 2014.11.19

10. WatchKit ベータ公開

11. WatchKit ベータ公開
• クラスはたったの15個！

12. WatchKit ベータ公開
• クラスはたったの15個！
• あれもない、これもない。

13. WatchKit ベータ公開
• クラスはたったの15個！
• あれもない、これもない。
ドキュメントをさらっと見て、
サンプル動かして、

14. WatchKit ベータ公開
• クラスはたったの15個！
• あれもない、これもない。
ドキュメントをさらっと見て、
サンプル動かして、
「あんまりできること
なさそうだねー」

15. WatchKit ベータ公開
• クラスはたったの15個！
• あれもない、これもない。
ドキュメントをさらっと見て、
サンプル動かして、
「あんまりできること
なさそうだねー」
で終了

16. 2015.2

17. とある WatchKit 案件

18. とある WatchKit 案件
数日間実際に触ってみた

19. とある WatchKit 案件
数日間実際に触ってみた
• 意外とよくわかってなかったところがたくさん！

20. とある WatchKit 案件
数日間実際に触ってみた
• 意外とよくわかってなかったところがたくさん！
• 意外とできることは多い

21. アジェンダ

22. アジェンダ
「WatchKit を実際にさわってみてわかったこと」
を雑多に紹介します

23. アジェンダ
「WatchKit を実際にさわってみてわかったこと」
を雑多に紹介します
1. アニメーション編

24. アジェンダ
「WatchKit を実際にさわってみてわかったこと」
を雑多に紹介します
1. アニメーション編
2. テキスト入力編

25. アジェンダ
「WatchKit を実際にさわってみてわかったこと」
を雑多に紹介します
1. アニメーション編
2. テキスト入力編
3. UIのカスタマイズ編

26. アジェンダ
「WatchKit を実際にさわってみてわかったこと」
を雑多に紹介します
1. アニメーション編
2. テキスト入力編
3. UIのカスタマイズ編
持ち時間（20分？）で話せるところまで。。

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. 予備知識：
WatchKit のアーキテクチャ

30. • 親アプリは WatchKit Extension を持つ

31. • 親アプリは WatchKit Extension を持つ
• WatchKit Extension に書いたコードは基本的に
iPhone 側で実行される

32. • 親アプリは WatchKit Extension を持つ
• WatchKit Extension に書いたコードは基本的に
iPhone 側で実行される
• WatchKit App （ウォッチ側）は基本的に表示だけ

33. 例）WKInterfaceImage

34. 例）WKInterfaceImage

35. 例）WKInterfaceImage
• UIImage オブジェクトの生成は iPhone 側で行われる

36. 例）WKInterfaceImage
• UIImage オブジェクトの生成は iPhone 側で行われる
• setImage: を実行すると、引数に渡したUIImageオブ
ジェクトをウォッチ側に転送し、表示する
iPhone Watch画像

37. 例）WKInterfaceImage

38. 例）WKInterfaceImage

39. 例）WKInterfaceImage
• 引数に渡した名前の画像リソースが WatchApp 側に
あれば、それを表示する
バンドル内にある
画像を表示
iPhone Watch文字列

40. 例）WKInterfaceImage
• 引数に渡した名前の画像リソースが WatchApp 側に
あれば、それを表示する
• 転送するのは名前だけなので速い
バンドル内にある
画像を表示
iPhone Watch文字列

41. 1. アニメーション編

42. Static なアニメーション

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. メッチャ速い
これは10fps、もっといける。

48. Dynamic なアニメーション

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. Dynamic なリソースでのアニ
メーションをどう実現するか？

54. 最初に試した方法：
タイマーを利用する（非推奨！）

55. 最初に試した方法：
タイマーを利用する（非推奨！）

56. 最初に試した方法：
タイマーを利用する（非推奨！）
• フレームごとの UIImage を生成して
WKInterfaceImage の setImage: で転送

57. 最初に試した方法：
タイマーを利用する（非推奨！）
• フレームごとの UIImage を生成して
WKInterfaceImage の setImage: で転送
• というのを NSTimer で回す

58. 明らかに遅い
NSTimer にセットしたインターバルは 0.1、つまり10 fps だ
が、明らかに転送か描画が間に合っていない

59. キャッシュを使う？

60. キャッシュを使う？
• NO!

61. キャッシュを使う？
• NO!
• アニメーションをキャッシュすること自体が問題と
いうわけではないが、フレームごとの画像をキャッ
シュするのはやめろとプログラミングガイドに書い
てある。

62. Dynamic アニメーション
実装方法の正解

63. Animated Imageを利用する

64. Animated Imageを利用する

65. Animated Imageを利用する

66. Animated Imageを利用する
• UIImage の
animatedImageWithImages:duration: を利用

67. Staticアニメーションとほぼ同等
（今回試したアニメーションでは感じなかったが、）Animated Imageのサイズ
が大きくなると転送オーバーヘッドが体感でわかるぐらいには出てくるかも。

68. 2. テキスト入力編

69. アニメーションする3D絵文字
これどうやるのか？WatchKitにAPIはあるのか？

71. スマートリプライと音声入力

72. スマートリプライと音声入力
• 同じく、どうやるの？WatchKitにAPIはあるの？

73. スマートリプライと音声入力
• 同じく、どうやるの？WatchKitにAPIはあるの？
• スマートリプライのフレーズは動的に指定できるの？

74. 3D絵文字や音声入力、ス
マートリプライの実現方法

75. presentTextInputControllerWith∼
を使うだけ

76. presentTextInputControllerWith∼
を使うだけ
テキスト入力のインターフェースを表示するメソッド

77. presentTextInputControllerWith∼
を使うだけ
テキスト入力のインターフェースを表示するメソッド

78. presentTextInputControllerWith∼
を使うだけ
テキスト入力のインターフェースを表示するメソッド
- 第1引数： suggested phrases を指定

79. presentTextInputControllerWith∼
を使うだけ
テキスト入力のインターフェースを表示するメソッド
- 第1引数： suggested phrases を指定
- 第2引数： 入力タイプを指定

80. presentTextInputControllerWith∼
を使うだけ
テキスト入力のインターフェースを表示するメソッド
- 第1引数： suggested phrases を指定
- 第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. 絵文字入力
• 第２引数に .AllowEmoji を渡す

90. 絵文字入力
• 第２引数に .AllowEmoji を渡す

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. アニメーション絵文字
• 第２引数に .AllowAnimatedEmoji を
渡す

96. アニメーション絵文字
• 第２引数に .AllowAnimatedEmoji を
渡す

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. おまけ：音声入力だけ
• 第1引数は nil、入力モードは Plain

102. おまけ：音声入力だけ
• 第1引数は nil、入力モードは Plain

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. 3. カスタムUI編

106. （ヒューマンインターフェースガイドラインより）

107. Core Graphics?
（ヒューマンインターフェースガイドラインより）

108. Core Graphics?
iOS であれば、Core Graphics とか UIBezierPath で円弧を描画
しつつグラデーションカラーで塗る
（ヒューマンインターフェースガイドラインより）

109. 直接 WatchKit App 上で Core
Graphics 的な描画ができる？

110. 直接 WatchKit App 上で Core
Graphics 的な描画ができる？
→ できません

111. Apple による正解

112. Apple公式サンプル『Lister』

113. Apple公式サンプル『Lister』

114. Apple公式サンプル『Lister』
1度ずつ、360個切りだされた連番png （！）
がWatch Appのバイナリにあらかじめ入っている！

115. 実装もやはり普通に連番アニメーション
（Listerサンプル）

116. その他、試してみた
カスタムUI

117. カスタムフォント

118. カスタムフォント
• iOS と同様の手順でできるか？

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. origin 調整

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. • 角丸・・・WKInterfaceGroup にそういうプロパティがある

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. ご清聴ありがとうございました！
• Twitter：@shu223
• Facebook：shuichi.tsutsumi
• GitHub：shu223