Lists
Alexa Listsテンプレート（AlexaLists）は、項目のリストを表示します。AlexaListsは全画面に表示されるテンプレートであり、オプションでヘッダー、フッター、背景を表示します。テンプレートでテキストベースのリスト項目を表示するか、画像ベースの項目を表示するかを指定します。テキスト項目の場合、テンプレートはAlexaTextListを使用します。画像ベースの項目の場合、テンプレートはほとんどのViewportでAlexaImageListを使用し、小型の円形デバイスではAlexaPaginatedListを使用します。
alexa-layoutsパッケージを読み込む
AlexaListsを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.5.0です。AlexaListsはバージョン1.1.0で導入されました。
AlexaListsのパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
|
背景画像または背景ビデオの配置を指定します。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、指定された背景画像にぼかしを入れて表示します。 |
1.1.0 |
|
|
なし |
背景色として使用する色です。 |
1.1.0 |
|
|
|
ブール値 |
|
trueの場合、背景にレイヤーを適用して、画像やビデオ上のテキストを読みやすくします。 |
1.1.0 |
|
|
文字列 |
なし |
背景画像ソースのURLです。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、背景にグラデーションを適用します。 |
1.1.0 |
|
|
文字列 |
|
背景画像または背景ビデオのサイズを調整する方法を指定します。 |
1.1.0 |
|
|
文字列 |
|
ビデオを再生する際に流すオーディオトラックです。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。 |
1.1.0 |
|
|
なし |
背景ビデオのソースです。Videoコンポーネントの |
1.1.0 |
|
|
|
文字列 |
|
1.1.0 |
|
|
|
文字列 |
リストに項目がない場合に、最大2行で表示する第1テキストです。テキストは2行に収まるように切り詰められます。 |
1.1.0 |
|
|
|
文字列 |
リストに項目がない場合に、1行で表示する第2テキストです。第1テキストの下に表示されます。テキストは1行に収まるように切り詰められます。 |
1.1.0 |
|
|
|
配列 |
[] |
このテンプレートにバインドするentityデータの配列です。 |
1.2.0 |
|
|
文字列 |
なし |
フッターに表示するヒントテキストです。正しいウェイクワードをヒントに追加するには、 |
1.1.0 |
|
|
文字列 |
なし |
アトリビューションの画像ソースのURLです。 |
1.1.0 |
|
|
数値 |
0.8 |
ヘッダーのアトリビューションテキストとアトリビューション画像にopacityを設定します。0と1の間の数値を設定します。 |
1.3.0 |
|
|
ブール値 |
true |
trueの場合、画面サイズの制約のため1つの要素だけを表示するデバイスに |
1.1.0 |
|
|
文字列 |
なし |
ヘッダーで表示するアトリビューションのテキストです。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、戻るボタンをヘッダーに表示します。ユーザーがこのボタンをクリックしたときに実行するコマンドを指定するには、 |
1.1.0 |
|
|
文字列 |
なし |
スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。 |
1.1.0 |
|
|
|
ユーザーが戻るボタンを選択したときに実行するコマンドです。 |
1.1.0 |
|
|
|
文字列 |
|
ヘッダーの背景色として使用するオプションの色の値です。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、ヘッダーの下に区切り線を表示してコンテンツと区別できるようにします。 |
1.1.0 |
|
|
文字列 |
なし |
ヘッダーで表示する第2テキストです。 |
1.1.0 |
|
|
文字列 |
なし |
ヘッダーで表示する第1テキストです。 |
1.1.0 |
|
|
ブール値 |
|
|
1.1.0 |
|
|
文字列 |
center |
|
1.1.0 |
|
|
文字列 |
square |
リスト内のすべての項目の画像バウンディングボックスに使用するアスペクト比です。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。このプロパティは、 |
1.1.0 |
|
|
ブール値 |
false |
|
1.1.0 |
|
|
none |
|
1.4.0 |
|
|
|
ブール値 |
false |
|
1.1.0 |
|
|
ブール値 |
true |
trueの場合、小型デバイスで |
1.1.0 |
|
|
ブール値 |
true |
|
1.1.0 |
|
|
文字列 |
best-fit |
|
1.1.0 |
|
|
ブール値 |
true |
|
1.3.0 |
|
|
文字列 |
|
テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、 |
1.4.0 |
|
|
文字列 |
|
コンテンツのレイアウト方向を指定します。このプロパティを |
1.4.0 |
|
|
文字列 |
リストに使用する |
1.2.0 |
|
|
|
ブール値 |
false |
trueの場合、Listレイアウトは、指定された画像ソースをメインの操作案内要素（通常は水平方向のナビゲーション内）として表示するようにします。falseの場合、第1テキストが表示されます。通常は垂直方向のナビゲーション内です。デフォルトはfalseです。 |
1.1.0 |
|
|
listItemsの配列 |
なし |
表示するリスト項目の配列です。 |
1.1.0 |
|
|
なし |
|
1.1.0 |
|
|
|
任意 |
[] |
読み上げ項目の配列です。 |
1.2.0 |
|
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでテンプレートの色を制御します。 |
1.1.0 |
|
|
ブール値 |
|
|
1.1.0 |
|
|
文字列 |
なし |
常に |
1.1.0 |
表示するリストのレイアウトを選択する（listImagePrimacy）
listImagePrimacyパラメーターにより、Listレイアウトが決まります。
listImagePrimacyがtrueの場合、テンプレートはAlexaImageListまたはAlexaPaginatedListを表示します。これらのレイアウトは、各項目の画像とテキストを表示します。AlexaPaginatedListは小型の円形デバイスに表示されるため、各ページに1つのリスト項目が表示されます。
listImagePrimacyがfalseの場合、テンプレートはAlexaTextListを表示します。このレイアウトは、テキスト項目のスクロールリストを表示します。
リスト項目を指定する
AlexaListsテンプレートは、listItemsプロパティに項目の配列が入ることを想定しています。各項目は以下のいずれかです。
AlexaImageListItemレスポンシブ対応コンポーネントで定義されているものと同じプロパティを持つオブジェクトAlexaTextListItemレスポンシブ対応コンポーネントで定義されているものと同じプロパティを持つオブジェクト
このリストは、listImagePrimacyがtrueの場合は画像プロパティを使用し、listImagePrimacyがfalseの場合は画像プロパティを無視します。
以下は、listDataというデータソース内の項目の配列の例です。
{
"listData": {
"listItemsToShow": [
{
"primaryText": "1番目のリスト項目です。",
"secondaryText": "第2テキストです。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gruyere.png",
"imageProgressBarPercentage": 90,
"imageShowProgressBar": false
},
{
"primaryText": "2番目のリスト項目です。",
"secondaryText": "第2テキストです。",
"tertiaryText": "第3テキストです。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gorgonzola.png",
"providerText": "プロバイダーテキストです。",
"imageProgressBarPercentage": 50
},
{
"primaryText": "画像なし、デフォルトを使用します。",
"secondaryText": "第2テキストです。"
},
{
"primaryText": "4番目のリスト項目です。",
"secondaryText": "進捗バーは表示しません。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/tl_brie.png"
},
{
"primaryText": "5番目のリスト項目です。",
"secondaryText": "背景をぼかします。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
},
{
"primaryText": "6番目のリスト項目です（折り返しのある長いテキストです）。",
"secondaryText": "切り詰めのある長い第2テキストです。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/sm_blue.png"
}
]
}
}
次に、${listData.listItemsToShow}式を使用して、この配列をlistItemsプロパティにバインドします。この例では、AlexaImageListまたはAlexaPaginatedListを表示し、指定された画像を表示します。
{
"type": "AlexaLists",
"listItems": "${listData.listItemsToShow}",
"listImagePrimacy": true,
"defaultImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/BT7_Background.png",
"imageBlurredBackground": true
}
listImagePrimacyをfalseに変更して、同じデータを持つAlexaTextListを表示します。このバージョンでは、AlexaTextListに適用されないプロパティは無視されます。
{
"type": "AlexaLists",
"listItems": "${listData.listItemsToShow}",
"listImagePrimacy": false,
"defaultImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/BT7_Background.png",
"imageBlurredBackground": true
}
空のリストのデフォルトテキスト
リスト項目がない場合に表示するテキストを定義するには、emptyPrimaryTextパラメーターとemptySecondaryTextパラメーターを使用します。これによって画面の中央に短いテキストのヘッドラインが表示されます。
以下は、emptyPrimaryTextとemptySecondaryTextのコンテンツを持つAlexaListsの例です。
{
"type": "AlexaLists",
"listItems": "${listData.listItemsToShow}",
"emptyPrimaryText": "${listData.emptyPrimaryText}",
"emptySecondaryText": "${listData.emptySecondaryText}",
"imageBlurredBackground": true
}
以下は、画面に「リストが空」であることを示すメッセージを生成するデータソースの例です。
{
"listData": {
"emptyPrimaryText": "リスト項目がありません。",
"emptySecondaryText": "開始するには、リストに追加する項目を教えてください。",
"listItemsToShow": []
}
}
リスト項目のデフォルトを設定する
AlexaListsテンプレートには、AlexaImageListItemのプロパティに対応するプロパティが含まれています。対応するプロパティを使用して、これらのプロパティのデフォルト値を設定します。デフォルト値はlistImagePrimacyがtrueの場合に適用されます。
デフォルトには次の2種類があります。
-
個々の項目に対して設定または上書きできるデフォルト -
AlexaListsは、個々の項目に指定された値が利用可能な場合はその値を使用し、使用できない場合はAlexaListsで提供される値を使用します。たとえば、リスト全体に対して
imageScaleをbest-fitに設定し、リストの1つの項目に対してbest-fillに設定するように上書きできます。 -
常にリスト内のすべての項目に適用されるデフォルト -
AlexaListsは、常にこれらのプロパティに対してAlexaListsで指定された値を使用します。個々の項目に設定された対応するプロパティの値は無視されます。たとえば、リスト全体に
imageAspectRatioを設定する必要があります。一部の項目を正方形として表示し、一部の項目を円として表示するリストは作成できません。リスト項目のimageAspectRatioの値は無視されます。
デフォルトとして使用するプロパティの一覧を次の表に示します。
| プロパティ | 項目の上書きが可能 |
|---|---|
defaultImageSource |
✕ |
imageAlignment |
◯ |
imageAspectRatio |
✕ |
imageBlurredBackground |
◯ |
imageHeight |
✕ |
imageHideScrim |
◯ |
ImageMetadataPrimacy |
✕ |
imageRoundedCorner |
◯ |
imageScale |
◯ |
imageShadow |
◯ |
primaryAction |
◯ |
各プロパティの詳細については、AlexaImageListItemを参照してください。
各リスト項目のアクションを指定する
AlexaListsはインタラクティブです。ユーザーはリストの項目を選択できます。primaryActionプロパティに、ユーザーが項目を選択したときに実行するコマンドを設定します。
AlexaListsコンポーネントでprimaryActionを設定すると、AlexaListsはリストの各項目にこのコマンドを渡します。
個々のリスト項目のコマンドを上書きするには、リスト項目自体にprimaryActionプロパティを設定します。
以下は、SendEventコマンドを使用してスキルにUserEventリクエストを送信する方法の例です。選択した項目を表す数をSendEvent.arguments配列の一部として渡します。
{
"primaryAction": {
"type": "SendEvent",
"arguments": [
"ListItemSelected",
"${ordinal}"
]
}
}
AlexaListsの例
関連トピック
最終更新日: 2022 年 06 月 30 日