卓越したビデオ再生体験の実現

（音楽）

こんにちは AVKitチームの Jakeです "卓越したビデオ再生体験の実現" へようこそ iOSとiPadOS 16では メディアプレーヤーを 一から作り直し 新しいルックスと感触で コンテンツへのフォーカスをキープし 幅広いAppの用途に 対応できます また新しい インタラクションモデルで さらに直感的でシームレスな 体験が実現できます きっと気にいって いただけると思います ここでは新しいシステムの メディアプレーヤーに焦点を置き 素晴らしい再生体験の デザインについて確認し macOSとiOSに投入される Visual intelligence機能 について触れ 新しい インタースティシャル体験について ご説明するとともに tvOSの新しいAPIについて お話しします そして最後に AVKitの新機能 再生速度の選択機能 のお話です tvOS 15では システムプレーヤーを新調し ルックスはもちろん 新しい機能を追加し 使いやすさを 向上させました そしてみなさんの意見に 耳を傾け iOSのシステムプレーヤーも 新調しました ネイティブのメディアプレーヤーを 一からデザインし直し tvOSのプレーヤーの ルックスなどを取り入れ タッチデバイス用に デザインし直しました クロムを一切取り除き 幅広いAppでネイティブな インターフェイスで 現代的な感覚を 取り込みました それでは変更のいくつかを 見てみましょう まず 再生コントロールを 中央に配置し 操作がより簡単になりました また スキップ間隔を 15秒から10秒に減らしたので どれだけスキップしたか 簡単に把握できます 次にタイムラインの使いやすさも 大きく向上させました 現在位置を示す スライダノブを取り除き その代わりに スライダ上のどこでも 操作できるようにしました ノブをドラッグする必要は ありません これにより行きたい箇所を 簡単に見つけられます またアスペクト比の 切り替えを 直感的なピンチによる ズームにしました 後ほどお見せします もちろん ポートレート型の コンテンツにも対応します

iPadOSではシステムと シームレスに調和し キーボードやトラックパッド マウスやゲームコントローラなど 幅広くサポートします また 数々の操作法を追加し コンテンツのナビゲートや インタラクションが 簡単かつ直感的になりました それでは見てみましょう まず アスペクト比を 新しい方法で変えられます ピンチでズームレベルを 変更できます ピンチインでセーフエリアに ビデオを表示 ピンチアウトで フル画面にズームできます 次に 最もよくある操作を 円滑にしました 再生･停止ボタンです コントロールが 表示されなくても 画面中央をタップすることで ビデオを再生･停止できます 最後に 新しいタイムラインの 移動方法を追加しました スクロールビューでお馴染みの 操作方法で 画面のどこからでも 移動できるようになりました ビデオをスクロールすると インターフェイスが消え 関連あるUIだけが残り コンテンツに 集中することができます また tvOSのプレーヤーにある 新機能を導入しました AVPlayerViewControllerは タイトルや サブタイトルや詳細情報を ネイティブな形で表示できます 既存のAVKit APIに AVMetadataItems経由で これらを提供できます それでは見てみましょう タイトル･サブタイトル･ 詳細情報はデフォルトで メタデータから引き出されます しかし AVPlayerItemの externalMetadata APIで 必要なら書き換えられます

commonIdentifierTitleで AVMetadataItemを作り playerItems. externalMetadataに足し タイトルを追加することが できます UIが混雑しないよう タイトルは簡潔にしましょう 同様にidentifier .iTunes MetadataTrackSubtitleで AVMetadataItemを作り サブタイトルを追加します サブタイトルは タイトルの上に表示され コンテンツを 簡潔に描写します

最後に詳細情報を .commonIdentifier Descriptionで追加します これによりタイトルの右側に シェブロンが表示されます タイトルを選ぶと 詳細情報パネルが表示されます 詳細情報はコンテンツに関する 情報を手短に説明します どこでもタップすれば パネルが消えます

