Image List
Alexa Image Listテンプレート（AlexaImageList）は、画像とテキストのスクロールリストを表示します。AlexaImageListは全画面に表示されるテンプレートであり、オプションでヘッダー、フッター、背景を表示します。リストに表示する画像ベースの項目を指定して、リストの外観（区切り線を挿入する、項目に番号を付けるなど）を設定できます。ユーザーがリストから項目を選択したときに実行するコマンドも指定できます。
- alexa-layoutsパッケージを読み込む
- AlexaImageListのパラメーター
- リスト項目を指定する
- リスト項目のデフォルトを設定する
- 各リスト項目のアクションを指定する
- AlexaImageListおよびdynamicIndexListデータソース
- AlexaImageListの例
- 関連トピック
alexa-layoutsパッケージを読み込む
AlexaImageListを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaImageListはバージョン1.1.0で導入されました。
AlexaImageListのパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
|
背景画像または背景ビデオの配置を指定します。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、背景画像にぼかしが入ります。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、背景にレイヤーが適用されます。画像やビデオで、項目の上に表示されるテキストが読み取りやすくなります。 |
1.1.0 |
|
|
なし |
背景色として使用する色です。 |
1.1.0 |
|
|
|
文字列 |
なし |
背景画像ソースのURLです。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、背景にグラデーションが適用されます。 |
1.1.0 |
|
|
文字列 |
|
背景画像または背景ビデオのサイズを調整する方法を指定します。 |
1.1.0 |
|
|
なし |
背景ビデオのソースです。Videoコンポーネントの |
1.1.0 |
|
|
|
文字列 |
|
1.1.0 |
|
|
|
文字列 |
なし |
アトリビューションの画像ソースのURLです。 |
1.1.0 |
|
|
ブール値 |
true |
画面サイズにより1つの要素しか表示できないデバイスでは、アトリビューションが優先されます。 |
1.1.0 |
|
|
文字列 |
なし |
ヘッダーで表示するアトリビューションのテキストです。 |
1.1.0 |
|
|
文字列 |
なし |
スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。 |
1.1.0 |
|
|
|
ユーザーが戻るボタンを選択したときに実行するコマンドです。 |
1.1.0 |
|
|
|
ブール値 |
|
trueの場合、ヘッダーに戻るボタンを表示します。ユーザーがこのボタンをクリックしたときに実行するコマンドを指定するには、 |
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 |
|
|
ブール値 |
false |
|
1.1.0 |
|
|
ブール値 |
true |
trueの場合、小型デバイスで |
1.1.0 |
|
|
ブール値 |
true |
|
1.1.0 |
|
|
文字列 |
best-fit |
|
1.1.0 |
|
|
リストに表示する項目の配列です。各項目は、 |
1.1.0 |
||
|
|
なし |
|
1.1.0 |
|
|
|
文字列 |
dark |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
|
|
文字列 |
なし |
常に |
1.1.0 |
|
|
文字列 |
|
ビデオを再生する際に流すオーディオトラックです。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。 |
1.1.0 |
リスト項目を指定する
AlexaImageListテンプレートは、listItemsプロパティに項目の配列が入ることを想定しています。各項目は、AlexaImageListItemレスポンシブ対応コンポーネントで定義されているものと同じプロパティを持つオブジェクトです。
以下は、imageListDataというデータソース内の項目の配列の例です。
{
"imageListData": {
"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"
}
]
}
}
次に、${imageListData.listItemsToShow}式を使用して、この配列をlistItemsプロパティにバインドします。
{
"type": "AlexaImageList",
"listItems": "${imageListData.listItemsToShow}",
"defaultImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/BT7_Background.png",
"imageBlurredBackground": true,
"primaryAction": {
"type": "SendEvent",
"arguments": [
"ListItemSelected",
"${ordinal}"
]
}
}
リスト項目のデフォルトを設定する
AlexaImageListテンプレートには、AlexaImageListItemのプロパティに対応するプロパティが含まれています。対応するプロパティを使用して、これらのプロパティのデフォルト値を設定します。
デフォルトには次の2種類があります。
-
個々の項目に対して設定または上書きできるデフォルト -
AlexaImageListは個々の項目に指定された値が利用可能な場合はその値を使用し、使用できない場合はAlexaImageListで提供される値を使用します。たとえば、リスト全体に対して
imageScaleをbest-fitに設定し、リストの1つの項目に対してbest-fillに設定するように上書きできます。 -
常にリスト内のすべての項目に適用されるデフォルト -
AlexaImageListは常にこれらのプロパティに対してAlexaImageListで指定された値を使用します。個々の項目に設定された対応するプロパティの値は無視されます。たとえば、リスト全体に
imageAspectRatioを設定する必要があります。一部の項目を正方形として表示し、一部の項目を円として表示するリストは作成できません。リスト項目のimageAspectRatioの値は無視されます。
デフォルトとして使用するプロパティの一覧を次の表に示します。
| プロパティ | 項目の上書きが可能 |
|---|---|
defaultImageSource |
✕ |
imageAlignment |
◯ |
imageAspectRatio |
✕ |
imageBlurredBackground |
◯ |
imageHideScrim |
◯ |
ImageMetadataPrimacy |
✕ |
imageRoundedCorner |
◯ |
imageScale |
◯ |
primaryAction |
◯ |
各プロパティの詳細については、AlexaImageListItemを参照してください。
各リスト項目のアクションを指定する
AlexaImageListはインタラクティブです。ユーザーはリストの項目を選択できます。primaryActionプロパティに、ユーザーが項目を選択したときに実行するコマンドを設定します。
AlexaImageListコンポーネントでprimaryActionを設定すると、AlexaImageListはリストの各項目にこのコマンドを渡します。
個々のリスト項目のコマンドを上書きするには、リスト項目自体にprimaryActionプロパティを設定します。
以下は、SendEventコマンドを使用してスキルにUserEventリクエストを送信する方法の例です。選択した項目を表す数をSendEvent.arguments配列の一部として渡します。
{
"primaryAction": {
"type": "SendEvent",
"arguments": [
"ListItemSelected",
"${ordinal}"
]
}
}
AlexaImageListおよびdynamicIndexListデータソース
AlexaImageListテンプレートはSequenceを使用します。つまり、dynamicIndexListデータソースを使用できます。dynamicIndexListデータソースを使用すると、次のことを実行できます。
- ユーザーがコンテンツをスクロールすると、大きなリストの項目を徐々に表示します（遅延読み込み）。
- データソースが既に表示された後で項目を更新し、完全に新しいドキュメントを送信することなく画面上の値を変更できます。
AlexaImageListとdynamicIndexListデータソースを組み合わせて使用する方法
- dynamicIndexListデータソースに記載されている
dynamicIndexListの構造に従います。この構造で定義されていない他のプロパティは含めないでください。 - リスト項目オブジェクトをデータソースの
items配列に配置します。 - データソースを
AlexaImageListのlistItemsプロパティにバインドします。このバインドは、カスタムレイアウトのSequenceのdataプロパティにデータソースをバインドすることと同じです。
以下は、dynamicIndexListデータソースを使用するAlexaImageListを含むドキュメントの例です。
dynamicIndexListデータソースの定義の詳細については、dynamicIndexListデータソースを参照してください。
データソースの管理に使用するディレクティブとリクエストの詳細については、Alexa.Presentation.APLインターフェースのリファレンスを参照してください。
AlexaImageListの例
この例では、リスト項目を選択すると、“ListItemSelected”とリスト項目の番号を持つUserEventがスキルに送信されます。