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

BodyTemplate1の構文

{
  "type":"BodyTemplate1",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": Image,
  "title": "string",
  "textContent": TextContent
}

BodyTemplate1のガイダンス

• このテンプレートでは、フルワイドの前景画像はサポートされません。こうした画像を使用する場合は、BodyTemplate7を使用してください。
• サイズが異なるデバイスでは、デフォルトフォントサイズ7での行の長さが違うため、テキストの折り返し方が異なります。
• スクロールが必要な場合は、本文のテキストはタッチしてスクロールするようにし、スキルアイコンとヘッダーテキストは固定されます。

BodyTemplate1のデバイスごとの違い

異なるデバイスでのBodyTemplate1

デバイスごとの表示の比較 – BodyTemplate1

デバイスごとの表示の違いを表示／非表示

Echo ShowとEcho Spotに表示されるスキル

BodyTemplate1のワイヤフレーム表示

Fire TV Cube

Echo Show

Echo Spot

BodyTemplate2の構文

{
  "type": "BodyTemplate2",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "image": Image,
  "textContent": TextContent
}

BodyTemplate2のガイドライン

• BodyTemplate2は、画像に少量のテキストを付記する場合に使用します。
• コンテンツは短く簡潔にし、VUIの代わりではなく、あくまで補足として使用してください。
• Echo ShowとFire TV Cubeで左右に並べて表示されるコンテンツは、Echo Spotでは上下に並べて表示されます。画像が背景になり、テキストがその上に重ねられます。
• Echo Spotではヒントは表示されません。
• BodyTemplate2ではテキストが自動で中央揃えになる点を除き、Echo SpotでのBodyTemplate2とBodyTemplate3の表示形式は同じです。
• スクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。
• 背景画像に商標などの重要な情報を含めないでください。

表示内容

デバイスごとの表示の比較 – BodyTemplate2

デバイスごとの表示の違いを表示／非表示

Echo ShowとEcho Spotに表示されるスキル

BodyTemplate2のワイヤフレーム表示

Fire TV Cube

Echo Show

Echo Spot

BodyTemplate3の構文

{
  "type": "BodyTemplate3",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "image": Image,
  "textContent": TextContent
}

BodyTemplate3のガイドライン

• Echo ShowとFire TV Cubeで左右に並べて表示されるコンテンツは、Echo Spotでは上下に並べて表示されます。画像が背景になり、テキストがその上に重ねられます。
• Echo SpotではBodyTemplate2とBodyTemplate3の表示形式は同じです。BodyTemplate3ではテキストが左揃えになります。
• スクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。
• 背景画像に商標などの重要な情報を含めないでください。

表示内容

デバイスごとの表示の比較 – BodyTemplate3

デバイスごとの表示の違いを表示

Echo ShowとEcho Spotに表示されるスキル

BodyTemplate3のワイヤフレーム表示

Fire TV Cube

Echo Show

Echo Spot

表示内容

BodyTemplate6の使用ガイドラインは次のとおりです。

• Echo Spotではヒントは表示されません。
• Echo Spotでは、背景画像はアスペクト比に応じて縮小され、利用可能な表示領域の中央に表示されます。たとえば、Echo Showで1024 x 600ピクセルの背景画像は、Echo Spotでは819 x 480ピクセルに縮小されます。このため、Echo Spotでは背景画像の一部が表示されない場合があります。
• Echo Spotでスクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。

BodyTemplate6の構文

{
  "type": "BodyTemplate6",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": Image,
  "image": "Image",
  "textContent": TextContent
}

デバイスごとの表示の比較 – BodyTemplate6

デバイスごとの表示の違いを表示

Echo ShowとEcho Spotに表示されるスキル

BodyTemplate6のワイヤフレーム表示

Fire TV Cube

Echo Show

Echo Spot

表示内容

BodyTemplate7の使用ガイドラインは次のとおりです。

