Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to AbemaTV on Apple TV tvOS入門
Similar to AbemaTV on Apple TV tvOS入門 (20)
More from Yuji Hato
Recently uploaded
Recently uploaded (20)
AbemaTV on Apple TV tvOS入門
- 1. AbemaTV on Apple TV tvOS入門 CA.swift 2016/12/01 Yuji Hato
- 2. About me Yuji Hato CyberAgent, Inc. / AbemaTV, Inc. dekatotoro @dekatotoro Contributed services
- 5. ・64-bit A8 processor ・32GB or 64GB of storage ・2GB of RAM ・10/100Mbps Ethernet ・WiFi 802.11a/b/g/n/ac ・1080p resolution ・HDMI 1.4 ・New Siri Remote / Apple TV Remote Apple TV 4th generation
- 6. ・32GB 15,800円 ・64GB 20,800円 ※2016/09に値下げ ・32GB 18,400円 →15,800円（2,600円値下げ） ・64GB 24,800円 →20,800円（4,000円値下げ） Apple TV (tvOS) 4th generation
- 7. Remote
- 13. Limited App Size
- 16. Limited Local Storage Service Online/Local Persistent/Temporary limit iCloud Key-Value Store (KVS) Online Persistent 1MB max CloudKit Online Persistent - UserDefaults Local Persistent 500KB max Keychain Local Persistent - CacheDirectory Local Temporary May be purged TemporaryDirectory Local Temporary May be purged
- 17. Limited Local Storage Service Online/Local Persistent/Temporary limit iCloud Key-Value Store (KVS) Online Persistent 1MB max CloudKit Online Persistent - UserDefaults Local Persistent 500KB max Keychain Local Persistent - CacheDirectory Local Temporary May be purged TemporaryDirectory Local Temporary May be purged
- 18. Limited Local Storage Service Online/Local Persistent/Temporary limit iCloud Key-Value Store (KVS) Online Persistent 1MB max CloudKit Online Persistent - UserDefaults Local Persistent 500KB max Keychain Local Persistent - CacheDirectory Local Temporary May be purged TemporaryDirectory Local Temporary May be purged
- 19. Limited Local Storage Service Online/Local Persistent/Temporary limit iCloud Key-Value Store (KVS) Online Persistent 1MB max CloudKit Online Persistent - UserDefaults Local Persistent 500KB max Keychain Local Persistent - CacheDirectory Local Temporary May be purged TemporaryDirectory Local Temporary May be purged
- 20. User Interaction
- 24. Icons and Images
- 25. https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/ Icons and Images App Icon.
- 28. https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/ Top Shelf Images. Icons and Images
- 29. https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/ Top Shelf Images. Icons and Images
- 30. Layout
- 51. tvOSの概要を抑えたところで
- 52. AbemaTV on tvOS
- 54. 開発スケジュール
- 55. 開発スケジュール ２ヶ月
- 56. ２ヶ月 開発スケジュール
- 57. ２ヶ月 開発スケジュール
- 58. ２ヶ月 開発スケジュール
- 59. 体制
- 60. 体制 ・Designer 1 (兼務) ・Engineer 2 (1名兼務) ・Director 1 (兼務)
- 61. プロジェクト構成
- 64. 進捗管理
- 66. Libraries
- 68. UI/UX
- 69. Overall UI/UX
- 70. Overall UI/UX
- 73. Menu UI/UX
- 76. OnAir Info UI/UX
- 78. Overall UI/UX
- 79. TimeTable UI/UX
- 83. TimeTable UI/UX
- 84. TimeTable UI/UX
- 88. Overall UI/UX
- 89. Ondemand UI/UX
- 93. Overall UI/UX
- 94. Setting UI/UX
- 96. Overall UI/UX
- 98. Conclusion
- 99. Conclusion • 共通部分をEmbedded Framework化しておくと良い • iOSとの違いはFocus周りがキモ • 標準のUI/UXに従う • 画面大きくて開発が楽しい
Editor's Notes
- はい、それではAbemaTV on Apple TV tvOS入門ということで発表したいと思います。よろしくお願いします。今回codeは１行も出てこないので気楽に聞いてもらえればなと思います。
- 簡単に自己紹介です。 波戸と申します。ネット上ではだいたいdekatotoroという名前で活動しています。 これまでは、AmebaアプリやAWAという音楽ストリーミングアプリなど開発してきて、現在はAbemaTVのiOS、tvOSアプリを開発しています。
- はい、今回はtvOSについてお話ししようと思うのですが、おそらくtvOS開発したことのある方はそんなにいらっしゃらないと思いますので、 今日は概要や基本をお話ししたいと思います。 まず、Apple TV第４世代の概要について見ていきたいと思います。
- 第4世代Apple TVは2015年9月に発表されて、 2015年10月30日に発売されました
- AppleTVのスペックですが、CPUはA8のデュアルコアでメモリが2GBなので iPhone6のCPUとiPhone6sのメモリと同じなので、単純に比較はできませんが、iPhone6とiPhone6sの中間のスペックくらいかと思います。
- ちなみに値段は今年の9月に値下げが入って 税抜きで32GBモデルが15800円と64GBモデルが20800円です
- はい、次に、Apple TVに付属するリモコンですが、
- こんな感じです
- 上のマットな部分はTouch Surfaceと呼ばれている部分で、SwipeやClick, Tapができます。物理ボタンとして、Menuボタン、Homeボタン、Siriボタン、Play/PauseボタンとVolumeボタンがあります。
- Swipeはこんな感じで、左右上下できます。 Clickは押し込む感じです Tapは左右上下の位置で軽く触るイメージになります。
- はい、次にtvOSの開発方法なのですが、
- 開発方法は大きく分けて2つあります Traditional AppsとClient server appsの２つです Traditional AppsはiOSと同様にUIKitで開発するもので、 Client server AppsはTVMLやTVJSといったWebテクノロジーを使って開発する手法になります。 今回は通常のTraditional Appsの開発についての話になります。
- 最初になんですが、アプリサイズの制限がありまして、
- アプリのサイズは200MBの制限があります。 ゲームなどサイズが大きくなるものもあると思うので、その場合は オンデマンドリソースやCacheDirectoryを使う必要があります。
- tvOSのデータの保存も制限がいくつかありまして、
- 図のような感じにまとめました
- iCloudにデータを保存と取得ができますというのと、
- UserDefaultsが500kの制限がありますよーというのと、
- TmpDirectory, CacheDirectoryは、OSによって消される可能性がありますーというものです アプリケーションの実行中は削除されませんが、tvOSではDocumentsディレクトリは使えないので、RealmとかSqliteのようなdatabase fileもcacheDirectoryに保存することになります。なので、purgeされる可能性を考えると、DBはdisk保存じゃなくてonMemoryを検討してもいいかもしれません。
- はい、次にtvOSのUser Interactionについて代表的な部分を紹介します。
- tvOSではFocusという概念があって、基本的にView間の移動はFocusによて行います。 こんな感じです。
- 次に最も多用することが多い画像ですが、 ImageViewにadjustsImageWhenAncestorFocusedというpropertyがあってこれをtrueにしておけば、focus時にparallaxのようなインタラクションになります。
- あとは、tvOSと相性の良い動画ですが、 デフォルトのAVPlayerControllerを使用することで、このようなseekやstart/stop操作が簡単に実装できます。
- 次にIconと画像ですが、
- これはAppStoreの画像で、App Iconが並んでいます。 で、このcollectionで並んでるApp Iconはfocusしてグリグリできるようになっていて、
- えー、App IconはLayeredImageというもので作成するのですが、 これは設定アプリの例で、５枚の画像をレイヤードしてできたもので、 よく見ないとわかりませんが、Focus時にグリグリすると、layeredした画像がparallaxぽい動きになります。
- ちょっと小さくて見にくいと思いますが、LayeredImageは実際のサイズと、フォーカス時に見切れないサイズ、アンフォーカス時のサイズが定義されているので、これを参考に作ることができます。App Icon以外にもアプリでLayeredImageを使うことができて、埋め込みのLayeredImageはlsr、サーバから取得するものはlcrというformatで使うことができます。埋め込みの場合はXcodeでもできますが、layeredImageを生成するためのツールもいくつか用意されています。
- はい、あとはTop Shelf Imageですが、tvOSのホーム画面でfocusした時の上に表示する大きい画像も用意する必要があります。
- Top Shelf Imageはコンテンツのリストを見せたりなどのカスタムもできます。
- はい、次にLayoutについてAppleが推奨しているレイアウトを紹介します。
- アプリの画面レイアウトは1920 x 1080の16：9の画面解像度に設計します。画像もiOSみたく@1x, @2x @3xと複数用意する必要はなくtvOS用に@1xの一つだけで良いです。
- 全体的なデザインですが、古いTVだと端が見切れて隠れてしまうことがあるので、画面の端は余白を空けておくことが推奨されています。
- 古いTVなどで端が見切れて隠れてしまう現象は、 縦が見切れるオーバースキャンと、横幅が狭まるアンダースキャン などがあり、 テレビやプロジェクター側の設定で調整すると直る場合があります。 ただ、ユーザーがなかなか設定できることに気づかないことが多いと思うので、見切れても問題ないように、先ほどのように余白を設けたデザインにしたほうが良さそうです。。
- あとはフォーカスして拡大しても問題ないようにパディングを設けてください、というのと、
- 大きな要素でもコンテンツを1画面に伸ばさず、複数あるというヒントを残すと良いですと推奨しています。
- こんな感じでレイアウトのテンプレートをAppleが公開しているので 、これを参考にすると良いと思います。
- はい、次にUIの部品についてざっと見ていきます
- tvOSのTab Barはこんな感じで、上に表示されます。 UITabBarControllerを使って実装すると簡単です。 ほとんどのアプリのメニューがtabを使っているので、メニューはtabを使うのが無難かなーと思います。
- Table Viewはこんな感じで、リスト表示に良いです。 focusするとdefaultでfocusアニメーションがついて拡大してくれます。
- コレクションViewは、デフォルトではfocusアニメーションはありません。cellの中にadjustsImageWhenAncestorFocused がtrueのImageViewがあればImageが拡大しますが、cell自体のfocusアニメーションをつけたい場合は自分で実装する必要があります。
- はい、SplitViewはこんな感じで、この例のように 左がlistで右がコンテンツ表示というのが多いと思いますが、 tvOSだと結構使用するレイアウトだと思います。
- これはTextFieldですが、TextFieldは、、そのままですね。
- keyboradはこんな感じで、TextFieldなどにfocusした時に表示されます。 数字だけなどkeyboardTypeも色々指定できます
- UISearchBarはこんな感じです。
- Buttonです、AbemaTVではカスタムボタンをいくつか使っていますが systemボタンを使うとデフォルトでfocusアニメーションがついて拡大してくれたりするので、デザイン上カスタマイズする必要がなければ、systemボタンが良いと思います。
- Navigation barは上にナビゲーションを表示します。AbemaTVではNavigation barは使ってませんが、
- 例として純正の設定アプリがNavigation barを使って、現在いるnavigation階層のtitleを表示するように使用しています。
- はい、あとはUIPageControlで、iOSとほとんど一緒ですね
- これは、ローディングに使うUIActivityIndicatorViewです。
- あとはUIAlertControllerの例です。popupではなく画面全体に表示される感じになります。
- はい、以上がUI部品の紹介になります。 tvOSの概要はだいたい抑えたところで、
- ここからは、AbemaTVでのtvOS開発についてお話ししたいと思います。
- AbemaTVのtvOS版ですが、ちょうど1週間前くらいの11/25にリリースしました。
- まず、開発スケジュールですが、
- 初期リリースまでの開発期間は、９月中旬から始めたので大体2か月でした。
- まぁ人によって期間が短い長いの感じ方は違うと思いますが、 私は結構大変でしたw
- 次に開発体制ですが、
- ディレクターが一人とデザイナーが一人で エンジニアはメインで私が入って、もう一人も途中からガッツリ入りました。
- tvOSの開発を始めるにあたって、最初に迷ったのがプロジェクト構成です。
- iOSと同じプロジェクトにtargetを分けて作るか、別プロジェクトにするかで迷いました。 最初は同じプロジェクトにtargetを分けて作り始めたのですが、 共通機能の依存関係が結構複雑だったりで、結果として
- iOSとは別プロジェクトで作成することにしました。主な理由として、 - 共通機能のframeworkができていないことと、 - tvOS開発途中でiOS側のSwift3対応が入ること、 - 上記もろもろ同じプロジェクトで進行するとスケジュール的に厳しいこと から別プロジェクトで開発することにしました。 最終的には同じプロジェクトでtargetを分ける形にしたいなと思っています。
- はい、あとは進捗管理ですが、
- iOSはJiraを使っているのですが、 tvOSは体制も少人数なので、 ちょうど開発を始めた9月中旬頃にリリースされたGitHub projectとGitHub issueでカジュアルに管理する感じで開発しました。 Waffle.ioとかもありますね
- 次にtvOSで使っているライブラリですが、
- だいたいiOSと同じものを使ってます。 大きいところで言うと、RxSwift、SQLite, Kingfisher, ProtocolBufferとかですかね。 一部tvOSに対応していないものは、こちらで拡張しています。 使ってないのはFirebaseとかGoogleTagManagerとかtvOSに必要ないもの
- 次にAbemaTVのUI/UXについてです。
- はい、全体ですが、まずグローバルメニューがあって、 メインの画面が、ホーム、番組表、オンデマンド、設定の4つがあります。 pushやpresentする画面として詳細画面やオンデマンド再生画面、エラー画面やアラートなどいくつかその他の画面があります。
- まず最初にアプリを起動すると、ホームのオンエア放送の再生画面になります。
- こんな感じです。
- オンエア画面の操作は 上でメニュー、左右でチャンネル切り替え、クリックでチャンネル一覧表示としています。 ここのgestureは開発中に使いやすさを色々試していて、最終的にこの操作に落ち着きました。
- メニューはこんな感じで上から出るんですが、
- tabBarで作ると、このようになります。 ほとんどのアプリがtabBarによるグロールメニューを採用しているので、この形のメニューが無難だとは思います。
- onAirの再生画面は、左右スワイプでチャンネルの切り替えができるのですが、ここはPageViewControllerで作っています。
- onAirでクリックすると、チャンネルのリストを表示します。
- ここの画面は透明にしたViewControllerを重ねて表示していますが、 CustomViewとCollectionViewで作っています。
- 次に番組表ですが
- 見てわかると思いますが、ここはかなり複雑になっていまして、
- チャンネルヘッダーと左の日付リストはcollectionViewで、 真ん中のコンテンツはScrollViewにしています。で、真ん中のscrollViewの中に、、
- collectionViewをずらっと並べています。
- collectionView一枚じゃないとの？と思った方もいると思いますが、 collectionView一枚だと、focusがうまくいかなかったパターンがあったりして, 試行錯誤の結果最終的にこのようにしていますが、パフォーマンスが厳しい面もあって現在も調整中です。 (左右でスクロールできる形のflowlayoutを入れると画面端までfocusをずらすと勝手に一番端までscrollしてしまう感じのバグがあったので)
- あとは、番組表の日付の切り替えとして、一定条件でPlay/Pauseボタンで変更できるトーストを出すようにしています。
- Play/Pauseボタンを押すと日付選択画面を表示して、番組表の日付を切り替えられるようにしています。
- 詳細画面はこんな感じです
- ここで工夫している点としては、番組概要など、テキストの最大行数は決めて、長い場合は3点リーダーにして、focusできるようにしているところです。
- 見切れたテキストをクリックしたら全文を見れるようにしています。
- 次にオンデマンドですが
- オンデマンド画面はこんな感じで、左側にオンデマンドリスト 右側に詳細と削除の動線を置いています。
- ここはSplitViewを使って左右を分けた実装にしています。
- これはオンデマンド再生画面ですが、オンデマンドはシークやstart/stopを可能にしているので、オンエアと違いコントローラーを追加しています。
- これも標準のAVPlayerViewControllerを使って実装しています。
- 最後に設定ですが
- 設定は特段言うこともないのですが、
- ImageViewとTableViewで普通に作っています。
- これで、、だいたい主要なところは全部になります。
- はい、以上がtvOSのAbemaTVのお話しでした。。 tvOSの雰囲気が少しは伝わったかな〜と思います。
- で、最後にまとめなんですが、
- - まず、標準のUI/UXに準拠しましょう、ということで基本的にtvOSはリモコンを使って操作するので、iOSほど自由度もなく、他のアプリも標準のUIを採用しているところが多いので、準拠しておくと無難です。 - 次にiOSとの違いはFocusがキモということで、一番ハマるところでもあります。 今日はuI周りが中心だったのですが、focusに関してはまた別の機会にお話しできたらなと思っています。 -３つ目ですが、iOSなどとの共通機能はEmbedded Framework化しておくと良いということで、これはやっている方も多いかもしれませんが、tvOSに限らず、extensionなどでも言えるかと思います。 - 最後に画面が大きくて開発が楽しいです。新しいデバイスでの開発は大変な部分もありますが、やっぱり面白いと再認識しました。
- tvOSの開発は初めてだったのですが、 試行錯誤しながら現在も開発中です。
- はい、以上になります。 ありがとうございました！