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
がスキルに送信されます。