タブレット向けAVS表示カード

このページのガイダンスは、タブレット向けのTemplateRuntime v1.0PlaybackController v1.1のAPIに基づいています。別のバージョンを使用している場合、上のドロップダウンメニューから別のページを選択してください。

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

    タブレット向けAlexa表示カード
    クリックして拡大

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

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

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

    静的な表示カード

    グローバル要素

    Alexaは、特定の非メディアクエリに応じて静的な表示カードを表示できます。このセクションのすべての表示カードには、以下のグローバル要素が含まれます。

    タブレット向けAlexa表示カード:グローバル要素
    クリックして拡大
    タブレット向けAlexa表示カード:グローバル要素
    クリックして拡大

    要素

    上の図にある番号付きの要素について、詳細を説明します。

    1. タイトル:すべてのカードはmainTitleを持ちます。subTitleを持つものもあります。

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

    3. 割り込みボタン:このボタン(中央下)は、いつでもタップしてAlexaを起動し、話しかけることができます。

    4. GUIの閉じるボタン:「X」をタップすると、GUIが非表示になり、Alexaの応答が終了します。

    静的表示カードのガイドラインに関する注意事項

    1. すべての仕様は、1280 x 800dpのリファレンステンプレートに基づいています。

    2. デバイスの画面解像度に合わせてテンプレートを変更しやすいように、レイアウトはパーセントで指定されています。

    3. フォントサイズはリファレンス画面に指定されています。これらのサイズは、画面の解像度によって拡大・縮小される必要があります。行の高さを指定しない場合は、フォントサイズと同じになります。

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

    5. 画像アセットとアイコン(dpサイズで指定)は、画面の解像度に応じて拡大・縮小される必要があります。

    6. すべてのアセットのURLは、このドキュメントのアセットセクションに記載しています。

    Voice Chrome

    Voice Chromeは、聞き取り中、考え中、応答中といった、Alexaのアテンション状態を視覚的に示すインジケーターです。デバイス上のLEDで表示することもできますが、ほとんどのタブレットでは画面上のVoice Chromeを使用します。

    Voice Chromeを表示する方法とタイミングについては、このページの下にある対話のセクションと割り込みのシナリオに関するセクションに記載されています。Voice Chromeの色やアニメーションは、アテンションシステムのドキュメントに記載されているパターンに従ってください。

    対話

    静的な表示カードでは、ライトとダークの2つのモードを選択できます。カードの色スキームに応じて、Alexaは白または黒のオーバーレイ上に呼び出されます。

    注:NowPlayingカードは、ダークモードのみを使用します。

    以下は、Alexaとの対話中にユーザーに表示される画面状態の例です。

    ライトモードでAlexaを呼び出す

    ライトモードのタブレット向け表示カードを使った対話の例
    クリックして拡大

    注:アクティブなVoice Chromeは、50%の不透明度で白のオーバーレイ上に表示されます。

    ダークモードでAlexaを呼び出す

    ダークモードの詳細については、ダークモードを参照してください。

    ダークモードのタブレット向け表示カードを使った対話の例
    クリックして拡大

    注:アクティブなVoice Chromeは、50%の不透明度で黒のオーバーレイ上に表示されます。

    対話の詳細例

    ステップ1:呼び出し

    ユーザーは、ウェイクワード「アレクサ」か、デバイス上のコントロール(物理ボタンやGUIボタンなど)を使ってAlexaを起動します。これにより、Voice Chromeが起動され、Alexaが聞き取り中であると表示されます。

    ステップ2:聞き取り中

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

    ステップ3:応答と消去

    Alexaは音声で応答します。表示カードがある場合は、表示カードも表示します。表示カードとオーディオ再生を同時に行うことで、オーディオとビジュアルを必ず同期する必要があります。Alexa音声が終了すると、2秒間何もアクションがない場合に表示カードを自動消去する必要があります。

    オーディオ再生が終了する前にユーザーが以下の操作を行った場合、次のように動作する必要があります。

    • 割り込みボタン(Alexaロゴ)をタップした場合、TTS(テキストの読み上げ)を終了し、Voice Chromeを表示カードの前面に表示します。

    • 「X」をタップした場合、表示カードが消去され、TTSを終了します。

    ユーザーが手動でカードを消さない限り、TTSの終了前にカードを消去することはできません。割り込みボタン(Alexaロゴ)をタップすると、TTSを停止し、カードを消去して、Voice Chromeを表示します。

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

    BodyTemplate1

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

    1. 「海の深さは?」
    2. 「パラドックスの意味は?」
    3. 「カーマンラインって何?」
    4. 「バイクポロって何?」
    タブレット向け表示カード:BodyTemplate1
    クリックして拡大
    縦型の表示カード:BodyTemplate2(縦型)
    クリックして拡大

    スタイル

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

    レイアウト

    タブレット向け表示カード:BodyTemplate1のレイアウト
    クリックして拡大
    タブレット向け表示カード:BodyTemplate1(縦型レイアウト)
    クリックして拡大

    注:ユーザーが画面をスクロールできるため、本文のコンテンツ(textField)は画面の縦幅を超えても構いません。

    データ

    タブレット向け表示カード: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..."
        }
      }
    }
    
    

    BodyTemplate2

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

    1. 「ウサイン・ボルトって誰?」
    2. 「5マイルは何キロ?」
    3. 「アラバマ物語の著者は?」
    4. 「ニューメキシコってどこ?」
    タブレット向け表示カード:BodyTemplate2
    クリックして拡大
    縦型の表示カード:BodyTemplate2(縦型)
    クリックして拡大

    スタイル

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

    レイアウト

    タブレット向け表示カード:BodyTemplate2のレイアウト
    クリックして拡大
    タブレット向け表示カード:BodyTemplate2(縦型レイアウト)
    クリックして拡大

    注:画像の高さと幅は、画面の最大サイズです。高さと幅のいずれかが画面サイズを超えないように画像のサイズを変更できます。

    データ

    タブレット向け表示カード: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はカレンダーや買い物リストなど、項目をリスト表示する場合に使用されます。ListTemplate1が呼び出されるサンプル発話には以下のようなものがあります。

    1. 「やることリストに何がある?」
    2. 「買い物リストに卵を追加して」
    3. 「次の予定は何?」
    4. 「カレンダーに「ジェイラとランチ」を追加して」
    タブレット向け表示カード:ListTemplate1
    クリックして拡大
    縦型の表示カード:WeatherTemplate
    クリックして拡大

    スタイル

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

    レイアウト

    タブレット向け表示カード:ListTemplate1のレイアウト
    クリックして拡大
    タブレット向け表示カード:ListTemplate1(縦型レイアウト)
    クリックして拡大

    注:leftTextFieldとrightTextFieldの間隔は静的です。たとえば、leftTextFieldがここに表示されている以上のテキストを表示する場合、rightTextFieldは右側に移動しますが、2つの間隔は同じです。

    データ

    タブレット向け表示カード:ListTemplate1のカレンダー
    クリックして拡大

    その他の例:カレンダー

    タブレット向け表示カード:ListTemplate1のカレンダー
    クリックして拡大

    注:日時とイベントの間隔は静的です。

    JSON

    
    {
      "directive": {
        "header": {
          "namespace": "TemplateRuntime",
          "name": "Render"
        },
        "payload": {
          "token": "",
          "type": "ListTemplate1",
          "title": {
            "mainTitle": "Title",
            "subTitle": "Subtitle"
          },
          "skillIcon": {
            "contentDescription": "Source for the skill icon.",
            "sources": [
              {
                "url": "https://example.com/smallSkillIcon.jpg",
                "size": "small"
              }
            ]
          },
          "listItems": [
            {
              "leftTextField": "1.",
              "rightTextField": "Alfa"
            },
            {
              "leftTextField": "2.",
              "rightTextField": "Bravo"
            },
            {
              ...
            }
          ]
        }
      }
    }
    
    

    WeatherTemplate

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

    1. 「天気を教えて」
    2. 「今日は雨が降る?」
    3. 「[location]の天気を教えて」
    タブレット向け表示カード:WeatherTemplate
    クリックして拡大
    縦型の表示カード:WeatherTemplate
    クリックして拡大

    スタイル

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

    レイアウト

    タブレット向け表示カード:WeatherTemplateのレイアウト
    クリックして拡大
    タブレット向け表示カード:WeatherTemplate(縦型レイアウト)
    クリックして拡大

    3桁表示のWeatherTemplateレイアウト

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

    データ

    タブレット向け表示カード: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°"
            },
            {
              ...
            }
          ]
        }
      }
    }
    
    

    ダークモード

    たとえば、夜間に利用する場合にダークモードを使うようテンプレートを調整できます。ダークモードは、暗い環境でのより快適なエクスペリエンスを提供します。ダークモードは次のように実装します。

    1. 本文とフッターの背景を黒(#000000)に変更します。
    2. すべての黒いテキスト(#151320)を白(#ffffff)に変更します。
    3. WeatherTemplateの画像URLには、「url」ではなく「darkBackgroundUrl」を使用します。

    その結果、以下のように表示されます。

    ダークモードの表示カード:BodyTemplate1
    クリックして拡大
    縦型の表示カード:BodyTemplate2(ダークモード)
    クリックして拡大
    ダークモードの表示カード:Body2
    クリックして拡大
    縦型の表示カード:BodyTemplate2(ダークモード)
    クリックして拡大
    ダークモードの表示カード:WeatherTemplate
    クリックして拡大
    縦型の表示カード:WeatherTemplate(ダークモード)
    クリックして拡大
    ダークモードの表示カード:カレンダー
    クリックして拡大
    縦型の表示カード:WeatherTemplate(ダークモード)
    クリックして拡大

    NowPlayingカード

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

    1. 「ジャズの曲をかけて」
    2. 「「Smoke & Retribution」をかけて」
    3. 「iHeartRadioで「ヤバイ経済学」をかけて」
    4. 「[third-party music provider]でカントリーの局をかけて」


    タブレット向け表示カード:NowPlaying
    クリックして拡大

    VUI再生コマンド

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

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

    グローバル要素

    Alexaは、メディアクエリに対してNowPlaying GUIを表示します。このセクションのすべてのNowPlayingカードには、以下のグローバル要素が含まれます。

    タブレット向け表示カード:NowPlayingのグローバル要素
    クリックして拡大
    タブレット向け表示カード:NowPlayingのグローバル要素
    クリックして拡大

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

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

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

    3. プログレスバー:ほぼすべての種類のメディアで表示されます。

    4. 割り込みボタン(Alexaロゴ):このボタンは、いつでもタップしてAlexaを起動し、話しかけることができます。

    5. 「X」ボタン:「X」をタップすると、GUIが非表示になり再生が停止されます。

    6. メディアのアートワーク:アルバムの画像、ラジオ局のロゴ、番組のロゴ、本の画像が表示されます。

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

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

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

    対話

    以下は、Alexaとの対話中にユーザーに表示される画面状態の例です。

    タブレット向け表示カード:NowPlayingの対話
    クリックして拡大

    応答と消去

    メディアリクエストに応じて、AlexaはNowPlaying GUI、メディアメタデータ、再生コントロールを表示します。

    ユーザーが次の操作を行うと、以下のように動作します。

    • 「X」をタップするか、デバイスのコントロールでカードから移動してGUIを消去した場合、カードが消去され、オーディオも停止します。注:デバイスがデバイス上の別の場所にある再生コントロールをサポートする場合(その他の再生コントロールを参照)、「X」がタップされると、GUIのみを消去して、楽曲の再生は継続できます。

    • 音声またはボタンにより楽曲の一時停止または停止を行った場合、楽曲を停止し、カードは表示したままにします。カードは、1分間何もアクションがなかった場合に自動消去する必要があります。

    • 楽曲の再生中にAlexaが再度起動された場合、楽曲の音量を下げてVoice Chromeを再表示し、次のコマンドを待機します。

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

    仕様

    スタイル

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

    レイアウト

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

    注:メディアアートワークはコンテナの形状によって制約されます。画面サイズを超えることはできません。アートワークが四角形ではない場合、またはコンテナのサイズより小さい場合、コンテナ内で水平および垂直方向に中央揃えする必要があります。

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

    注:

    1. 出典・著者の情報は1行で表示し、mainTitleは最大2行で表示できます。mainTitleが2行を超える場合、テキストは割愛され、三点リーダーが表示されます。
    2. コンテンツが最大行数を超える場合、超える部分のテキストは割愛され、三点リーダーが表示されます。
    3. mainTitleが2行以上ある場合、titleSubtext1とtitleSubtext2は下に移動して表示が調整されます。コントロールとプログレスバーは移動しません。

    データ

    タブレット向け表示カード:NowPlayingのデータ
    クリックして拡大

    例1:Amazon Prime Music

    「アレクサ、「Smoke & Retribution」をかけて」

    タブレット向け表示カード:Amazon Musicを再生中
    クリックして拡大

    トグル状態のオン

    トグル(シャッフルやループなど)がオンになると、アイコンはアクティブ状態のままになります。

    タブレット向け表示カード:Amazon Musicを再生中
    クリックして拡大

    JSON

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

    
    {
      "directive": {
        "header": {
          "namespace": "TemplateRuntime",
          "name": "RenderPlayerInfo",
          "messageId": "",
          "dialogRequestId": ""
        },
        "payload": {
          "audioItemId": "",
          "content": {
            "title": "",
            "titleSubtext1": "",
            "titleSubtext2": "",
            "header": "",
            "headerSubtext1": "",
            "mediaLengthInMilliseconds": ,
            "art": ,
            "provider": {
              "name": "",
              "logo": 
            }
          }
          "controls": [
            // This array includes all controls that must be
            // rendered on-screen.
            {
              "type": "",
              "name": "",
              "enabled": ,
              "selected": 
            },
            {
              "type": "",
              "name": "",
              "enabled": ,
              "selected": 
            },
            {
              ...
            }
          ]
        }
      }
    }
    
    

    例2:iHeartRadioのライブラジオ

    「アレクサ、iHeartRadioで「Hollywood Breakdown」をかけて」

    タブレット向け表示カード: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
            },
            {
           "type": "TOGGLE",
           "name": "THUMB_UP",
           "enabled": true,
           "selected": false
           },
           {
           "type": "TOGGLE",
           "name": "THUMB_DOWN",
           "enabled": true,
           "selected": false
           }
          ]
        }
      }
    }
    
    

    例3:Amazon Musicの局

    「アレクサ、お気に入りの局をかけて」

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

    例4:Audibleのオーディオブック

    「アレクサ、Audibleの本を読んで」

    TV向けAlexa表示カード:Audibleのオーディオブックを再生中
    クリックして拡大

    例5:Pandoraの楽曲

    「アレクサ、Pandoraの曲をかけて」

    TV向けAlexa表示カード:Pandoraの楽曲を再生中
    クリックして拡大

    注:戻る、一時停止/再生、送るが無効の場合、アイコンの「無効」バージョンを使用します。

    Controls-Onlyテンプレート

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

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

    Controls-Onlyテンプレート

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

    スタイル

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

    レイアウト

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

    データ

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

    ネイティブの再生コントロール

    タブレットの多くは、ユーザーの通知パネルやユニバーサルアクセスが可能なパネルで再生コントロールをサポートしています。デバイスがこのようなフレームワークをネイティブでサポートする場合、Alexaからの楽曲再生にこれらのコントロールをサポートする必要があります。

    この再生コントローラーでは、次のメタデータを表示する必要があります。

    • art(アルバムの画像)
    • title
    • titleSubtext1
    • プロバイダー名
    • その他の適用される再生コントロール

    メタデータをタップすると、再生中の楽曲のNowPlaying GUIをユーザーに返す必要があります。

    表示カード切り替え

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

    表示カードは、表示されたときと逆の方向に消去します。まずテキストをフェードアウトしてから表示カードを消します。

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

    割り込みのシナリオ

    以下は、Alexaの応答に割り込んだ場合にユーザーに表示される状態の例です。

    カード間

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

    ステップ1:発話1

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

    ステップ2:TTS1 + GUI1

    Alexaが応答します。

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

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

    ステップ4:TTS2 + GUI2

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

    NowPlayingから表示カード

    タブレット向け表示カード:割り込みのシナリオ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

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

    ステップ1:発話1

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

    ステップ2:TTS2 + GUI1

    Alexaが応答します。

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

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

    ステップ4:TTS + GUI2

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

    NowPlayingからエラー

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

    ステップ1:発話1

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

    ステップ2:TTS2 + GUI1

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

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

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

    ステップ4:GUI1

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

    アセット

    これらのリソースは、表示カードと併せて使用できます。

    解像度が1280x800dp以上のタブレットでは、以下の大きいアセットを使用することをお勧めします。低解像度のタブレットでは、小さいアセットを使用します。極端に高いまたは低い解像度の場合は、必要に応じてアセットを拡大・縮小できます。

    Alexa

    再生コントロール

    以下は、メディア再生コントロール用のアセットです。

    再生

    一時停止

    シャッフル

    ループ

    サムアップ

    サムダウン

    30秒進む

    30秒戻る

    Alexaフォント

    Alexa関連の画面や機能には、以下のフォントファミリーを使用します。

    • Amazon Ember Display
    • Bookerly
    • Noto Sans CJK

    Bookerlyは主に使い方の例に使用し、Noto Sans CJKは中国語、日本語、韓国語の言語サポートとして提供されています。Amazon Ember DisplayとBookerlyは、Alexa関連の用途のみに予約されています。

    Amazonフォントファイルは、Amazon開発者ポータル(ログインが必要)のリソースタブで入手できます。

    このページのガイダンスは、タブレット向けのTemplateRuntime v1.0PlaybackController v1.0のAPIに基づいています。別のバージョンを使用している場合、上のドロップダウンメニューから別のページを選択してください。

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

      タブレット向けAlexa表示カード
      クリックして拡大

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

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

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

      静的な表示カード

      グローバル要素

      Alexaは、特定の非メディアクエリに応じて静的な表示カードを表示します。このセクションのすべての表示カードには、以下のグローバル要素が含まれます。

      タブレット向けAlexa表示カード:グローバル要素
      クリックして拡大
      タブレット向けAlexa表示カード:グローバル要素
      クリックして拡大

      要素

      上の図にある番号付きの要素について、詳細を説明します。

      1. タイトル:すべてのカードはmainTitleを持ちます。subTitleを持つものもあります。

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

      3. 割り込みボタン:このボタン(中央下)は、いつでもタップしてAlexaを起動し、話しかけることができます。

      4. GUIの閉じるボタン:「X」をタップすると、GUIが非表示になり、Alexaの応答が終了します。

      静的表示カードのガイドラインに関する注意事項

      1. すべての仕様は、1280 x 800dpのリファレンステンプレートに基づいています。

      2. デバイスの画面解像度に合わせてテンプレートを変更しやすいように、レイアウトはパーセントで指定されています。

      3. フォントサイズはリファレンス画面に指定されています。これらのサイズは、画面の解像度によって拡大・縮小される必要があります。行の高さを指定しない場合は、フォントサイズと同じになります。

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

      5. 画像アセットとアイコン(dpサイズで指定)は、画面の解像度に応じて拡大・縮小される必要があります。

      6. すべてのアセットのURLは、このドキュメントのアセットセクションに記載しています。

      Voice Chrome

      Voice Chromeは、聞き取り中、考え中、応答中といった、Alexaのアテンション状態を視覚的に示すインジケーターです。デバイス上のLEDで表示することもできますが、ほとんどのタブレットでは画面上のVoice Chromeを使用します。

      Voice Chromeを表示する方法とタイミングについては、このページの下にある対話のセクションと割り込みのシナリオに関するセクションに記載されています。Voice Chromeの色やアニメーションは、アテンションシステムのドキュメントに記載されているパターンに従ってください。

      対話

      静的な表示カードでは、ライトとダークの2つのモードを選択できます。カードの色スキームに応じて、Alexaは白または黒のオーバーレイ上に呼び出されます。

      注:NowPlayingカードは、ダークモードのみを使用します。

      以下は、Alexaとの対話中にユーザーに表示される画面状態の例です。

      ライトモードでAlexaを呼び出す

      ライトモードのタブレット向け表示カードを使った対話の例
      クリックして拡大

      注:アクティブなVoice Chromeは、50%の不透明度で白のオーバーレイ上に表示されます。

      ダークモードでAlexaを呼び出す

      ダークモードの詳細については、ダークモードを参照してください。

      ダークモードのタブレット向け表示カードを使った対話の例
      クリックして拡大

      注:アクティブなVoice Chromeは、50%の不透明度で黒のオーバーレイ上に表示されます。

      対話の詳細例

      ステップ1:呼び出し

      ユーザーは、ウェイクワード「アレクサ」か、デバイス上のコントロール(物理ボタンやGUIボタンなど)を使ってAlexaを起動します。これにより、Voice Chromeが起動され、Alexaが聞き取り中であると表示されます。

      ステップ2:聞き取り中

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

      ステップ3:応答と消去

      Alexaは音声で応答します。表示カードがある場合は、表示カードも表示します。表示カードとオーディオ再生を同時に行うことで、オーディオとビジュアルを必ず同期する必要があります。Alexa音声が終了すると、2秒間何もアクションがない場合に表示カードを自動消去する必要があります。

      オーディオ再生が終了する前にユーザーが以下の操作を行った場合、次のように動作する必要があります。

      • 割り込みボタン(Alexaロゴ)をタップした場合、TTS(テキストの読み上げ)を終了し、Voice Chromeを表示カードの前面に表示します。

      • 「X」をタップした場合、表示カードが消去され、TTSを終了します。

      ユーザーが手動でカードを消さない限り、TTSの終了前にカードを消去することはできません。割り込みボタン(Alexaロゴ)をタップすると、TTSを停止し、カードを消去して、Voice Chromeを表示します。

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

      BodyTemplate1

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

      1. 「海の深さは?」
      2. 「パラドックスの意味は?」
      3. 「カーマンラインって何?」
      4. 「バイクポロって何?」
      タブレット向け表示カード:BodyTemplate1
      クリックして拡大
      縦型の表示カード:BodyTemplate2(縦型)
      クリックして拡大

      スタイル

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

      レイアウト

      タブレット向け表示カード:BodyTemplate1のレイアウト
      クリックして拡大
      タブレット向け表示カード:BodyTemplate1(縦型レイアウト)
      クリックして拡大

      注:ユーザーが画面をスクロールできるため、本文のコンテンツ(textField)は画面の縦幅を超えても構いません。

      データ

      タブレット向け表示カード: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..."
          }
        }
      }
      
      

      BodyTemplate2

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

      1. 「ウサイン・ボルトって誰?」
      2. 「5マイルは何キロ?」
      3. 「アラバマ物語の著者は?」
      4. 「ニューメキシコってどこ?」
      タブレット向け表示カード:BodyTemplate2
      クリックして拡大
      縦型の表示カード:BodyTemplate2(縦型)
      クリックして拡大

      スタイル

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

      レイアウト

      タブレット向け表示カード:BodyTemplate2のレイアウト
      クリックして拡大
      タブレット向け表示カード:BodyTemplate2(縦型レイアウト)
      クリックして拡大

      注:画像の高さと幅は、画面の最大サイズです。高さと幅のいずれかが画面サイズを超えないように画像のサイズを変更できます。

      データ

      タブレット向け表示カード: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はカレンダーや買い物リストなど、項目をリスト表示する場合に使用されます。ListTemplate1が呼び出されるサンプル発話には以下のようなものがあります。

      1. 「やることリストに何がある?」
      2. 「買い物リストに卵を追加して」
      3. 「次の予定は何?」
      4. 「カレンダーに「ジェイラとランチ」を追加して」
      タブレット向け表示カード:ListTemplate1
      クリックして拡大
      縦型の表示カード:WeatherTemplate
      クリックして拡大

      スタイル

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

      レイアウト

      タブレット向け表示カード:ListTemplate1のレイアウト
      クリックして拡大
      タブレット向け表示カード:ListTemplate1(縦型レイアウト)
      クリックして拡大

      注:leftTextFieldとrightTextFieldの間隔は静的です。たとえば、leftTextFieldがここに表示されている以上のテキストを表示する場合、rightTextFieldは右側に移動しますが、2つの間隔は同じです。

      データ

      タブレット向け表示カード:ListTemplate1のカレンダー
      クリックして拡大

      その他の例:カレンダー

      タブレット向け表示カード:ListTemplate1のカレンダー
      クリックして拡大

      注:日時とイベントの間隔は静的です。

      JSON

      
      {
        "directive": {
          "header": {
            "namespace": "TemplateRuntime",
            "name": "Render"
          },
          "payload": {
            "token": "",
            "type": "ListTemplate1",
            "title": {
              "mainTitle": "Title",
              "subTitle": "Subtitle"
            },
            "skillIcon": {
              "contentDescription": "Source for the skill icon.",
              "sources": [
                {
                  "url": "https://example.com/smallSkillIcon.jpg",
                  "size": "small"
                }
              ]
            },
            "listItems": [
              {
                "leftTextField": "1.",
                "rightTextField": "Alfa"
              },
              {
                "leftTextField": "2.",
                "rightTextField": "Bravo"
              },
              {
                ...
              }
            ]
          }
        }
      }
      
      

      WeatherTemplate

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

      1. 「天気を教えて」
      2. 「今日は雨が降る?」
      3. 「[location]の天気を教えて」
      タブレット向け表示カード:WeatherTemplate
      クリックして拡大
      縦型の表示カード:WeatherTemplate
      クリックして拡大

      スタイル

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

      レイアウト

      タブレット向け表示カード:WeatherTemplateのレイアウト
      クリックして拡大
      タブレット向け表示カード:WeatherTemplate(縦型レイアウト)
      クリックして拡大

      3桁表示のWeatherTemplateレイアウト

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

      データ

      タブレット向け表示カード: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°"
              },
              {
                ...
              }
            ]
          }
        }
      }
      
      

      ダークモード

      たとえば、夜間に利用する場合にダークモードを使うようテンプレートを調整できます。ダークモードは、暗い環境でのより快適なエクスペリエンスを提供します。ダークモードは次のように実装します。

      1. 本文とフッターの背景を黒(#000000)に変更します。
      2. すべての黒いテキスト(#151320)を白(#ffffff)に変更します。
      3. WeatherTemplateの画像URLには、「url」ではなく「darkBackgroundUrl」を使用します。

      その結果、以下のように表示されます。

      ダークモードの表示カード:BodyTemplate1
      クリックして拡大
      縦型の表示カード:BodyTemplate2(ダークモード)
      クリックして拡大
      ダークモードの表示カード:Body2
      クリックして拡大
      縦型の表示カード:BodyTemplate2(ダークモード)
      クリックして拡大
      ダークモードの表示カード:WeatherTemplate
      クリックして拡大
      縦型の表示カード:WeatherTemplate(ダークモード)
      クリックして拡大
      ダークモードの表示カード:カレンダー
      クリックして拡大
      縦型の表示カード:WeatherTemplate(ダークモード)
      クリックして拡大

      NowPlayingカード

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

      1. 「ジャズの曲をかけて」
      2. 「「Smoke & Retribution」をかけて」
      3. 「iHeartRadioで「ヤバイ経済学」をかけて」
      4. 「[third-party music provider]でカントリーの局をかけて」


      タブレット向け表示カード:NowPlaying
      クリックして拡大

      VUI再生コマンド

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

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

      グローバル要素

      Alexaは、メディアクエリに対してNowPlaying GUIを表示します。このセクションのすべてのNowPlayingカードには、以下のグローバル要素が含まれます。

      タブレット向け表示カード:NowPlayingのグローバル要素
      クリックして拡大

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

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

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

      3. プログレスバー:ほぼすべての種類のメディアで表示されます。

      4. 割り込みボタン(Alexaロゴ):このボタンは、いつでもタップしてAlexaを起動し、話しかけることができます。

      5. 「X」ボタン:「X」をタップすると、GUIが非表示になり再生が停止されます。

      6. メディアのアートワーク:アルバムの画像、ラジオ局のロゴ、番組のロゴ、本の画像が表示されます。

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

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

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

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

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

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

      対話

      以下は、Alexaとの対話中にユーザーに表示される画面状態の例です。

      タブレット向け表示カード:NowPlayingの対話
      クリックして拡大

      ステップ1:呼び出し

      ユーザーは、ウェイクワード「アレクサ」か、デバイス上のコントロール(デバイスによって異なる)を使ってAlexaを起動します。これにより、Voice Chromeが起動され、Alexaが聞き取り中であると表示されます。

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

      Voice Chromeが呼び出されると、ユーザーはAlexaを音声で操作できるようになります。発話を認識した場合、Alexaはインテントを処理してGUIを表示します。5秒以内にユーザーの発話を何も聞き取れなかった場合、Voice Chromeは表示されなくなります。

      ステップ3:応答と消去

      メディアリクエストに応じて、AlexaはNowPlaying GUI、メディアメタデータ、再生コントロールを表示します。

      ユーザーが次の操作を行うと、以下のように動作します。

      • 「X」をタップするか、デバイスのコントロールでカードから移動してGUIを消去した場合、カードが消去され、オーディオも停止します。注:デバイスがデバイス上の別の場所にある再生コントロールをサポートする場合(その他の再生コントロールを参照)、「X」がタップされると、GUIのみを消去して、楽曲の再生は継続できます。
      • 音声またはボタンにより楽曲の一時停止または停止を行った場合、楽曲を停止し、表示カードは表示したままにします。表示カードは、1分間何もアクションがなかった場合に自動消去する必要があります。
      • 楽曲の再生中にAlexaが再度起動された場合、楽曲の音量を下げてVoice Chromeを再表示し、次のコマンドを待機します。

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

      仕様

      スタイル

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

      レイアウト

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

      注:メディアアートワークはコンテナの形状によって制約されます。画面サイズを超えることはできません。アートワークが四角形ではない場合、またはコンテナのサイズより小さい場合、コンテナ内で水平および垂直方向に中央揃えする必要があります。

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

      注:

      1. 出典・著者の情報は1行で表示し、mainTitleは最大2行で表示できます。mainTitleが2行を超える場合、テキストは割愛され、三点リーダーが表示されます。
      2. コンテンツが最大行数を超える場合、超える部分のテキストは割愛され、三点リーダーが表示されます。
      3. mainTitleが2行以上ある場合、titleSubtext1とtitleSubtext2は下に移動して表示が調整されます。コントロールとプログレスバーは移動しません。

      データ

      タブレット向け表示カード:NowPlayingのデータ
      クリックして拡大

      例1:Amazon Music

      「アレクサ、「Smoke & Retribution」をかけて」

      タブレット向け表示カード:Amazon Musicを再生中
      クリックして拡大

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

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

      
      {
        "directive": {
          "header": {
            "namespace": "TemplateRuntime",
            "name": "RenderPlayerInfo",
            "messageId": "",
            "dialogRequestId": ""
          },
          "payload": {
            "audioItemId": "",
            "content": {
              "title": "",
              "titleSubtext1": "",
              "titleSubtext2": "",
              "header": "",
              "headerSubtext1": "",
              "mediaLengthInMilliseconds": ,
              "art": ,
              "provider": {
                "name": "",
                "logo": 
              }
            }
            "controls": [
              // This array includes all controls that must be
              // rendered on-screen.
              {
                "type": "",
                "name": "",
                "enabled": ,
                "selected": 
              },
              {
                "type": "",
                "name": "",
                "enabled": ,
                "selected": 
              },
              {
                ...
              }
            ]
          }
        }
      }
      
      

      例2:iHeartRadioのライブラジオ

      「アレクサ、iHeartRadioで「Hollywood Breakdown」をかけて」

      タブレット向け表示カード: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
              },
            ]
          }
        }
      }
      
      

      Controls-Onlyテンプレート

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

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

      Controls-Onlyテンプレート

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

      スタイル

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

      レイアウト

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

      データ

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

      ネイティブの再生コントロール

      タブレットの多くは、ユーザーの通知パネルやユニバーサルアクセスが可能なパネルで再生コントロールをサポートしています。デバイスがこのようなフレームワークをネイティブでサポートする場合、Alexaからの楽曲再生にこれらのコントロールをサポートする必要があります。

      この再生コントローラーでは、次のメタデータを表示する必要があります。

      • art(アルバムの画像)
      • title
      • titleSubtext1
      • プロバイダー名
      • その他の適用される再生コントロール

      メタデータをタップすると、再生中の楽曲のNowPlaying GUIをユーザーに返す必要があります。

      表示カード切り替え

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

      表示カードは、表示されたときと逆の方向に消去します。まずテキストをフェードアウトしてから表示カードを消します。

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

      割り込みのシナリオ

      以下は、Alexaの応答に割り込んだ場合にユーザーに表示される状態の例です。

      カード間

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

      ステップ1:発話1

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

      ステップ2:TTS1 + GUI1

      Alexaが応答します。

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

      ユーザーが(タップまたはウェイクワードにより)Alexaに割り込むと、Alexaは発話を停止し、Voice Chromeが既存のカード上に重なって表示されます。

      ステップ4:TTS2 + GUI2

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

      NowPlayingから表示カード

      タブレット向け表示カード:割り込みのシナリオ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

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

      ステップ1:発話1

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

      ステップ2:TTS2 + GUI1

      Alexaが応答します。

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

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

      ステップ4:TTS + GUI2

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

      NowPlayingからエラー

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

      ステップ1:発話1

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

      ステップ2:TTS2 + GUI1

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

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

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

      ステップ4:GUI1

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

      アセット

      これらのリソースは、表示カードと併せて使用できます。

      解像度が1280x800dp以上のタブレットでは、以下の大きいアセットを使用することをお勧めします。低解像度のタブレットでは、小さいアセットを使用します。極端に高いまたは低い解像度の場合は、必要に応じてアセットを拡大・縮小できます。

      Alexa

      再生コントロール

      以下は、メディア再生コントロール用のアセットです。

      再生

      一時停止

      Alexaフォント

      Alexa関連の画面や機能には、以下のフォントファミリーを使用します。

      • Amazon Ember Display
      • Bookerly
      • Noto Sans CJK

      Bookerlyは主に使い方の例に使用し、Noto Sans CJKは中国語、日本語、韓国語の言語サポートとして提供されています。Amazon Ember DisplayとBookerlyは、Alexa関連の用途のみに予約されています。

      Amazonフォントファイルは、Amazon開発者ポータル(ログインが必要)のリソースタブで入手できます。