tvOSにおける優れた再生体験の提供

デザインが一新されたApple TVの再生インターフェイスを使用して、Appで優れたメディア体験を提供する方法を紹介します。最新のインターフェイスによって、ユーザがコンテンツに集中しながら関連するコントロールや情報にアクセスできるようにする方法について確認します。AVPlayerViewControllerやその他のAPIをtvOS Appに採用することで、コンテンツを見つけ、再生し、楽しむことができる方法を紹介します。このセッションを最大限に活かしていただくために、AVKitについて基本的な理解を得ておくことをお勧めします。

リソース

関連ビデオ

WWDC21

WWDC20

WWDC19

ダウンロード

♪ (tvOSにおける優れた再生体験の提供) こんにちは!tvOSチームのソフトウェアエンジニアの Maxと申します本日は Apple TVのメディア再生UIのまったく新しい素晴らしい外観をご紹介します開発者がこの新機能を最大限に活用するためにできることを説明しますこのセッションでは tvOS 15の標準再生UIの拡張機能の概要を説明します新しいAPIについて紹介し最後にアプリケーションでの優れた再生エクスペリエンスの構築に役立つベストプラクティスについて説明します始めましょう AVPlayerViewControllerは Apple TVのユーザーに標準のメディア再生機能を提供します新しいクリックホイールリモコンをはじめスキップスキャンスクラブ機能 Siriコマンドインタースティシャルのサポート等様々なリモートコントロールに対応していますアプリケーションで AVPlayerViewController を使用してユーザーがApple TVのファーストパーティアプリケーションと同様の操作を行えるようにする事をお勧めします AVPlayerViewController をまだ使用していない場合または再確認することでメリットが得られる場合は WWDC 2019の「AVKitで直感的なメディア再生機能を提供する」ををご覧になることをお勧めしますこのセッションでは AVPlayerViewController をアプリケーションに組み込む方法について詳しく説明していますでは今年導入する機能強化の概要を説明します tvOS 15では標準的な再生UIを全面的に再設計しより一貫性のあるインタラクティブな体験を通して視聴者がその場にとどまることができるようにしましたトランスポートバーに関連するコントロールとオプションを追加することで字幕をオンにしたりオーディオ言語を変更したりするなど一般的な再生タスクの発見性が向上しましたトランスポートバーコントロールは一般的なものであると同時にアプリケーション固有のものでもありますまた新しいコンテンツタブによりサポート情報に容易にアクセスできるようになりました情報やチャプタなどインラインナビゲーションによるアクセスと発見を可能にしますコンテンツタブを使用して関連するコンテンツを表示できますこの例では昨年のWWDCのセッションを見ていますがプレイヤーを離れることなくセッションのおすすめコンテンツを閲覧できます最後に再生中にユーザーが使用できるコンテキストアクションを追加しましたこれらのアクションはイントロのスキップやリキャップのような完璧な機能を持っています Apple TVで新しい再生UIを利用するにはアプリケーションを tvOS 15 SDKにリンクする必要がありますこのアプローチは App Storeのユーザーが利用できる既存のAppとの互換性を維持するために採用されましたこれらのアプリケーションはデフォルトのtvOS 14の再生UIと機能も利用できますここまででメディアAppにこの新しい機能を導入する方法を学ぶことに興奮しているかもしれません tvOS 15の新しい APIを見てみましょうタイトルビューから開始しますトランスポートバーのすぐ上に表示される新しいタイトルビューはユーザーが見ているものを即座に知るのに役立ちますタイトルビューを表示するには現在のAVPlayerItem のメタデータから commonIdentifierTitle と iTunesMetadataTrackSubtitle の値を使用しますメディアアセットに埋め込みメタデータが含まれていない場合またはメディアアセットを拡張する必要がある場合はAVPlayerItemの externalMetadata プロパティを使用しますライブストリーミングコンテンツを再生するとタイトルビューにコンテンツの状態を示すバッジが表示されます最後にタイトルビューを表示しない場合は新しいプロパティ transportBarIncludesTitleView の値をfalseに設定してタイトルビューを非表示にします次にトランスポートバーのコントロールを見てみましょうトランスポートバーコントロールはトランスポートバーのスクラバのすぐ上にあるUI要素の集まりですこれらのコントロールはメディアアプリケーションが提供するすべての再生オプションをユーザがすばやく直感的に見つけるのに役立ちます字幕音声言語ピクチャインピクチャなどの一部の標準コントロールはシステムによって提供されます開発者は AVPlayerViewControllerの新しいプロパティ transportBarCustomMenuItems を使用してトランスポートバーコントロールのリストを拡張できますこれがUIAction及びUIMenu クラスのインスタンスをサポートしますトランスポートバーコントロールの使用例を見てみましょうここでは UIActionを使用してユーザーが現在のメディア項目をお気に入りに追加できるようにする UIMenuクラスを使用して高度なアクションの配置を作成しそれらをメニューに表示することもできます AVPlayerViewController によって提供されるUIMenusでは 1レベルまでのネストをサポートします UIMenuクラスと UIActionクラスの使い方の詳細については WWDC 2019の「iOS 13向けにUIをモダナイズする」をご覧になることをお勧めしますではコンテンツタブについて説明しますコンテンツタブを使用するとアプリケーションで補足情報やより多くのコンテンツのおすすめを表示できます AVPlayerViewControllerはメディアアセットに埋め込みメタデータが含まれている場合又は AVPlayerItemで外部メタデータを補完する場合にInfoタブを表示しますまたnavigationMarkerGroupsに AVPlayerItemを指定すると AVPlayerViewController はChapters タブを表示しますアプリケーションは新しいプロパティを使用して追加のコンテンツタブを表示できます AVPlayerViewControllerの customInfoViewControllersです tvOS 15では customInfoViewController プロパティは非推奨となり複数のビューコントローラを使用できる新しいプロパティになりましたコンテンツタブのサイズを適切に設定するには preferredContentSize プロパティを使用して高さを指定するか適切なオートレイアウト制約を定義してくださいコンテンツタブを表示するために必要な高さを計算するとすべてのビューコントローラのサイズが最も高いコンテンツタブの高さに設定されます複数のコンテンツタブを使用する場合はカスタムビューコントローラのサイズを一貫して設定するか実行時にレイアウトが予期されることを確認します又カスタムビューコントローラでタイトルプロパティを設定することも忘れないでくださいコンテンツタブのタイトルに使用します見栄えのよいコンテンツタブの作成を支援するために今年はTVUIKit フレームワークの新しいコンテンツ設定を導入します TVMediaItemContent の設定と TVMonogramContent の設定これらの構成をコードで使用する例をいくつか見てみましょうたとえば 16:9のアスペクト比でメディア項目のリストを表示するには、 TVMediaItem ContentConfiguration のワイドセルを使用しますイメージタイトルセカンダリテキスト等のプロパティを設定バッジと再生の進行状況を表示するように設定することもできます完了したら contentConfigurationをコレクションビューセルに割り当てこんなに簡単なんですね現在のコンテンツに関連付けられている人物または文字を表示する場合は TVMonogramContentConfiguration を使用しますコンテンツ設定の使用方法の詳細については WWDC 2020の「モダンなセルの構成」をご覧になることをお勧めします最後にコンテキストアクションですコンテキストアクションを使用すると再生中にアプリケーションに関連するコントロールを表示できますコンテキストアクションを表示するには AVPlayerViewController の新しい contextualActions プロパティを使用し 1つ又は複数のUIActions を指定します通常アプリケーションはコンテンツの関連セクションでコンテキストアクションを提示しますこれを実現するには周期的または境界時間オブザーバを追加して AVPlayerのタイミングを観察しますコンテキストアクションを非表示にするにはプロパティを空の配列にリセットします一部のユーザーは App内のスキップ機能のソリューションをすでに実装している場合がありますこの新しいAPIを使用するとコンテキストコントロールでのユーザーの操作とフォーカスの動作が一致し使用時にアプリケーションの再生中ステートも維持されますでは tvOS上の AVPlayerViewControllerのベストプラクティスについて説明しましょうまずそして最も重要なことだがプレーヤーに余分なジェスチャーを加えないことですこれは標準の再生UIに干渉し将来は動作しなくなる可能性があります次に不足しているメタデータを補完します一部のメディアではアセットにすべてのメタデータが組み込まれていない場合がありますそのような場合は全ての必須メタデータを提供しますタイトルやアートワーク説明など AVPlayerItemのexternalMetadata プロパティを使用しますそうすることで残りの操作をシステムが行い Title Viewーと Infoタブにすべての関連情報を表示します最後にtvOSアプリケーションでピクチャインピクチャを有効にすることを検討してくださいユーザーにマルチタスクの柔軟性を提供し同時にビデオの再生　全画面コンテンツとピクチャインピクチャの切り替え機能ピクチャインピクチャを始めるには WWDC 2020の「tvOSにおけるピクチャインピクチャをマスターする」を見ることをお勧めします tvOS 15では標準の再生UIを使用して優れたメディア体験をこれまで以上に簡単に構築できます強力な新しいAPIにより AVPlayerViewController の設定とカスタマイズがこれまで以上に容易になりましたアプリケーションに採用するには今が最高のタイミングですそして始めるのは簡単です詳細については Developer Appのこのセッションに関するその他のリソースを参照してくださいカンファレンスをご覧い頂きありがとうございます ♪

