コンテンツフラグメントリストコンポーネント

コアコンポーネントのコンテンツフラグメントリストコンポーネントを使用すれば、コンテンツフラグメントのリストを表示できます。

使用方法

コアコンポーネントのコンテンツフラグメントリストコンポーネントを使用すれば、コンテンツフラグメントモデルに基づいてコンテンツフラグメントのリストをページに組み込むことができます。これは、他のアプリケーションで容易に使用できるヘッドレスコンテンツを作成する場合に特に便利です。

バージョンと互換性

このドキュメントでは、コンテンツフラグメントコンポーネントの現在のバージョン（2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v2）について説明します。

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

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

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

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

コンテンツフラグメントリストコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細

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

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

設定ダイアログ

設定ダイアログでは、リストを構成するコンテンツフラグメントとそれらのフラグメントを組み込む要素をコンテンツ作成者が定義できます。

「プロパティ」タブ

「プロパティ」タブでは、リストに含めるコンテンツフラグメントを定義します。主に、選択したコンテンツフラグメントモデルに基づいていますが、他のフィルターオプションも使用できます。

コンテンツフラグメントリストコンポーネントの編集ダイアログの「プロパティ」タブ

  • モデル - リストの基となるコンテンツフラグメントモデルのパス。
    • デフォルトでは、モデルパス​として定義された、モデルのすべてのコンテンツフラグメントがリストに含まれます。
  • 親パス - リストを作成する元となる親パス。
    • 選択した​モデルパス​に基づくコンテンツフラグメントが、指定した​親パス​上のフラグメントにフィルタリングされます。
      • フィールドの右側にある「選択ダイアログを開く」ボタンをクリックまたはタップして、パスを指定します。
  • タグ - 指定したタグを持つコンテンツフラグメントのみリストに含まれます。
    • フィールドの右側にある「選択ダイアログを開く」ボタンをクリックまたはタップして、タグを指定します。
    • 選択したタグの横にある「X」をクリックまたはタップすれば、そのタグを削除できます。
  • 並べ替え順 - リストの並べ替えに使用するコンテンツフラグメントモデルのフィールド
    • 選択できるのは、テキストフィールド（数値、日付、時刻など）のみです。
  • 並べ替え順序 - 「並べ替え順」フィールドによるリストの並べ替え方法
    • 昇順または降順
  • 最大項目数 - リストに表示する項目の最大数
    • 値が指定されない場合は、すべての項目が返されます。
  • ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。
メモ

コアコンポーネントのリリース 2.7.0 では、「並べ替え順」、「並べ替え順序」、「最大項目数」の各オプションが導入されました。

「エレメント」タブ

（「最大項目数」フィールドで制限されない限り）デフォルトでは、コンテンツフラグメントモデルのすべての要素がリストに含まれます。「エレメント」タブを使用すると、含める特定の要素を指定できます。

コンテンツフラグメントリストコンポーネントの編集ダイアログの「要素」タブ

  • エレメント - 指定したリストに含まれているコンテンツフラグメントの要素のみ表示されます。
    • 「追加」ボタンをクリックまたはタップすると、新しい要素を追加できます。
    • 「削除」ボタンをクリックまたはタップすると、選択した要素を削除できます。
    • 「順序」ハンドルをドラッグすると、要素の順序を並べ替えることができます。

「スタイル」タブ

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

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

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

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

デザインダイアログ

「スタイル」タブ

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

このページ