ドキュメントAEMAEM Screens ガイド

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

Last update: Tue Apr 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Intermediate
  • Admin
  • Developer

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

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

概要 overview

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

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

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

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

前提条件 pre-requisites

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

プロジェクトの作成

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

A デモプロジェクト がAEM Screensに追加されました。

チャネルの作成

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

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

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

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

A TestChannel さんがに追加されました デモプロジェクト.
screen_shot_2019-07-29at105101am

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

次の手順に従って、コンテンツをから適用します We.Retail 宛先： TestChannel 。対象： デモプロジェクト.

  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. に移動します。 スクリーン > チャネル > TestChannel.

  2. クリック プレビュー アクションバーから。

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

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