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

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

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

概要

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

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

メモ

次の例では、We.Retail をデモプロジェクトとして使用し、Sites ページのエクスペリエンスフラグメントを AEM Screens プロジェクトに利用します。

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

前提条件

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

プロジェクトの作成

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

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

チャネルの作成

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

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

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

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

TestChannelDemoProject に追加されます。
screen_shot_2019-07-29at105101am

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

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

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

    1. Sites に移動し、We.Retail In-StoreChannelsIdle Channel - Night を選択します。次に、このページを選択して、これを Screens チャネルのエクスペリエンスフラグメントにします。

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

  2. コンテンツの再利用

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

    screen_shot_2019-07-29at105314am

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

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

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

    3. テンプレート」を選択します。ここでは、「エクスペリエンスフラグメント - 画面のバリエーション」テンプレートを選択します。

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

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

    screen_shot_2019-07-29at105918am

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

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

    screen_shot_2019-07-29at110443am

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

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

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

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

    screen_shot_2019-07-29at110616am

    メモ

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

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

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

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

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

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

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

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

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

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

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

    screen_shot_2019-07-29at123115pm

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

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

    screen_shot_2019-07-26at82650pm

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

    screen_shot_2019-07-26at82509pm

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

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

    メモ

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

    screen_shot_2019-07-26at82844pm

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

結果の検証

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

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

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

ページへの変更の反映

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

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

メモ

ライブコピーについて詳しくは、「コンテンツの再利用:マルチサイトマネージャーとライブコピー」を参照してください。

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

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

    screen_shot_2018-06-08at122655pm

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

    screen_shot_2018-06-08at25031pm

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

    screen_shot_2018-06-08at25306pm

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

    screen_shot_2018-06-08at25608pm

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

    screen_shot_2018-06-08at31352pm

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

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

    screen_shot_2018-06-08at32148pm

変更の検証

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

  1. ScreensChannelsTestChannel に移動します。

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

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

このページ