tvOSでリビングルームを制御する

(音楽)

(拍手)

こんにちは　ようこそ

この１年― 私のチームはApple TVの エクスペリエンスを再考してきました ブラウジングの楽しさを 取り戻す方法やアイデアを― 試してきました

今日はユーザの皆さんをより簡単に― 大好きなコンテンツへと導く方法を 紹介します

私はトミー･ペイン Appleでデザイナーをしています

私はオーストラリアで育ち 他の世界を遠く感じていました 他の文化や人々― 違う地域や環境と つながる方法を探していました

そして その架け橋をテレビや―

映画に求めました 学校から帰ると ソファに座りテレビをつけました チャンネルを次々と切り替えて― 興味を引くものを探しました 何か見つけると― その物語に 心を奪われ引き込まれました

皆さんが大好きだった映画や テレビ番組を思い浮かべてください

それを見た時の気持ちを 時間も場所も忘れて その世界に入り込んだ時の気持ちです

その気持ちを念頭に置いて 聞いてください コードについては同僚が話します 私は発見の楽しさについて話します

どうやって皆さんが見たいものを― 妨げなく すぐに見られるようにするか？

今のテレビは少し面倒です 何列ものコンテンツを ひたすらスクロールさせられます ただ見るものを探すのに５分― 10分 20分と かかったことがありませんか？

よくあるイライラ体験です

その中で私たちは 選択と迷いによって時間を奪われます

そこが問題です 解決策を紹介しましょう

Apple TVは コンテンツファーストの体験に向けて デザインを移行することにしました アプリケーションを起動した時に― 何かが再生されているということです

ではどのように コンテンツファーストの体験を作るか 成功事例で説明します Top Shelfのデザイン変更と TV Appの例をいくつか紹介します

まず入り口の障害を取り除き― コンテンツと視聴者の間の 妨げを排除したいと考えます この原則でTop Shelfの体験は インタラクティブで没入可能になります 見てみましょう

Apple TVを起動すると ポスター画像が５秒 表示されます その後 トレーラーが始まります

トレーラーでは音声が強制的に 流れることはありません 最初に音と映像が過剰だと 台無しになることがあります ただし 後で 音声を呼び出せるようにしてあります コンテンツが すべてのピクセルを占拠し― 画面をいっぱいにします

次に 今 見ているものを― 容易に操作できるものに したいと思います スワイプやクリックは ユーザにとって認知負荷となります そこで 我々は目的までのステップを 減らしたいと考えます

Top Shelfで 画面上部に視覚的なヒントを表示します 上にスワイプすれば フルスクリーンになることを示します 実際に見てみましょう リモコンに親指を置いてスワイプすると Dockが消えて トレーラーだけが画面に残り― 画面いっぱいに表示されます

まだブラウジング中ですが― もうすでに 映画の中にいるように感じられます

どのような場面でも インタラクションを効率化するのは― 視聴者にとってプラスです TV Appの このインタラクションを用いて 再生時にメニューの呼び出しと 非表示を可能にしました 視聴者が すでに知っている 操作方法を生かすことによって― より簡単にします なぜなら一から覚えなくても 新しい体験ができるからです インタラクションの際には アプリケーションと体験を スムーズにしたいでしょう スピードとテンポは 認知負荷の軽減に不可欠です 待ち時間や遅延を取り除きましょう そうすることで流動的に感じられます

我々は過度な刺激も 避けたいと思います インターフェイスが乱雑だと― 目的を見失うことになります

あなたが部屋で11人から― 一斉に大声で話しかけられた場合を 想像してください

誰の言葉も聞き取れません

もしTV Appが それと同じことをしてしまえば― ユーザは集中できません アニメーションやアイコンや画像や テキストが多いと― それらが競合して 集中力が阻害されます 我々はユーザに対して そんな状況は望みません 集中してリラックスしてほしいと 思います

このように リラックスしていただいたら― UI内のコンテンツの多様化を 考えてみましょう それは形やアスペクト比に 手を加えたり― グリッドを分割することです TV Appでは これを 標準の16:9の列の中に― 違ったタイプのモジュールを 散りばめることで実現しました これでいくつか可能になりました 我々 提供者側がとても重要なことを 強調する場所になります ユーザに気づいてほしいことなどです ユーザにとっては 少し目を休ませる時間になります 密集したグリッドを見る中で これがあれば― 息をつく時間ができます

