Displayインターフェースとテンプレートリファレンス



Displayインターフェースとテンプレートリファレンス

Echo ShowおよびEcho Spotの画面表示に対応したスキルを作成する方法については、画面のあるEchoデバイス用のスキルの作成を参照してください。

このリファレンスでは、スキルサービスコードの表示テンプレートを使用して、スキルの外観と操作感を想定どおりに設定する方法について説明します。ただし、ユーザーの多くは画面がサポートされていないEchoデバイスを使用するため、スキルは必ず音声での使用を一番に考えてデザインしてください。

関連トピック:

 

画面表示に対応したスキル用の各種表示テンプレート

開発したスキルに画面表示を含めるには、スキルサービスコードで表示テンプレートを使用する必要があります。これらのテンプレートは、柔軟性の高いスキル開発ができるよう作成されています。

各テンプレートにはJSON表現が含まれており、画面へ送信するスキルの応答に必要に応じて含めることができます。

Alexa Skills Kitには2つのカテゴリーの表示テンプレートがあり、各カテゴリーには明確に定義されたテンプレートが複数含まれています。

  • 本文テンプレートは、テキストと画像を表示するものです。画像を選択可能には設定できません。
  • リストテンプレートは、スクロール可能な項目リストと、各項目にテキストおよび省略可能な画像を付記して表示するものです。画像は、このリファレンスで説明するように選択可能に設定できます。

これらのテンプレートはそれぞれテキストと画像のサイズ、数、配置およびリストをスクロールしたときの挙動が異なり、各テンプレートに規定の構造が設定されています。テンプレートは、一貫したユーザーエクスペリエンスが得られるよう綿密に設計されています。

スキル開発で表示テンプレートを含む応答を構築するときには、テンプレート、テキスト、および画像を指定します。これにより、目的のユーザーエクスペリエンスを自由に設定できます。

テンプレートインターフェース(JSON)とデザイン

各テンプレートのJSONインターフェースでは、テキストフィールドおよび画像フィールドの文字列は空白またはnullに設定できます。ただし、リストテンプレートにはリスト項目を少なくとも1つ含める必要があります。

Amazon開発者ポータルでスキルに指定したスキルアイコンは、どのテンプレートでも、サイズが変更されて右上隅に自動で表示されます。このスキルアイコンは、必要に応じてポータルで変更できます。

各本文テンプレートは、以下の汎用インターフェースに準拠しています。

  • 本文テンプレートのインターフェース
{
  "type": "string",
  "token": "string"
}

各リストテンプレートは、以下の汎用インターフェースに準拠しています。

  • リストテンプレートのインターフェース
{
  "type": "string",
  "token": "string",
  "listItems": [ ]
}

Display.RenderTemplateディレクティブの形式

templateアトリビュートでは、使用するテンプレート、およびテンプレートの表示時に使用する対応データすべてを指定します。以下は、Display.RenderTemplateディレクティブを含むdirectivesオブジェクトの書式を示したものです。typeプロパティには、この例のBodyTemplate1のように、テンプレート名を値として指定します。templateのその他のプロパティは、typeの値に応じて変化します。

{
  "directives": [
    {
      "type": "Display.RenderTemplate",
      "template": {
        "type": "BodyTemplate1",
        "token": "string",
        "backButton": "VISIBLE",
        "backgroundImage": "Image",
        "title": "string",
        "textContent": {
          "primaryText": {
            "text": "string",
            "type": "string"
          },
          "secondaryText": {
            "text": "string",
            "type": "string"
          },
          "tertiaryText": {
            "text": "string",
            "type": "string"
          }
        }
      }
    }
  ]
}

他のテンプレートの書式については、表示テンプレートのリファレンスを参照してください。

応答でのDisplay.RenderTemplateとその他のディレクティブ

参考として、DisplayHintの各ディレクティブを含めた応答本文を以下に示します。

AudioPlayerディレクティブとVideoAppディレクティブは併用できません。

{
  "version": "string",
  "sessionAttributes": {
    "string": "<object>"
  },
  "response": {
    "outputSpeech": {
      "type": "string",
      "text": "string",
      "ssml": "string"
    },
    "card": {
      "type": "string",
      "title": "string",
      "content": "string",
      "text": "string",
      "image": {
        "smallImageUrl": "string",
        "largeImageUrl": "string"
      }
    },
    "reprompt": {
      "outputSpeech": {
        "type": "string",
        "text": "string",
        "ssml": "string"
      }
    },
    "directives": [
      {
        "type": "Display.RenderTemplate",
        "template": {
          "type": "string"
        }
      },
      {
        "type": "Hint",
        "hint": {
          "type": "PlainText",
          "text": "string"
        }
      }
    ],
    "shouldEndSession": boolean
  }
}

例: 応答にBodyTemplate2を含める場合のディレクティブ

次に示す本文テンプレートでは、Echo Showに「お気に入りの車」というタイトル、左上に戻るボタン、右上にスキルアイコン、および必要に応じてこのテンプレートに合わせてサイズの調整された画像が右側に表示されます。戻るボタンと背景画像は任意ですが、この例ではディレクティブに含めています。

