タッチ対応レシーバー アプリ
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
レシーバは、タッチ操作機能がある場合とない場合があるデバイスでコンテンツを再生します。レシーバーは、センダーアプリでの操作とタッチ コントロールによる操作に直ちに応答する必要があります。
レシーバー UI のフィードバックの例:
- 再生中
- 一時停止
- 再生位置 / シーク
- バッファリング
必須
A 動画と音声のレシーバの場合、レシーバアプリをアダプティブにビルドして、あらゆる画面解像度とアスペクト比に対応できるようにします。
動画
Video Receiver UI
音声
オーディオ レシーバー UI
B 動画および音声レシーバーでは、タッチ操作を示唆する要素を表示しないでください。たとえば、スワイプ ジェスチャーを示すために、ピーキング要素を表示しないでください。
C 動画と音声の受信機では、タッチ操作を連想させる要素を表示しないでください。
D オーディオ レシーバーの場合、進行状況バーなどのコントロール タイプの要素を表示しないでください。
禁止事項: 覗き見要素、ボタンのように見えるアイコン、コントロール タイプの要素を表示しないでください。
E 動画レシーバでは、再生中（一時停止中を含む）にレシーバにメタデータやコントロール要素を表示しないようにして、システムによって表示されるコントロールと競合しないようにします。
禁止: メタデータとコントロールを表示する
F オーディオ レシーバーの場合、すべてのメタデータ要素を保護領域の上に配置し、システムによって表示されるコントロールと重ならないようにします。
おすすめの方法
- すべてのテキストは、ディスプレイ ユニットから 1.5 ～ 3 メートルの距離で読めるようにする必要があります。
レシーバーがフォアグラウンドにあり、コンテンツが再生されていない場合、レシーバーにアイドル画面が表示されます。
必須
アプリのロゴを使用して、どのレシーバー アプリが読み込まれているかを特定します。
B アプリのロゴを含むすべての要素を保護領域の上に配置し、システムによって表示されるコントロールと重ならないようにします。
おすすめの方法
- 「キャストの準備ができました」というテキストを表示して、アプリが読み込まれたことを確認します。
- 5 分間アイドル状態の場合、レシーバの実行を停止し、接続されている送信側アプリを切断します。停止すると、デバイスのホーム画面が表示され、画面の焼き付きを防ぐことができます。
ユーザーがレシーバに接続すると、レシーバアプリは、アプリのアイドル状態を表示したり、コンテンツの再生を開始したりする前に、まず読み込まれる必要があります。
必須
アプリのロゴを表示して、どのレシーバー アプリが読み込まれているかを特定します。
B アニメーションの読み込みスピナーを表示して、レシーバ アプリが読み込まれていることを示します。
コンテンツの読み込み中、再生が開始される前に、レシーバーはコンテンツの読み込み中であることを示す情報を表示する必要があります。
必須
A コンテンツのタイトルやアートワークを表示して、読み込まれているコンテンツを特定します。
B アニメーションによる読み込み中のスピナーを表示して、コンテンツが読み込み中であることを示します。
ベスト プラクティス
コンテンツの再開時に、送信側から受信側への移行中に視聴者が何かを見逃すことがないよう、再生を 5 ～ 10 秒巻き戻します。
必須
A 動画レシーバーの場合、再生中に要素を表示しないでください。画面をタップすると、プレーヤー コントロールが表示されます。
B 音声レシーバーの場合、すべてのメタデータ要素を保護領域の上に配置し、コントロール要素は表示しません。画面をタップすると、プレーヤー コントロールが表示されます。
動画
画面をタップしてプレーヤー コントロールを表示します。
音声
画面をタップしてプレーヤー コントロールを表示します。
必須
A 動画レシーバの場合、一時停止中は要素を表示しないでください。システムは、再生が一時停止していることを示す再生ボタンとともにプレーヤー コントロールを表示します。
B 音声レシーバーの場合、一時停止状態では制御要素を表示しません。システムは、再生が一時停止していることを示す再生ボタン付きのプレーヤー コントロールを表示します。
おすすめの方法
- レシーバー アプリは、ユーザーから再生開始の明示的なリクエスト（再生の再開、キュー内のアイテムのスキップなど）がない限り、コンテンツの再生を継続すべきではありません。
- 20 分間アイドル状態の場合、レシーバの実行を停止し、接続されている送信側アプリをすべて切断します。停止すると、デバイスのホーム画面が表示され、画面の焼き付きを防ぐことができます。
- バックグラウンド セッションの今後の実装との整合性を確保します。
- 該当する場合、アイドル時間のためにレシーバが停止したときに、一時停止した場所を保存して、ユーザーが後でその場所から再生を再開できるようにします。
動画
動画が一時停止しました
音声
音声を一時停止しました
ネットワーク レイテンシなどの要因によって再生が遅延すると、受信側でバッファリングが発生します。
必須
A バッファリングが数秒間続いても、要素を表示しません。画面をタップしてプレーヤーのコントロールを表示したり、スワイプして戻ったりできます。
動画
受信側のバッファリング
音声
受信側のバッファリング
再生が停止またはタイムアウトすると、レシーバーはレシーバーのアイドル状態の UI を表示します。
必須
アプリのロゴを表示して、どのレシーバー アプリが読み込まれているか、またはアイドル状態であるかを特定します。
B アプリのロゴを含むすべての要素を保護領域の上に配置し、システムによって表示されるコントロールと重ならないようにします。
おすすめの方法
- 5 分間アイドル状態の場合、レシーバー アプリから切断し、実行を停止します。停止すると、レシーバーのホーム画面が表示され、画面の焼き付きを防ぐことができます。
このデザイン ガイドで使用されている画像は、Blender Foundation の提供によるもので、著作権またはクリエイティブ・コモンズ ライセンスに基づいて共有されています。
- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute /
www.elephantsdream.org
- Sintel: (c) コピーライト: Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-07-26 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-26 UTC。"],[[["\u003cp\u003eReceiver apps should be adaptive and avoid touch-suggestive elements to ensure compatibility across devices.\u003c/p\u003e\n"],["\u003cp\u003eDuring playback, minimize receiver UI elements to avoid conflicts with system controls, relying on system-provided controls triggered by user interaction.\u003c/p\u003e\n"],["\u003cp\u003eDisplay clear loading indicators and app identification during loading and idle states, placing elements above the protected area.\u003c/p\u003e\n"],["\u003cp\u003eManage idle states effectively to prevent screen burn and enhance user experience by disconnecting and stopping the receiver app after a period of inactivity.\u003c/p\u003e\n"],["\u003cp\u003eWhen buffering or paused, avoid displaying custom elements and leverage system controls for a consistent user experience.\u003c/p\u003e\n"]]],[],null,["# Touch-enabled Receiver App\n\nThe receiver plays content on devices that may or may not have touch control\ncapabilities. The receiver must respond immediately to actions in the sender app as well as\nthrough touch controls.\n\nExamples of receiver UI feedback:\n\n- Playing\n- Paused\n- Playback position / seeking\n- Buffering\n\n### [Receiver UI](#receiver-ui-elements)\n\n\n**Required**\n\n\nA For video and audio receivers, build the receiver app to\nbe adaptive so that it can adapt to any screen resolution and aspect ratio.\n\n\n### Video\n\nVideo Receiver UI \n\n### Audio\n\nAudio Receiver UI \n\n\nB For video and audio receivers, do not display elements\nthat suggest touch gestures. For example, do not display peeking elements to indicate swipe\ngestures. \n\nC For video and audio receivers, do not display any\nelements that would suggest touch interactions.\n\n\nD For audio receivers, do not display any control-type\nelements like progress bars.\n\n\n\u003cbr /\u003e\n\n\n**Don't:** Display peeking elements, icons which can look like\nbuttons, or control-type elements.\n\n\nE For video receivers, do not display any metadata or\ncontrol elements on the receiver during playback including while in a paused state, so that it does\nnot conflict with the controls displayed by the system.\n\n\n\u003cbr /\u003e\n\n\n**Don't:** Display metadata and controls\n\n\nF For audio receivers, place all metadata elements above\nthe protected area so that it does not overlap with the controls displayed by the system.\n\n\n**Best practices**\n\n- All text should be legible from a distance of 5 to 10 feet from the display unit.\n\n### [Receiver app idle](#receiver-ui-idle)\n\nAn idle screen is displayed on the receiver when the receiver is in the foreground but\nno content is playing.\n\n\n**Required**\n\n\nA Identify which receiver app is loaded\nby using the app logo.\n\n\nB Place all elements including any app logos above the\nprotected area so that it does not overlap with any controls displayed by the system.\n\n**Best practices**\n\n- Identify that the app is loaded by displaying \"Ready to cast\" text.\n- Stop the receiver from running if idle for 5 minutes and disconnect any connected sender apps. When stopped, the device home screen appears and will help prevent screen burn.\n\n\n### [Receiver app loading](#receiver-player-loading)\n\nWhen a user connects to a receiver, the receiver app must first load before it can\ndisplay the app idle state or begin playing content.\n\n\n**Required**\n\n\nA Identify which receiver app is loading by displaying\nthe app logo.\n\n\nB Identify that the receiver app is loading by\ndisplaying an animated loading spinner.\n\n\n### [Receiver content loading](#receiver-content-loading)\n\nWhile content is loading and before playback begins, the receiver should display info to\nindicate content is loading.\n\n\n**Required**\n\n\nA Identify what content is being loaded by displaying the\ncontent title or artwork.\n\n\nB Identify that content is loading by displaying\nan animated loading spinner.\n\n\n**Best practices**\n\n\nWhen resuming content, rewind playback 5-10 seconds so the viewer doesn't miss anything\nduring the transition from sender to receiver.\n\n\n### [Receiver playback](#receiver-ui-seek)\n\n\n**Required**\n\n\nA For video receivers, do not display any elements during\nplayback. On screen tap, the system will display the player controls.\n\n\nB For audio receivers, place all metadata elements above\nthe protected area and do not display any control elements. On screen tap, the system will display\nthe player controls. \n\n### Video\n\nUser taps screen to display player controls. \n\n### Audio\n\nUser taps screen to display player controls. \n\n### [Receiver paused](#receiver-ui-pause)\n\n\n**Required**\n\n\nA For video receivers, do not display any elements while in\na paused state. The system will display the player controls with a play button to indicate\nplayback is paused.\n\n\nB For audio receivers, do not display any control elements\nwhile in a paused state. The system will display the player controls with a play button to\nindicate playback is paused.\n\n**Best practices**\n\n- The receiver app should not continue content playback unless there is an explicit request from the user to begin playback such as resume, or skipping an item on the queue.\n- Stop receiver from running if idle for 20 minutes and disconnect any connected sender apps. When stopped, the device home screen appears and will help prevent screen burn.\n- Ensure alignment with future implementation of background sessions.\n- If applicable, when the receiver is stopped due to idle time, store the paused location so that the user can resume playback from that point at a later time.\n\n### Video\n\nVideo paused \n\n### Audio\n\nAudio paused \n\n### [Receiver buffering](#receiver-ui-buffer)\n\nBuffering on the receiver happens when network latency or other factors cause a delay in\nplayback.\n\n\n**Required**\n\n\nA Do not display any elements even if the\nbuffering continues for several seconds. Users can tap on the screen to display the player\ncontrols or swipe to go back. \n\n### Video\n\nReceiver buffering\n\n### Audio\n\nReceiver buffering \n\n### [Receiver stops cast](#receiver-ui-complete)\n\nWhen playback stops or times out, the receiver will display the receiver idle UI.\n\n\n**Required**\n\n\nA Identify which receiver app is loaded or idle by\ndisplaying an app logo.\n\n\nB Place all elements including any app logos above the\nprotected area so that it does not overlap with any controls displayed by the system.\n\n**Best practices**\n\n- Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn.\n\n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