まとめますと 新しく円滑化された インタラクションモデルや 数々の改善及び 新しいルックスと感触で iOSのシステムプレーヤーを 新調しました AVPlayerViewController を使うことで システムプレーヤーの フルサポートが得られます ピクチャ･イン･ピクチャや SharePlayにVisual Analysis ネイティブのCatalystや 新ハードウェアなど 様々なものをサポートします そして数行のコードで これらが可能になります それでは みなさんのAppを どうデザインするかです メディアプレーヤーを デザインし直した際 過去に作ったものと 他のOSのものから 一歩下がって いいユーザー体験とは 何かを考えました ここでみなさんと どう新しいプレーヤーを デザインし なぜこのようなデザインで 卓越したメディア体験とは 何かをシェアしたいと思います メディア体験の向上には ３つの要素があります 直感的であること 使用したことがなくても 簡単で親しみがあり 自然であるべきです App及びシステムと 一体化しているべきです そして最後に コンテンツが前面に来ること 結局 メディア体験が 目的ですから Appのデザインも それを反映すべきです さらに掘り下げてみましょう まずは 直感的な体験です たいていの場合 直感的なAppは その理由は 分かりにくいものです でも 見れば分かります それでは何がAppを そして体験を 直感的にするのでしょう？ そしてどうすれば デザインできるでしょう？ 親しみやすさから始まります 過去の経験から新しいものを 理解できることが 直感的です どう操作するか 説明が要らない 操作方法を考えなくてもいい 期待通りに動くことです

誰もがテクノロジーや実世界に面して 毎日経験を積みます これらは経験における 親しみやすさの源で ここからメディアプレーヤーの デザインが始まりました いろんなタイプの 体験がありますが ここでは２つに注目します メディアプレーヤーのデザインで 最も大切なものです プラットフォームにおける パラダイムと 実世界です これは毎日テクノロジーを 使う経験から得られます 長年のリモコンの使用から 方向のボタンで 左右移動できると わかっています 音量ボタンをタップし ミュートするのもそうです これらは親しみがあるため 直感的に感じます これらをメディア体験に 組み込めば Appが直感的に感じられ 使用が自然にさえ 感じられます 逆に 馴染みのない操作だと 混乱し 時々 苛立たしくもなります システムプレーヤーで使った このタイプの親しみやすさの 例を見てみましょう 非常にいい例が iOSのシステムプレーヤーの 現れ方と消え方のモデルです プレーヤーは画面下から 登場するため 下に押せばプレーヤーが 隠せるヒントになります タッチデバイスで このモデルがよく使われます 例えばミュージックの 再生中のUIは 下部のミニバーから現れ 下にスワイプすれば 戻すことができます しかし時として テクノロジーの理解からではなく 毎日の生活から 体験を導く場合もあります

これらは 実世界からの体験です 何百万年に及ぶ進化を経て 自然のプロセスへの直感的理解が 発達しました これらを利用することで 親しみがあり直感的な体験を Appに組み込めます いい例がiOSのプレーヤーの 新しいスクロールです ミニカーを押すように スワイプに推進力があり タイムラインが ゆっくりと止まるまで 動き続けます この推進力は 実世界の動く物体と 共通点を生み出すのです これにより インタラクション上の 深さを発見できます ミニカーのように 強く押したり 何度も押したりすると ビデオが速く進みます そして押さえると止まります 自然だからこそ 自然に感じるのです そして素晴らしいのは システムプレーヤーを使えば Appを直感的にできることです システムプレーヤーの 直感的かつ自然な すべてのインタラクションや tvOSやiOSや macOSにおいて 誰もが理解できる デザインパラダイムはすべて 数行のコードで 実現できます