• BodyTemplate7は、画面付きAlexa搭載デバイスのスケール調整可能な前景画像をサポートしています。
• Echo Spotでは、前景画像は元のアスペクト比を維持したまま適切にスケール調整され、表示領域内の中央に表示されます。

BodyTemplate7の構文

{
  "type": "BodyTemplate7",
  "token": "SampleTemplate_3476",
  "backButton": "VISIBLE",
  "title": "Sample BodyTemplate7",
  "backgroundImage": {
    "contentDescription": "テクスチャ加工された灰色の背景",
    "sources": [
      {
        "url": "https://www.example.com/background-image1.png"
      }
    ]
  },
  "image": {
    "contentDescription": "マウントへレンズ山の風景",
    "sources": [
      {
        "url": "https://example.com/resources/card-images/mount-saint-helen-small.png"
      }
    ]
  }
}

デバイスごとの表示の比較 – BodyTemplate7

デバイスごとの表示の違いを表示

Echo ShowとEcho Spotに表示されるスキル

前景画像が透過されている場合は視覚効果が異なり、以下のようになります。

BodyTemplate7のワイヤフレーム表示

Fire TV Cube

Echo Show

Echo Spot

表示内容

ListTemplate1の使用ガイドラインは次のとおりです。

• このテンプレートは、画像が主要コンテンツではないリストに使用します。
• リスト項目は、タッチで選択可能にし、かつ第1テキストまたは序数を使用して音声で選択可能にするようにしてください。
• サムネイル画像を使用する場合、テキスト領域が縮小されます。
• 画面に表示しきれないテキストがある場合、省略記号が表示されます。

ListTemplate1の構文

{
  "type": "ListTemplate1",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "listItems": [
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
    ...
    ...
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    }
  ]
}

デバイスごとの表示の比較 – ListTemplate1

デバイスごとの表示の違いを表示

Echo ShowとEcho Spotに表示されるスキル

ListTemplate1のワイヤフレーム表示

表示内容

ListTemplate2の使用ガイドラインは次のとおりです。

• このテンプレートは、画像が主要コンテンツであるリストに使用します。
• リスト項目は、タッチで選択可能にし、かつ第1テキストまたは序数を使用して音声で選択可能にするようにしてください。
• リスト項目のコンテンツ内でアクションリンクを入れ子にしないでください。入れ子にすると、アクションリンクを選択できなくなります。また、Echo Spotで表示されなくなる可能性があります。
• 特にEcho Spotではテキストの一部が切れるため、ユーザーに選択内容がわかるよう、画面に表示される第1テキストは具体的なものにしてください。
• 1度に画面に表示されるリスト項目は1つのみです。
• 現状では、テキストは前景画像の前面に下揃えで表示されます。
• Echo Spotではヒントは表示されません。
• 画面に表示しきれないテキストがある場合、省略記号が表示されます。

ListTemplate2の構文

{
  "type": "ListTemplate2",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": "Image",
  "title": "string",
  "listItems": [
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
    ...
    ...
    {
      "token": "string",
      "image": Image,
      "textContent": TextContent
    },
  ]
}

デバイスごとの表示の比較 – ListTemplate2

デバイスごとの表示の違いを表示

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

{
    "contentDescription": "string",
    "sources": [
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {...}
    ]
}

{
    "primaryText": ...,
    "secondaryText": ...,
    "tertiaryText": ...
}

{
    "text": "string",
    "type": "PlainText" | "RichText"
}

{
    "text": "string",
    "type": "PlainText" | "RichText"
}

{
    "text": "string",
    "type": "PlainText" | "RichText"
}

{
    "contentDescription": "string",
    "sources": [
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {...}
    ]
}

  [
    {
      "token": "string",
      "image": "Image",
      "textContent": "TextContent"
    },
    ...
    ...
    {
      "token": "string",
      "image": "Image",
      "textContent": "TextContent"
    }
  ]