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

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

使用方法

メールエクスペリエンスフラグメントコンポーネントを使用すると、コンテンツ作成者は、既存のエクスペリエンスフラグメントのバリエーションから選択して、コンテンツ内に配置できます。エクスペリエンスフラグメントは、コンテンツとレイアウトの両方を含んだコンテンツのグループであり、すべてのチャネルで再利用可能です。

  • このコンポーネントのプロパティは、設定ダイアログで定義できます。
  • コンポーネントをコンテンツに追加するときのコンポーネントのデフォルトは、デザインダイアログで定義できます。

メールエクスペリエンスフラグメントコンポーネントでは、ローカライズされたサイト構造をサポートしています。

バージョンと互換性

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

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

コンポーネントのバージョン AEM 6.5 AEM as a Cloud Service
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 がレンダリングされます。

フォールバック

メールエクスペリエンスフラグメントコンポーネントでは、対応するローカライズされたコンポーネントを次の順序で探します。

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

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

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

技術的詳細

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

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

設定ダイアログ

設定ダイアログでは、コンテンツでレンダリングするエクスペリエンスフラグメントバリエーションをコンテンツ作成者が選択できます。

メールエクスペリエンスフラグメントコンポーネントの編集ダイアログ

選択ダイアログを開く」ボタンを使用して、コンポーネントセレクターを開き、コンテンツページに追加するエクスペリエンスフラグメントコンポーネントバリエーションを選択します。

メールエクスペリエンスフラグメントコンポーネントをテンプレートに追加する場合、エクスペリエンスフラグメントがローカライズされていれば、このコンポーネントは自動的にローカライズされます。したがって、ページ上でレンダリングされるものは、明示的に選択したコンポーネントと異なる場合があります。詳しくは、上記の例を参照してください。

また、ID を定義することもできます。このオプションを使用すると、HTM 内のコンポーネントの一意の ID を制御できます。

  • これを空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
  • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
  • ID を変更すると、CSS に影響を与える可能性があります。

「スタイル」タブ

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

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

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

デザインダイアログ

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

「スタイル」タブ

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

このページ