TV向けAVS表示カード

TV向けAVS表示カード

Alexaの表示カードは、音声の応答を補助し、ユーザーにAlexaとの対話に関する追加の情報を提供します。

TV向けAlexa表示カード
クリックして拡大

デバイスにAlexaを実装する場合、表示カードにすべてのコンテンツ、テンプレート、メディアの帰属情報、メディアのコントロールが表示されることが期待されます。さらに、以下を満たすことが期待されます。

  • 表示カードは、Alexaの応答またはメディアの再生が開始されるとすぐに表示され、表示カードのコンテンツがAlexaの応答やメディアと一致していること。
  • 表示カード間の移動、表示カードの表示、表示カードの消去がスムーズにできること。
  • 製品のデバイスクラスについての設計ガイドラインに従って、表示カードが画面の操作や音声の発話に応答すること。
  • Alexaのアテンション状態(「Listening」と「Thinking」)が表示カードの最前面に表示され、他のカードの後ろに隠れないこと。

上記についての詳細は、すべて以下のガイドラインに記載されています。

静的な表示カード

グローバル要素

Alexaは、特定の非メディアクエリーに応じてカードを表示します。表示カードは、現在ユーザーが視聴している画面の前面にサイドバーとして表示されます。このセクションのすべての表示カードには、以下のグローバル要素が含まれます。

TV向け表示カードグローバル要素
クリックして拡大

  1. タイトルとサブタイトル すべての表示カードにはタイトルがあります。サブタイトルのある表示カードもあります。

  2. コンテンツ領域 この領域(中央のボックス)には常にフォーカスがあり、5ウェイリモコンを使ってスクロールできます。

  3. Alexaロゴ ロゴは非対話的なブランド要素です。

  4. 表示カード 表示カードの幅は600pxで、マージンは60pxです。透過度85%の黒で、背景はぼかします。透過度85%が理想ですが、技術的な制約がある場合は不透明の黒を指定できます。

  5. Alexaスキルアイコン このアイコン(右上)は、サードパーティが提供する情報がカードに表示されているときに表示されます。サードパーティから提供されている情報がない場合、このアイコンは表示されません。

Voice Chrome

Voice Chromeは、Listening、Thinking、Respondingといった、Alexaのアテンション状態を視覚的に示すインジケーターです。デバイス上のLEDで表示することもできますが、ほとんどのTVは画面上のVoice Chromeを使用する必要があります。

画面上のVoice Chromeは、画面右下隅に円形のバッジとして表示されます。

TV向け表示カードVoice Chrome
クリックして拡大

Voice Chromeを表示する方法とタイミングについては、対話と割り込みのシナリオに関するセクションに記載されています。

Voice Chromeの色やアニメーションは、アテンションシステムのドキュメントに記載されているパターンに従ってください。

対話

Alexaとの対話時、ユーザーには以下のような画面状態が表示されます。

TV向け表示カード表示カードの対話
クリックして拡大

ステップ1: 呼び出し

ユーザーは、ウェイクワード“Alexa”か、リモコン上のボタンを使ってAlexaを起動します。これにより、Voice Chromeが起動され、AlexaがListeningであると表示されます。

ステップ2: ListeningとThinking

Voice Chromeが呼び出されると、ユーザーはAlexaを音声で操作できるようになります。発話を認識した場合、Alexaはインテントを処理してカードを表示します。認識できない場合、Voice Chromeは表示されなくなります。

ステップ3: 応答と消去

Alexaは音声で応答します。表示カードがある場合は、表示カードも表示します。Alexaが話している間、表示カードは表示され続け、完了すると自動的に消去されます。Alexaが話し終わる前にユーザーが戻るボタンを押した場合も、表示カードを消去できます。ユーザーが新しいリクエストで割り込んだ場合、Alexaの応答を停止し、表示カードの明度を落とし、Voice Chromeを表示して、新しいリクエストを聞き取ります。

その他の対話シナリオは、割り込みのシナリオに関するセクションを参照してください。

BodyTemplate1

利用用途

