表示カードの概要



表示カードとは

Alexaの表示カードを使用すると、製品で、楽曲の「再生中」情報だけでなく、一般知識に関する質問、天気、To Do、買い物リスト、カレンダーの更新、Alexaスキルに関する静的な表示カードのレンダリングが可能になります。製品にディスプレイがある場合は、Alexa開発者コンソールで表示カード機能を有効にすることで、ビジュアルメタデータを使用するディレクティブを受信できるようになります。たとえば、製品で表示カードを有効にすると、ユーザーが「Alexa、天気を教えて」と尋ねたときに、Alexaの読み上げ機能(TTS)を使用するSpeakディレクティブに加えて、Amazonで提供された設計テンプレートにマップされるビジュアルメタデータを使用するRenderTemplateディレクティブを受信します。

表示カードを有効にする方法

表示カードの受信を開始するには、AVS開発者コンソールでデバイスの機能を有効にする必要があります。

  1. ここをクリックしてログインします。
  2. 新しい製品を作成するか、既存製品を編集します。
  3. Device Capabilities」をクリックし、製品の機能に応じて以下のいずれかを選択します。
    • 「Enable Display Cards with Text Only」
    • 「Enable Display Cards with Media」

フローと配信

以下の図は、ビジュアルメタデータをAVS対応製品に配信する際のメッセージフローの概要を示しています。

Data flow diagram.
クリックして拡大
  1. ユーザーが「ウサイン・ボルトって誰?」と尋ねます。質問が製品にキャプチャされ、AVSにストリーミングされます。
  2. AVSが以下の2つのディレクティブを返します。
    • Alexa TTSを再生するようクライアントに指示するSpeakディレクティブ。
    • ビジュアルメタデータ(この場合はウサイン・ボルトに関する情報)を表示するようクライアントに指示するRenderTemplateディレクティブ。
  3. Alexa TTSの再生が開始されます。
  4. 別スレッドで、RenderTemplateディレクティブ(可能な場合はSpeakディレクティブと並行して)がすぐにレンダリングされます。
  5. クライアントは、AVSにSpeechStartedイベントを送信することで、Alexa TTSの再生を開始したことを通知します。
  6. Alexa TTSの再生が完了すると、AVSにSpeechFinishedイベントを送信します。

以下が、タブレットサイズの画面でユーザーに表示されます。

BodyTemplate2
クリックして拡大

TemplateRuntimeディレクティブ

TemplateRuntimeインターフェースでは、ビジュアルメタデータの配信に以下の2つのディレクティブが提供されています。

  • RenderPlayerInfoディレクティブは、クライアントにオーディオ再生(楽曲)のユーザーリクエストに関連するビジュアルメタデータを表示するよう指示します。AVSは、Playディレクティブの送信に加えて、オーディオコンテンツプロバイダーに固有のビジュアルメタデータとともにRenderPlayerInfoディレクティブを送信します。クライアントはこのメタデータをテンプレートにバインドし、エンドユーザーに対してレンダリングします。
  • RenderTemplateディレクティブは、クライアントに静的表示カードのユーザーリクエストに関連するビジュアルメタデータを表示するよう指示します。たとえば、ユーザーがAlexaに「今のサンフランシスコの天気は?」と質問すると、AVSは、Speakディレクティブの送信に加えて、ビジュアルメタデータとともにRenderTemplateディレクティブを送信します。クライアントはこのメタデータをテンプレートにバインドし、エンドユーザーに対してレンダリングします。

表示カードテンプレート

TemplateRuntimeインターフェースでは5つのテンプレートをサポートします。1つは「再生中」に使用され、残りの4つは静的な表示カードに使用されます。各ディレクティブで提供されるビジュアルメタデータは、各表示カードテンプレートの特定のコンポーネントにマップされます。

「再生中」ビジュアルメタデータは、常にRenderPlayerInfoディレクティブとして配信され、楽曲の「再生中」テンプレートにマップされます。

静的な表示カードは、RenderTemplateディレクティブを介して配信され、常にtypeパラメーターを含みます。これにより、クライアントに提供されたメタデータを特定のテンプレートのtypeにマップするよう指示します。

