Text List



Text List

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

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

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

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

AlexaTextListパラメーター

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

名前 デフォルト 説明 追加されたバージョン

backgroundAlign

文字列

center

背景画像または背景ビデオの配置を指定します。デフォルトはcenterです。

1.1.0

backgroundBlur

ブール値

false

trueの場合、背景画像にぼかしが入ります。backgroundImageSourceを設定している場合にのみ適用します。デフォルトはfalseです。

1.1.0

backgroundColorOverlay

ブール値

false

trueの場合、背景にレイヤーが適用されます。画像やビデオで、項目の上に表示されるテキストが読み取りやすくなります。デフォルトはfalseです。

1.1.0

backgroundColor

なし

背景色として使用する色です。backgroundImageSourcebackgroundVideoSourceのいずれも指定していない場合に使用します。

1.1.0

backgroundImageSource

文字列

なし

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

1.1.0

backgroundOverlayGradient

ブール値

false

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

1.1.0

backgroundScale

文字列

best-fill

背景画像または背景ビデオのサイズを調整する方法を指定します。デフォルトはbest-fillです。

1.1.0

backgroundVideoAudioTrack

文字列

foreground

ビデオを再生する際に流すオーディオトラックです。foregroundbackgroundnoneのいずれかを指定できます。デフォルトはforegroundです。

1.1.0

backgroundVideoAutoPlay

ブール値

false

trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。backgroundVideoSourceを設定している場合に適用します。デフォルトはfalseです。

1.1.0

backgroundVideoSource

ビデオソース

なし

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

1.1.0

headerAttributionImage

文字列

なし

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

1.0.0

headerAttributionPrimacy

ブール値

true

画面サイズにより1つの要素しか表示できないデバイスでは、アトリビューションが優先されます。falseに設定すると、タイトルとサブタイトルが表示されます。デフォルトはtrueです。

1.0.0

headerAttributionText

文字列

なし

Headerで表示するアトリビューションのテキストです。headerAttributionTextの値は、headerAttributionImageが指定されておらず、かつ、headerAttributionPrimacytrueの場合、または、デバイスがタイトル/サブタイトルとアトリビューションの両方を表示する場合のみ表示されます。

1.0.0

headerBackButtonAccessibilityLabel

文字列

なし

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

1.1.0

headerBackButtonCommand

コマンド

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

ユーザーが戻るボタンを選択したときに実行するコマンドです。デフォルトは、「GoBack」引数の付いたSendEventです。

1.1.0

headerBackButton

ブール値

false

戻るボタンの表示を切り替えます。デフォルトはfalseです。

1.0.0

headerBackgroundColor

文字列

transparent

Headerの背景色として使用するオプションの色の値です。デフォルトはtransparentです。

1.0.0

headerDivider

ブール値

false

切り替えてヘッダーの下部に区切り線を表示し、下のコンテンツと区別します。デフォルトはfalseです。

1.1.0

headerSubtitle

文字列

なし

Headerで表示する第2テキストです。

1.0.0

headerTitle

文字列

なし

Headerで表示する第1テキストです。

1.0.0

hideDivider

ブール値

false

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

1.1.0

hideOrdinal

ブール値

false

trueの場合、各リスト項目の横に番号を表示しません。デフォルトはfalseです。

1.1.0

listItems

listItemsの配列

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

1.1.0

primaryAction

コマンド

none

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

1.1.0

theme

文字列

dark

指定したテーマ(lightまたはdark)に応じて色が切り替わります。デフォルトのテーマはdarkです。

1.1.0

type

文字列

なし

常にAlexaTextListに設定されます。

1.1.0

リスト項目を指定する

AlexaTextListレイアウトは、listItemsプロパティに項目の配列を取ります。各項目は、primaryTextプロパティを持つオブジェクトです。たとえば、次のように項目の配列を定義できます。

{
  "listItems": [
    {
      "primaryText": "最初のリスト項目です。"
    },
    {
      "primaryText": "2番目のリスト項目です。"
    },
    {
      "primaryText": "3番目のリスト項目です。"
    }
  ]
}

これは、AlexaTextListlistItems配列パラメーター、または別のデータソースで定義できます。

AlexaTextListの例

{
  "type": "APL",
  "version": "1.1",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.1.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "AlexaTextList",
        "theme": "${viewport.theme}",
        "headerTitle": "Header Title",
        "headerSubtitle": "Header Subtitle",
        "headerAttributionText": "Attribution",
        "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
        "headerAttributionPrimacy": true,
        "headerDivider": true,
        "headerBackButton": true,
        "headerBackButtonAccessibilityLabel": "back",
        "headerBackgroundColor": "transparent",
        "headerBackButtonCommand": {
          "type": "SendEvent",
          "arguments": [
            "goBack"
          ]
        },
        "backgroundColor": "transparent",
        "backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/BT6_Background.png",
        "backgroundVideoSource": null,
        "backgroundScale": "best-fill",
        "backgroundAlign": "center",
        "backgroundBlur": false,
        "backgroundColorOverlay": false,
        "backgroundOverlayGradient": false,
        "backgroundVideoAutoPlay": false,
        "backgroundVideoAudioTrack": "foreground",
        "hideDivider": false,
        "hideOrdinal": false,
        "primaryAction": {
          "type": "SendEvent",
          "arguments": [
            "ListItemSelected",
            "${ordinal}"
          ]
        },
        "listItems": [
          {
            "primaryText": "リストの最初の項目です。"
          },
          {
            "primaryText": "リストの2番目の項目です。"
          },
          {
            "primaryText": "リストの3番目の項目です。"
          },
          {
            "primaryText": "このリスト項目の配列は、別のデータソースで指定することもできます。"
          }
        ]
      }
    ]
  }
}