Show Menu
TOPICS×

エクスペリエンスフラグメントコンポーネント

コアコンポーネントのエクスペリエンスフラグメントコンポーネントを使用すると、コンテンツ作成者は、ローカライズされたサイト構造をサポートしながら、エクスペリエンスフラグメントのバリエーションをページに配置できます。

使用方法

コアコンポーネントエクスペリエンスフラグメントコンポーネントを使用すると、コンテンツ作成者は既存のエクスペリエンスフラグメントのバリエーションから選択し、コンテンツページに配置できます。 エクスペリエンスフラグメントコンポーネントでは、ローカライズされたサイト構造もサポートしています。

ローカライズされたサイト構造のサポート

エクスペリエンスフラグメントコンポーネントは、ローカライズされたサイト構造に適応でき、ページのローカリゼーションに基づいて適切なエクスペリエンスフラグメントをレンダリングします。それには、エクスペリエンスフラグメントが次の条件を満たす必要があります。
  • エクスペリエンスフラグメントコンポーネントがテンプレートに追加される。
  • このテンプレートが、
    /content/<site>
    配下のローカライズされた構造の一部となる新しいコンテンツページの作成に使用される。
  • コンテンツページで参照されるエクスペリエンスフラグメントが、同じコンポーネント名を使用するなど、
    /content/<site>
    配下のサイトと同じパターンに従っており、
    /content/experience-fragments
    配下のローカライズされたエクスペリエンスフラグメント構造の一部となる。
この場合、現在のページと同じローカリゼーション(言語、ブループリント、ライブコピーのいずれか)を持つフラグメントがテンプレートの一部としてレンダリングされます。
この動作は、テンプレートに追加されたエクスペリエンスフラグメントコンポーネントに限られます。個々のコンテンツページに追加されたエクスペリエンスフラグメントコンポーネントは、コンポーネント内で設定されたとおりのエクスペリエンスフラグメントレンディションをレンダリングします。

コンテンツが次のような構造になっているとします。
/content +-- experience-fragments \-- we-retail +-- language-masters +-- us +-- en +-- footerTextXf \-- headerTextXf \-- es +-- footerTextXf \-- headerTextXf \-- ch +-- de +-- footerTextXf \-- headerTextXf +-- fr +-- footerTextXf \-- headerTextXf \-- it +-- footerTextXf \-- headerTextXf +-- we-retail +-- language-masters +-- us +-- en \-- es +-- ch +-- de +-- fr \-- it +-- wknd-events \-- wknd-shop
/content/experience-fragments/we-retail
配下の構造が
/content/we-retail
の構造を反映していることに注意してください。
このとき、エクスペリエンスフラグメントコンポーネント
/content/experience-fragments/we-retail/us/en/footerTextXf
がテンプレートに配置される場合、ローカライズされたページをそのテンプレートに基づいて作成すると、ローカライズされたコンテンツページに対応するローカライズされたエクスペリエンスフラグメントが自動的にレンダリングされます。
したがって、同じテンプレートを使用する
/content/we-retail/ch/de
下のコンテンツページに移動すると、
/content/experience-fragments/we-retail/us/en/footerTextXf
ではなく
/content/experience-fragments/we-retail/ch/de/footerTextXf
がレンダリングされます。

フォールバック

エクスペリエンスフラグメントコンポーネントでは、対応するローカライズされたコンポーネントを次の順序で探します。
  1. まず、言語ルートの検索を試みます。
  2. 言語ルートが見つからない場合は、ブループリントを探します。
  3. ブループリントが見つからない場合は、ライブコピーを探します。
  4. ライブコピーが見つからない場合は、コンポーネントで設定されているエクスペリエンスフラグメントがデフォルトで選択されます。

バージョンと互換性

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

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

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

技術的詳細

The latest technical documentation about the Experience Fragment Component can be found on GitHub .
コアコンポーネントの開発について詳しくは、 コアコンポーネント開発者向けドキュメント を参照してください。

設定ダイアログ

設定ダイアログでは、ページでレンダリングするエクスペリエンスフラグメントバリエーションをコンテンツ作成者が選択できます。
選択ダイアログを開く
」ボタンを使用して、コンポーネントセレクターを開き、コンテンツページに追加するエクスペリエンスフラグメントコンポーネントバリエーションを選択します。
なお、エクスペリエンスフラグメントコンポーネントをテンプレートに追加する場合、エクスペリエンスフラグメントがローカライズされていれば、テンプレートは自動的にローカライズされます。したがって、ページ上にレンダリングされるものは、明示的に選択したコンポーネントと異なる場合があります。詳しくは、 上記の例 を参照してください。

デザインダイアログ

デザインダイアログでは、エクスペリエンスフラグメントコンポーネントの使用時にコンテンツ作成者に提供されるオプションと、エクスペリエンスフラグメントコンポーネントの配置時のデフォルト設定をテンプレート作成者が定義できます。
エクスペリエンスフラグメントコンポーネントでは、AEM スタイルシステム をサポートしています。