コンテンツ作成者は、コアコンポーネントのエクスペリエンスフラグメントコンポーネントを使用して、ローカライズされたサイト構造をサポートしながら、エクスペリエンスフラグメントのバリエーションをページに配置できます。
コアコンポーネントのエクスペリエンスフラグメントコンポーネントを使用すると、コンテンツ作成者が、既存のエクスペリエンスフラグメントバリエーションから選択してコンテンツページに配置できます。エクスペリエンスフラグメントコンポーネントでは、ローカライズされたサイト構造もサポートしています。
このドキュメントでは、エクスペリエンスフラグメントコンポーネントの現在のバージョン(2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v2)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v2 | - | 互換性あり | 互換性あり |
v1 | 互換性あり | 互換性あり | 互換性あり |
コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。
エクスペリエンスフラグメントコンポーネントは、ローカライズされたサイト構造に適応でき、ページのローカリゼーションに基づいて適切なエクスペリエンスフラグメントをレンダリングします。それには、エクスペリエンスフラグメントが次の条件を満たす必要があります。
/content/<site>
配下のローカライズされた構造の一部となる新しいコンテンツページの作成に使用される。/content/<site>
配下のサイトと同じパターンに従っており、/content/experience-fragments
配下のローカライズされたエクスペリエンスフラグメント構造の一部となる。この場合、現在のページと同じローカリゼーション(言語、ブループリント、ライブコピーのいずれか)を持つフラグメントがテンプレートの一部としてレンダリングされます。
この動作は、テンプレートに追加されたエクスペリエンスフラグメントコンポーネントに限られます。個々のコンテンツページに追加されたエクスペリエンスフラグメントコンポーネントは、コンポーネント内で設定されたとおりのエクスペリエンスフラグメントレンディションをレンダリングします。
コンテンツが次のような構造になっているとします。
/content
+-- experience-fragments
\-- wknd
+-- language-masters
+-- us
+-- en
+-- footerTextXf
\-- headerTextXf
\-- es
+-- footerTextXf
\-- headerTextXf
\-- ch
+-- de
+-- footerTextXf
\-- headerTextXf
+-- fr
+-- footerTextXf
\-- headerTextXf
\-- it
+-- footerTextXf
\-- headerTextXf
+-- wknd
+-- language-masters
+-- us
+-- en
\-- es
+-- ch
+-- de
+-- fr
\-- it
+-- wknd-events
\-- wknd-shop
/content/experience-fragments/wknd
配下の構造が /content/wknd
の構造を反映していることに注意してください。
このとき、エクスペリエンスフラグメントコンポーネント /content/experience-fragments/wknd/us/en/footerTextXf
がテンプレートに配置される場合、ローカライズされたページをそのテンプレートに基づいて作成すると、ローカライズされたコンテンツページに対応するローカライズされたエクスペリエンスフラグメントが自動的にレンダリングされます。
したがって、同じテンプレートを使用する /content/wknd/ch/de
下のコンテンツページに移動すると、/content/experience-fragments/wknd/us/en/footerTextXf
ではなく /content/experience-fragments/wknd/ch/de/footerTextXf
がレンダリングされます。
エクスペリエンスフラグメントコンポーネントでは、対応するローカライズされたコンポーネントを次の順序で探します。
エクスペリエンスフラグメントコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。
エクスペリエンスフラグメントコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
設定ダイアログでは、ページでレンダリングするエクスペリエンスフラグメントバリエーションをコンテンツ作成者が選択できます。
「選択ダイアログを開く」ボタンを使用して、コンポーネントセレクターを開き、コンテンツページに追加するエクスペリエンスフラグメントコンポーネントバリエーションを選択します。
なお、エクスペリエンスフラグメントコンポーネントをテンプレートに追加する場合、エクスペリエンスフラグメントがローカライズされていれば、テンプレートは自動的にローカライズされます。したがって、ページ上にレンダリングされるものは、明示的に選択したコンポーネントと異なる場合があります。詳しくは、上記の例を参照してください。
また、ID を定義することもできます。このオプションを使用すると、HTML 内および データレイヤー内のコンポーネントの一意の識別子を制御できます。
エクスペリエンスフラグメントコンポーネントでは、AEM スタイルシステムをサポートしています。
ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。
ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。
デザインダイアログでは、エクスペリエンスフラグメントコンポーネントの使用時にコンテンツ作成者に提供されるオプションと、エクスペリエンスフラグメントコンポーネントの配置時のデフォルト設定をテンプレート作成者が定義できます。
エクスペリエンスフラグメントコンポーネントは、AEM スタイルシステムをサポートしています。