{
  "type": "Display.RenderTemplate",
  "template": {
    "type": "BodyTemplate2",
    "token": "A2079",
    "backButton": "VISIBLE",
    "backgroundImage": {
      "contentDescription": "Textured grey background",
      "sources": [
        {
          "url": "https://www.example.com/background-image1.png"
        }
      ],
      "title": "お気に入りの車",
      "image": {
        "contentDescription": "お気に入りの車",
        "sources": [
          {
            "url": "https://www.example.com/my-favorite-car.png"
          }
        ]
      },
      "textContent": {
        "primaryText": {
          "text": "お気に入りの車を見て",
          "type": "PlainText"
        },
        "secondaryText": {
        "text": "カスタム塗装",
          "type": "PlainText"
        },
        "tertiaryText": {
          "text": "私が作成しました!",
          "type": "PlainText"
        }
      }
    }
  }
}

表示テンプレートのリファレンス

本文テンプレートとリストテンプレートは、さまざまな表現をサポートするよう設計されています。

textContentフィールドには、primaryTextsecondaryTexttertiaryTextを記載します。

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

BodyTemplate3およびListTemplate1を除く各テンプレートには、Hintディレクティブを用いてヒントを含めることができます。Hintディレクティブを参照してください。

Echo Showでは、各テンプレートに戻るボタンがデフォルトで表示されますが、非表示にすることもできます。Echo Spotでは戻るボタンは表示されませんが、左から右へ大きくスワイプすることで同じ操作を行うことができます。関連トピック: 戻るボタンオブジェクト

関連トピック:

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

Echo ShowEcho Spot
  • 左揃えのヘッダーテキスト
  • スキルアイコン
  • フルワイドのテキストビュー、左上揃え、デフォルトのフォントサイズは7、スクロール可能(必要な場合)
  • 小さいインライン画像を利用可能
  • 背景画像(オプション)
  • 中央揃えのヘッダーテキスト
  • スキルアイコン
  • テキストビュー、左上揃え、デフォルトのフォントサイズは7、スクロール可能(必要な場合)
  • 小さいインライン画像を利用可能
  • 背景画像(オプション)

ガイドライン:

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

BodyTemplate1の構文

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

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

短いテキストが設定されたBodyTemplate1
短いテキストが設定されたBodyTemplate1
長いスクロールテキストが設定されたBodyTemplate1
長いスクロールテキストが設定されたBodyTemplate1
Echo ShowEcho Spot
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Spotのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Showのスクロールテキスト
Echo Showのヘッダーテキスト
Echo Spotのスクロールテキスト

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

表示内容

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

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

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

BodyTemplate2の構文

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

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

BodyTemplate2
BodyTemplate2
Echo ShowEcho Spot
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Spotではヘッダーテキストは非表示
Echo Spotではヘッダーテキストは非表示
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Spotではヘッダーテキストは非表示
Echo Spotではヘッダーテキストは非表示

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

表示内容

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

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

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

BodyTemplate3の構文

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

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

BodyTemplate3
BodyTemplate3
Echo ShowEcho Spot
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Spotではヘッダーテキストは非表示
Echo Spotではヘッダーテキストは非表示
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Spotではヘッダーテキストは非表示
Echo Spotではヘッダーテキストは非表示

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

表示内容

Echo ShowEcho 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

BodyTemplate6
BodyTemplate6
Echo ShowEcho Spot
Echo Showの本文テキスト
Echo Showの本文テキスト
Echo Spotの本文テキスト、ヒント非表示
Echo Spotの本文テキスト、ヒント非表示

サイズ調整可能な前面画像とオプションの背景画像用のBodyTemplate7

表示内容

Echo ShowEcho Spot
  • ヘッダーテキスト
  • スキルアイコン
  • 前景画像用のスケール調整可能なフルワイドのイメージビュー
  • 背景画像(オプション)
  • ヘッダーテキスト
  • スキルアイコン
  • 前景画像用のスケール調整可能なフルワイドのイメージビュー
  • 背景画像(オプション)

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

  • BodyTemplate7は、Echo ShowおよびEcho Spotでスケール調整可能な前景画像をサポートします。
  • Echo Spotでは、前景画像は元のアスペクト比を維持したまま適切にスケール調整され、表示領域内の中央に表示されます。

BodyTemplate7の構文

