キャスト アイコンをタップすると、ウェブ レシーバーとの接続、操作、接続解除を行うためのダイアログが表示されます。
キャスト アイコンのテンプレートをダウンロードするには、キャスト アイコンをご覧ください。
キャスト アイコンは Google Cast に固有のものではなく、ウェブ レシーバーとウェブ以外のレシーバー(Bluetooth ヘッドセットなど)の両方を表すことができます。ウェブ レシーバーは常にキャスト ダイアログに表示され、別のダイアログ、メニュー、コントロールの下に表示されないようにする必要があります。
ユーザーにキャストを紹介する
キャスト アイコンの導入により、センダーアプリがキャストをサポートするようになったことを既存のユーザーに知らせることができます。また、Google Cast を初めて使用するユーザーにも役立ちます。
必須
A ウェブ レシーバーが初めて利用可能になったときにキャストの紹介画面を表示します。iOS のセンダーに対しては、キャスト アイコンが最初に表示されたときにキャストの紹介画面を表示します。
B キャスト アイコンを丸で囲んでキャスト アイコンをハイライト表示します)
C キャスト アイコンの仕組みを説明する(例: 「タップして動画をテレビにキャストするには」などのメッセージを表示する)
Android
キャストの概要
![キャストの概要](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/prompting1_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
iOS
キャストの概要
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/prompting1_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
Chrome
キャストの概要
![キャストの概要](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/prompting1_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![ホーム画面をキャストする](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
キャスト アイコンを利用できる国
必須
A キャスト アイコンは、再生可能なコンテンツがあるすべての画面に表示され、コンテンツのブラウジングまたは再生中に一貫した位置に配置する必要があります。このアイコンは、グローバル コントロール用の Chrome のヘッダーにも表示されます。
B Chrome では、ウェブ レシーバーが使用できない場合にキャスト アイコンが表示されなくなることがあります。Android および iOS のセンダーに対して、デバイスが Wi-Fi に接続されているときは常にキャスト アイコンを表示する必要があります。これにより、ユーザーがローカル ネットワーク アクセスをオフにしてデバイスが検出されなくなった場合に適切なサポートを提供できます(詳細については、iOS の権限と検出をご覧ください)。
C モバイルアプリの場合、キャスト アイコンは右側にあります。
D Chrome では、キャスト アイコンはコンテンツ メディア コントロールの右側に表示されます(埋め込み動画など)。メディア コントロールに全画面ボタンが含まれている場合は、その左側にキャスト アイコンを配置します。
注
Google Cast はマルチタスク モデルを採用しているため、ユーザーはキャスト中に送信側のアプリや他のアプリをブラウジングできます。キャスト アイコンは、再生可能なコンテンツがあるすべての画面から表示されるようにする必要があります。これにより、ユーザーはテレビで再生中のコンテンツを一時停止または停止する場所を探し回る必要がなくなります。
Android
送信者の接続を解除しました
![送信者の接続を解除しました](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
iOS
送信者の接続を解除しました
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
Chrome
送信者の接続を解除しました
![送信者の接続を解除しました](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
キャスト アイコンの状態
必須
おすすめの方法
各ボタンの状態には、アプリの他の UI 要素のスタイルと一致する色を使用します。オン / 接続状態に対して異なるハイライト色(黄色など)を使用するかどうかは任意です。
注
- キャスト アイコンは Chrome、Android、iOS に表示され、キャスト デバイスが使用可能かどうかにかかわらず、Cast 拡張機能へのアクセスを提供します。
- Cast API への接続に想定よりも時間がかかる場合、「接続中(アニメーション化)」状態が表示されます(Android と Chrome SDK では、自動的にキャスト アイコンがアニメーション化されます)。接続すると、Web Receiver アプリが起動します。
- キャスト アイコンのオン / 接続状態が更新され、アイコン フレーム内で塗りつぶしを使用するようになりました。新しいキャスト アイコンとアイコン テンプレートは こちらから入手できます。
Android
送信者、キャストの接続を解除しました
![送信者、キャストの接続を解除しました](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![ホーム画面をキャストする](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
センダー、キャスト接続
![センダー、キャスト接続](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![ホーム画面をキャストする](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
センダー、キャスト接続
![センダー、キャスト接続](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=0000&hl=ja)
Web Receiver アプリを読み込んでいます
![Web Receiver アプリを読み込んでいます](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=0000&hl=ja)
センダー、キャスト接続
![センダー、キャスト接続](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=0000&hl=ja)
Web Receiver アプリが読み込まれる / アイドル状態
![Web Receiver アプリが読み込まれる / アイドル状態](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=0000&hl=ja)
iOS
送信者、キャスト不可
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
送信者、キャストの接続を解除しました
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
センダー、キャスト接続
![センダー、キャスト接続](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
センダー、キャスト接続
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=0000&hl=ja)
Web Receiver アプリを読み込んでいます
![Web Receiver アプリを読み込んでいます](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=0000&hl=ja)
センダー、キャスト接続
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=0000&hl=ja)
Web Receiver アプリが読み込まれる / アイドル状態
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=0000&hl=ja)
Chrome
送信者、キャスト不可
![送信者、キャスト不可](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=0000&hl=ja)
Chrome にはキャスト アイコンが表示され、接続状態にかかわらず Cast 拡張機能にアクセスできます。
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
送信者、キャストの接続を解除しました
![送信者、キャストの接続を解除しました](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
センダー、キャスト接続
![センダー、キャスト接続](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=0000&hl=ja)
ホーム画面をキャストする
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ja)
センダー、キャスト接続
![センダー、キャスト接続](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=0000&hl=ja)
Web Receiver アプリを読み込んでいます
![Web Receiver アプリを読み込んでいます](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=0000&hl=ja)
センダー、キャスト接続
![センダー、キャスト接続](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=0000&hl=ja)
Web Receiver アプリが読み込まれる / アイドル状態
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=0000&hl=ja)
このデザインガイドで使用されている画像は、Blender Foundation により著作権またはクリエイティブ・コモンズ ライセンスに基づいて共有されているものです。
- Elephant's Dream: (c)copyright 2006、Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: (c)copyright 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