リストコンポーネント(v3) list-component

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

使用方法 usage

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

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

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

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

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v4
-
互換性あり
互換性あり
v3
-
互換性あり
互換性あり
v2
互換性あり
互換性あり
互換性あり
v1
互換性あり
互換性あり
互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

リスト内のリダイレクト 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、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「項目設定」タブ item-settings-tab

「項目設定」タブを使用すれば、リスト要素の書式設定を設定できます。

項目設定

  • 項目をリンク - 項目を対応するページにリンクします
  • 説明を表示 - リンク項目の説明を表示します
  • 日付を表示 - リンク項目の変更日を表示します
  • ティーザーとして表示 - オンにすると、項目はティーザーとして表示されます

「スタイル」タブ styles-tab-edit

リストコンポーネントでは、AEM スタイルシステムをサポートしています。

ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。

ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。

リストコンポーネントの編集ダイアログの「スタイル」タブ

デザインダイアログ design-dialog

デザインダイアログでは、テンプレート作成者が、コンテンツ作成者に許可するリストの種類や、使用可能な項目設定を定義できます。

リスト設定 list-settings

リスト設定」タブでは、日付の形式を定義したり、コンポーネントでコンテンツ作成者が使用できるリストの種類を定義したりできます。

リストコンポーネントのデザインダイアログリストの設定

  • 日付の形式
    最終変更日の表示に使用する形式
  • 子を無効にする
    コンポーネントで子リストタイプを無効にします
  • 静的を無効にする
    コンポーネントで静的リストタイプを無効にします
  • 検索を無効にする
    コンポーネントで検索リストタイプを無効にします
  • タグを無効にする
    コンポーネントでタグリストタイプを無効にします

項目設定 item-settings

項目設定」タブでは、コンテンツ作成者がコンポーネント内で使用できる個々のリスト要素の書式設定オプションを定義することができます。

リストコンポーネントのデザインダイアログの項目設定

「スタイル」タブ styles-tab

画像コンポーネントは、AEM スタイルシステムをサポートしています。

Adobe Client Data Layer data-layer

リストコンポーネントは、Adobe Client Data Layer をサポートしています。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c