Paginated List



Paginated List

Alexa Paginated Listテンプレート（AlexaPaginatedList）は、複数のページにまたがる項目のリストを表示します。このテンプレートは全画面に表示されるため、ヘッダーと背景を含めることができます。一連の項目をテキストベースで指定し、表示します。テンプレートには、現在のページと総ページ数を表示するページカウンターが含まれています。

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

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

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

AlexaPaginatedListのパラメーター

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

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

backgroundAlign

文字列

center

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

1.1.0

backgroundBlur

ブール値

false

trueの場合、背景画像にぼかしが入ります。backgroundImageSourceを設定している場合にのみ適用します。

1.1.0

backgroundColorOverlay

ブール値

false

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

1.1.0

backgroundColor

色

なし

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

1.1.0

backgroundImageSource

文字列

なし

背景画像ソースのURLです。backgroundVideoSourceを指定していない場合に使用します。リスト項目にimageSourceを設定すると、個々のリスト項目のこのプロパティを上書きできます。

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

headerAttributionImage

文字列

なし

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

1.1.0

headerAttributionPrimacy

ブール値

true

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

1.1.0

headerAttributionText

文字列

なし

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

1.1.0

headerBackButtonAccessibilityLabel

文字列

なし

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

1.1.0

headerBackButtonCommand

コマンド

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

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

1.1.0

headerBackButton

ブール値

false

trueの場合、戻るボタンをヘッダーに表示します。ユーザーがこのボタンをクリックしたときに実行するコマンドを指定するには、headerBackButtonCommandプロパティを設定します。

1.1.0

headerBackgroundColor

文字列

transparent

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

1.1.0

headerDivider

ブール値

false

trueの場合、ヘッダーの下に区切り線を表示して、コンテンツと区別できるようにします。

1.1.0

headerSubtitle

文字列

なし

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

1.1.0

headerTitle

文字列

なし

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

1.1.0

listItems

項目の配列

none

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

1.1.0

primaryAction

コマンド

none

項目が選択されたときにトリガーされるアクションです。

1.1.0

theme

文字列

dark

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

1.1.0

type

文字列

なし

常にAlexaPaginatedListに設定されます。

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