エクスペリエンスフラグメントの使用 using-experience-fragments

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

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

概要 overview

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

AEM Screens でのエクスペリエンスフラグメントの使用 using-experience-fragments-in-aem-screens

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

例えば、次のワークフローは、以下の場所からエクスペリエンスフラグメントを使用する方法を示しています。 We.Retail (サイト内)。 Web ページを選択し、そのコンテンツをプロジェクトの 1 つの AEM Screens チャネルで使用できます。

前提条件 pre-requisites

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

プロジェクトの作成

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

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

チャネルの作成

  1. に移動します。 デモプロジェクト を作成し、 チャネル フォルダー。

  2. クリック 作成 アクションバーからウィザードを開きます。

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

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

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

エクスペリエンスフラグメントの作成 creating-an-experience-fragment

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

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

    1. Sites に移動して、をクリックします。 We.Retail > 米国 > 英語 > 設備 このページをクリックして、Screens チャネルのエクスペリエンスフラグメントとして使用します。

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

  2. コンテンツの再利用

    1. チャネルに含めるフラグメントをクリックします。
    2. 右端のアイコンをクリックして、 エクスペリエンスフラグメントに変換 ダイアログが表示されます。

    screen_shot_2019-07-29at105314am

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

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

    2. 「」をクリックします 親パス.

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

    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

    note note
    NOTE
    AEM 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 。対象: パス.

    screen_shot_2019-07-26at82650pm

    f. 「」をクリックします スクリーン で作成したフラグメントのライブコピー 手順 3 が含まれる エクスペリエンスフラグメント.

    screen_shot_2019-07-26at82509pm

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

    i. 「」をクリックします オフライン設定 から エクスペリエンスフラグメント ダイアログボックスが開き、クライアントサイドライブラリと静的ファイルを定義できます。

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

    screen_shot_2019-07-26at82844pm

    j. チェックマークをクリックして、プロセスを完了します。

結果の検証 validating-the-result

上記の手順を完了したら、でエクスペリエンスフラグメントを検証できます ChannelOne 基準:

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

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

ページへの変更の反映 propagating-changes-from-the-master-page

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

作成したエクスペリエンスフラグメントは、からライブコピーだからです。 Sites ページを開き、プライマリページからその特定のフラグメントを変更すると、チャネルの変更内容が表示されます。 または、エクスペリエンスフラグメントの使用先が表示されます。

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

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

  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

変更の検証 validating-the-changes

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

  1. ScreensChannelsTestChannel に移動します。

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

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

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053