直感的なデザインは 良いメディア体験の一要素です しかし 人々が期待する 機能などがないと Appがコンテンツへの関心を 遠ざけてしまいます そこで 良いメディア体験の ２つ目の要素 緊密な一体化です 体験が一体化されると すべての機能や 特徴とデバイスが 期待通りに動作するのです 大切なのは 期待通りに 動作するということです 人々はデバイスを 使用する上で プラットフォームの特徴に 依存します 例えばコントロールセンターを 引き出し 「再生中」にコンテンツが 挿入されたり テレビ番組を観てる時に 通知に答えた時 ピクチャ･イン･ピクチャで ビデオの再生が続いたり このような システムの一体化を Appに取り組むのが体験を シームレスにする鍵です ネイティブAppのように 感じさせるためのツールを 私たちが提供します CoreSpotlightの インテグレーションで コンテンツを 検索可能にしたり Now Playing infoで Media UIに現れたり MediaRemote commandsで キーボードや テレビのリモコンに 反応したり みなさんのメディアを TV Appに直接取り込み より多くの人にコンテンツを お届けできます さらにそれらに加え 人々が愛する機能を 提供することも大切です AirPlayやSharePlay ピクチャ･イン･ピクチャのように 人々が期待する機能を 提供することで Appの体験が向上します 人々は多くのデバイスや インプット方法で みなさんのAppを 使用するでしょう これらのサポートを 提供することは すべての人に向けた体験を 提供するのに重要なことです 特にtvOSでは あらゆるリモコンに 対応することが 誰もがAppを使用できる 重要な鍵になります これがtvOSでシステム メディアプレーヤーを勧める理由です どのリモコンやキーボード トラックパッドやゲームコントローラー ヘッドフォンでも滑らかな 体験ができるべきです さらにAppのUI要素が 画面のセーフエリア内なら ディスプレイの角丸コーナーや ノッチに対応できます これらの機能や ハードウェア構成を サポートすることは 非常に大変です しかし AVPlayerViewControllerで 数行のコードだけで ユーザーに素晴らしい メディア体験を提供できます

そしてそれらが最終的に 最も重要な デザイン要素につながります コンテンツが 前面に来ることです これがデザインの 主なゴールで メディア体験の要素を 決定的にするものです Appが直感的で 人々が期待する すべての機能が うまく作動すれば 焦点はコンテンツに向き それ以外は背後に 消え去ります

コンテンツの デザインにおいて 注意すべきことが いくつかあります インターフェイスと システムの両方に 正しいメタデータを 提供すること これはメディアに コンテキストを与え コントロールセンターと ロック画面で 素晴らしい体験を提供します タイトルやサブタイトル 詳細情報やサムネイル シーズン･エピソード情報 ライブ配信の 開始･終了日などです 常にオリジナルの アスペクト比を維持します これにより画面上 正しい位置に ビデオを配置できます レターボックスを使用すると こうなったり こうなります 最新のメディア標準を サポートしましょう 例えばHDRや Dolby Atmosです そして最後に 音声と サブタイトルトラックで 多くの言語を サポートすれば より多くの人々のアクセスが 可能になります

今のお話で 最も重要なことは コンテンツに焦点を 当てることです AVPlayerViewControllerで システムメディアプレーヤーを使い そのゴールを 達成しやすくしました では 新しい機能について お話しします まず Visual intelligenceです この例ではビデオ内に コードが表示されています 長押しでコードを選択し プレイグラウンドに直接 コピペし試すことができます macOSでも使用できます コード上にカーソルを置くと Ｉビームになり テキストを選択できます カーソルでハイライトするか CMD+Aで すべてを選択します この機能の 新しいAPIをご紹介します iOS AVPlayerViewController とmacOS AVPlayerViewで allowsVideoFrameAnalysisで この機能をトグルできます 新しいSDKにリンクすると 利用できます allowsVideoFrameAnalysisを Trueに設定し メディアが一時停止されると AVKitがビデオフレームの 分析を一定時間後開始します パフォーマンス上の理由から スクロール中は 分析を行いません FairPlayで保護された コンテンツもそうです 一般的に たいていの場合 この機能が望まれるでしょう しかし場合によっては みなさんのApp内での Visual Analysisを 無効にする必要が ある時もあります 例えば多くのビデオを 同時に観るような パフォーマンス重視の Appの場合や スプラッシュスクリーン のような インタラクションのない ビデオがそうです Visual intelligence機能に 関しての詳細は VisionKitに関する以下の ビデオをご参照ください 次にインタースティシャルの 改善についてです これまでインタースティシャルが サポートされたのはtvOSの AVPlayerViewController だけでした 素晴らしいことにiOSでも サポートされます ストリームであれ ローカルであれ インタースティシャルは AVPlayerInterstitialEvents を通しタイムラインに記されます タイムラインがマーカーに来ると インタースティシャルが再生されます すでにHLS playlistで 定義されていれば 自動的に作動し 実装は不要です そうでないか 特別な挙動が必要な場合 新しいAPIを導入しました AVInterstitialTimeRangeが tvOSからiOSに加わります 同じくtvOSから加わる AVPlayerItemプロパティの interstitialTimeRangesに 自動的に挿入されます HLSストリームの場合 AVInterstitialTimeRangeは それぞれのインタースティシャルと 統合されます AVFoundation APIを通し ローカルで作る場合 AVInterstitialTimeRangeが AVPlayerInterstitialEvent ごとに統合されます しかしtvOSと違い interstitialTimeRangesは 読み出しのみです インタースティシャルは HLSストリームか AVPlayerInterstitialEvents で定義が必要です translatesPlayerInterstitialEvents をYesにして tvOS Appからサポートを 移動させるのと同じです またデリゲートメソッドが ２つ tvOSから加わります インタースティシャルの 始まりと終わりを 知るのに使われます これらのAPIで iOSのプリロール広告に スキップボタンを 加えてみます まずAVPlayerInterstitial EventControllerを 作成します 次にInterstitial event を作り 制限を定義します インタースティシャル内の シーキングを避け インタースティシャル以降への スキップを防ぎます event controllerに Interstitialを足します willPresentInterstitial delegate callbackを実行し 一定時間後ad skipボタンを 表示します ボタンを押せばインタースティシャル がキャンセルされます 簡単でしょう ad skipボタンのように AVPlayerViewControllerに カスタムUI要素を足す時 必ずcontentOverlayViewの Subviewsとして 追加してください HLS playlistsへの インタースティシャルの 統合の仕方についてや AVFoundation interstitials APIの使い方については 以下のビデオを ご参照ください では全プラットフォームに 今年 追加した機能 再生速度コントロールの ネイティブサポートです AVPlayerViewと AVPlayerViewControllerの 両方で新しいAPIを使い 再生速度を表示します

