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

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

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

textContentフィールドには、primaryText、secondaryText、tertiaryTextを記載します。
各Listテンプレートには、リスト項目を少なくとも1つ含める必要があります。
BodyTemplate2、BodyTemplate6、ListTemplate2には、Hintディレクティブを用いてヒントを含めることができます。Hintディレクティブを参照してください。
Echo ShowとFire TV Cubeでは、各テンプレートに戻るボタンがデフォルトで表示されますが、非表示にすることもできます。Echo Spotでは戻るボタンは表示されませんが、左から右へ大きくスワイプすることで同じ操作を行うことができます。戻るボタンオブジェクトを参照してください。

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

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

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

BodyTemplate1の構文

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

BodyTemplate1のガイダンス

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

BodyTemplate1のデバイスごとの違い

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

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

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の表示形式は同じです。
スクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。
背景画像に商標などの重要な情報を含めないでください。

表示内容

Echo ShowおよびFire TV Cube	Echo Spot
タイトルテキストは左揃えスキルアイコン左配置のテキストビュー、左揃え、デフォルトのフォントサイズは3、スクロール不可右配置の前景画像ヒント（オプション）アクションリンク（オプション）背景画像（オプション）	タイトルテキストなしスキルアイコン左配置のテキストビュー、中央揃え、デフォルトのフォントサイズは3、スクロール可能（必要な場合）、テキストは最前面に配置前景画像は背景画像になり、不透明度70%の黒色のレイヤーが重ねて表示されます。アクションリンク（オプション）背景画像（オプション）です。前景画像がない場合または前景画像の背景が透明に設定されている場合に表示されます。

Echo ShowおよびFire TV Cube

Echo Spot

タイトルテキストは左揃え
スキルアイコン
左配置のテキストビュー、左揃え、デフォルトのフォントサイズは3、スクロール不可
右配置の前景画像
ヒント（オプション）
アクションリンク（オプション）
背景画像（オプション）

タイトルテキストなし
スキルアイコン
左配置のテキストビュー、中央揃え、デフォルトのフォントサイズは3、スクロール可能（必要な場合）、テキストは最前面に配置
前景画像は背景画像になり、不透明度70%の黒色のレイヤーが重ねて表示されます。
アクションリンク（オプション）
背景画像（オプション）です。前景画像がない場合または前景画像の背景が透明に設定されている場合に表示されます。

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

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

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ではテキストが左揃えになります。
スクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。
背景画像に商標などの重要な情報を含めないでください。

表示内容

Echo ShowおよびFire TV Cube	Echo Spot
タイトルテキストスキルアイコン右配置のテキストビュー、左揃え、スクロール可能（必要な場合）、デフォルトのフォントサイズは3 左配置の前景画像アクションリンク（オプション）背景画像（オプション）	タイトルテキストなしスキルアイコンテキストビューは左配置、左揃え、デフォルトのフォントサイズは3、スクロール可能（必要な場合）、テキストは最前面に配置されます。前景画像は背景画像になり、不透明度70%の黒色のレイヤーが重ねて表示されます。アクションリンク（オプション）背景画像（オプション）

Echo ShowおよびFire TV Cube

Echo Spot

タイトルテキスト
スキルアイコン
右配置のテキストビュー、左揃え、スクロール可能（必要な場合）、デフォルトのフォントサイズは3
左配置の前景画像
アクションリンク（オプション）
背景画像（オプション）

タイトルテキストなし
スキルアイコン
テキストビューは左配置、左揃え、デフォルトのフォントサイズは3、スクロール可能（必要な場合）、テキストは最前面に配置されます。
前景画像は背景画像になり、不透明度70%の黒色のレイヤーが重ねて表示されます。
アクションリンク（オプション）
背景画像（オプション）

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

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

表示内容

Echo ShowおよびFire TV Cube	Echo Spot
スキルアイコン下配置のフルワイドのテキストビュー（最大2～3行）、左揃え、デフォルトのフォントサイズは7、スクロール不可ヒント（オプション）背景画像（オプション）	スキルアイコン中央配置のテキストビュー、中央揃え、スクロール可能（必要な場合）、デフォルトのフォントサイズは7 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

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

表示内容

Echo ShowおよびFire TV Cube	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

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

表示内容

Echo ShowおよびFire TV Cube	Echo Spot
タイトルテキストスキルアイコンリスト項目第1テキスト、デフォルトのフォントサイズは7 第2テキスト（オプション）、デフォルトのフォントサイズは3 第3テキスト（オプション）、デフォルトのフォントサイズは5 画像（オプション）背景画像（オプション）	タイトルテキストスキルアイコンリスト項目第1テキスト、デフォルトのフォントサイズは7 第2テキスト（オプション）、デフォルトのフォントサイズは3 第3テキスト（オプション）、デフォルトのフォントサイズは3 画像（オプション）背景画像（オプション）

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

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

表示内容

Echo ShowおよびFire TV Cube	Echo Spot
タイトルテキストスキルアイコンリスト項目第1テキスト、デフォルトのフォントサイズは2 第2テキスト（オプション）、デフォルトのフォントサイズは24sp（未定義のフォントサイズ）画像（正方形、縦向き、4:3または16:9）背景画像（オプション）ヒント	タイトルテキストなしスキルアイコンリスト項目第1テキスト、デフォルトのフォントサイズは7 第2テキスト（オプション）、デフォルトのフォントサイズは2 リスト項目の画像は背景画像になり、不透明度70%の黒色のレイヤーが重ねて表示されます。背景画像（オプション）

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

次の表に、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 }, {...} ] }`
`title`	Displayテンプレートのタイトルを指定するために使用します。値には任意のユーザー定義の文字列を設定できます。	`"犬のメリーゴーラウンド"` `"ケーキのレシピいろいろ"`
`textContent`	`primaryText`、`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" } ]`

その他のリソース

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

適切なテンプレートの選択と実装に関するガイダンスについては、表示に適したテンプレートの選択を参照してください。
テンプレートで使用できる文字数の詳細については、Displayテンプレートの最大文字数を参照してください。
テンプレートごとに適した画像サイズと形状の詳細については、各テンプレートの表示画像サイズを参照してください。

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

画面をサポートするAlexaスキルの作成に関するクイックスタートガイドについては、画面付きのAlexa搭載デバイスでAlexaスキルをビルドする方法を参照してください。
画面付きのAlexa搭載デバイス用のスキルの作成
デザインガイダンスについては、画面付きのAlexa搭載デバイス向けスキルデザインのベストプラクティスを参照してください。
デバイスの表示と動作の仕様については、画面付きのAlexa搭載デバイスの表示と動作の仕様を参照してください。
Displayインターフェースの使用方法については、Displayインターフェースのリファレンスを参照してください。

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

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

BodyTemplate1の構文

BodyTemplate1のガイダンス

BodyTemplate1のデバイスごとの違い

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

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

BodyTemplate2の構文

BodyTemplate2のガイドライン

表示内容

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

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

BodyTemplate3の構文

BodyTemplate3のガイドライン

表示内容

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

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

BodyTemplate6の構文

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

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

BodyTemplate7の構文

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

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

ListTemplate1の構文

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

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

ListTemplate2の構文

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

Displayテンプレートの要素

その他のリソース

Alexa Skills Kit

Resources

Alexa Voice Service

AVS Resources

Connected Devices

Agreements

Blogs

Support