Displayテンプレートのリファレンス

Displayテンプレートのリファレンス

このリファレンスでは、スキルの応答に含めるとAlexaスキルの画面表示を作成できるDisplayテンプレートについて、具体的な情報をお伝えします。Displayインタフェースのディレクティブおよびリクエストの詳細については、Displayインタフェースのリファレンスを参照してください。

BodyテンプレートとListテンプレートは、さまざまな表現をサポートするよう設計されています。以下の動作は各テンプレートで共通です。

  • textContentフィールドには、primaryText、secondaryText、tertiaryTextを記載します。

  • 各Listテンプレートには、リスト項目を少なくとも1つ含める必要があります。

  • BodyTemplate2、BodyTemplate6、ListTemplate2には、Hintディレクティブを用いてヒントを含めることができます。Hintディレクティブを参照してください。

  • Echo ShowとFire TV Cubeでは、各テンプレートに戻るボタンがデフォルトで表示されますが、非表示にすることもできます。Echo Spotでは戻るボタンは表示されませんが、左から右へ大きくスワイプすることで同じ操作を行うことができます。戻るボタンオブジェクトを参照してください。

以下に示す画像はスケール調整されていないため、実際にデバイスで見る画像とは完全には一致しない可能性があります。

タイトルが表示されるときは、通常はヘッダーとして表示され、テンプレートまたはデバイスによって左揃えか中央揃えになります。

シンプルテキストと画像表示用のBodyTemplate1

推奨：Displayテンプレート（廃止）の代わりにAPLを使用するには

APLドキュメントを作成し、次のAPLレスポンシブ対応テンプレートのいずれかを使用します。

  • AlexaHeadlineは背景上に短いテキストを表示します。
  • AlexaDetailは背景上に長いテキストを表示します。レイアウトはスクロールするため、テキストが長くても割愛されることはありません。

詳細については、Displayテンプレートからレスポンシブ対応テンプレートに移行するを参照してください。

画像表示と短い中央揃えテキスト用のBodyTemplate2

推奨：Displayテンプレート（廃止）の代わりにAPLを使用するには

APLドキュメントを作成し、AlexaDetailレスポンシブ対応テンプレートを使用して、テキストをフォアグラウンド画像とともに表示します。

詳細については、Displayテンプレートからレスポンシブ対応テンプレートに移行するを参照してください。

画像表示と短い左揃えテキスト用のBodyTemplate3

推奨：Displayテンプレート（廃止）の代わりにAPLを使用するには

APLドキュメントを作成し、AlexaDetailレスポンシブ対応テンプレートを使用して、テキストをフォアグラウンド画像とともに表示します。

詳細については、Displayテンプレートからレスポンシブ対応テンプレートに移行するを参照してください。

テキストとオプションの背景画像用のBodyTemplate6

推奨：Displayテンプレート（廃止）の代わりにAPLを使用するには

APLドキュメントを作成し、AlexaHeadlineレスポンシブ対応テンプレートを使用して、短いテキストをバックグラウンド画像とともに表示します。

詳細については、Displayテンプレートからレスポンシブ対応テンプレートに移行するを参照してください。

スケール調整可能な前面画像とオプションの背景画像用のBodyTemplate7

推奨：Displayテンプレート（廃止）の代わりにAPLを使用するには

APLドキュメントを作成し、同様の表示を作成するために、次のレスポンシブ対応コンポーネントを組み合わせます。

  • AlexaBackgroundを使用すると背景画像を表示できます。
  • AlexaHeaderを使用すると画面上部にテキストを表示できます。
  • AlexaImageを使用すると拡張可能な前景画像を表示できます。

たとえば、オーサリングツールで新しいAPLドキュメントを作成し、画像表示サンプルを選択します。

箇条書きとオプション画像用のListTemplate1

推奨：Displayテンプレート（廃止）の代わりにAPLを使用するには

APLドキュメントを作成し、AlexaTextListレスポンシブ対応テンプレートを使用して、テキスト項目の垂直スクロールリストを表示します。リスト項目には画像のサムネイルと情報の複数フィールドを含めることができます。

詳細については、Displayテンプレートからレスポンシブ対応テンプレートに移行するを参照してください。

画像リストとオプションテキスト用のListTemplate2

推奨：Displayテンプレート（廃止）の代わりにAPLを使用するには

APLドキュメントを作成し、listImagePrimacyをtrueに設定してAlexaListsレスポンシブ対応テンプレートを使用して、画像項目を水平リストに表示します。

詳細については、Displayテンプレートからレスポンシブ対応テンプレートに移行するを参照してください。

Displayテンプレートの要素

次の表に、Displayテンプレートで使用するすべての要素を示します。ただし、テンプレートによっては一部の要素のみを使用します。

要素 説明 値／例
typeテンプレートの名前BodyTemplate1
BodyTemplate2
BodyTemplate3
BodyTemplate6
BodyTemplate7
ListTemplate1
ListTemplate2
tokenスキルサービスコード内の選択可能要素を追跡するために使用します。値には任意のユーザー定義の文字列を設定できます。Dog-List-2
1212323312
backButton戻るボタンをDisplayテンプレートに配置するために使用します。HIDDEN
VISIBLE
backgroundImage背景画像をDisplayテンプレートに含めるために使用します。 
{
    "contentDescription": "string",
    "sources": [
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {...}
    ]
}
titleDisplayテンプレートのタイトルを指定するために使用します。値には任意のユーザー定義の文字列を設定できます。"犬のメリーゴーラウンド"
"ケーキのレシピいろいろ"
textContentprimaryText、secondaryText、tertiaryTextを記載します。 
{
    "primaryText": ...,
    "secondaryText": ...,
    "tertiaryText": ...
}
primaryText type（PlainTextまたはRichTextを指定）およびtext（文字列を指定）を入力します。文字数の上限は8,000文字です。 
{
    "text": "string",
    "type": "PlainText" | "RichText"
}
secondaryText type（PlainTextまたはRichTextを指定）およびtext（文字列を指定）を入力します。文字数の上限は8,000文字です。 
{
    "text": "string",
    "type": "PlainText" | "RichText"
}
tertiaryText type（PlainTextまたはRichTextを指定）およびtext（文字列を指定）を入力します。文字数の上限は8,000文字です。 
{
    "text": "string",
    "type": "PlainText" | "RichText"
}
image 画像を参照し、説明を入力します。画像には複数のソースを指定できます。「backgroundImage」と「image」の書式は同じです。 
{
    "contentDescription": "string",
    "sources": [
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {...}
    ]
}
listItemsリスト項目のテキストと画像を記載します。 
  [
    {
      "token": "string",
      "image": "Image",
      "textContent": "TextContent"
    },
    ...
    ...
    {
      "token": "string",
      "image": "Image",
      "textContent": "TextContent"
    }
  ]

その他のリソース

テンプレート関連の情報については、以下を参照してください。

画面表示に対応したスキルを開発するには、以下を参照してください。