BodyTemplate1とBodyTemplate2は、Q&A、Wikipediaの照会やサードパーティスキルのリクエストに使用します。BodyTemplate1が呼び出されるサンプル発話には以下のようなものがあります。

  1. “5マイルは何キロ?”
  2. “パラドックスの意味は?”
  3. “アリストテレスって誰?”
  4. “海の深さは?”
TV向けAlexa表示カード: BodyTemplate1
クリックして拡大

スタイル

TV向けAlexa表示カード: BodyTemplate1のスタイル
クリックして拡大

レイアウト

TV向けAlexa表示カード: BodyTemplate1のレイアウト
クリックして拡大

メモ: テキストは、ロゴの60px上まで表示できます。超えた分のテキストは非表示になりますが、5ウェイリモコンでスクロールすることで表示できる必要があります。

データ

TV向けAlexa表示カード: BodyTemplate1のデータ
クリックして拡大

JSON


{
  "directive": {
    "header": {
      "namespace": "TemplateRuntime",
      "name": "RenderTemplate"
    },
    "payload": {
      "token": "",
      "type": "BodyTemplate1",
      "title": {
        "mainTitle": "Who is Usain Bolt?",
        "subTitle": "Wikipedia"
      },
      "skillIcon": {
        "sources": [
          {
            "url": "https://example.com/smallSkillIcon.png",
            "size": "small"
          }
        ]
      },
      "textField": "Usain St Leo Bolt, OJ, CD born 21..."
    }
  }
}

ロゴのURL

https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/avs-logo.png

BodyTemplate2

BodyTemplate1と同様、BodyTemplate2も、Q&AやWikipediaの照会、サードパーティスキルのリクエストに使用できます。BodyTemplate1と異なるのは、写真を返すことができる点です。BodyTemplate2が呼び出されるサンプル発話には以下のようなものがあります。

  1. “ウサイン・ボルトって誰?”
  2. “アラバマ物語の著者は?”
  3. “ニューメキシコってどこ?”
  4. “アンゲラ・メルケルの誕生日はいつ?”
TV向けAlexa表示カード: BodyTemplate2
クリックして拡大

スタイル

TV向けAlexa表示カード: BodyTemplate2のスタイル
クリックして拡大

レイアウト

TV向けAlexa表示カード: BodyTemplate2のレイアウト
クリックして拡大

メモ

  1. 画像の高さと幅は、最大317x477pxです。異なるアスペクト比の画像は、このサイズに収まるよう変更する必要があります。
  2. テキストは、ロゴの60px上まで表示できます。超えた分のテキストは非表示になりますが、5ウェイリモコンでスクロールすることで表示できる必要があります。

データ

TV向けAlexa表示カード: BodyTemplate2のデータ
クリックして拡大

JSON


{
  "directive": {
    "header": {
      "namespace": "TemplateRuntime",
      "name": "RenderTemplate"
    },
    "payload": {
      "token": "",
      "type": "BodyTemplate2",
      "title": {
        "mainTitle": "Who is Usain Bolt?",
        "subTitle": "Wikipedia"
      },
      "skillIcon": {
        "sources": [
          {
            "url": "https://example.com/smallSkillIcon.png",
            "size": "small"
          }
        ]
      },
      "textField": "Usain St Leo Bolt, OJ, CD Born 21 August...",
      "image": {
        "contentDescription": "Image with two sources."
          "sources": [
            {
              "url": "https://example.com/smallUsainBolt.jpg",
              "size": "small"
            },
            {
              "url": "https://example.com/largeUsainBolt.jpg",
              "size": "large",
              "widthPixels": 1200 ,
              "heightPixels": 800
            }
          ]
      }
    }
  }
}

ListTemplate1

利用用途

ListTemplate1はカレンダーや買い物リストなど、項目をリスト表示する場合に使用されます。invokeListTemplate1が呼び出されるサンプル発話には以下のようなものがあります。

  1. “ToDoリストに何がある?”
  2. “買い物リストに卵を追加して。”
  3. “次の予定は何?”
  4. “カレンダーに“ジェイラとランチ”を追加して。”
TV向けAlexa表示カード: ListTemplate1
クリックして拡大

スタイル

TV向けAlexa表示カード: ListTemplate1のスタイル
クリックして拡大

レイアウト

TV向けAlexa表示カード: ListTemplate1のレイアウト
クリックして拡大

データ

TV向けAlexa表示カード: ListTemplate1のデータ
クリックして拡大

その他の例: 買い物リスト

TV向けAlexa表示カード: ListTemplate1買い物リストのその他の例
クリックして拡大

その他の例: カレンダー

TV向けAlexa表示カード: ListTemplate1カレンダーのその他の例
クリックして拡大

WeatherTemplate

WeatherTemplateは、以下のような天気関連のすべての発話に使用されます。

  1. “天気を教えて。”
  2. “今日は雨が降る?”
  3. “[location]の天気を教えて。”
TV向けAlexa表示カード: WeatherTemplate
クリックして拡大

スタイル

TV向けAlexa表示カード: WeatherTemplateのスタイル
クリックして拡大

レイアウト

TV向けAlexa表示カード: WeatherTemplateのレイアウト
クリックして拡大

メモ: mainTitlesとsubTitlesの高さは1行分です。テキストがコンテナの幅を超える場合、超える部分のテキストは割愛されて、三点リーダーが表示されます。

データ

TV向けAlexa表示カード: WeatherTemplateのデータ
クリックして拡大

JSON


{
  "directive": {
    "header": {
      "namespace": "TemplateRuntime",
      "name": "RenderTemplate"
    },
    "payload": {
      "token": "",
      "type": "WeatherTemplate",
      "title": {
        "mainTitle": "San Francisco",
        "subTitle": "Friday, October 31"
      },
      "skillIcon": null,
      "currentWeather": "75°",
      "description": "Mostly cloudy and more humid with a couple of showers and ...",
      "currentWeatherIcon" {
        "contentDescription": "Weather image sources.",
        "sources": [
          {
            "url": "https://example.com/mediumPartlyCloudy.jpg",
            "size": "medium"
          }
        ]
      },
      "highTemperature": {
        "value": "76°",
        "arrow": {
          "contentDescription": "Up arrow sources.",
          "sources": [
            {
              "url": "https://example.com/mediumUpArrow.jpg",
              "size": "medium"
            }
          ]
        },
      },
      "lowTemperature": {
        "value": "45°",
        "arrow": {
          "contentDescription": "Down arrow sources.",
          "sources": [
            {
              "url": "https://example.com/mediumDownArrow.jpg",
              "size": "medium"
            }
          ]
        },
      },
      "weatherForecast": [
        {
          "image": {
            "contentDescription": "Partly cloudy...",
            "sources": [
              {
                "url": "https://example.com/smallChanceOfRain.jpg",
                "size": "small"
              }
            ]
          },
          "day": "Sat",
          "date": "Oct 22",
          "highTemperature": "71°",
          "lowTemperature": "55°"
        },
        {
          ...
        }
      ]
    }
  }
}

Now Playing

利用用途

NowPlayingカードは、メディアリクエストに使用されます。NowPlayingが呼び出されるサンプル発話には以下のようなものがあります。

  1. “ジャズの曲をかけて。”
  2. “Smoke & Retributionをかけて。”
  3. “iHeartRadioでヤバイ経済学をかけて。”
  4. “[third-party music provider]でカントリーの局をかけて。”
TV向けAlexa表示カード: NowPlaying
クリックして拡大

VUI再生コマンド

ユーザーは、GUIかVUIのいずれかを使って、メディアの再生を操作できます。VUI再生コマンドには、以下のようなものがあります。

  • 再生
  • 停止
  • キャンセル
  • 一時停止
  • 再開
  • 次
  • 前
  • 早戻し
  • 最初から再生
  • 音量を大きく
  • 音量を小さく
  • 音量を設定
  • ミュート
  • ミュート解除
  • シャッフル
  • もう一度再生
  • 詳細を見る
  • これは誰?

グローバル要素

TV向けAlexa表示カード: NowPlayingのグローバル要素
クリックして拡大

グローバル要素には、以下のようなものがあります。

  1. メディアのメタデータ。

  2. 再生コントロール。メディアの種類やサービスに応じて異なります。

  3. プログレスバー。ほぼすべての種類のメディアで表示されます。トラックの再生時間と進行状況を示します。非対話的な要素です。

  4. Alexaロゴ

  5. メディアのアートワーク(四角部分)。アルバムの画像、ラジオ局のロゴ、番組のロゴ、本の画像が表示されます。

  6. 音楽配信プロバイダーのロゴ。メディアを提供するサービスのロゴです。

各音楽配信サービスプロバイダーで利用可能なコントロール

Alexaは、複数の音楽配信サービスプロバイダーの楽曲を再生できます。プロバイダーによって提供されるコントロールが異なります。たとえば、ライブラジオ局には、「送る」や「戻る」のコントロールはありません。各サービスに合った正しいコントロールをPlayerInfoディレクティブで指定します。

各音楽配信サービスプロバイダーで利用可能なコントロール

プロバイダー サービス 一時停止/再生 戻る 送る
Amazon Music オンデマンド ● ● ●
Amazon Music プレイリスト ● ● ●
Amazon Music ステーション ● ● ●
TuneIn ライブラジオ ●
TuneIn 本とポッドキャスト ● ● ●
Pandora ● ●
iHeartRadio ライブラジオ ●
iHeartRadio アーティストラジオ ● ●
iHeartRadio 本とポッドキャスト ● ●

メモ: Amazon MusicとPandoraは、商用デバイスにのみ利用できます。

対話

Alexaとの対話時、ユーザーには以下のような画面状態が表示されます。

TV向けAlexa表示カード: NowPlayingの対話
クリックして拡大

ステップ1: 呼び出し

ユーザーは、ウェイクワード“Alexa”か、リモコンを使ってAlexaを起動します。これにより、Voice Chromeが起動され、AlexaがListeningであると表示されます。

ステップ2: 聞き取りとインテントの処理

Voice Chromeが呼び出されると、ユーザーはAlexaを音声で操作できるようになります。発話を認識した場合、Alexaはインテントを処理してカードを表示します。認識できない場合、Voice Chromeは表示されなくなります。

ステップ3: 応答と消去

Alexaは音声で応答し、NowPlaying表示カードを表示し、リクエストされたメディアを再生します。ユーザーは音声コマンドまたはGUIでメディアを操作できます。表示カードは、新しい楽曲が再生されるたびに更新されます。

ユーザーが以下の操作を行った場合は、次のように動作します。

  1. リモコンで複数タスクを実行した場合や“X”を選択した場合、表示カードとオーディオの両方が消去されます。
  2. 音声またはボタンにより楽曲の一時停止または停止を行った場合、楽曲を停止し、表示カードは表示したままにします。表示カードは、1分間何もアクションがなかった場合に自動消去する必要があります。
  3. Alexaが再度起動された場合、楽曲の音量を下げてVoice Chromeを再表示し、次のコマンドを待機します。

その他の対話シナリオは、割り込みのシナリオに関するセクションを参照してください。

仕様

スタイル

TV向けAlexa表示カード: NowPlayingのスタイル
クリックして拡大

レイアウト

TV向けAlexa表示カード: NowPlayingのレイアウト
クリックして拡大
TV向けAlexa表示カード: NowPlayingのレイアウト
クリックして拡大

メモ:

  1. 1行のみのフィールドでコンテナの長さを超えた場合、超えた分のコンテンツは割愛され、三点リーダーで表示されます。
  2. Titleが2行以上ある場合、titleSubtext1とtitleSubtext2は下に移動して表示が調整されます。コントロールとプログレスバーは同じ位置に表示されます。

データ

TV向けAlexa表示カード: NowPlayingのデータ
クリックして拡大

URL