説明 用途
BodyTemplate1 タイトル、サブタイトル、テキスト、スキルアイコンをサポートするテキストのみのテンプレート。 画像なしのWikipediaのエントリーやAlexaスキルにより提供されるシンプルなカード。
BodyTemplate2 本文のテキストと1枚の画像をサポートするテンプレート。 画像ありのWikipediaエントリー。
ListTemplate1 リストとカレンダーのエントリーのテンプレート。 買い物リスト、To Doリスト、カレンダーのエントリー。
WeatherTemplate 天気データを表示するよう設計されたテンプレート。 天気。

RenderTemplateディレクティブの詳細情報

再び同じ例を使用して説明します。前述の例で、Alexaに「ウサイン・ボルトって誰?」と尋ねると、クライアントに、ユーザーに対してビジュアルメタデータを表示するよう指示するRenderTemplateディレクティブが返されました。ディレクティブのペイロードでは、mainTitle、subTitle、skillIcon、textField、imageといった重要な情報が提供され、それぞれ表示カードテンプレートの特定のコンポーネントに直接マップされます。このセクションでは、RenderTemplateディレクティブについて、詳しく説明します。

ペイロードは、以下のようになります。

{
  "directive": {
    "header": {
      "namespace": "TemplateRuntime",
      "name": "RenderTemplate",
      "messageId": {{STRING}},
      "dialogRequestId": {{STRING}}
    },
    "payload": {
      "token": "",
      "type": "bodyTemplate2",
      "title": {
        "mainTitle": "Who is Usain Bolt?",
        "subTitle": "Wikipedia"
      },
      "skillIcon": null,
      "textField": "Usain St Leo Bolt, OJ, CD born 21 August 1986..."
    }
  }
}  

1つ目はtokenで、Alexa TTSを含むSpeakディレクティブを、ビジュアルメタデータを含むRenderTemplateディレクティブと一致させるのに使用されます。2つ目はtypeです。この値により、どの表示カードテンプレートを選択すべきかがわかります。この場合はbodyTemplate2です。残りのパラメーターには、テンプレートにバインドする必要のあるビジュアルメタデータが含まれます。以下は、タブレットサイズの画面仕様のテンプレートにバインドされたビジュアルメタデータのサンプルです。

BodyTemplate2 with visual metadata mappings.
クリックして拡大

レンダリング手順

ビジュアルメタデータのレンダリング時には、対話モデルで提供されるガイダンスに加えて、製品で以下のルールが実施される必要があります。

  1. リクエストスレッド上の応答を読み取り、以下のようにディレクティブを解析します。
    • 新しいスレッド上でdialogRequestIdなしのディレクティブをすぐに実行します。
    • 新しいスレッド上でネームスペースTemplateRuntime内のディレクティブをすぐに実行します。
    • キュー内にdialogRequestIdのディレクティブを配置します。
  2. キュー内のディレクティブは別のスレッド上で選択され、順に処理される必要があります。
  3. Playディレクティブと関連するRenderPlayerInfoディレクティブは同期される必要があります。RenderTemplateと異なり、ディレクティブは必ずしもすぐにレンダリングされる必要はありませんが、Playディレクティブの順序と一致する必要があります。たとえば、PlaybackNearlyFinishedの送信後に新しいPlayディレクティブとRenderPlayerInfoディレクティブを受信した場合は、キューに追加され、現在再生中のトラックの完了後に処理される必要があります。つまり、実装する表示カードで、再生、停止、一時停止といった再生の状態を認識する必要があるということです。

UXの考慮事項

表示カードを実装する際は、ユーザーにビジュアルメタデータをレンダリングする最適な方法を決定する必要があります。[表示カード向けAVS UX設計ガイドライン][avs-ux-guidelines#display-cards] では、TV、タブレット、低解像度画面向けの画面に特化したガイダンスを、メタデータのバインド要件、Alexaの状態についての表示カードの遷移、割り込み動作、表示方法の推奨事項とともに提供します。

表示カード向けのAVS UXガイドラインについては、こちらをクリックしてください。

次のステップ