Paginated List

Paginated List

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

互換性

AlexaPaginatedListは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

サポートされていないViewportでAlexaPaginatedListを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaPaginatedListを使用するには、alexa-layoutsパッケージをインポートします。

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

AlexaPaginatedListのパラメーター

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が指定されていない場合に使用されます。リスト項目に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

entities

配列

—

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

サポートされません

1.2.0

headerAttributionImage

文字列

—

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

サポートされません

1.1.0

headerAttributionOpacity

数値

0.8

ヘッダーのアトリビューションテキストとアトリビューション画像のopacityです。0～1の間の数値を設定します。

サポートされません

1.3.0

headerAttributionPrimacy

ブール値

true

trueの場合、画面サイズの制約のために1つの要素しか表示されないデバイスでは、headerAttributionImageを表示します。falseの場合、headerTitleとheaderSubtitleを表示します。

サポートされません

1.1.0

headerAttributionText

文字列

—

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

サポートされません

1.1.0

headerBackButton

ブール値

false

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

サポートされません

1.1.0

headerBackButtonAccessibilityLabel

文字列

Back

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

サポートされません

1.1.0

headerBackButtonCommand

コマンド

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

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

サポートされません

1.1.0

headerBackgroundColor

文字列

transparent

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

サポートされません

1.1.0

headerDivider

ブール値

false

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

サポートされません

1.1.0

headerSubtitle

文字列

—

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

サポートされません

1.1.0

headerTitle

文字列

—

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

サポートされません

1.1.0

layoutDirection

文字列

${environment.layoutDirection}

コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。

レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。

サポートされません

1.4.0

listId

文字列

—

リストとして使用されるPagerコンポーネントに割り当てるIDです。ビルトインインテントを使用して音声でスクロールできるようにするには、listIdに値を設定します。SpeakListコマンドを使用する場合など、リストをコマンドのターゲットとして指定する必要がある場合も、このパラメーターにIDを設定します。

サポートされません

1.2.0

listItems

項目の配列

—

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

サポートされません

1.1.0

primaryAction

コマンド

—

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

サポートされません

1.1.0

speechItems

任意

—

読み上げ項目の配列です。テンプレートは、この配列の各項目を、対応するリスト項目のspeechプロパティに割り当てます。このプロパティは、SpeakListコマンドを使用してリスト項目を読み上げる場合に使用します。

サポートされません

1.2.0

theme

文字列

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

この例では、リスト項目を選択すると、arguments配列に"ListItemSelected"とリスト項目の番号を含むUserEventリクエストが送信されます。このイベントをテストするには、例をスキルにコピーします。

このページは役に立ちましたか？

最終更新日: 2025 年 11 月 11 日