Show Menu
TOPICS×

リストコンポーネント

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

使用方法

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

バージョンと互換性

このドキュメントでは、リストコンポーネントの現在のバージョン(2018 年 1 月にコアコンポーネントのリリース 2.0.0 で導入された v2)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.3
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v2
-
互換性あり
互換性あり
互換性あり
互換性あり
互換性あり
互換性あり
-
コアコンポーネントのバージョンとリリースについて詳しくは、 コアコンポーネントのバージョン を参照してください。

コンポーネント出力のサンプル

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

技術的詳細

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

編集ダイアログ

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

「リスト設定」タブ

リストは様々な方法で作成できます。
リストの作成方法に関係なく、常に設定できる 並べ替えおよび ID オプション があります。
コンテンツ作成者が選択したリストの作成方法に応じて、追加の設定オプションが変わります。

子ページ

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

固定リスト

リストは、項目の固定リストを使用して作成できます。
追加
」ボタンをタップまたはクリックして、新しい項目をリストに挿入します。
  • リスト内の項目のテキストを入力するか、
    選択ダイアログ
    ​を使用して AEM から項目を選択します。
  • リスト内の項目を再配置するには、ドラッグハンドルを使用します。
  • リスト内の項目を削除するには、ごみ箱アイコンを使用します。

検索

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

タグ

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

並べ替えオプション

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

「項目設定」タブ

「項目設定」タブを使用すれば、リスト要素の書式設定を設定できます。
  • 項目をリンク
    項目を対応するページにリンクします
  • 説明を表示
    リンク項目の説明を表示します
  • 日付を表示
    リンク項目の変更日を表示します

デザインダイアログ

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

リスト設定

リスト設定
」タブでは、日付の形式を定義したり、コンポーネントでコンテンツ作成者が使用できるリストの種類を定義したりできます。
  • 日付の形式
    最終変更日の表示に使用する形式
  • 子を無効にする
    コンポーネントで子リストタイプを無効にします
  • 静的を無効にする
    コンポーネントで静的リストタイプを無効にします
  • 検索を無効にする
    コンポーネントで検索リストタイプを無効にします
  • タグを無効にする
    コンポーネントでタグリストタイプを無効にします

項目設定

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

「スタイル」タブ

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