4:42 - Transport Bar Controls Example

let favoriteAction = UIAction(title: "Favorites", image: UIImage(systemName: "heart")) {
    // Add to favorites
}

let submenu = UIMenu(title: "Speed", options: [.displayInline, .singleSelection],
                     children: [ UIAction(…) ])

let menu = UIMenu(image: UIImage(systemName: "gearshape"), children: [submenu, UIAction(…)])
playerViewController.transportBarCustomMenuItems = [favoriteAction, menu]

6:11 - Content Tabs Example

// Initialize content tab view controller

customViewController.preferredContentSize = CGSize(width: 0, height: 140)
customViewController.title = "Recommended"

7:08 - TVMediaItemContentConfiguration Example

// Configure 16:9 UICollectionView cell
import TVUIKit

var contentConfiguration = TVMediaItemContentConfiguration.wideCell()
contentConfiguration.image = UIImage(imageLiteralResourceName: "tanu")
contentConfiguration.text = "Title"
contentConfiguration.secondaryText = "Secondary text"
contentConfiguration.badgeText = "NEW"
contentConfiguration.badgeProperties.backgroundColor = .systemRed
contentConfiguration.playbackProgress = 0.75

cell.contentConfiguration = contentConfiguration

7:36 - TVMonogramContentConfiguration Example

// Configure monogram UICollectionView cell
import TVUIKit

var contentConfiguration = TVMonogramContentConfiguration.cell()
contentConfiguration.image = UIImage(imageLiteralResourceName: "jad")
contentConfiguration.text = "Jad"

cell.contentConfiguration = contentConfiguration

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。