Paginated List
Alexa Paginated Listテンプレート（AlexaPaginatedList）は、複数のページにまたがる項目のリストを表示します。このテンプレートは全画面に表示されるため、ヘッダーと背景を含めることができます。一連の項目をテキストベースで指定し、表示します。テンプレートには、現在のページと総ページ数を表示するページカウンターが含まれています。
- alexa-layoutsパッケージを読み込む
- AlexaPaginatedListのパラメーター
- 表示するページを提供する
- 各リスト項目のアクションを指定する
- AlexaPaginatedListの例
- 関連トピック
alexa-layoutsパッケージを読み込む
AlexaPaginatedListを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaPaginatedListはバージョン1.1.0で導入されました。
AlexaPaginatedListのパラメーター
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 |
|
|
文字列 |
|
ビデオを再生する際に流すオーディオトラックです。 |
1.1.0 |
|
|
ブール値 |
|
trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。 |
1.1.0 |
|
|
なし |
背景ビデオのソースです。Videoコンポーネントの |
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 |
|
|
none |
リストに表示するリスト項目の配列です。 |
1.1.0 |
|
|
|
none |
項目が選択されたときにトリガーされるアクションです。 |
1.1.0 |
|
|
|
文字列 |
dark |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
|
|
文字列 |
なし |
常に |
1.1.0 |
表示するページを提供する
AlexaPaginatedListテンプレートは、listItemsプロパティに項目の配列が入ることを想定しています。各項目は、AlexaImageListItemレスポンシブ対応コンポーネントで定義されているものと同じプロパティのサブセットを持つオブジェクトです。AlexaImageListで使用できるすべてのプロパティがAlexaPaginatedListで使用されるわけではありません。
次の表は、AlexaPaginatedListが使用するAlexaImageListItemプロパティをまとめたものです。その他のプロパティは無視されます。
| プロパティ | 型 | 説明 |
|---|---|---|
primaryText |
文字列 | 全画面表示項目のタイトルです。 |
secondaryText |
文字列 | 全画面表示項目の第2テキストです。 |
tertiaryText |
文字列 | 全画面表示項目の第3テキストです。 |
imageSource |
文字列 | この項目に使用する画像のURLです。これは、リスト全体のbackgroundImageSourceで指定したすべての画像を上書きします。 |
primaryAction |
コマンド | ユーザーが項目を選択したときに実行するコマンドです。この設定により、リスト全体のprimaryActionセットが上書きされます。 |
たとえば、次のようにデータソース内の項目の配列を定義できます。
以下は、paginatedListDataというデータソース内の項目の配列の例です。
{
"paginatedListData": {
"listItemsToShow": [
{
"primaryText": "1番目のリスト項目です。",
"secondaryText": "第2テキストです。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gruyere.png",
"providerText": "このプロパティは無視されます。"
},
{
"primaryText": "2番目のリスト項目です。",
"secondaryText": "第2テキストです。",
"tertiaryText": "これには第3テキストがあります。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gorgonzola.png"
},
{
"primaryText": "画像なし、デフォルトを使用します。",
"secondaryText": "第2テキストです。"
},
{
"primaryText": "4番目のリスト項目です（第1テキストのみ）",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/tl_brie.png"
},
{
"primaryText": "5番目のリスト項目です。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
},
{
"primaryText": "6番目のリスト項目です（ほとんどのデバイスで折り返される非常に長いテキスト）。2行を超えるテキストは切り詰められます。）”,
"secondaryText": "切り詰めのある長い第2テキストです。",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/sm_blue.png"
}
]
}
}
次に、${paginatedListData.listItemsToShow}式を使用して、この配列をlistItemsプロパティにバインドします。
{
"type": "AlexaPaginatedList",
"listItems": "${paginatedListData.listItemsToShow}",
"backgroundColorOverlay": "true",
"primaryAction": {
"type": "SendEvent",
"arguments": [
"ListItemSelected",
"${ordinal}"
]
}
}
各リスト項目のアクションを指定する
AlexaPaginatedListはインタラクティブです。ユーザーはリストの項目を選択できます。primaryActionプロパティに、ユーザーが項目を選択したときに実行するコマンドを設定します。
AlexaPaginatedListコンポーネントでprimaryActionを設定すると、AlexaPaginatedListはリストの各項目にこのコマンドを渡します。
個々のリスト項目のコマンドを上書きするには、リスト項目自体にprimaryActionプロパティを設定します。
以下は、SendEventコマンドを使用してスキルにUserEventリクエストを送信する方法の例です。選択した項目を表す数をSendEvent.arguments配列の一部として渡します。
{
"primaryAction": {
"type": "SendEvent",
"arguments": [
"ListItemSelected",
"${ordinal}"
]
}
}
AlexaPaginatedListの例
この例では、リスト項目を選択すると、“ListItemSelected”とリスト項目の番号を持つUserEventがスキルに送信されます。
