tvOS tips

1. iOSとの違いから見るtvOS
平野 朋也

2. Agenda ● 開発環境の違い
● TouchとPress
● Focus
● UIKitの違い
● アイコンの違い
● topShelf extention

3. 開発環境の違い
Xcode7.1を使って開発出来る。
プロジェクト作成時にtvOSを指定すればOK
iOSアプリを作っているなら楽ちん。実機も多分挿せばOK
podはライブラリがtvos対応さえしていれば普通にpod install出来る。
唯一困ったのは…

4. Storyboard

5. Storyboard
13inch Retina Mac の一番広い設定にしても
全体像が見えない

6. DisplayMenu
標準の解像度以上の解像度に設定
可能なユーティリティ
ドットバイドットで表示すれば全体像
を見ながらStoryboardに配置出来
る。
https://itunes.apple.
com/jp/app/display-
menu/id549083868?mt=12
無料

7. iMac
並外れたRetinaと桁外れのRetina
4Kと5Kのモデルあり
http://www.apple.com/jp/imac/
17万円くらい

8. TouchとPress
touchesBegan系のレスポンダに加え、pressesBeganが追加
Siri Remoteを触った時(Touch)の他、押し込みや各種ボタンも検知(Press)出来るよ
うになった。
UIGestureでボタンの動作を乗っ取ることで、標準の機能を無効化しつつ自分の機能
が設定可能。

9. touches~の仕様
SiriRemoteのどこから触っても、 (960,540)の地点からbeganする。
マウスと違い指の移動加速度は移動量に影響しない。
SiriRemote上のどの位置に指があるかは取得出来ない。
移動量の比率は画面と同じなので、 SiriRemoteの右上から中心に向かって
スワイプすると、座標は中心から画面左下にかけて移動する。

10. presses~の仕様
UpArrow,DownArrow,LeftArrow,RightArrow,Select,Menu,
PlayPauseの７つが取得出来る。それぞれフリックとボタンを押
した際のイベントに紐付いている。
Selectはタッチサーフェスを押し込んだ時の動作。
ArrowとSelectはキーボードを接続した際に方向キーとエン
ターキーとして取得できる。
音量・Siri・Homeボタンは取得不可
pressesChangedというメソッドがあるのはゲームパッドのアナ
ログスティックかな…？

11. 先述のSiriRemoteのタッチの仕様上、画面上の押したいボタンを直接押す事ができ
ない。
そのため、tvOSではFocusという概念がある。要するにハイライト
一般的にFocusされたビューは手前に飛び出したような見た目になり、SiriRemote上
の指の位置を向くような動きをする。
Focus

12. Focusの厄介なところ集

13. Focusの厄介なところ集
1.フォーカスが持っていかれる

14. フォーカスが持っていかれる
よくあるトーストを表示したい場合
UIWindowを生成して…というのはtvOSでは実はNG!

15. フォーカスが持っていかれる
よくあるトーストを表示したい場合
makeKeyAndVisible()はresponderを奪う為、
Focusも奪われる....

17. フォーカスが持っていかれる
トーストを作る場合は
必ずkeyWindowを探して、それに対してaddSubViewすればレス
ポンダが外れないのでFocusもそのままになる。

19. Focusの厄介なところ集
2.フォーカスの移動順序

20. Focusの移動順序
下キーを入れた場合 ボタン１
ボタン２

21. Focusの移動順序
↓ビーム↓
下キーを入れた場合
現在Focusされているビューと同じ横幅
のビーム（便宜上）が発射されて、ぶつ
かったビューにFocusがあたる。
この時1pxでもかぶっていれば Focusは
移り変わる。
UIFocusGuideを利用すると、Focusの
ビーム判定を作ることも可能。
ボタン１
ボタン２

22. Focusの移動順序
ボタン２
ボタン1タブバー
タブバーは消えたり出てきたりするのでちょっと厄介
ここで下キーをいれると
下にボタン１がある

23. Focusの移動順序
ボタン２
ボタン1
タブバー
タブバーは画面の外に移動し、タブバーの下のボタン２に Focus
ここで上キーを入れると

24. Focusの移動順序
ボタン２
ボタン1
タブバー
ボタン１にFocusする。
ユーザーはタブバーに戻りたかったのでは …？

25. Focusの厄介なところ集
3.カスタムビューのフォーカス

26. カスタムビューのフォーカス
UIButtonTypeのフォーカスされた時の違い
Normal Custom
浮かび上がりすらしない

27. カスタムビューのフォーカス
カスタムビューはフォーカスが当たっても、標準のフォーカスの影
が発生しない。
自前で影を置くか、影を当てるビューを指定する必要がある。

28. カスタムビューのフォーカス
自前で実装する場合
didUpdateFocusInContextをオーバーライドして Focusされているか判別し
て実装。

29. カスタムビューのフォーカス
影を当てるビューを指定する場合
UIImageViewのみ使えるadjustsImageWhenAncestorFocusedをtrueにす
る。
こちらはSiriRemoteの指の動きに追従するので、公式っぽい見た目になる。

30. UIKitの違い
基本的にはiOSのUIKitと同じだが、カスタマイズ性が制限されていたりうまく動かない部分がある。
UIPageControlに背景色が追加されているが、変更できない。
UITabbarControllerでは無名タイトルのタブにフォーカスすることができない。
UITabbarItemのラベル色がハイライト以外変更できない。
UIWebView/WebKit,UISwitchなどが存在しない。

31. UIWebViewが無い対策
QRコードなどを発行して、手元のス
マホで認証してもらう。
サーバーを用意して認証する
スクレイピングで無理やり …etc
認証系がひたすら大変。（キーボードも微妙なんで

32. アイコンの違い
Back Middle Frontの３枚で構成されるレイ
ヤー構造。（５枚まで出来そうな事が書いて
あるけどXcodeには３枚しか登録できない）
自動的に3Dオブジェクトになる。
Photoshopプラグインが提供されているが、
実はプレビューツール上でアイコンの位置や
サイズの調整とプレビュー・エクスポートが出
来るのでそっちで作るのがいい。
1280px by 768px

33. TopShelf
アイコンが最上段に配置された時
にだけ表示される棚のようなもの。
アプリのエクステンションとして実
装するが、背景を表示するだけで
あればTopShelfImageをxcassets
の中で登録すれば良い。
http://qiita.com/noppefoxwolf/items/42c15a11d2ad46b9de05

34. 以上です