macOSとiOS そしてtvOSで使用できます それでは見てみましょう tvOSではtransport barに 新しいコントロールがあります これを選ぶと 再生可能なスピードが 表示されます iOSではtransport control overflow menuに現れます macOSでもoverflow menuに コントロールが現れます iOS macOS tvOS SDKで つながるAppすべては 他の変更を要することなく 自動的にこの機能が 追加されます しかし場合によっては スピードリストの変更や プログラムでスピードを選択 または無効にする必要があり AVPlayerViewと AVPlayerViewControllerに 新しいAPIを追加しました それらを見てみましょう

まずAVKitに AVPlaybackSpeedを追加 AVPlaybackSpeedsは 再生UIに ３つのプロパティの 選択オプションを追加します rate valueは 初期化時に定義され 選択されたスピードに Playerを設定 localized nameは accessibility systemでの スピードを示します 例えば2.5の速度は 「速度２倍半」の localizedNameと localizedNumericNameを 使います rate propertyから 統合されたvalueで 再生速度メニューに 表示されるstringです Appがカスタムメニューを 要するなら このstringを使って 速度を表示します

最後にAVPlaybackSpeedは システムのデフォルトの速度を定義 可能ならこれを 使用してください AVPlaybackSpeedを AVPlayerViewと AVPlayerViewControllerの 新しいAPIと使用できます speed propertyは再生速度の リストを定義 デフォルトとして AVPlaybackSpeed systemDefaultSpeedsリストに 定義されます 空のリストにすると メニューが隠されます selectedSpeedは 現在の速度を戻します selectSpeed関数は 現在の速度の プログラムによる選択を 可能にします この関数は プレーヤーUI外での選択にのみ 使用するべきです 暗黙的に選ばれたスピードを 無効にしてはなりません では例を見てみましょう AVPlayerViewControllerを 作成しています デフォルトは system provided listです 新しいスピードを足すには AVPlaybackSpeedを作り AVPlayerViewControllerの リストに追加します また空のリストで メニューを無効にできます 簡単でしょう しかし再生はいつでも AVPlayer playで行います setRate:1.0で 再生を開始しません 1.0ではないかも しれないからです それではまとめです 新しいiOSのシステムプレーヤーを ご覧いただきました ユニークな再生体験を デザインできます Visual Intelligenceを ご紹介しました 新しいインタースティシャルと APIもご紹介しました お楽しみいただけましたか？ これらをぜひAppに ご利用ください ありがとうございました