カンバスをシンプルで競合しないものに したいと考えます そこでヒエラルキーを作ります

Top Shelfのデザインでは コンテンツが最優先なので 画面いっぱいに映ります アプリケーションDockと 下にのぞいている列があります 優先順位はわずかに低いです 優先順を示すことで― ナビゲートの助けになります ユーザを 導いてあげることができるのです

メタデータは便利ですが コンテンツファーストの体験では 二次的なものです ユーザには コンテンツに興奮してほしいからです その後で さらに詳細があることを示します

見てみましょう

ユーザはフルスクリーンを体験した後 リモコンに親指を置くかクリックして メタデータを呼び出したのです 視聴者に追加情報にいつどのように アクセスするか任せることで― 再生を押して 映画を見るまでが簡単になります さらにメタデータがユーザに対し ブラウジングから何かを購入したり 購読したりする 手助けになるかもしれません

ページネーション･ドットは セットの中の１つのアイテムを 見ていることを示します ブラウジングをしている 時間も示します

我々のデザインでは画面下部にあり パンくずに似ています そしてApple TVの システム素材を使い― コントラストをつけて 他の画像の上部に表示します 皆さんのアプリケーションでも 役立つと思います

シェブロンはスワイプ方向を示します 上 下 左 右 でもそれ以外の役割もあります 画面外のコンテンツの存在を 暗示します

ページネーション･ドットと 合わせれば― ユーザにUI内で場所の感覚を 与える手助けになります これらはUIの些細な要素ですが 重要なツールです ユーザが戸惑い このような質問を することを避ける助けになります “クリックできる？” “出口はどこ？” “後で戻ってこれる？” こうした質問は エクスペリエンスを台無しにします

デザインを変えたTop Shelfで ブラウジングの楽しさを向上させました 画面いっぱいのコンテンツを ありったけのピクセルで表示します 慣れ親しんだナビゲーション 役立つメタデータ そしてシンプルなジェスチャがあります

でも一番の魅力は親しみやすさです 子供の頃のザッピングの感覚です

何かに心を引かれるまで 行ったり来たりできます

これらの技術と仕組みを 皆さんのデザインに使えば― ユーザに優しい アプリケーションになります

我々Appleは コンテンツファーストの力を信じます

視聴者のためです

そしてすばらしいコンテンツを提供する 器をデザインすることは― 大きなインパクトを与えます

何と言っても テレビにはユニークな力があります 私たちの物の見方を変える力 私たちを別世界へ連れ去る力があります そして私たちを― 大きなアイデアに導いてくれます

それがゴールですよね？ それぞれの人を変える物語と 人々をつなぐことです

デベロッパやデザイナーの仕事は 人を待たせてイラ立たせることじゃない 扉を開いて― 人を招き入れて コンテンツを輝かせることです

それができれば― 人々はおそらくそこに留まるでしょう ブラウズし― 何かを見て楽しむでしょう

それが―

皆さんの製品と長く続く心のつながりを 生むでしょう

次は皆さんのアプリケーションで― コンテンツファーストの体験を 活用する方法をケイレブが話します ケイレブ (拍手)

ありがとう　トミー 私はケイレブ Apple TVチームの ソフトウェアエンジニアです 今日はtvOS 13の Top Shelfの改善点について― お話ししたいと思います

Top Shelfは Apple TVで最初に見える画面です アプリケーションから コンテンツをブラウズし― 簡単な操作で 直接 ジャンプして再生できます

今年はTop Shelfをアップデートし 家の中で最も大きい画面を活用し―

トミーが話したブラウジング エクスペリエンスを提供します

今年 tvOS 13で それを可能にするのがCarouselです

Carouselには２つの特徴があります まず没入型です ホーム画面に コンテンツが フルスクリーンで表示されます

上にスワイプするとUIが消え フルスクリーンモードになり― 存分に見ることができます