{
  "type": "BodyTemplate7",
  "token": "SampleTemplate_3476",
  "backButton": "VISIBLE",
  "title": "Sample BodyTemplate7",
  "backgroundImage": {
    "contentDescription": "Textured grey background",
    "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

フルワイドの前景画像が設定されたBodyTemplate7
フルワイドの前景画像が設定されたBodyTemplate7
フルワイドの前景画像が設定されたBodyTemplate7
フルワイドの透過前景画像が設定されたBodyTemplate7
Echo ShowEcho Spot
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Showのヘッダーテキスト
Echo Spotのヘッダーテキスト

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

表示内容

Echo ShowEcho 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

Echo ShowおよびEcho Spotでの第1テキストと第2テキストが設定されたListTemplate1
Echo ShowおよびEcho Spotでの第1テキストと第2テキストが設定されたListTemplate1
第1テキスト、第2テキスト、第3テキストとオプションのリスト項目画像が設定されたListTemplate1
第1テキスト、第2テキスト、第3テキストとオプションのリスト項目画像が設定されたListTemplate1
Echo ShowEcho Spot
Echo Showのリスト
Echo Showのリスト
Echo Showのリスト
Echo Spotのリスト
Echo Showのリスト
Echo Showのリスト
Echo Showのリスト
Echo Spotのリスト

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

表示内容

Echo ShowEcho 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

正方形の画像が設定されたListTemplate2
正方形の画像が設定されたListTemplate2
縦長の画像が設定されたListTemplate2
縦長の画像が設定されたListTemplate2
Echo ShowEcho Spot
Echo Showのリスト
Echo Showのリスト
Echo Showのリスト
Echo Spotのリスト

表示テンプレートの要素

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

要素 説明 値/例
typeテンプレートの名前BodyTemplate1
BodyTemplate2
BodyTemplate3
BodyTemplate6
BodyTemplate7
ListTemplate1
ListTemplate2
tokenスキルサービスコード内の選択可能要素を追跡するために使用します。値には任意のユーザー定義の文字列を設定できます。Dog-List-2
1212323312
backButton戻るボタンを表示テンプレートに配置するために使用します。HIDDEN
VISIBLE
backgroundImage背景画像を表示テンプレートに含めるために使用します。
{
    "contentDescription": "string",
    "sources": [
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {
        "url": "string",
        "size": "string",
        "widthPixels": integer,
        "heightPixels": integer
      },
      {...}
    ]
}
title表示テンプレートのタイトルを指定するために使用します。値には任意のユーザー定義の文字列を設定できます。"犬のメリーゴーラウンド"
"ケーキのレシピいろいろ"
textContentprimaryTextsecondaryTexttertiaryTextを記載します。
{
    "primaryText": ...,
    "secondaryText": ...,
    "tertiaryText": ...
}
primaryText typePlainTextまたはRichTextを指定)およびtext(文字列を指定)を入力します。文字数の上限は8,000文字です。
{
    "text": "string",
    "type": "PlainText" | "RichText"
}
secondaryText typePlainTextまたはRichTextを指定)およびtext(文字列を指定)を入力します。文字数の上限は8,000文字です。
{
    "text": "string",
    "type": "PlainText" | "RichText"
}
tertiaryText typePlainTextまたは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"
    }
  ]

表示テンプレートのGUI仕様

Echo Showでスキルが正常に動作し適切に表示されるよう、以下の仕様を守ってください。

表示テンプレートごとの使用可能な画像サイズと書式

表示テンプレートで参照する画像は、次の要件を満たす必要があります。

  • 画像は、適切なファイル拡張子を持つJPEG形式またはPNG形式のものを使用できます。
  • 画像は2MB以下である必要があります。ただし、応答を高速化し待ち時間の問題に対処するため、背景画像は500KB以下、表示テンプレートで参照する他の画像は100KB以下にすることをお勧めします。画像は送信時に圧縮され、受信時に復元されます。
  • テンプレートは正方形画像と長方形画像のどちらにも対応しています。各テンプレートのアスペクト比は下表に記載されています。
  • 画像を含める場合、URLサイズを複数指定することをお勧めします。画像サイズは、目的のアスペクト比に一致し、表示時の画面のサイズではっきりとした画像が表示される最も小さいサイズが選択されます。以下の表の画面サイズを参照してください。適切なサイズの画像を指定していない場合、次に大きいサイズの画像が目的のスロットに合わせて縮小されて使用されます。縮小により画像の質が低下する可能性があるため、適切なサイズの画像を指定することを強くお勧めします。
  • 画像は、公的にアクセス可能なHTTPS URLにホストする必要があります。
  • 表示の最適化のため、画像の背景は透明にしてください(透過処理できる画像形式はPNGのみです)。
  • 背景を透明にすることで、画像を幅広い形状やサイズで表示できるようになります。
  • 見た目をムラなく高品質なものにするため、わずかなパターンまたは勾配がついた背景画像を使用することをお勧めします。
  • 画像とテキストのコントラストを最適にするため、背景画像には不透明度70%の黒いレイヤーを重ねることをお勧めします。

Echo Showテンプレートで使用する画像には、Alexaアプリのカード用画像に適用されるものと同じ制限も適用されます。画像の形式とサイズを参照してください。

Echo Show向けの各テンプレートの表示画像サイズ

次の表に、Echo Show向けの各テンプレートでサポートされる画像サイズを示します。backgroundImageフィールドの画像サイズは、Echo Showの画面 (1024ピクセル x 600ピクセル)。Echo Spotでは、これらの画像は適切に縮小されます。小さく拡大が必要になる画像では大きなデバイスでの見た目が悪くなるため、こうした画像は使用しないでください。

各テンプレートのimageフィールドで参照する画像は、以下のサイズになります。

テンプレート 表示サイズ(ピクセル):
最大高さ x 幅
ListTemplate1(縦並び)88 x 88
ListTemplate2(画像の下にテキストを配置した横並び) 高さは280ピクセルにしてください。目的のアスペクト比に応じて、幅は192ピクセルから498ピクセルの間にしてください。サポートされるアスペクト比は次のとおりです(幅 x 高さ)。
  • 縦長(192 x 280)
  • 正方形(280 x 280)
  • 4:3(372 x 280)
  • 16:9(498 x 280)
BodyTemplate1(フルワイドテキスト)インライン画像のみ
BodyTemplate2(画像は右配置)340 x 340
BodyTemplate3(画像は左配置)340 x 340
BodyTemplate6(テキストが重ねられたフルスクリーン画像)340 x 340

