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

デバイスにAlexaを実装する場合、表示カードにすべてのコンテンツ、テンプレート、メディアの帰属情報、メディアのコントロールが表示されることが期待されます。さらに、以下を満たすことが期待されます。
- 表示カードは、Alexaの応答またはメディアの再生が開始されるとすぐに表示され、表示カードのコンテンツがAlexaの応答やメディアと一致していること。
- 表示カード間の移動、表示カードの表示、表示カードの消去がスムーズにできること。
- 製品のデバイスクラスについての設計ガイドラインに従って、表示カードが画面の操作や音声の発話に応答すること。
- Alexaのアテンション状態(「Listening」と「Thinking」)が表示カードの最前面に表示され、他のカードの後ろに隠れないこと。
上記についての詳細は、すべて以下のガイドラインに記載されています。
静的な表示カード
グローバル要素
Alexaは、特定の非メディアクエリーに応じてカードを表示します。表示カードは、現在ユーザーが視聴している画面の前面にサイドバーとして表示されます。このセクションのすべての表示カードには、以下のグローバル要素が含まれます。

-
タイトルとサブタイトル すべての表示カードにはタイトルがあります。サブタイトルのある表示カードもあります。
-
コンテンツ領域 この領域(中央のボックス)には常にフォーカスがあり、5ウェイリモコンを使ってスクロールできます。
-
Alexaロゴ ロゴは非対話的なブランド要素です。
-
表示カード 表示カードの幅は600pxで、マージンは60pxです。透過度85%の黒で、背景はぼかします。透過度85%が理想ですが、技術的な制約がある場合は不透明の黒を指定できます。
-
Alexaスキルアイコン このアイコン(右上)は、サードパーティが提供する情報がカードに表示されているときに表示されます。サードパーティから提供されている情報がない場合、このアイコンは表示されません。
Voice Chrome
Voice Chromeは、Listening、Thinking、Respondingといった、Alexaのアテンション状態を視覚的に示すインジケーターです。デバイス上のLEDで表示することもできますが、ほとんどのTVは画面上のVoice Chromeを使用する必要があります。
画面上のVoice Chromeは、画面右下隅に円形のバッジとして表示されます。

Voice Chromeを表示する方法とタイミングについては、対話と割り込みのシナリオに関するセクションに記載されています。
Voice Chromeの色やアニメーションは、アテンションシステムのドキュメントに記載されているパターンに従ってください。
対話
Alexaとの対話時、ユーザーには以下のような画面状態が表示されます。

ステップ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が呼び出されるサンプル発話には以下のようなものがあります。
- “5マイルは何キロ?”
- “パラドックスの意味は?”
- “アリストテレスって誰?”
- “海の深さは?”

スタイル

レイアウト

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

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が呼び出されるサンプル発話には以下のようなものがあります。
- “ウサイン・ボルトって誰?”
- “アラバマ物語の著者は?”
- “ニューメキシコってどこ?”
- “アンゲラ・メルケルの誕生日はいつ?”

スタイル

レイアウト

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

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が呼び出されるサンプル発話には以下のようなものがあります。
- “ToDoリストに何がある?”
- “買い物リストに卵を追加して。”
- “次の予定は何?”
- “カレンダーに“ジェイラとランチ”を追加して。”

スタイル

レイアウト

データ

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

その他の例: カレンダー

WeatherTemplate
WeatherTemplateは、以下のような天気関連のすべての発話に使用されます。
- “天気を教えて。”
- “今日は雨が降る?”
- “[location]の天気を教えて。”

スタイル

レイアウト

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

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が呼び出されるサンプル発話には以下のようなものがあります。
- “ジャズの曲をかけて。”
- “Smoke & Retributionをかけて。”
- “iHeartRadioでヤバイ経済学をかけて。”
- “[third-party music provider]でカントリーの局をかけて。”

VUI再生コマンド
ユーザーは、GUIかVUIのいずれかを使って、メディアの再生を操作できます。VUI再生コマンドには、以下のようなものがあります。
- 再生
- 停止
- キャンセル
- 一時停止
- 再開
- 次
- 前
- 早戻し
- 最初から再生
- 音量を大きく
- 音量を小さく
- 音量を設定
- ミュート
- ミュート解除
- シャッフル
- もう一度再生
- 詳細を見る
- これは誰?
グローバル要素

