Text List
Alexaのテキストリストテンプレート(AlexaTextList
)は、テキストベースの項目リストのスクロールを表示します。このテンプレートは全画面に表示されるため、ヘッダーと背景を含めることができます。リストに表示する、テキストベースの一連の項目を指定します。リストの外観(区切り線を挿入する、項目に番号を付けるかどうかなど)を設定できます。ユーザーがリストから項目を選択したときに実行するコマンドも指定できます。ユーザーが項目をスワイプできるようリストを設定します。
- alexa-layoutsパッケージを読み込む
- AlexaTextListパラメーター
- リスト項目を指定する
- 各リスト項目のアクションを指定する
- ユーザーがリスト項目をスクロールできるようにする
- AlexaTextListの例
- 関連トピック
alexa-layoutsパッケージを読み込む
AlexaTextList
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.2.0
です。AlexaTextList
はバージョン1.1.0
で導入されました。
このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaTextList
ドキュメントが表示されます。パラメーターの表に、各パラメーターが追加されたalexa-layouts
のバージョンが記載されています。
AlexaTextListパラメーター
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 |
|
|
配列 |
[] |
このテンプレートにバインドするentityデータの配列です。 |
1.2.0 |
|
文字列 |
なし |
アトリビューションの画像ソースのURLです。 |
1.1.0 |
|
ブール値 |
true |
trueの場合、画面サイズの制約で1つの要素を表示するデバイスに |
1.1.0 |
|
文字列 |
なし |
ヘッダーで表示するアトリビューションのテキストです。 |
1.1.0 |
|
ブール値 |
|
trueの場合、戻るボタンをヘッダーに表示します。 |
1.1.0 |
|
文字列 |
なし |
スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。 |
1.1.0 |
|
|
ユーザーが戻るボタンを選択したときに実行するコマンドです。 |
1.1.0 |
|
|
文字列 |
|
ヘッダーの背景色として使用するオプションの色の値です。 |
1.1.0 |
|
ブール値 |
|
切り替えてヘッダーの下部に区切り線を表示し、下のコンテンツと区別します。 |
1.1.0 |
|
文字列 |
なし |
ヘッダーで表示する第2テキストです。 |
1.1.0 |
|
文字列 |
なし |
ヘッダーで表示する第1テキストです。 |
1.1.0 |
|
ブール値 |
|
|
1.1.0 |
|
ブール値 |
|
|
1.1.0 |
|
listItemsの配列 |
リストに表示するテキストリスト項目の配列です。 |
1.1.0 |
|
|
任意 |
ユーザーがスワイプアクションを完了した場合に実行するコマンドです。 |
1.2.0 |
|
|
任意 |
ユーザーが項目をスワイプしたときに実行するコマンドです。 |
1.2.0 |
|
|
任意 |
オプションリストの最初のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
文字列 |
オプションリストの最初のボタンのテキストです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
任意 |
オプションリストの2番目のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
文字列 |
オプションリストの2番目のボタンのテキストです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
none |
ユーザーがリストから項目を選択したときに実行されるアクションです。 |
1.1.0 |
|
|
文字列 |
スワイプ中に表示するカスタムアイコンのソースです。 |
1.2.0 |
|
|
ユーザーが項目をスワイプしたときにアクションアイコンの背後に表示する背景の色です。 |
1.2.0 |
||
|
文字列 |
ユーザーが項目をスワイプしたときに表示するアクションアイコンの色です。 |
1.2.0 |
|
|
文字列 |
カスタム |
1.2.0 |
|
|
文字列 |
left |
リスト内の項目に使用するスワイプジェスチャーの方向です。 |
1.2.0 |
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでテンプレートの色を制御します。 |
1.1.0 |
|
ブール値 |
|
|
1.1.0 |
|
文字列 |
なし |
常に |
1.1.0 |
リスト項目を指定する
AlexaTextList
レイアウトは、listItems
プロパティに項目の配列を取ります。各項目は、AlexaTextListItemまたはAlexaSwipeToActionレスポンシブ対応コンポーネントで定義されたプロパティを持つオブジェクトです。
たとえば、次のように項目の配列を定義できます。
{
"listItems": [
{
"primaryText": "最初の項目の第1テキストです",
"secondaryText": "これは第2テキストです",
"secondaryTextPosition": "bottom",
"tertiaryText": "これは第3テキストです",
"tertiaryTextPosition": "bottom",
"ratingNumber": 2,
"imageThumbnailSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_brie.png",
"hideOrdinal": true,
"touchForward": true
},
{
"primaryText": "リストの2番目の項目です",
"secondaryText": "2番目の項目の第2テキストです",
"imageThumbnailSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gruyere.png",
"tertiaryText": "第3テキスト",
"tertiaryTextPosition": "bottom",
"ratingNumber": 0
},
{
"primaryText": "リストの3番目の項目です",
"imageThumbnailSource": "https://d2o906d8ln7ui1.cloudfront.net/images/sm_blue.png"
},
{
"primaryText": "リストの4番目の項目です"
},
{
"primaryText": "リストの5番目の項目です"
},
{
"primaryText": "このリストにはほかにも多数の項目があります"
}
]
}
この配列は、AlexaTextList
のlistItems
配列パラメーター、または別のデータソースで指定できます。
リスト項目の指定可能なパラメーターは、AlexaTextListItem
のバージョンによって異なります。たとえば、レーティングを表示するプロパティには1.2.0以上のバージョンのalexa-layouts
パッケージが必要です。すべてのプロパティについては、以下を参照してください。
各リスト項目のアクションを指定する
AlexaTextList
はインタラクティブです。ユーザーはリストの項目を選択できます。primaryAction
プロパティに、ユーザーが項目を選択したときに実行するコマンドを設定します。
AlexaTextList
コンポーネントでprimaryAction
を設定すると、AlexaTextList
はリストの各項目にこのコマンドを渡します。
個々のリスト項目のコマンドを上書きするには、リスト項目自体にprimaryAction
プロパティを設定します。
以下は、SendEvent
コマンドを使用してスキルにUserEvent
リクエストを送信する方法の例です。選択した項目を表す数をSendEvent.arguments
配列の一部として渡します。
{
"primaryAction": {
"type": "SendEvent",
"arguments": [
"ListItemSelected",
"${ordinal}"
]
}
}
ユーザーがリスト項目をスクロールできるようにする
ユーザーがリスト項目をスワイプしてアクションを実行できるようにするには、swipeDirection
プロパティをleft
、right
のいずれかに設定します。次に、その他のスワイプ関連のプロパティを必要に応じて設定します。これらのプロパティは、AlexaSwipeToActionのプロパティと対応しています。
swipeActionIcon
swipeActionIconType
swipeActionIconForeground
swipeActionIconBackground
onSwipeMove
onSwipeDone
optionsButton1Text
optionsButton1Command
optionsButton2Text
optionsButton2Command
スワイプアクションの詳細とテキストリスト内でAlexaSwipeToAction
を使用する例については、AlexaTextList内のAlexaSwipeToActionを参照してください。
AlexaTextListの例
関連トピック
最終更新日: 2020 年 11 月 20 日