そして双方向でもあります アプリケーションやアイテム間を ザッピングのようにスワイプできます

アイテムを選ぶと 画面下部にメタデータが表示されます 皆さんのアプリケーションの中にある コンテンツを― ホーム画面で見せることができます

コンテンツには違いがあり― １つのUIスタイルでは 不十分かもしれません そこで我々のAPIでは ２つのスタイルを用意しています １つ目はActions Carouselです

皆さんのAppから得られる フルスクリーンのコンテンツに― 重点を置いているので 提供するUI要素が限られています まず左上は タイトルとコンテキストタイトルです

何がどんな理由で 表示されているかが分かります

セクションヘッダのように コンテキストタイトルで アイテムのグループ分けができます

次に再生と詳細ボタンがあります これらのボタンで― 直接 アプリケーション内の アイテムに飛ぶことができます そして再生するか 詳細を見るかを選択できます

２つ目のスタイルは Details Carouselです

こちらです

同じUI要素もあります 左上にタイトルとコンテキストタイトル 左下に再生と詳細ボタン それに加え 豊富なメタデータがあります 例えば あらすじや― ジャンル　長さ テレビで再生するとどう見えるかが 分かるメディアオプションなどです 4K HDRに対応しています またクローズドキャプションや 解説放送もサポートしています

右側には属性名があります アプリケーションで 制御できるkey Valueデータです この例では 出演セクションに主な出演者たちと― 監督セクションに監督が書かれています これらの欄では 必ず表示するコンテンツに合わせ― ローカライズや複数形化しましょう

以上がCarouselです

導入する際は ベストプラクティスをお忘れなく

Carouselは コンテンツの発見に最適です 映画やドラマの新シーズン サインインしたユーザに対する 個別のおすすめなどがいい例です

アップデートは定期的にされます Top Shelfから あなたのアプリケーションに― 人を導くチャンスです なので新鮮さが必要です

トミーが言ったように 選択肢が多すぎてもいけません アイテムが多すぎると乱雑になります ５から10個に収めるといいでしょう

次に画像です Carouselのコンテンツは フルスクリーンです 画像は1920×1080で フレームいっぱいに描画しましょう

そして我々のAPIでは 1080pのデバイスなら1xの― 4Kなら2xの指定が可能です Top Shelfによって― あなたのコンテンツのUXを 最適化する手助けとなります

次にセーフエリアです これがtvOS標準Appの セーフエリアです 左右に90ポイントのパディング 上下に60ポイントの パディングがあります コンテンツが セーフエリア外に出ても平気です しかしデバイスや設定により ユーザは見えないかもしれません

Carouselのセーフエリアも 似ています Carouselに画像を置く時は シェブロンのように詳細UIや― アプリケーショングリッドが 下部に表示されるかもしれません 画像にタイトルアートがあるなら― UIと重なり 見えなくならないようにしましょう

最後に動画です Carouselではコンテンツの 動画やトレーラーを再生できます 動画は1080pのHDにしましょう もし可能なら― HTTP Live Streaming あるいはHLSで配信しましょう これもTop Shelfで UXを最適化する手助けとなります 迅速なロードや ユーザごとの帯域幅による最適化を 考慮すべきです

Carouselは コンテンツのプレビューに最適です フル視聴の提供はおすすめしません

動画の長さは ２～５分が最適だと我々は考えます

そして 動画には音声を 含めることをおすすめします 音声は適切なタイミングで流れます つまり特定のユーザアクションです

これでTop Shelfで使える UIスタイルは４つです Carousel Actions

Details Carousel

Sectioned Inset Contentです

もしあなたのコンテンツに フルスクリーンの画像や動画がなくても 構いません 軽くてブラウズしやすい SectionedとInset Contentスタイルを 使うことをおすすめします

以上 UIの概要と簡単な紹介でした 次はビルド方法を説明しましょう Top Shelf Extensionを使います 新たな機能拡張とAPIで Top Shelfの導入が簡単になります

まずXcodeで― Top Shelf Extensionのターゲットを アプリケーションに追加します これでCarouselと 新しいAPIにアクセス可能になります では３つの主要部分を 簡単に見ていきましょう 一番上は TV Top Shelf Content Provider これは機能拡張の ルートオブジェクトで Top Shelfデータの システムリクエストに対処します

