Show Menu
トピック×

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

コアコンポーネントのコンテンツフラグメントコンポーネントを使用すれば、 コンテンツフラグメント を表示できます。
コアコンポーネントのリリース 2.4.0 以前は、コンテンツフラグメントコンポーネントはコアコンポーネントの拡張機能として使用でき、別個にダウンロードして明示的に有効にする必要がありました。

使用方法

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

バージョンと互換性

このドキュメントでは、コンテンツフラグメントコンポーネントの現在のバージョン(2017 年 10 月にコアコンポーネントのリリース 1.1.0 で導入された v1)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v1
互換性あり
互換性あり
互換性あり
リリース 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 つ選択でき、段落コントロールオプションを有効にします。
    • 複数の要素 - 選択したコンテンツフラグメントの複数の要素を選択できます。
  • 要素 - コンテンツフラグメントを組み込む要素
  • バリエーション - 使用するコンテンツフラグメントのバリエーション(デフォルトは​ マスター
  • 段落
    • すべて - すべての段落を表示します
    • 範囲
      • 表示する段落の範囲をセミコロンで区切って指定します
      • 例えば、 1;3-5;7;9-* では、1 番目、3 番目から 5 番目まで、7 番目、9 番目が最終的な段落に含まれます。
  • ID - このオプションを使用すると、HTML 内および データレイヤー 内のコンポーネントの一意の識別子を制御できます。
    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「段落コントロール」タブ

複数要素 ​モードが選択されている場合は、このタブを使用できません。
  • 段落 - すべての段落、または特定の範囲を選択できます。
  • 見出しを独自の段落として処理

デザインダイアログ

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