エクスペリエンスフラグメントの使用

ここでは、以下のトピックについて説明します。

• 概要
• AEM Screens でのエクスペリエンスフラグメントの使用
• ページへの変更の反映

概要

エクスペリエンスフラグメント​は、ページ内で参照できるコンテンツおよびレイアウトを含む 1 つ以上のコンポーネントのグループです。エクスペリエンスフラグメントには、段落システム内に含めることができる 1 つ以上のコンポーネントなど、任意のコンポーネントを含めることができ、完全なエクスペリエンスに参照されるか、3 番目のエンドポイントから要求されます。

AEM Screens でのエクスペリエンスフラグメントの使用

例えば、以下のワークフローでは、Sites の We.Retail に含まれているエクスペリエンスフラグメントを使用する方法を示しています。Web ページを選択し、そのコンテンツを対象プロジェクトの AEM Screens チャネルで利用できます。

前提条件

チャネルを含んだデモプロジェクトの作成

プロジェクトの作成

1. 「Screen プロジェクトを作成」をクリックして、新しいプロジェクトを作成します。
2. タイトルに「DemoProject」と入力します。
3. 「保存」をクリックします。

DemoProject が AEM Screens に追加されます。

チャネルの作成

1. 作成した DemoProject プロジェクトに移動し、チャネル​フォルダーを選択します。

2. アクションバーの「編集」をクリックして、ウィザードを開きます。

3. ウィザードで「シーケンスチャネル」テンプレートを選択し、「次へ」をクリックします。

4. 「タイトル」に「TestChannel」と入力し、「作成」をクリックします。

TestChannel が DemoProject に追加されます。

エクスペリエンスフラグメントの作成

DemoProject の TestChannel に We.Retail のコンテンツを利用するには、以下の手順に従います。

1. We.Retail の Sites ページへの移動

   1. 「Sites」に移動し、We.Retail／United States／English／Equipment ページを選択して、これを Screens チャネルのエクスペリエンスフラグメントとして使用します。

   2. アクションバーの「編集」をクリックして、Screens チャネルのエクスペリエンスフラグメントとして使用するページを開きます。

2. コンテンツの再利用

   1. チャネルに含めるフラグメントを選択します。
   2. 右側の最後のアイコンをクリックして、エクスペリエンスフラグメントバリエーションに変換​ダイアログボックスを開きます。

   

3. エクスペリエンスフラグメントの作成

   1. 「アクション」として「新しいエクスペリエンスフラグメントを作成」を選択します。

   2. 「親パス」を選択します。

   3. 「テンプレート」を選択します。ここでは、「エクスペリエンスフラグメント - 画面のバリエーション」テンプレート（このフィールドの /libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens 値）を選択します。

   4. 「フラグメントのタイトル」に「ScreensFragment」と入力します。

   5. チェックマークをオンにして、新しいエクスペリエンスフラグメントの作成を完了します。

   

   注意：オプションを選択しやすくするには、フィールドの右側にあるチェックマークをクリックして、選択ダイアログを開きます。

4. エクスペリエンスフラグメントのライブコピーの作成

   1. AEM ホームページに移動します。
   2. 「エクスペリエンスフラグメント」を選択し、「ScreensFragment」をハイライト表示して、「バリエーションをライブコピーとして」をクリックします（下図を参照）。

   

   c. ライブコピーを作成​ウィザードで「ScreensFragment」を選択し、「次へ」をクリックします。

   d. 「タイトル」と「名前」に「Screens」と入力します。

   e. 「作成」をクリックして、ライブコピーを作成します。

   f. 「完了」をクリックして、ScreensFragment ページに戻ります。

   

   メモ

   Screens フラグメントを作成したら、フラグメントのプロパティを編集できます。フラグメントを選択し、アクションバーの「プロパティ」をクリックします。

   Screens フラグメントのプロパティの編集

   1. （前の手順で作成した）ScreensFragment に移動し、アクションバーの「プロパティ」をクリックします。

   2. 「オフライン設定」タブを選択します（下図を参照）。

   エクスペリエンスフラグメントに​クライアント側ライブラリ（java および css）と​静的ファイル​を追加できます。

   次の例は、クライアント側ライブラリのほか、フォントを静的ファイルの一部としてエクスペリエンスフラグメントに追加する場合を示しています。

5. Screens チャネルでのコンポーネントとしてのエクスペリエンスフラグメントの使用

   1. Screens フラグメントを使用する Screens チャネルに移動します。

   2. 「TestChannel」を選択し、アクションバーの「編集」をクリックします。

   3. サイドタブのコンポーネントアイコンをクリックします。

   4. チャネルに「エクスペリエンスフラグメント」をドラッグ＆ドロップします。

   

   e. エクスペリエンスフラグメント​コンポーネントを選択し、左上の（レンチ）アイコンをクリックして、エクスペリエンスフラグメント​ダイアログボックスを開きます。

   f. 前述の​手順 3 で作成したフラグメントの Screens ライブコピーを​パス​で選択します。

   

   f. 前述の​手順 3 で作成したフラグメントの Screens ライブコピーを「エクスペリエンスフラグメント」フィールドで選択します。

   

   h. ミリ秒を「期間」に入力します。

   i. エクスペリエンスフラグメント​ダイアログボックスで「オフライン設定」を選択し、クライアント側ライブラリと静的ファイルを定義します。

   メモ

   前述の手順 4 で設定した内容に加えて、クライアント側ライブラリや静的ファイルを追加する場合は、エクスペリエンスフラグメント​ダイアログボックスの「オフライン設定」タブで追加できます。

   

   j. チェックマークをオンにして、手順を完了します。

結果の検証

前述の手順が完了したら、次の手順で ChannelOne 内のエクスペリエンスフラグメントを検証できます。

1. TestChannel に移動します。
2. アクションバーの「プレビュー」をクリックします。

チャネル内の Sites ページ（エクスペリエンスフラグメントのライブコピー）のコンテンツが表示されます（下図を参照）。

ページへの変更の反映

ライブコピー​とは、ロールアウト設定で定義された同期アクションによって維持管理される（ソースの）コピーのことです。

上記で作成したエクスペリエンスフラグメントは Sites ページからのライブコピーなので、マスターページでその特定のフラグメントに変更を加えた場合は、チャネルつまりそのエクスペリエンスフラグメントの使用先に変更が表示されます。

マスターチャネルから目的のチャネルに変更を反映するには、以下の手順に従います。

1. Sites（マスター）ページで「エクスペリエンスフラグメント」を選択し、鉛筆アイコンをクリックして、エクスペリエンスフラグメント内の項目を編集します。

   

2. エクスペリエンスフラグメントを選択し、レンチアイコンをクリックして、画像編集用のダイアログボックスを開きます。

   

3. 商品グリッド​ダイアログボックスが開きます。

   

4. 任意の画像を編集できます。例えば、ここでは、このフラグメントの最初の画像が置き換えられます。

   

5. エクスペリエンスフラグメントを選択し、ロールアウトアイコンをクリックして、チャネルで使用されているフラグメントに変更を反映します。

   

6. 「ロールアウト」をクリックして、変更内容を確認します。

   変更がロールアウトされたことがわかります。

   

変更の検証

チャネルでの変更内容を確認するには、以下の手順に従います。

1. Screens／Channels／TestChannel に移動します。

2. アクションバーの「プレビュー」をクリックして、変更内容を確認ます。

次の画像は、TestChannel に反映された変更を示しています。

Business.Adobe.com リソース

Document Generation Version History Web Content Management Content Management Headless Cms Content Management System