以下のURLは、メディアプレーヤーのコントロールとAlexaロゴです。コントロールには、デフォルト、無効、フォーカスの状態があります。

次

一時停止

再生

前

Alexaロゴ

例1: Amazon Music

“アレクサ、Smoke & Retributionをかけて”

TV向けAlexa表示カード: Amazon Musicを再生中
クリックして拡大

JSON

“name”のキー-値ペアには、“Amazon Music”、“Prime Music”、“プライムラジオ”のいずれかが入ります。Primeが有効でない場合、“name”は“デジタルミュージックストア”になります。


{
  "directive": {
    "header": {
      "namespace": "TemplateRuntime",
      "name": "RenderPlayerInfo",
      "messageId": "",
      "dialogRequestId": ""
    },
    "payload": {
      "audioItemId": "",
      "content": {
        "title": "Smoke & Retribution",
        "titleSubtext1": "Flume",
        "titleSubtext2": "Skin",
        "mediaLengthInMilliseconds": 191000,
        "art" : {
          "sources" : [
            {
              "size" : "medium",
              "url" : "http://example.com/AlbumArt.svg"
            }
          ]
        },
        "provider": {
          "name": "Amazon Music",
          "logo" : {
            "sources" : [
              {
                "url" : "https://example.com/ProviderLogo.jpg"
              }
            ]
          },
        },
      },
      "controls": [
        {
          "type": "BUTTON",
          "name": "PREVIOUS",
          "enabled": true,
          "selected": false
        },
        {
          "type": "BUTTON",
          "name": "PLAY_PAUSE",
          "enabled": true,
          "selected": false
        },
        {
          "type": "BUTTON",
          "name": "NEXT",
          "enabled": true,
          "selected": false
        },
      ]
    }
  }
}

例2: iHeartRadioのライブラジオ

“アレクサ、iHeartRadioでHollywood Breakdownをかけて。”

TV向けAlexa表示カード: iHeartRadioのライブラジオを再生中
クリックして拡大

JSON


{
  "directive": {
    "header": {
      "namespace": "TemplateRuntime",
      "name": "RenderPlayerInfo",
      "messageId": "",
      "dialogRequestId": ""
    },
    "payload": {
      "audioItemId": "",
      "content": {
        "title": "The summer of \"sequel-itis\" and beginning of awards season",
        "header": "KCRW's Hollywood Breakdown",
        "mediaLengthInMilliseconds": 0,
        "art" : {
          "sources" : [
            {
              "size" : "medium",
              "url" : "http://example.com/AlbumArt.svg"
            }
          ]
        },
        "provider": {
          "name": "iHeartRadio Live Radio",
          "logo" : {
            "sources" : [
              {
                "url" : "https://example.com/ProviderLogo.jpg"
              }
            ]
          }
        }
      }
      "controls": [
        {
          "type": "BUTTON",
          "name": "PLAY_PAUSE",
          "enabled": true,
          "selected": false
        },
      ]
    }
  }
}

フラッシュブリーフィングやその他のメタデータが存在しないシナリオ

NowPlayingリクエストからメタデータが返されない場合があります。このような場合、最小限のビジュアル要素のセットを含むControls-Onlyテンプレートを使用します。

たとえば、特定の音楽配信プロバイダーでは、PlayerInfoディレクティブがPlaybackStartedイベントの後に送信されます。このようなケースでは、PlayerInfoディレクティブに2秒間待機するロジックを追加することをお勧めします。メタデータがこの2秒を過ぎても返されない場合、Controls-Onlyテンプレートを表示します。

Controls-Onlyテンプレート

TV向けAlexa表示カード: NowPlayingのControls-Onlyテンプレート
クリックして拡大

スタイル

TV向けAlexa表示カード: NowPlayingのControls-Onlyのスタイル
クリックして拡大

レイアウト

TV向けAlexa表示カード: NowPlayingのControls-Onlyのレイアウト
クリックして拡大

データ

TV向けAlexa表示カード: NowPlayingのControls-Onlyのデータ
クリックして拡大

表示カード切り替わり