imageオブジェクトの仕様

表示テンプレートのimageオブジェクトの書式は以下のとおりです。カードの画像に使用するimageの書式とは異なることに注意してください。

contentDescriptionプロパティには、スクリーンリーダーで画像の説明に使用するテキストを指定します。sizewidthPixelsheightPixelsの各フィールドはオプションです。Echo Showの場合、デフォルトではsizeの値はX_SMALLになります。別のサイズ値を記載した場合、画像表示サイズの優先順位は大きい順であり、X_LARGEが最も高くなります。つまり、大きい画像が指定されている場合、Echo Showでの表示に合わせて縮小されます。ユーザーエクスペリエンスを最適化するため、適切なサイズの画像を指定し、これより大きい画像は含めないようにしてください。

widthPixelsおよびheightPixelsの整数値はオプションです。厳密に指定する場合以外は記載しないでください。

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

次の表に、sizeの値の一覧を示します。

プロパティ 説明 推奨サイズ(ピクセル)
幅 x 高さ
X_SMALL 非常に小さいコンテナ内に表示 480 x 320
SMALL 小さいコンテナ内に表示 720 x 480
MEDIUM 中サイズのコンテナ内に表示されます。 960 x 640
LARGE 大きいコンテナ内に表示されます。 1200 x 800
X_LARGE 非常に大きいコンテナ内に表示されます。 1920 x 1280

Echo Showテンプレートの戻るボタン

Echo Showではすべてのテンプレートで戻るボタンがサポートされますが、このボタンは非表示にすることもできます。Echo Spotでは戻るボタンは表示されません。ただし、このセクションでの説明に従いbackButtonオブジェクトを「VISIBLE」に設定すると、ユーザーは画面の左端から右へ大きくスワイプすることで同様の操作を行うことができます。

視覚コンポーネントのあるスキルによっては、戻るボタンを使用した方がスキル内のナビゲーションの自由度が高まります。ただし、クイズゲームなどのスキルに戻るボタンを含めると、ユーザーが戻るボタンを使用して回答済みの問題に戻ってしまうなど、不適切な動作や好ましくない動作の原因になる可能性があります。スキル開発時には、スキルに使用する表示テンプレートごとに戻るボタンを含めるかどうかを選択できます。戻るボタンは左上に表示されます。backButtonフィールドはすべての表示テンプレートで使用できます。

backButtonオブジェクトには「HIDDEN」または「VISIBLE」アトリビュートを指定できます。テンプレートの応答に含めない場合でも、戻るボタンはデフォルトでは画面に表示されます。

ユーザーが「戻る」といった場合には、スキル内でAMAZON.Previousインテントを呼び出した場合と同じ効果が得られます。

次の2つの例に、表示テンプレートを含む応答でのbackButtonオブジェクトの記載方法を示します。

例: 戻るボタンを表示テンプレートに表示しない

{
  "template": {
    "type": "BodyTemplate1",
    "textContent": {
      "primaryText": {
        "text": "お気に入りの車を見て",
        "type": "PlainText"
      },
      "secondaryText": {
        "text": "カスタム塗装",
        "type": "PlainText"
      },
      "tertiaryText": {
        "text": "私が作成しました!",
        "type": "PlainText"
      }
    },
    "backButton": "HIDDEN"
  }
}

例: 戻るボタンを表示テンプレートに表示する

{
  "template": {
    "type": "BodyTemplate1",
    "textContent": {
      "primaryText": {
          "text": "お気に入りの車を見て",
          "type": "PlainText"
      },
      "secondaryText": {
          "text": "カスタム塗装",
          "type": "PlainText"
      },
      "tertiaryText": {
          "text": "私が作成しました!",
          "type": "PlainText"
        }

    },
    "backButton": "VISIBLE"
  }
}

応答にHintディレクティブを含める

ヒントは、重要な情報を伝えるためではなく、ユーザーを楽しませる省略可能なコンテンツに使用してください。Hintディレクティブを応答で使用した場合、Echo Showではヒントが表示されますが、Echo Spotでは表示されません。このため、ヒントを使用するスキルは、ヒントがなくても良いように設計してください。

Hintディレクティブでは、Alexaに質問できる内容をユーザーへ知らせる文字列値を指定できます。ヒントテキストは、次の形式で画面に表示されます。

*"<wake-word>、<hint_String>を試してください"*

したがって、値に「上映されている映画を教えて」を設定し、ユーザーのウェイクワードが「Alexa」に設定されている場合、ヒントは次のように表示されます。

*"アレクサ、上映されている映画を教えてを試してください"*

簡潔にするため、次の例にはHintディレクティブのみを示していますが、ヒントが設定された一般的な応答にDisplay.RenderTemplateディレクティブを含めることも可能です。

{
  "directives": [
    {
      "type": "Hint",
      "hint": {
        "type": "PlainText",
        "text": "string"
      }
    }
  ]
}

textContentオブジェクトの仕様

すべてのテンプレートに含まれるtextContentオブジェクトには、primaryTextsecondaryTexttertiaryTextの各フィールドを指定できます。これらのフィールドには異なるスタイルを設定できます。ListTemplate1テンプレートでは、テキストのスタイルは階層レベルに合わせて自動で設定されます。他のテンプレートでは、primaryTextsecondaryTexttertiaryTextのそれぞれに入力したテキストは間に改行を挟んで連結され、すべて同じフォントで表示されます。primaryTextsecondaryTexttertiaryTextの書式は同一であり、それぞれ8,000文字の文字数制限が課されています。