新しいAPIで簡単にコンテンツを 取り出し非同期的に応答できます

次にTV Top Shelf Contentです 直接のやり取りは少ないプロトコルです ３つの主要UIスタイルごとに クラスを提供します Carousel　Sectioned　そしてInset 各クラスにはUIスタイルごとに 別個のプロパティがあります

最後にTV Top Shelf Itemです コンテンツクラスと同様― コンテンツスタイルごとに 違ったクラスがあります Carousel Item Collection Sectioned Content用のSection Item そしてInset Content用のContent Item

あとはコードより デモを見せたほうがいいでしょう 同僚のフェリペが手伝います

フェリペ

(拍手)

まずTop Shelf Extensionの ターゲットをXcodeに追加します ターゲットを追加し― tvOSタブで TV Top Shelf Extensionを選びます

名前を付け―

Embed in Applicationの ポップアップが正しい値か確認します

この場合 すでに 機能拡張があるのでここは飛ばして― ContentProviderに進みます

これがTop Shelf Extensionを 追加した画面です ContentProviderクラスのサブクラスに TVTopShelfContentProviderがあり コンプリーションハンドラで loadTopShelfContentを実行します

今は表示するものがないのでnilに これをコンテンツに置き換えましょう

注目映画のリストをフェッチし― 映画の応答かエラーのどちらかに 非同期的に応答します では実際にそれぞれのケースで コンテンツを入れてみましょう

コンプリーションハンドラで オブジェクトを呼び出します エラーの場合も― コンプリーションハンドラをnilで呼び やることがないとシステムに伝えます

これでよし それでは機能拡張を モデルに追加しましょう

機能拡張は２つ １つはMovieオブジェクトで Top Shelf Sectioned Itemを返します もう１つはMoviesResponseで― すべてのアイテムを Sectioned Contentにバンドルできます タイトルをFeatured Movies としたものとアイテムのリストです

アイテムクラスが寂しいので プロパティを追加しましょう まず画像から

我々のAPIでは1xと2xの screenScaleを指定できます さらにimageShapeをhdtvに設定し― Sectioned Top Shelfを 16:9のタイルにするためです

次にユーザアクションに手を入れます Top Shelfのアイテムを 操作するとどうなるか？ displayActionは― Top Shelfでフォーカスされた アイテムを選ぶとどうなるか？ playActionはSiri Remoteで 再生ボタンを押すとどうなるかです これらはURLハンドラから アプリケーションに送られます なるべく早くこのcontentに 直接届けることが重要です

以上です　では実行してみましょう

すばらしい Top Shelfに機能拡張があれば こんな風に表示されるでしょう フォーカスされた時― 各アイテムのタイトルが 下部に表示されます しかしTop Shelfで新しい 没入型のブラウズ体験がしたいでしょう Xcodeに戻り 必要な変更を加えましょう

まずmakeTopShelfItemに― TVTopShelfCarouselItemを返すよう 変更します

コンパイラが imageShapeの無効を教えてくれます このラインを削除しましょう そしてCarousel contentに プロパティを２つ追加するだけです

まずコンテキストタイトル セクションヘッダはユーザが 何を見ているか表示します そしてpreviewVideoURL 画像から離れると再生される動画です

最後にmakeTopShelfContentに Carouselアイテムに適合した― TVTopShelfCarouselContentを返すよう 変更します

ここではactionスタイルにします

では見てみましょう

いいですね　すばらしい 静止画像の小さな枠から― フルスクリーンの動画再生に 切り替わりました 上にスワイプするとUIが消えて― Top Shelfのアイテム間を スワイプで移動できます メニューを押すと 元のグリッド表示に戻ります

最後にもう１つ変更しましょう Top Shelf APIで提供される 豊富なメタデータを活用したいでしょう アイテムクラスに プロパティを追加します

あらすじやジャンル メディアオプションなどの欄です アイテムの詳細を示すことができます 最後にcontentオブジェクトを detailsスタイルのCrouselに変えて

もう１度 見ましょう

少しクラスを変え プロパティを加えただけで― Sectioned Contentから 没入型のブラウズ体験に変わりました スワイプしてフルスクリーンになっても すぐにメタデータは表示されません 一度に過度の情報を出して ユーザを驚かせたくありません 必要に応じてタップするか リモコンをクリックすれば出てきます 先ほど書いた情報が載っています

これでTop Shelfを アプリケーションに導入できます ありがとう　フェリペ (拍手)

以上のようにApple TVの Top Shelfで― 簡単で最高のブラウズ体験を 提供できます CarouselではTop Shelfの 静止コンテンツが― ワクワクする ブラウズ体験へと変わりました またAPIの機能拡張で これらがより簡単になりました tvOS 13のTop Shelfで 皆さんが何をするか楽しみです 次はデイルが― コンテンツファーストのデザインを Appに取り入れる方法をお話します デイル (拍手) ありがとう　ケイレブ

私はデイル tvOSチームのエンジニアです まずはユーザプロファイルを活用した コンテンツの見せ方についてお話します

tvOS 13では TVにコントロールセンターを置きます よく使うアクションに すばやくアクセスできます スリープ 検索 再生中などです さらに 上部でユーザの切り替えもできます コンテキストを失うことなく パーソナライズされたコンテンツや おすすめを切り替えることができます 皆さんのAppでも マルチユーザを活用できるよう― この機能性をデベロッパに開放します それでは例をお見せしましょう

テレビを見ようとして こんな画面に出くわしませんか？ これを過去のものにしたいと思います パーソナライズされたおすすめを 提供できても― こんな画面ではコンテンツファーストの 体験ではありません tvOS 13ではApple TVがすでにあなたを 認識しているため余計にイラ立ちます なぜまた聞くのか？ その解決策を紹介します tvOS 13では 新しいAPIとTVサービスがあります TVUserManagerが― プロファイルベースのAppと マルチユーザを統合します 何をするか？ TV上の 現在のユーザのIDを提供し― IDが変われば知らせます これはコントロールセンターにおいて 重要です Appがフォアグラウンドにある時も 起きるからです またシステムUIを 提供することによって― ユーザIDとAppのプロファイル間で マッピング可能にします

TVUserManagerで この統合のために何をすべきか？ 最も大事なのは― ユーザIDと プロファイルをマッピングすることです 基本はユーザデフォルトに保管し― ユーザIDを プロファイルにマッピングします 複数のユーザIDを １つのプロファイルにマッピングしても 問題ありません TVではマルチユーザ Appでは共有プロファイルなどの形です ユーザIDはすべての デベロッパチームに固有なので― 複数のAppや機能拡張があるなら 同じプリファレンスを使えます 現在のユーザIDの変更も 把握しましょう 後ほどベストプラクティスを紹介します

またシステムUIを示すメソッドを 呼ぶのはあなたのAppの役目です Appごとに違うので例を見ましょう Appを立ち上げるとプロファイル ピッカーが起動するとします プロファイルピッカーを起動する前に Appに現在のユーザIDに関連付いた プロファイルがあるか確認します もしあれば ユーザに最高の体験を提供できます TVをそのまま見れます 質問や選択画面も必要ありません 適切なコンテンツに ただちに誘導できます

プロファイルがなければ プロファイルピッカーを起動します ユーザが選択時に― 正しいプロファイルかどうか この画面で確認することができます このUIでユーザに― 選択されたプロファイルと IDを関連付けたいか聞きます 承認すれば 次から聞かれることはありません 次の起動時は 最高のエクスペリエンスになります この画面を出すには― shouldStorePreferenceForCurrentUser を使います

プリファレンス･パネルで 後から変更可能にもできます presentProfilePreferencePanelで 表示できます そのUIがこちらです この画面で IDと プロファイルのマッピングを提供すると 変更が返ってきます このUIと承認画面で― ユーザ名とIDを提供すれば UI内のリアルユーザ名が分かります

前述したとおりあなたのAppは ユーザIDの更新が可能なはずです currentUserIdentifierDidChange NotificationでIDの変更を把握し 新しいマッピングをuser IdentifiersForCurrentProfileで報告を

複数のユーザIDが 同じプロファイルを指すなら― 複数の値の設定をするかもしれません ユーザIDの変更時は 他に何をすればいいでしょう？ プロファイルの扱いに関して いくつかベストプラクティスがあります

プロファイルを変えたい時 前のものが活動中なら保存しましょう やっていることを 失いたくないからです そして変更の意義を示しましょう パーソナライズされたおすすめなどを 示し 変更を明確にします スムーズに移行すれば ユーザも変更が成功したと分かります

tvOSにおけるプロファイルについて おさらいです プロファイルベースのAppなら― マルチユーザを活用し よりパーソナライズできます そしてTVUserManagerで コンテンツファーストの体験にできます ムダな画面をスキップし すぐテレビを見れます

最初の起動時の話はしたので― 次に進みましょう　タブバーです

新しいTV Appの 新しいタブバーを紹介します ナビゲーションを楽にし 背後のコンテンツを輝かせます

消えずに コンテンツに合わせて垂直に動くので ヒエラルキーの強化に役立ちます tvOS 13では誰もが この新しいタブバースタイルを使えます

導入には何が必要か？ 特にありません ただ挙動の修正が必要な時もあります タブバーをコンテンツと一緒に スクロールさせたいなら― tabBarObservedScrollViewを ViewControllerに埋め込みます コンテンツの多い Collection Viewにおすすめです UICollectionViewControllerは 自動でやってくれます タブバーを上部に固定したいなら この値をnilにするだけです

どちらの場合も セーフエリアに注意しましょう ScrollViewではcontentInsetAdjustment Behaviorを自動にすれば正しく動きます レイアウトには safeAreaLayoutGuideが役立ちます

新規追加のAPI UITabBarで ブランディングを反映できます タブバーの両端に ロゴを置けるようになっています これはタブバーと一緒に動きます

UITabBarのプロパティ内で ２つの新しいビューにアクセスできます leadingAccessoryViewと trailingAccessoryViewです ボタンやフォーカス可能なアイテムは こ置くべきではないでしょう 静止コンテンツ向けだからです ブランディングのため タブバーのカスタマイズが必要なら standardAppearanceで可能です 詳しくは“Modernizing Your UI for iOS 13”をご覧ください

ではタブバーのおさらいです tvOS 13で新しくなり Appにも簡単に統合できます そしてタブバーがより柔軟に 標準コントロールを使いつつ― 自由にブランディングできます

タブバーが 最高のナビになると分かりました 次はブラウジングの話です フルスクリーンのブラウズ体験を 新しいツールを使ってビルドできます

トミーが話したように 軽くて 自然なブラウズ体験が重要です 一瞬で物語に没入し心を奪われる 今までにない体験です メニューの内外で 煩わされることなしにです 我々はテレビの巨大なスクリーンを 最大限に生かし― リビングにぴったりな体験を作りました 横にスワイプするだけです tvOS 13では新しいAPIで こうした体験をビルドできます TV UIKitのTVCollectionView FullScreenLayoutを使います

家の最も大きい画面を 生かすため― スクリーンいっぱいに広がる Collection Viewを作成可能にします デフォルトは見慣れた雰囲気ですが カスタマイズが容易です 技術や設計チーム向けに調整できます ケイレブのTop Shelfでも 同じレイアウトを使っているほどです レイアウトに合わせ 新しいセルのサブクラスを提供する― TVCollectionViewFullScreenCellです

知っておくべきビューが２つあります Masked Background Viewと Masked Content Viewです カスタムセルを作ると このビューにコンテンツが追加されます Masked Background Viewに 通常は不透明な画像 Masked Content Viewには UI要素が追加されます レイアウトは フルスクリーンを生かすために― セルとサブビューは 1920x1020の領域を占有します カスタマイズ方法の説明の前に― フェリペを呼び― フルスクリーンのブラウズ体験が いかに簡単に作れるかを見せましょう

(拍手)

これは単純な フローレイアウトのAppです テレビに最適化されていません 先ほどの話を元に Xcodeで導入を試してみましょう