表示カード切り替わりはすばやく行い(1秒未満)、スムーズに感じさせるものではなければならない。画面の一部に表示される表示カードは右側から表示し、全画面の表示カードはフェードインします。表示カードをまず表示し、その後でコンテンツをフェードインします。レイテンシーを考慮して、画像が完全に読み込まれて表示が切り替わるまで、背景のプレースホルダーボックスを画像の場所に表示します。

表示カードは、表示されたときと逆の方向に消去します。まずコンテンツをフェードアウトしてから表示カードを消します。画面の一部に表示される表示カードは右側にスライドして消去し、全画面の表示カードはフェードアウトします。

TV向けAlexa表示カード: TVの表示切り替え例
クリックして拡大

割り込みのシナリオ

カード間

TV向けAlexa表示カード: 割り込みのシナリオカード間
クリックして拡大

ステップ1: 発話1

発話1で、Voice Chromeが既存の画面上に重なって表示されます。

ステップ2: TTS1 + GUI1

Alexaが応答します。

ステップ3: 発話2 (割り込み)

ユーザーがAlexaに割り込むと(タップまたはウェイクワードにより)、AlexaはText-To-Speech (TTSテキストの読み上げ)を停止し、Voice Chromeが既存のカード上に重なって表示されます。

ステップ4: TTS2 + GUI2

Alexaが音声で発話2に応答し、古い表示カードが新しい表示カードに置き換わります。この表示カードは、通常の消去ルールに従って消去されます。

NowPlayingから表示カード

TV向けAlexa表示カード: 割り込みのシナリオNowPlayingから表示カード
クリックして拡大

ステップ1: 発話1

発話1で、Voice Chromeが既存の画面上に重なって表示されます。

ステップ2: TTS1 + GUI1

Alexaが応答します。楽曲が再生されます。

ステップ3: 発話2 (割り込み)

ユーザーが割り込みでAlexaのリクエストを行うと(タップまたはウェイクワードにより)、楽曲の音量が小さくなり、Voice ChromeがNowPlaying GUI上に重なって表示されます。

ステップ4: TTS2 + GUI2

発話が理解され、表示カードが必要な場合、Alexaは音声と新規の表示カードで発話に応答する必要があります。TTSが完了すると、楽曲は通常の音量に戻ります。消去時にユーザーがNowPlayingの表示カードに戻る場合以外は、通常の消去ルールに従って消去されます。

楽曲がこの間に変更された場合、戻ったNowPlaying GUIには新しい楽曲が反映される必要があります。

表示カードからNowPlaying

TV向けAlexa表示カード: 割り込みのシナリオ表示カードからNowPlaying
クリックして拡大

ステップ1: 発話1

発話1で、Voice Chromeが既存の画面上に重なって表示されます。

ステップ2: TTS2 + GUI1

Alexaが応答します。

ステップ3: 発話2 (割り込み)

ユーザーが割り込みで楽曲をリクエストすると(タップまたはウェイクワードにより)、AlexaはTTSを停止し、Voice Chromeが既存のカード上に重なって表示されます。

ステップ4: TTS + GUI2

Alexaは音声と新規の表示カードで発話2に応答します。TTSが完了すると、楽曲の再生が開始されます。この表示カードは、通常の消去ルールに従って消去されます。

NowPlayingからエラー

TV向けAlexa表示カード: 割り込みのシナリオNowPlayingからエラー
クリックして拡大

ステップ1: 発話1

発話1で、Voice Chromeが既存の画面上に重なって表示されます。

ステップ2: TTS2 + GUI1

Alexaが応答します。楽曲が再生されます。

ステップ3: 発話2 (割り込み)

ユーザーが割り込みで楽曲をリクエストすると(タップまたはウェイクワードにより)、楽曲の音量が小さくなり、Voice ChromeがNowPlaying GUI上に重なって表示されます。

ステップ4: GUI1

発話が理解されなかった場合、Voice Chromeは消去されてNowPlaying GUIに戻り、楽曲も元の音量に戻ります。

Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment