マルチゾーンレイアウト multi-zone-layout

以下では、マルチゾーンレイアウトの使用方法について説明します。取り上げるトピックは次のとおりです。

  • 概要
  • マルチゾーンレイアウトの作成
  • 前提条件
  • 1 つ以上のゾーンでの単一アセットの使用
  • 1 つ以上のゾーンでのコンテンツシーケンスの使用

概要 overview

マルチゾーンレイアウト では、複数のゾーンコンテンツを作成し、ビデオ、画像およびテキストなどの様々なアセットを使用して、単一のスクリーンに組み合わせることができます。 画像、ビデオおよびテキスト取り込み、すべてを組み合わせて、直感的なデジタルエクスペリエンスを作成できます。

プロジェクト要件に応じて、1 つのチャネルに複数のゾーンが必要になり、1 つの包括的なユニットとして編集することがあります。例えば、単一チャネルの 3 つの個別のゾーンで実行する、関連するソーシャルメディアフィードを含む製品シーケンスなどです。

前提条件 prerequisites

この機能の実装を開始する前に、次の概念に関する知識を持っていることを確認してください。

マルチゾーンレイアウトの作成 creating-multi-zone-layout

チャネルの作成時に、別のテンプレートを使用してチャネル内にゾーンを作成できます。 1 つの画像、ビデオまたは埋め込みチャンネルを追加して、複数のアセットを 1 つのシーケンスとして表示できます。

チャネルの作成

  1. Adobe Experience Manager リンク(左上)を選択し、「Screens」を選択します。または、http://localhost:4502/screens.html/content/screens に直接アクセスすることもできます。

  2. チャネル ​フォルダーに移動し、アクションバーの「作成」をクリックします。

  3. 作成 ​ウィザードで「1 x 2 分割画面チャネル」を選択します。

  4. 次へ」をクリックし、「タイトル」に「MultiZone」と入力します。

  5. 作成」をクリックして、チャネルの作成を完了します。

1 つ以上のゾーンでの単一アセットの使用 using-single-assets-in-one-or-more-zones

画像やビデオなどの単一アセットをすべての個々のゾーンで使用できます。実装するには、以下の手順に従います。

  1. チャネルにコンテンツを追加する

    1. に移動します。 ゾーン > チャネル> MultiZone.
    2. 「」を選択します MultiZone チャネルとクリック 編集 アクションバーから。
  2. チャネルに画像を追加する

    2 つのゾーンで 1 つの画像またはビデオを再生するには、画像をチャネルエディターの各ゾーンにドラッグ&ドロップするだけです(下図を参照)。

    画像

1 つ以上のゾーンでのコンテンツシーケンスの使用 using-sequenced-content-in-one-or-more-zones

異なるゾーンに画像のシーケンスやビデオを表示する場合は、以下の手順に従ってください。

  1. チャネルフォルダーの作成

    1. に移動します。 ゾーン > MultiZone > チャネル をクリックして、 作成 アクションバーから。
    2. 作成 ​ウィザードから「チャネルフォルダー」を選択し、「次へ」をクリックします。
    3. 「タイトル」に「EmbeddedChannels」と入力し、「作成」をクリックします。

    screen_shot_2018-12-19at125428pm

  2. チャネルフォルダーにさらに 2 つのチャネルを追加する

    1. に移動します。 ゾーン > チャネル > EmbeddedChannels をクリックして、 作成 アクションバーから。
    2. を選択 シーケンスチャネル から 作成 という名前のチャネルの作成ウィザード Zone1.
    3. を選択 Zone1 をクリックして、 編集 アクションバーから。
    4. このチャネルに画像をいくつかドラッグ&ドロップします。
    5. 同様に、というタイトルの別のシーケンスチャネルを作成します Zone2 。対象: EmbeddedChannels フォルダー。
    6. このチャネルにビデオをドラッグ&ドロップします。

    次の図にチャネルを示します Zone1 および Zone2:

    screen_shot_2018-12-19at125930pm

    エディターに追加された画像 Zone1 シーケンスチャネルを次に示します。

    screen_shot_2018-12-19at125930pm

    エディターに追加されたビデオ Zone2 シーケンスチャネルを次に示します。

    screen_shot_2018-12-19at125930pm

  3. メインチャネル(MultiZone)に埋め込みシーケンス(コンポーネント)を追加する

    1. に移動します。 ゾーン > チャネル > MultiZone.

    2. クリック 編集 アクションバーから。

    3. 埋め込みシーケンス ​コンポーネントを両方のゾーンにドラッグ&ドロップします。

    4. いずれかのゾーンの埋め込みシーケンスを選択します。

    5. エディターで、埋め込みシーケンスの​ 設定(レンチ)アイコンをクリックします。

    6. チャネルパスをとして選択 ゾーン > チャネル > EmbeddedChannels > Zone1 ​を参照してください(下図を参照)。

    7. 同様に、 Zone2 をエディター内の別の埋め込みシーケンスコンポーネントに追加します。

      画像

ロケーションとディスプレイの作成 creating-location

AEM Screens Player でコンテンツを表示できるように、場所とディスプレイを作成します。

  1. ロケーションの作成

    1. に移動します。 ゾーン > 場所 フォルダー。
    2. 「」を選択します 場所 フォルダーと選択 作成 アクションバーから。
    3. を選択 場所 から 作成 ウィザードと選択 .
    4. を入力 タイトル as サンノゼ を選択して、 作成.
  2. ディスプレイの作成

    1. に移動します。 ゾーン > 場所 フォルダー。
    2. 「」を選択します サンノゼ 場所と選択 作成 アクションバーから。
    3. を選択 表示 から 作成 ウィザードと選択 .
    4. を入力 タイトル as ロビー を選択して、 作成.

ディスプレイへのチャネルの割り当て channel-channel

コンテンツを表示するには、ディスプレイにチャネルを割り当てます。ディスプレイにチャネルを割り当てるには、次の手順に従います。

  1. ディスプレイへのチャネルの割り当て

    1. に移動します。 ゾーン > 場所 > サンノゼ> ロビー.

    2. 「」を選択します ロビー 表示して選択 チャネルを割り当て アクションバーから。

    3. MultiZone チャネルのパスを「チャネルパス」に入力します。

    4. サポートされているイベント」として、「最初の読み込み」、「待機中画面」、「タイマー」を設定します。

    5. 保存」を選択します。

      画像

    6. 同様に、他の 2 つの埋め込みチャネル(Zone1 および Zone2)を追加して表示します。

    7. 3 つのチャネルすべてを ロビー ディスプレイを選択すると、割り当てられたチャネルをディスプレイダッシュボードで表示できます。

      画像

      note important
      IMPORTANT
      メインチャネルを割り当てた後(この場合は MultiZone)を表示するには、他の 2 つの埋め込みチャネルを割り当てる必要があります Zone1 および Zone2 同じディスプレイにも。

デバイスの登録 registering-device

ロケーションとディスプレイをセットアップしたら、次の手順に従ってデバイスを登録し、ディスプレイをデバイスに割り当てます。

  1. デバイスの登録

    1. に移動します。 ゾーン > デバイス フォルダー。

    2. 「」を選択します デバイス フォルダーと選択 デバイスマネージャ アクションバーから。

    3. を選択 デバイスの登録 リストから保留中のデバイスを選択します。

      note note
      NOTE
      デバイスのタイトルは、「デバイスの登録」タブに表示されるデバイストークン(「トークン」フィールド)と一致する必要があります。
    4. タイトルがデバイストークンと一致する場合は、デバイスを選択し、を選択します。 デバイスの登録 アクションバーから。

    5. 登録コードが Screens プレーヤーのコードと一致する場合 デバイスの登録 タブ、選択 Validate アクションバーから。

      画像

    6. を入力 タイトル as Chrome-Device1 を選択して、 登録.

    7. ディスプレイを割り当て」を選択し、デバイス設定のパスを選択します。

    note note
    NOTE
    Screens Player でコンテンツを表示しようとしている場合は、必ず次を選択してください オフラインコンテンツを更新 ディスプレイに割り当てられた各チャネルのチャネルダッシュボードから。

結果の表示 viewing-the-result

上記の手順を使用してマルチゾーンレイアウトを実装すると、次の出力が表示されます。

Screens Player をチェックして、2 つの異なるゾーンでコンテンツを表示する出力を確認します。 左ゾーンと右ゾーン(どちらも埋め込みシーケンスをコンポーネントとして使用します)。

左ゾーンはシーケンスチャネルで、右ゾーンにはビデオが含まれています。

new2-1

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