グローバル要素には、以下のようなものがあります。
-
メディアのメタデータ。
-
再生コントロール。メディアの種類やサービスに応じて異なります。
-
プログレスバー。ほぼすべての種類のメディアで表示されます。トラックの再生時間と進行状況を示します。非対話的な要素です。
-
Alexaロゴ
-
メディアのアートワーク(四角部分)。アルバムの画像、ラジオ局のロゴ、番組のロゴ、本の画像が表示されます。
-
音楽配信プロバイダーのロゴ。メディアを提供するサービスのロゴです。
各音楽配信サービスプロバイダーで利用可能なコントロール
Alexaは、複数の音楽配信サービスプロバイダーの楽曲を再生できます。プロバイダーによって提供されるコントロールが異なります。たとえば、ライブラジオ局には、「送る」や「戻る」のコントロールはありません。各サービスに合った正しいコントロールをPlayerInfoディレクティブで指定します。
各音楽配信サービスプロバイダーで利用可能なコントロール
プロバイダー | サービス | 一時停止/再生 | 戻る | 送る |
Amazon Music | オンデマンド | ● | ● | ● |
Amazon Music | プレイリスト | ● | ● | ● |
Amazon Music | ステーション | ● | ● | ● |
TuneIn | ライブラジオ | ● | ||
TuneIn | 本とポッドキャスト | ● | ● | ● |
Pandora | ● | ● | ||
iHeartRadio | ライブラジオ | ● | ||
iHeartRadio | アーティストラジオ | ● | ● | |
iHeartRadio | 本とポッドキャスト | ● | ● |
メモ: Amazon MusicとPandoraは、商用デバイスにのみ利用できます。
対話
Alexaとの対話時、ユーザーには以下のような画面状態が表示されます。

ステップ1: 呼び出し
ユーザーは、ウェイクワード“Alexa”か、リモコンを使ってAlexaを起動します。これにより、Voice Chromeが起動され、AlexaがListeningであると表示されます。
ステップ2: 聞き取りとインテントの処理
Voice Chromeが呼び出されると、ユーザーはAlexaを音声で操作できるようになります。発話を認識した場合、Alexaはインテントを処理してカードを表示します。認識できない場合、Voice Chromeは表示されなくなります。
ステップ3: 応答と消去
Alexaは音声で応答し、NowPlaying表示カードを表示し、リクエストされたメディアを再生します。ユーザーは音声コマンドまたはGUIでメディアを操作できます。表示カードは、新しい楽曲が再生されるたびに更新されます。
ユーザーが以下の操作を行った場合は、次のように動作します。
- リモコンで複数タスクを実行した場合や“X”を選択した場合、表示カードとオーディオの両方が消去されます。
- 音声またはボタンにより楽曲の一時停止または停止を行った場合、楽曲を停止し、表示カードは表示したままにします。表示カードは、1分間何もアクションがなかった場合に自動消去する必要があります。
- Alexaが再度起動された場合、楽曲の音量を下げてVoice Chromeを再表示し、次のコマンドを待機します。
その他の対話シナリオは、割り込みのシナリオに関するセクションを参照してください。
仕様
スタイル

レイアウト


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

URL
以下のURLは、メディアプレーヤーのコントロールとAlexaロゴです。コントロールには、デフォルト、無効、フォーカスの状態があります。
次
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-next-default.png
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-next-disabled.png
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-next-focus.png
一時停止
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-pause-default.png
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-pause-focus.png
再生
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-play-default.png
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-play-focus.png
前
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-prev-default.png
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-prev-disabled.png
- https://images-na.ssl-images-amazon.com/images/G/01/alexa/avs/gui/large/control-prev-focus.png
Alexaロゴ
例1: Amazon Music
“アレクサ、Smoke & Retributionをかけて”

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をかけて。”

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テンプレート

スタイル

レイアウト

データ

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

割り込みのシナリオ
カード間

ステップ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から表示カード

ステップ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

ステップ1: 発話1
発話1で、Voice Chromeが既存の画面上に重なって表示されます。
ステップ2: TTS2 + GUI1
Alexaが応答します。
ステップ3: 発話2 (割り込み)
ユーザーが割り込みで楽曲をリクエストすると(タップまたはウェイクワードにより)、AlexaはTTSを停止し、Voice Chromeが既存のカード上に重なって表示されます。
ステップ4: TTS + GUI2
Alexaは音声と新規の表示カードで発話2に応答します。TTSが完了すると、楽曲の再生が開始されます。この表示カードは、通常の消去ルールに従って消去されます。
NowPlayingからエラー

ステップ1: 発話1
発話1で、Voice Chromeが既存の画面上に重なって表示されます。
ステップ2: TTS2 + GUI1
Alexaが応答します。楽曲が再生されます。
ステップ3: 発話2 (割り込み)
ユーザーが割り込みで楽曲をリクエストすると(タップまたはウェイクワードにより)、楽曲の音量が小さくなり、Voice ChromeがNowPlaying GUI上に重なって表示されます。
ステップ4: GUI1
発話が理解されなかった場合、Voice Chromeは消去されてNowPlaying GUIに戻り、楽曲も元の音量に戻ります。