リストコンポーネント（v2） list-component

Last update: Thu Sep 08 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
Core Components

作成対象：

Developer
Admin
User

コアコンポーネントのリストコンポーネントを使用すれば、動的リストや静的リストを簡単に作成できます。

使用方法 usage

リストコンポーネントを使用すれば、子ページの動的リストや、自由に定義した項目の静的リストなどを作成できます。デザインダイアログでは、利用可能なリストの種類や書式設定のオプションをテンプレート作成者が定義できます。編集ダイアログでは、利用可能なリストタイプやリスト要素の書式設定方法の中から、コンテンツエディターが選択できます。

バージョンと互換性 version-and-compatibility

このドキュメントでは、2018年1月にコアコンポーネントのリリース 2.0.0 で導入されたリストコンポーネント v1 について説明します。

CAUTION

このドキュメントでは、リストコンポーネント v2 について説明します。

リストコンポーネントの現在のバージョンについて詳しくは、リストコンポーネントのドキュメントを参照してください。

リスト内のリダイレクト redirects

ページにリダイレクトターゲットがある場合（外部 URL を指しているか別の AEM ページを指しているかに関係なく）、そのターゲットへのリンクを含むリストは、リダイレクトターゲットの URL を直接示します。

例 redirect-example

ページ B にリダイレクトするページ A を作成します。
https://aemcomponents.dev にリダイレクトするページ C を作成する
ページ D で、ページ A とページ C を含むリストコンポーネントを挿入します。
生成された各リンクは、ページ B と https://aemcomponents.dev を直接指します。

コンポーネント出力のサンプル sample-component-output

リストコンポーネントを体験したり、その設定オプションの例や、HTML 出力や JSON 出力の例を確認したりするには、コンポーネントライブラリにアクセスしてください。

技術的詳細 technical-details

リストコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

編集ダイアログ edit-dialog

編集ダイアログでは、コンテンツ作成者がリストとリスト項目を設定できます。

「リスト設定」タブ list-settings-tab

リストは様々な方法で作成できます。

子ページ
固定リスト
検索
タグ

リストの作成方法に関係なく、常に設定できる並べ替えおよび ID オプションがあります。

リストコンポーネントの編集ダイアログ

コンテンツ作成者が選択したリストの作成方法に応じて、追加の設定オプションが変わります。

子ページ child-pages

リストは、現在のページまたは別のページの子ページから作成できます。

子ページのオプション

親ページ
- リストを作成する子ページの親ページ
- 現在のページを使用する場合は空のままにします
子の深さ
階層内の何個下のレベルまで使用するか

固定リスト fixed-list

リストは、項目の固定リストを使用して作成できます。

固定リストオプション

「追加」ボタンをタップまたはクリックして、新しい項目をリストに挿入します。

リスト内の項目のテキストを入力するか、選択ダイアログ を使用して AEM から項目を選択します。
リスト内の項目を再配置するには、ドラッグハンドルを使用します。
リスト内の項目を削除するには、ごみ箱アイコンを使用します。

検索 search-options

リストは、AEM コンテンツの検索結果を使用して作成できます。

検索リストのオプション

検索クエリ
フルテキスト検索を実行してリスト要素を生成する際の対象となる文字列
検索範囲
検索の実行場所
- 選択ダイアログ を使用して AEM 内の場所を選択します。
- 空のままにした場合は現在のページが使用されます

タグ tags

リストは、特定の場所の下で特定のタグに一致するページを使用して作成できます。

タグリストのオプション

親ページ
タグマッチングの開始場所
- 選択ダイアログ を使用して AEM 内の場所を選択します。
- 空のままにした場合は現在のページが使用されます
タグ
マッチングの対象となるタグ
- 参照ダイアログを使用してタグを選択します
一致
リストに含まれるページの条件となる一致の種類を定義します
- いずれかのタグ
- すべてのタグ

並べ替えオプション sort-options

リストの作成方法にかかわらず、いつでも定義できる並べ替えオプションがあります。

並べ替えオプション

並べ替え順
要素の並べ替え方法
- タイトル
- 最終変更日
並べ替え順序
項目の並べ替え順序
- 昇順
- 降順
最大項目数
リストに表示される項目の最大数。
- すべての項目を返すには、空のままにします。
ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
- 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。