{
  "textContent": {
    "primaryText": TextField,
    "secondaryText": TextField,
    "tertiaryText": TextField
  }
}

各TextFieldの内容は以下のとおりです。typePlainTextに設定した場合、マークアップを含めることはできません。typeRichTextに指定した場合、サポートされるマークアップに記載されているマークアップを含めることができます。

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

typeで使用できる値はPlainTextRichTextのみです。

typeRichTextに設定した場合、サポートされているマークアップおよびXML文字を使用してテキストの見た目を変更できます。表示テンプレートのテキストでサポートされているマークアップを参照してください。

また、typeRichTextに設定した場合、「text」の値で絶対ファイルパスを指定してインライン画像を使用することもできます。インライン画像の高さは特に制限されません。最大幅は880ピクセルであり、この幅には左パディングおよび右パディングが考慮されています。

「text」フィールドのテキストをアクションタグで囲むことで、このテキストを画面上で選択可能にすることができます。

次の例では、値が「cancel_trip」のアクションタグで「キャンセル」という単語を囲んでいます。ユーザーが画面上で「キャンセル」をクリックすると、トークン値が「cancel_trip」のDisplay.ElementSelectedイベントがトリガーされます。このトークンにより、こうしたタッチ対話をマッピングし、スキルサービスコード内の対応する動作を呼び出すことができます。

<action value='cancel_trip'>キャンセル</action>

例: プレーンテキストの場合

  {
    "type": "PlainText",
    "text": 私のスキルへようこそ"
  }

例: リッチテキストの場合

{
    "type": "RichText",
    "text": "<b>私のスキル</b>へようこそ "
}

表示テンプレートの最大文字数

Echo Showでは、使用するテンプレートとフォントサイズに応じて画面に表示される文字数が制限されます。記載したテキストの文字数が以下の制限を超えた場合、表示画面上でテキストの端が切り捨てられます。ユーザーがスクロールをしても、残りのテキストは表示されません。テンプレートで使用するテキストの文字数がこの制限を超えないようにしてください。

最大文字数制限にマークアップは含まれません。この文字数制限はフォントサイズが32ピクセルの場合のものであり、別のフォントサイズを使用する場合は適切に調整する必要があります。デフォルトのフォントサイズは32ピクセルです。

各テンプレートのタイトルの最大文字数は200文字です。

テンプレート メインテキストフィールド
ListTemplate1(縦並び) 計84文字
ListTemplate2(下にテキストを配置した横並び) 計84文字
BodyTemplate1(フルワイドテキスト) 計85文字
BodyTemplate2 計8,000文字
BodyTemplate3 計8,000文字
BodyTemplate6 計85文字
BodyTemplate7 BodyTemplate7にメインテキストフィールドはありません。

Echo Showでのフォントサイズの割り当て

フォントサイズを指定しない場合、最も大きいフォントサイズが使用されます。表示を適切に制御するため、フォントサイズを指定してください。デフォルトのフォントサイズは32ピクセルです。

フォントサイズ Echo Showでのピクセル数
font size="2" 28ピクセル
font size="3" 32ピクセル(デフォルト)
font size="5" 48ピクセル
font size="7" 68ピクセル

表示テンプレートのテキストでサポートされているマークアップ

リッチテキストでは次のマークアップ要素とXML特殊文字がサポートされます。プレーンテキストではサポートされません。形式は常にUTF-8になります。特殊文字のエンコーディングについては、XML特殊文字の処理を参照してください。

名前 要素 マークアップの例 出力
改行 <br/> 1行目<br/>2行目 1行目
2行目
太字 <b> これは<b>てんとう虫</b>です これはてんとう虫です
斜体 <i> 学名<i>Coccienellidae</i> 学名Coccienellidae
下線 <u> てんとう虫の<u>エサ</u>はアブラムシにしてください。 てんとう虫のエサはアブラムシにしてください。
フォントサイズ <font size="2">小(28ピクセル)</font>
<font size="3">中</font>
<font size="7">大(68ピクセル)</font>

<font size="7">ケーキ</font> <br> <font size="3">これが史上最高のケーキのレシピです。<br>

<font size="2">-小麦粉</font> <br>

<font size="2">-砂糖</font> <br>

ケーキ
これが史上最高のケーキのレシピです。
-小麦粉
-砂糖
アクション

<action token="VALUE">クリック可能テキスト</action>

クリック可能テキストは、Echo Showの画面上でタップできます。
てんとう虫の<action token="2347">歴史</action>を学びましょう。 てんとう虫の歴史を学びましょう。
インライン画像

<img src='URL' width='幅' height='高さ' alt='テキスト' />

インターネットで読み込む画像です。画像のサイズは行の高さに合わせて自動で調整され、並び線またはテキストの下部に合わせて配置されます。
これはインライン<img src='https://www.example.com/test1.jpg' width='500' height='500' alt='test image' />画像です。
インライン画像を含むリッチテキスト

XML特殊文字の処理

テンプレートとカードでは、特殊文字の表示方法が異なります。表示テンプレートのコンテンツで次の文字を使用する場合は、以下のようにエスケープしてください。

  • アンド記号(&)は&amp;にします。
  • 二重引用符(")は&quot;または\"にします。
  • 単一引用符(')は&apos;または\'にします。
  • 小なり記号(<)は&lt;にします。
  • 大なり記号(>)は&gt;にします。
  • スラッシュ(\)は\\にします。
  • 改行なしスペースはXML形式で&#160;のようにエスケープします(HTML形式は使用しないでください)。

リッチテキストを使用したテキストのアラインメント

リッチテキストの実装方法の概要については、textContentオブジェクトの仕様を参照してください。

テンプレートでtextContentオブジェクトを使用する場合、typeRichTextに設定することで以下のように中央揃えを指定できるようになりました。

{
    "type" : "RichText",
    "text" : "<div align='center'>このテキストは中央揃えになります</div>"
}

例: 応答でBodyTemplate3を使用して画面表示を作成する

BodyTemplate3テンプレートは、texttitletokenimageの各フィールドを指定できる単純な本文テンプレートです。この例では、オプションのbackButtonは非表示にし、backgroundImageは指定していません。表示テンプレートが画面上に表示されるときには、スキルアイコンが画面右上に必ず表示されます。スキルアイコンについては、開発者ポータルでスキルを作成するときに別途指定します。

このテンプレートを作成するには、次のようにJSON応答にDisplay.RenderTemplateディレクティブを追加します。

  • typeBodyTemplate3に設定します。
  • titleフィールドとtextContentオブジェクトには、表示するテキストを設定します。
  • imageオブジェクトには、URLプロパティとcontentDescription(スクリーンリーダー用)を設定します。
  • 戻るボタンの表示と非表示を切り替える場合は、backButtonアトリビュートを設定します。切り替えを指定しない場合はデフォルトのままにします。
{
  "type": "Display.RenderTemplate",
  "template": {
    "type": "BodyTemplate3",
    "title": "本文テンプレートのタイトル例",
    "token": "SampleCard_92347",
    "textContent": {
      "primaryText": {
        "type": "RichText",
        "text": "テキストコンテンツの例です。本コンテンツは、<b>太字</b>、<i>斜体</i>、<br/> 改行を含みます。"
      }
    },
    "image": {
      "contentDescription": "マウントへレンズ山の風景",
      "sources": [
        {
          "url": "https://example.com/resources/card-images/mount-saint-helen-small.png"
        }
      ]
    },
    "backButton": "HIDDEN"
  }
}

例: 応答でListTemplate1を使用して画面表示を作成する

リストテンプレートにはスクロール可能な項目のリストが含まれており、Echo Showではリストはテキストのみを付記して縦方向に並べて、または画像を付記して横方向に並べて表示できます。ListTemplate1では、項目が縦方向に並べられます。このListTemplate1テンプレートには、titleフィールド(画面上部に表示されます)、backgroundImage、およびlistItemsフィールドが1つずつ含まれます。各リスト項目には、オプションでtokentextContentimageの各フィールドを含めます。この表示を作成する手順は次のとおりです。

  • JSON応答にDisplay.RenderTemplateディレクティブを追加します。
  • テンプレートのtypeListTemplate1に設定します。
  • titleの文字列を目的の値に設定します。
  • backgroundImageの文字列を目的のURLに設定します。
  • 各リスト項目を定義します。
{
  "type": "Display.RenderTemplate",
  "template": {
    "type": "ListTemplate1",
    "token": "list_template_one",
    "title": "ピザ",
    "listItems": [
      {
        "token": "item_1",
        "image": {
          "sources": [
            {
              "url": "http://www.example.com/images/thumb/SupremePizza1.jpg"
            }
          ],
          "contentDescription": "特大パンピザ"
        },
        "textContent": {
          "primaryText": {
            "type": "RichText",
            "text": "<font size='7'>特大</font> <br/> パンピザ1700円"
          },
          "secondaryText": {
            "type": "PlainText",
            "text": "Secondary Text"
          },
          "tertiaryText": {
            "type": "PlainText",
            "text": ""
          }
        }
      },
      {
        "token": "item_2",
        "image": {
          "sources": [
            {
              "url": "http://www.example.com/images/thumb/MeatEaterPizza1.jpg"
            }
          ],
          "contentDescription": "肉盛りLサイズパンピザ"
        },
        "textContent": {
          "primaryText": {
            "type": "RichText",
            "text": "<font size='7'>肉盛り</font> <br/>Lサイズパンピザ1900円"
          },
          "secondaryText": {
            "text": "2番目のテキスト",
            "type": "PlainText"
          },
          "tertiaryText": {
            "text": "",
            "type": "PlainText"
          }
        }
      }
    ]
  }
}

例: 応答でListTemplate2を使用して画面表示を作成する

ListTemplate2では横並びのリストが作成されます。このListTemplate2テンプレートには、titleフィールド(画面上部に表示されます)およびlistItemsフィールドが1つずつ含まれます。リスト項目の各要素には、オプションでtokentextContentimageの各フィールドを含めます。この表示を作成する手順は次のとおりです。

  • JSON応答にDisplay.RenderTemplateディレクティブを追加します。
  • テンプレートのtypeListTemplate1に設定します。
  • titleの文字列を目的の値に設定します。
  • 必要に応じてbackButtonの値を設定します。
  • 以下のように、各リスト項目の構文を追加します。

この例のトークンlist_template_twoは表示内容に影響しませんが、このトークンをスキルサービスコード内で使用して項目を選択可能に設定し、追跡を行うことができます。

{
  "type": "Display.RenderTemplate",
  "template": {
    "type": "ListTemplate2",
    "token": "list_template_two",
    "title": "ピザ",
    "listItems": [
      {
        "token": "item_1",
        "image": {
          "sources": [
            {
              "url": "http://www.example.com/images/thumb/SupremePizza1.jpg"
            }
          ],
          "contentDescription": "特大パンピザ"
        },
        "textContent": {
          "primaryText": {
            "type": "RichText",
            "text": "<font size='7'>特大</font> <br/> パンピザ1700円"
          },
          "secondaryText": {
            "text": "2番目のテキスト",
            "type": "PlainText"
          },
          "tertiaryText": {
            "text": "",
            "type": "PlainText"
          }
        }
      },
      {
        "token": "item_2",
        "image": {
          "sources": [
            {
              "url": "http://www.example.com/images/thumb/MeatLoversPizza1.jpg"
            }
          ],
          "contentDescription": "肉好きLサイズピザ"
        },
        "textContent": {
          "primaryText": {
            "type": "RichText",
            "text": "<font size='7'>肉好き</font> <br/>Lサイズパンピザ1700円"
          }
        }
      }
    ]
  }
}

音声およびタッチによる選択イベントの処理

リストの各項目は、タッチで選択可能なように設定できます。画面上の選択可能要素それぞれに、要素の選択時にコールバック応答で送信される関連トークンを指定します。表示テンプレートのリファレンスのリストテンプレートを参照してください。トークンには自由に名前を付けることができます。

スキルでは任意の選択可能要素にtokenフィールドを設定でき、設定したトークンは要素が選択されるとDisplay.ElementSelectedリクエストで送信されます。このようなイベントの例を次に示します。

 "request": {
    "type": "Display.ElementSelected",
    "requestId": "amzn1.echo-api.request.7zzzzzzzzz",
    "timestamp": "2017-06-06T20:05:04Z",
    "locale": "en-US",
    "token": "getTopicName-Cookie-Contest"
  }

アクションやリスト項目を選択するためのビルトインインテントは存在しません。ただし、この用途のインテントを作成し、インテントスキーマに追加することは可能です。このようなインテントは、スキルが応答でDisplay.ElementSelectedイベントを受信したときにアクティブ化する必要があります。

こうしたインテントを設計することで、リストテンプレートの使用時に画面に表示される項目を、ユーザーが項目の名前または番号を言うことで選択できるようになります。名前と序数のどちらで選択できるようにするかは、サービス(AWS LambdaまたはWebサービス)で指定します。

スキルの開発時には、リストの項目およびアクションをユーザーが音声で選択できるようにするインテントを作成し、スキルへ転送する必要があります。スキルサービスでは、「選択」や「開く」、「表示」、「1番」、「2番」、「1」、「2」などのインテントを定義する必要があります。

リスト項目がタッチで選択されたときに適切に応答できるよう、各リスト項目はトークンを使用して追跡します。

ユーザーのスキル内の移動に合わせて、スキルコンテンツの配信に使用する本文テンプレートおよびリストテンプレートを変えることをお勧めします。たとえばレシピスキルでは、検索画面からレシピの選択、成分の表示、レシピの用意へと進みますが、それぞれで異なる画面表示を行う必要があります。開発では、このような流れを綿密に計画してください。

テンプレートが指定された画面表示は、セッションが終了され新しいテンプレートが送信されるまでスキルの画面に表示され続けます。カードを含む応答が送信された場合も、画面にはテンプレートが表示されたままになります。このため、別のテンプレートを含むスキル応答で表示を意図的に変更しない限り、スキルは同じ画面のままさまざまなやり取りを行うことになります。

画面表示でのテンプレートとカードの優先順位

画面付きのEchoデバイスでは、表示オプションに合わせて応答が解析されます。表示オプションが複数指定されている場合、表示の優先順位は次のようになります。

  1. Display.RenderTemplateディレクティブ。別のテンプレートが送信されるかスキルが終了されるまで、最後に表示されたテンプレートが画面に残ります。このため、別のテンプレートを明示的に送信しない限り、複数のやり取りで同じテンプレートが画面に表示され続けることになります。

  2. カード。画面にテンプレートが送信されておらず、カードが送信された場合、画面にはカードが表示されます。Echo Showでは、カードは「BodyTemplate1」を使用して表示されます。

  3. スキル応答でテンプレートもカードも指定されておらず、その時点で画面になにも表示されていない場合には、デフォルトのテンプレート(BodyTemplate1)が自動で作成され表示されます。

サポートする表示バージョンの指定

互換性の確保のため、デバイスのリクエストでは、現在のデバイスでサポートされるマークアップとテンプレートのバージョンが送信されます。現在サポートされているバージョンは「1」のみですが、以下のアトリビュートを応答で指定することで後方互換性を確保できます。

{
  "display": {
    "templateVersion": "1",
    "markupVersion": "1"
  }
}
属性説明
markupVersionマークアップのバージョンです。
templateVersionリクエスト元のデバイスでサポートされるテンプレートのバージョンです。
token画面に現在表示されているコンテンツのトークンです。

画面の有無に応じたEchoデバイスのGUI応答の形式

以下に示す応答はカードと音声応答のみに対応した簡単なものであり、画面表示を特にサポートしない場合はこれで十分です。画面付きのEchoデバイスで表示する場合、カードはBodyTemplate1を使用して表示されます。

{
  "version": "1.0",
  "sessionAttributes": {
    "supportedHoroscopePeriods": {
      "daily": true,
      "weekly": false,
      "monthly": false
    }
  },
  "response": {
    "card": {
      "type": "Simple",
      "title": "ホロスコープ",
      "content": "今日はいい一日でしょう。"
    }
  },
  "reprompt": {
    "outputSpeech": {
      "type": "PlainText",
      "text": "他に何かありますか?"
    }
  }
}

次の例でも同じカードと音声応答に対応していますが、表示テンプレートを使用して画面表示もサポートしています。この例では、BodyTemplate1を表示テンプレートとして使用しています。この例の画面上のテキストには、太字で強調されたフレーズが表示されます。

{
  "version": "1.0",
  "sessionAttributes": {
    "supportedHoroscopePeriods": {
      "daily": true,
      "weekly": false,
      "monthly": false
    }
  },
  "response": {
    "card": null,
    "outputSpeech": {
      "type": "PlainText",
      "text": "今日はいい一日でしょう。"
    },
    "reprompt": {
      "outputSpeech": {
        "type": "PlainText",
        "text": "他に何かありますか?"
      }
    },
    "directives": [
      {
        "type": "Display.RenderTemplate",
        "template": {
          "type": "BodyTemplate1",
          "token": "horoscope",
          "title": "これはホロスコープです",
          "image": {
            "contentDescription": "みずがめ座",
            "sources": [
              {
                "url": "https://example.com/resources/card-images/aquarius-symbol.png"
              }
            ]
          },
          "textContent": {
            "primaryText": {
              "type": "RichText",
              "text": "今日は<b>いい一日</b>でしょう。"
            }
          }
        }
      }
    ],
    "shouldEndSession": false
  }
}

応答の検証ルール

画面付きのEchoデバイスを含むAlexa搭載デバイスでは、以下の検証ルールを守ってください。

  • 応答で指定できるDisplay.RenderTemplateディレクティブは1つまでです。
  • 同じ応答内で、長時間の音声を指定したAudioPlayer.PlayディレクティブとVideoApp.Launchディレクティブを併用しないでください。
  • 必須フィールドはすべて指定する必要があります。
  • 不明なプロパティを指定することはできません。

応答が無効な場合、Echo Showにはエラーカードが表示され、スキルにはエラーが送信されます。

shouldEndSessionアトリビュートおよびセッションタイムアウトの使用

shouldEndSessionが指定されていないかこの値にnullが設定されており、Display.RenderTemplateディレクティブがアクティブな場合、セッションは開かれたままになり、Echo Showは音声応答を行いません。ユーザーがウェイクワードとコマンドを言っても、発話はスキルのコンテキストで認識されます。

shouldEndSessionの動作を明確に制御するため、セッションを終了する場合はtrue、セッションを継続する場合はfalseにこのアトリビュートを設定してください。

shouldEndSessionがfalseに設定され、再プロンプトが指定されていない場合、30秒間にわたりアクティビティが行われないとセッションは終了されます。

再プロンプトが指定されている場合、マイクがオンになり青い輪が表示されて再プロンプトが行われ、8秒後にタイムアウトになります。また、その後さらに8秒間ユーザーの返事が受け付けられます。Alexaに返事が返されなかった場合、再プロンプトが表示され、再び8秒間ユーザーの返事が受け付けられます。引き続き返事がない場合、shouldEndSessionがfalseに設定されていると、表示がタイムアウトになるまでセッションは開かれたままになります。

Echo Showでのスキル開発のベストプラクティス

画面のあるEchoデバイス向けスキルデザインのベストプラクティスを参照してください。

Alexaシミュレーターを使用したスキルのテスト

Echo ShowデバイスおよびEcho Spotデバイスを所有していなくても、開発者コンソールのテストページAlexaシミュレーターを使用して、表示時のテンプレートの見た目をテストできます。

2つのデバイスでのスキルの表示内容を確認できるように、Echo Showの画面Echo Spotの画面の両方を選択してください。

表示テンプレートのリファレンスで述べたように、Echo ShowとEcho Spotでは同じテンプレートでも表示が異なります。たとえば、一部のテンプレートでは、Echo Showで前景に表示される画像が、Echo Spotでは背景画像として表示されます。したがって、ユーザーエクスペリエンスのため、テストはできる限り詳細に行ってください。

Alexaシミュレーターには次の制限があります。

  • 現時点でサポートされているのはカスタムスキルのみです。

  • 表示はEcho ShowまたはEcho Spotでの実際の表示内容に近いものですが、ピクセルサイズは正確ではありません。

  • シミュレーターではスキルは動作せず、項目をクリックで選択することもできません。セッションは維持されません。

  • Alexaシミュレーターを複数のブラウザータブで使用することはできません。

画面表示に対応したAlexaシミュレーター
画面表示に対応したAlexaシミュレーター

関連トピック: スキルのテスト

サービスインターフェースのリファレンス(JSON)

リクエストの形式と標準のリクエストタイプ:

インターフェース: