読者です 読者をやめる 読者になる 読者になる

Apple TVアプリの開発(Top Shelf)

tvOS 基礎技術

これまで Focus-Driven interfacesSiri RemoteSDK、ライブラリと開発に深く関わるところを取り上げてきました。
今回は開発に関わるところではありますが、マーケティング的な要素も強いTop Shelfというものを取り上げます。

Top Shelfとは?

ホームスクリーン1列目のアプリが選択された際に、コンテンツが表示される画面最上部の領域のことです。
次の画像では、Youtubeアプリにフォーカスが当たっており、その結果、Top ShelfにYoutubeの静的な画像が表示されています。 f:id:nerd0geek1:20160124192847p:plain

Static Top Shelf imagesとDynamic Content

Static Top Shelf images

静的なTop Shelfのことです。
上記したYoutubeなどはStatic Top Shelf imagesを採用している例です。
静的ですので、Top Shelfにフォーカスを当てることはできません。

Dynamic Content

動的にTop Shelfの内容を変化させる方式です。
この方式では、Top Shelf内のコンテンツにフォーカスを当てることができ、フォーカスが当てられたコンテンツはディープリンクのように働きます。
Dynamic Contentを採用している例としては、Kitchen Storiesが挙げられます。

Kitchen Storiesでは、Top Shelf内がCollectionViewのようなUIになっています。 f:id:nerd0geek1:20160124192856p:plain ここで、Top Shelf内のHomemade buttermilkを選択すると、アプリ内の解説動画が直接開きます。
f:id:nerd0geek1:20160124192903p:plain f:id:nerd0geek1:20160124192914p:plain

この方式では、Top Shelfの内容をユーザーごとにカスタマイズすることができるため、ユーザーのエンゲージメントを高めるために利用することができます。

Top Shelfの実装

それでは、ここからはTop Shelfをどのように実装するか見てみましょう。 サンプルプロジェクトにもTop Shelfの実装を追加してありますので、そちらも参照しながら読み進めて下さい。

Static Top Shelf imagesの実装

まず、Static Top Shelf imagesについてですが、これについては、Assets.xcassetsに1920x720の画像を設定するだけです。 f:id:nerd0geek1:20160124232534p:plain

Dynamic Contentの実装

Dynamic Contentの実装は、少し複雑です。
やることは以下の通りです。

  • Targetの追加から、Application Extension > TV Service Extensionを選択して追加
  • ServiceProviderクラスのtopShelfStyleとtopShelfItemsを返却するように実装

topShelfStyleとtopShelfItemsはそれぞれ、以下のために利用されます。

topShelfStyleは表示形式の決定に利用されます。.Inset、または.Sectionedの値を取ります。
Inset f:id:nerd0geek1:20160125211456p:plain Sectioned f:id:nerd0geek1:20160125211443p:plain

出典:Apple TV Human Interface Guidelines - Icons and Images


topShelfItemsはTop Shelfに表示されるコンテンツの情報を格納するTVContentItemの配列です。TVContentItemは以下の属性を持ちます。

  • title(タイトル)
  • imageURL(画像URL)
  • displayURL(URL Schemeとして利用)
  • imageShape(Dynamic Contentの形状)

topShelfItemsが空配列の場合、Top ShelfにはStatic Top Shelf imagesが表示されます。 また、topShelfItemのいずれかを選択すると、AppDelegate内のfunc application(app: UIApplication, openURL url: NSURL, options: [String: AnyObject]) -> Bool {が呼びだされてアプリが起動されます。

まとめ

今回を含む4回のポストで、iOS開発者が知るべきApple TVアプリの開発に必要な点については、大体まとめることができたかと思います。
まだまだ、Apple TVのApp Storeはリリースされているアプリが少なく、ブルーオーシャン状態ですので、アプリをリリースしてみてはいかがでしょうか。

参考

Apple TV Human Interface Guidelines - Icons and Images

サンプルコード