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

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

メモ

コアコンポーネントのリリース 2.4.0 以前は、コンテンツフラグメントコンポーネントはコアコンポーネントの拡張機能として提供されており、別途ダウンロードして明示的に有効にする必要がありました。

使用方法

コアコンポーネントのコンテンツフラグメントコンポーネントを使用すれば、コンテンツフラグメントをページに組み込むことができます。

バージョンと互換性

このドキュメントでは、コンテンツフラグメントコンポーネントの現在のバージョン(2017年10月にコアコンポーネントのリリース 1.1.0 で導入された v1)について説明します。

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

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1
リリース 2.17.4 以前と互換性あり
互換性あり 互換性あり
メモ

リリース 2.4.0 以前のバージョンでは、コンテンツフラグメントコンポーネントは拡張機能フォルダーに含まれていました。

apps/core/wcm/extension/components/contentfragment/v1/contentfragment

2.4.0 からは、次の場所に移動しました。

apps/core/wcm/components/contentfragment/v1/contentfragment

どちらも v1 ですが、拡張機能フォルダーから使用されていたコンテンツフラグメントコンポーネントについては、リリース 2.4.0 以降のコアコンポーネントにアップグレードしたときに新しいリソースタイプを使用できるようにするには、関連するプロキシコンポーネントを移行する必要があります。

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

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

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

技術的詳細

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

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

設定ダイアログ

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

「プロパティ」タブ

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

  • コンテンツフラグメント

    • 目的のコンテンツフラグメントへのパス
    • 選択ダイアログ​を使用して、フラグメントを見つけることができます。
  • ディスプレイモード

    • 単一のテキスト要素 - 複数行テキスト要素を 1 つ選択でき、段落コントロールオプションを有効にします。
    • 複数の要素 - 選択したコンテンツフラグメントの複数の要素を選択できます。
  • エレメント - コンテンツフラグメントを組み込む要素

  • バリエーション - 使用するコンテンツフラグメントのバリエーション(デフォルトは​マスター

  • 段落

    • すべて - すべての段落を表示します

    • 範囲

      • 表示する段落の範囲をセミコロンで区切って指定します
      • 例えば、1;3-5;7;9-* では、1 番目、3 番目から 5 番目まで、7 番目、9 番目が最終的な段落に含まれます。
  • ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。

    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「段落制御」タブ

複数の要素​モードが選択されている場合は、このタブを使用できません。

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

  • 段落 - すべての段落、または特定の範囲を選択できます。
  • 見出しを独自の段落として処理

デザインダイアログ

デザインダイアログでは、混在メディア画像とレスポンシブグリッドを処理するためのリソースタイプをテンプレート作成者が定義できます。

コンテンツフラグメントコンポーネントのデザインダイアログ

  • 内部レスポンシブグリッド

    • 内部レスポンシブグリッドに使用される Sling リソースタイプ

Adobe Client Data Layer

コンテンツフラグメントコンポーネントは、Adobe Client Data Layer をサポートしています。

このページ