キャスト アイコン

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

キャスト アイコンを選択すると、ウェブ レシーバーに接続、操作、接続を解除するためのダイアログが表示されます。

キャスト アイコンのテンプレートをダウンロードするには、キャスト アイコンをご覧ください。

キャスト アイコンは Google Cast に固有のものではないことに注意してください。ウェブ レシーバーとウェブ以外のレシーバー(Bluetooth ヘッドセットなど)の両方を表すことができます。ウェブ レシーバーは常にキャスト ダイアログに表示され、別のダイアログ、メニュー、コントロールの下には表示されないようにします。

ユーザーにキャストを紹介する

キャスト アイコンを導入することで、送信側のアプリがキャストをサポートするようになったことを既存のユーザーが把握できるようになり、また Google Cast を初めて使用するユーザーにも便利です。

必須
A ウェブレシーバーが初めて利用可能なときに、キャストの紹介画面を表示します。iOS の送信者の場合は、初めてキャスト アイコンが表示されるときにキャストの紹介画面が表示されます。
B 丸いボタンをキャストアイコンで視覚的に強調する
C キャスト アイコンの仕組みを説明する(例: 「画面をテレビにキャストするにはタップしてください」などのメッセージを表示する)

Android

キャストの概要

ホーム画面をキャスト

iOS

キャストの概要

ホーム画面をキャスト

Google Chrome

キャストの概要

ホーム画面をキャスト

 

キャスト アイコンの有無

必須
A キャスト アイコンは、再生可能なコンテンツが存在するすべての画面に表示され、コンテンツの閲覧中または再生中は決まった位置に配置されている必要があります。グローバル コントロールのために、Chrome のヘッダーにも表示されます。
B iOS 以外の送信者では、ウェブレシーバーが利用できない場合、キャスト アイコンは非表示になります。iOS の送信者の場合は、デバイスが Wi-Fi につながっているときは常にキャスト アイコンが表示されるため、ユーザーがローカル ネットワークへのアクセスをオフにしていて、結果としてデバイスが検出されなくなった場合にも適切なサポートを提供できます(詳しくは、iOS の権限と検出をご覧ください)。
C モバイルアプリでは、キャスト アイコンは右側に表示されます。
D Chrome では、キャスト アイコンはコンテンツ メディア コントロールの右側に配置する必要があります(埋め込み動画など)。メディア コントロールに全画面ボタンが含まれている場合は、キャスト ボタンを左に配置します。

Google Cast はマルチタスク モデルを採用しており、ユーザーはキャスト中に送信者のアプリや他のアプリを閲覧できます。キャスト アイコンは、再生可能なコンテンツが存在するすべての画面に表示されなければならず、ユーザーはテレビで再生しているコンテンツの一時停止や停止の場所を探さなくても済みます。

Android

送信者が切断されました

ホーム画面をキャスト

iOS

送信者が切断されました

ホーム画面をキャスト

Google Chrome

送信者が切断されました

ホーム画面をキャスト

 

キャスト アイコンの状態

必須
使用不可: Android で、ウェブ レシーバーが使用できない場合、キャスト アイコンは表示されません。
B 切断済み: ウェブ レシーバーが利用可能な場合、
C 接続: ウェブ レシーバーが接続されると、キャスト ボタンがアイコンに順番に表示されます(詳細は、こちらを参照)。

おすすめの方法
各ボタンの状態は、アプリの他の UI 要素のスタイルに合わせて色を選択します。「オン」 / 「接続」状態のハイライト表示色(黄色など)の使用は任意です。

  • キャスト アイコンは Chrome と iOS に表示され、キャスト デバイスの有無にかかわらず、キャスト拡張機能にアクセスできます。
  • Cast API への接続に予想以上に時間がかかると、接続(アニメーション)状態になります(Android と Chrome SDK では、キャスト アイコンは自動的にアニメーション化されます)。接続すると、Web Receiver アプリが起動します。
  • キャスト アイコンのオン / 接続状態が更新され、アイコン フレーム内に単色塗りつぶしが使用されるようになりました。新しいキャスト アイコンとアイコン テンプレートはこちらで入手できます。

Android

送信者、キャストできません

ホーム画面をキャスト

送信者、キャストが切断されました

ホーム画面をキャスト

送信者、キャストの接続

ホーム画面をキャスト

送信者、キャストに接続済み

Web Receiver アプリの読み込み

送信者、キャストに接続済み

Web Receiver アプリの読み込み / アイドル状態

iOS

送信者、キャストできません

ホーム画面をキャスト

送信者、キャストが切断されました

ホーム画面をキャスト

送信者、キャストの接続

ホーム画面をキャスト

送信者、キャストに接続済み

Web Receiver アプリの読み込み

送信者、キャストに接続済み

Web Receiver アプリの読み込み / アイドル状態

Google Chrome

送信者、キャストできません

Chrome にはキャスト アイコンが表示され、接続状態に関係なく Cast 拡張機能にアクセスできます。

ホーム画面をキャスト

送信者、キャストが切断されました

ホーム画面をキャスト

送信者、キャストの接続

ホーム画面をキャスト

送信者、キャストに接続済み

Web Receiver アプリの読み込み

送信者、キャストに接続済み

Web Receiver アプリの読み込み / アイドル状態

 

 

このデザインガイドで使用されている画像は、著作権またはクリエイティブ・コモンズのライセンスに基づいて共有されている Blender Foundation のの画像です。

  • Elephant''s Dream: (c)copyright 2006、Blender Foundation / オランダの Media Art Institute / www.elephantsdream.org
  • Sintel: (c)copyright Blender Foundation | www.sintel.org
  • ティアーズ オブ スチール:(CC)Blender Foundation | mango.blender.org
  • Big Buck Bunny: (c)copyright 2008、Blender Foundation / www.bigbuckbunny.org