Text List

Text List

Alexaのテキストリストテンプレート（AlexaTextList）は、テキストベースの項目リストのスクロールを表示します。このテンプレートは全画面に表示されるため、ヘッダーと背景を含めることができます。リストに表示する、テキストベースの一連の項目を指定します。リストの外観（区切り線を挿入する、項目に番号を付けるかどうかなど）を設定できます。ユーザーがリストから項目を選択したときに実行するコマンドも指定できます。ユーザーが項目をスワイプできるようリストを設定します。

alexa-layoutsパッケージを読み込む

AlexaTextListを使用するには、alexa-layoutsパッケージを読み込みます。

alexa-layoutsパッケージの最新バージョンは1.2.0です。AlexaTextListはバージョン1.1.0で導入されました。

このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaTextListドキュメントが表示されます。パラメーターの表に、各パラメーターが追加されたalexa-layoutsのバージョンが記載されています。

AlexaTextListパラメーター

type以外のパラメーターはすべてオプションです。

名前 型 デフォルト 説明 追加または更新されたバージョン

backgroundAlign

文字列

center

背景画像または背景ビデオの配置を指定します。

1.1.0

backgroundBlur

ブール値

false

trueの場合、指定された背景画像にぼかしを入れて表示します。backgroundImageSourceに値が指定された場合にのみ適用されます。

1.1.0

backgroundColor

色

なし

背景色として使用する色です。backgroundImageSourceとbackgroundVideoSourceのいずれにも値が含まれない場合に使用します。

1.1.0

backgroundColorOverlay

ブール値

false

trueの場合、背景にレイヤーを適用して、画像やビデオ上のテキストを読みやすくします。

1.1.0

backgroundImageSource

文字列

なし

背景画像ソースのURLです。backgroundVideoSourceを指定していない場合に使用します。

1.1.0

backgroundOverlayGradient

ブール値

false

trueの場合、背景にグラデーションを適用します。

1.1.0

backgroundScale

文字列

best-fill

背景画像または背景ビデオのサイズを調整する方法を指定します。

1.1.0

backgroundVideoAudioTrack

文字列

foreground

ビデオを再生する際に流すオーディオトラックです。foreground、background、noneのいずれかです。

1.1.0

backgroundVideoAutoPlay

ブール値

false

trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。backgroundVideoSourceに値が指定された場合に適用します。

1.1.0

backgroundVideoSource

ビデオソース

なし

背景ビデオのソースです。Videoコンポーネントのsourceプロパティと同様の形式でソースを指定します。

1.1.0

entities

配列

[]

このテンプレートにバインドするentityデータの配列です。

1.2.0

headerAttributionImage

文字列

なし

アトリビューションの画像ソースのURLです。headerAttributionPrimacyがtrueの場合、またはタイトル／サブタイトルとアトリビューションの両方を表示するデバイスに表示します。

1.1.0

headerAttributionPrimacy

ブール値

true

trueの場合、画面サイズの制約で1つの要素を表示するデバイスにheaderAttributionImageを表示します。falseの場合、headerTitleとheaderSubtitleを表示します。

1.1.0

headerAttributionText

文字列

なし

ヘッダーで表示するアトリビューションのテキストです。headerAttributionImageに値が含まれず、かつ、headerAttributionPrimacyがtrueの場合、またはデバイスがタイトル／サブタイトルとアトリビューションの両方を表示する場合に表示されます。

1.1.0

headerBackButton

ブール値

false

trueの場合、戻るボタンをヘッダーに表示します。

1.1.0

headerBackButtonAccessibilityLabel

文字列

なし

スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。

1.1.0

headerBackButtonCommand

コマンド

{"type":"SendEvent","arguments":["goBack"]}

ユーザーが戻るボタンを選択したときに実行するコマンドです。

1.1.0

headerBackgroundColor

文字列

transparent

ヘッダーの背景色として使用するオプションの色の値です。

1.1.0

headerDivider

ブール値

false

切り替えてヘッダーの下部に区切り線を表示し、下のコンテンツと区別します。

1.1.0

headerSubtitle

文字列

なし

ヘッダーで表示する第2テキストです。

1.1.0

headerTitle

文字列

なし

ヘッダーで表示する第1テキストです。

1.1.0

hideDivider

ブール値

false

trueの場合、リストの各項目の下に表示される横方向の区切り線を非表示にします。

1.1.0

hideOrdinal

ブール値

false

trueの場合、各リスト項目の横に番号を表示しません。

1.1.0

listItems

listItemsの配列

リストに表示するテキストリスト項目の配列です。

1.1.0

onSwipeDone

任意

ユーザーがスワイプアクションを完了した場合に実行するコマンドです。

1.2.0

onSwipeMove

任意

ユーザーが項目をスワイプしたときに実行するコマンドです。

1.2.0

optionsButton1Command

任意

オプションリストの最初のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。

1.2.0

optionsButton1Text

文字列

オプションリストの最初のボタンのテキストです。テレビデバイスにのみ使用します。

1.2.0

optionsButton2Command

任意

オプションリストの2番目のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。

1.2.0

optionsButton2Text

文字列

オプションリストの2番目のボタンのテキストです。テレビデバイスにのみ使用します。

1.2.0

primaryAction

コマンド

none

ユーザーがリストから項目を選択したときに実行されるアクションです。

1.1.0

swipeActionIcon

文字列

スワイプ中に表示するカスタムアイコンのソースです。swipeActionIconTypeがAVGの場合、このプロパティにgraphicsプロパティまたは読み込まれたパッケージで定義されているグラフィックの名前を設定します。swipeActionIconTypeがimageの場合、表示する画像のURLを指定します。

1.2.0

swipeActionIconBackground

色

ユーザーが項目をスワイプしたときにアクションアイコンの背後に表示する背景の色です。

1.2.0

swipeActionIconForeground

文字列

ユーザーが項目をスワイプしたときに表示するアクションアイコンの色です。

1.2.0

swipeActionIconType

文字列

カスタムswipeActionIconに使用するグラフィックの種類です。AVGまたはimageに設定します。imageに設定した場合は、swipeActionIconの画像のURLを指定します。AVGに設定した場合は、ドキュメントのgraphicsプロパティでAVGを定義するか、読み込まれたパッケージで定義されているグラフィックを使用し、swipeActionIconにグラフィックの名前を設定します。

1.2.0

swipeDirection

文字列

left

リスト内の項目に使用するスワイプジェスチャーの方向です。left、rightのいずれかに設定して、ユーザーがリスト内で項目をスワイプできるようにします。

1.2.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。テーマを選択することでテンプレートの色を制御します。

1.1.0

touchForward

ブール値

false

trueの場合、ユーザーが画面に触れられるほど近く（画面を見る距離が1m以内）にいると想定して、リスト項目のフォントサイズを小さくします。falseの場合、ユーザーが画面に触れられるほど近づいていない（音声で操作する）と想定し、大きいフォントサイズを使用します。

1.1.0

type

文字列

なし

常にAlexaTextListに設定されます。

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の例

シンプルなAlexaTextListの例
シンプルなAlexaTextListの例
このページは役に立ちましたか？

最終更新日: 2020 年 11 月 20 日