フルスクリーンレイアウトを作り― それをCollection Viewで 古いレイアウトと置き換えます

レイアウトに沿うために セルも必要です 幸いもう作ったので Collection Viewで登録できます

そしてこのセルのインスタンスを indexPathで返します

ViewControllerの設定が済めば セルにコンテンツを追加可能です imageViewと titleLabelがすでにあります まずMasked Background Viewに imageViewを追加してみましょう

そしてMasked Content Viewに titleLabelを追加します 見やすいよう大きなフォントにします 設定できたので見てみましょう

よくなりましたね ブラウズの際に画像の細部まで見えます しかしリモコンをクリックしたら 全画面表示になるとよりよいでしょう View Controllerに 戻ってやってみましょう

didSelectItemAt indexPathの追加で 選択アクションが可能になります その時Mask Amountをゼロにし― アニメーションで スムーズに見せます ではもう１度 見てみましょう

クリックすると 画像がフルスクリーンになっています ただテキストを隠し忘れました 大丈夫です　すぐ修正しましょう

applyをオーバーライドすれば 変化するレイアウト属性が得られます Masked Amountがゼロの時に titleLabelがゼロのalphaにし― 不透明さを Masked Amountと同じにします

もう１度 見てみましょう

よくなりました こういう体験を テレビで構築したいのです インタラクションが簡単で コンテンツに没入しやすくなります ありがとう　フェリペ (拍手)

詳細に戻りましょう TVCollectionViewFullScreenCellの ２つのサブビュー Masked Backgroundと Masked Content View 仕組みを理解するには まず レイアウトの２つの原則の理解を マスキングと視差です まずマスキングから始めます

ビューとセルは 他方の上に重なり合って― フルスクリーンになっています Masked Background Viewがあり その上にContent Viewがあります フルスクリーンの時 セルのMask Amountはゼロです ブラウズ中は 枠がありMask Amountは１です

マスクの余白は Mask Insetプロパティで制御できます 同じ情報がContent Bleed プロパティでセルに反映されます

次は視差を説明しましょう 視差はレイヤーを異なる速度で動かし 奥行きを生むことです tvOSでは すでによく使われています どうレイアウトに使うか 説明しましょう

Parralax Factorプロパティは― Masked Background Viewが どれだけ遅く動くかを指定します

Layout AttributeとParralax Offset プロパティから同じ情報がセルの元へ これは２つのビューの中心が どれだけ離れているかを指定します 速度の違いとビューの不透明さで― 奥行きが再現されているのが分かります

これをマスクと組み合わせると ワイプのエフェクトになります

TVCollectionViewFullScreenLayoutが 手間を省きますが― いくつかのパラメータによって 好みのエフェクトが実現できるでしょう

フルスクリーンでは 多くのピクセルが動き回るので― いくつかおすすめしたい ベストプラクティスがあります

セルが中心に来るまで アニメーションや動画を避けること 複数の動画を再生すると 気が散る上にフレーム落ちしやすい

画面外のパスの数に注意すること 過度な視覚効果や アニメーションの使用を避けること アプリケーションで スクロールする時に使うようなものは ここでスワイプする時に適用できます

メモリ使用量にも注意しましょう おそらく たくさんの 大きな画像を使うでしょう ディスプレイに適したサイズにし 使わない時はメモリから外しましょう

TVMLKitデベロッパの方々も ご安心を すべてTVBrowserViewControllerから アクセスできます シェルフからフルスクリーンブラウズ への移行の簡単さを示す― サンプルAppにリンクもします

本日お話ししたのは― アプリケーションの入り口となる ホーム画面とTop Shelf ユーザの目を引き 呼び込めます 次に初起動時のエクスペリエンスです 承認画面などなしに パーソナライズされたコンテンツに― ユーザを導くための マルチユーザの統合方法です そして最後に― 新しいタブバーとレイアウトによる シンプルで楽なブラウズ体験です これらによって リビングで快適に使えるでしょう 本日紹介したツールや考え方を― 皆さんのアプリケーションで活用し 楽しいエクスペリエンスにしましょう

詳細はデベロッパWebサイトか ラボにご参加を

ありがとうございました (拍手)