マルチゾーンレイアウト multi-zone-layout
以下では、マルチゾーンレイアウトの使用方法について説明します。取り上げるトピックは次のとおりです。
- 概要
- マルチゾーンレイアウトの作成
- 前提条件
- 1 つ以上のゾーンでの単一アセットの使用
- 1 つ以上のゾーンでのコンテンツシーケンスの使用
概要 overview
マルチゾーンレイアウト では、複数のゾーンコンテンツを作成し、ビデオ、画像およびテキストなどの様々なアセットを使用して、単一のスクリーンに組み合わせることができます。 画像、ビデオおよびテキスト取り込み、すべてを組み合わせて、直感的なデジタルエクスペリエンスを作成できます。
プロジェクト要件に応じて、1 つのチャネルに複数のゾーンが必要になり、1 つの包括的なユニットとして編集することがあります。例えば、単一チャネルの 3 つの個別のゾーンで実行する、関連するソーシャルメディアフィードを含む製品シーケンスなどです。
前提条件 prerequisites
この機能の実装を開始する前に、次の概念に関する知識を持っていることを確認してください。
マルチゾーンレイアウトの作成 creating-multi-zone-layout
チャネルの作成時に、別のテンプレートを使用してチャネル内にゾーンを作成できます。 1 つの画像、ビデオまたは埋め込みチャンネルを追加して、複数のアセットを 1 つのシーケンスとして表示できます。
チャネルの作成
-
Adobe Experience Manager リンク(左上)を選択し、「Screens」を選択します。または、
http://localhost:4502/screens.html/content/screens
に直接アクセスすることもできます。 -
チャネル フォルダーに移動し、アクションバーの「作成」をクリックします。
-
作成 ウィザードで「1 x 2 分割画面チャネル」を選択します。
-
「次へ」をクリックし、「タイトル」に「MultiZone」と入力します。
-
「作成」をクリックして、チャネルの作成を完了します。
1 つ以上のゾーンでの単一アセットの使用 using-single-assets-in-one-or-more-zones
画像やビデオなどの単一アセットをすべての個々のゾーンで使用できます。実装するには、以下の手順に従います。
-
チャネルにコンテンツを追加する
- に移動します。 ゾーン > チャネル> MultiZone.
- 「」を選択します MultiZone チャネルとクリック 編集 アクションバーから。
-
チャネルに画像を追加する
2 つのゾーンで 1 つの画像またはビデオを再生するには、画像をチャネルエディターの各ゾーンにドラッグ&ドロップするだけです(下図を参照)。
1 つ以上のゾーンでのコンテンツシーケンスの使用 using-sequenced-content-in-one-or-more-zones
異なるゾーンに画像のシーケンスやビデオを表示する場合は、以下の手順に従ってください。
-
チャネルフォルダーの作成
- に移動します。 ゾーン > MultiZone > チャネル をクリックして、 作成 アクションバーから。
- 作成 ウィザードから「チャネルフォルダー」を選択し、「次へ」をクリックします。
- 「タイトル」に「EmbeddedChannels」と入力し、「作成」をクリックします。
-
チャネルフォルダーにさらに 2 つのチャネルを追加する
- に移動します。 ゾーン > チャネル > EmbeddedChannels をクリックして、 作成 アクションバーから。
- を選択 シーケンスチャネル から 作成 という名前のチャネルの作成ウィザード
Zone1
. - を選択
Zone1
をクリックして、 編集 アクションバーから。 - このチャネルに画像をいくつかドラッグ&ドロップします。
- 同様に、というタイトルの別のシーケンスチャネルを作成します
Zone2
。対象: EmbeddedChannels フォルダー。 - このチャネルにビデオをドラッグ&ドロップします。
次の図にチャネルを示します
Zone1
およびZone2
:エディターに追加された画像
Zone1
シーケンスチャネルを次に示します。エディターに追加されたビデオ
Zone2
シーケンスチャネルを次に示します。 -
メインチャネル(MultiZone)に埋め込みシーケンス(コンポーネント)を追加する
-
に移動します。 ゾーン > チャネル > MultiZone.
-
クリック 編集 アクションバーから。
-
埋め込みシーケンス コンポーネントを両方のゾーンにドラッグ&ドロップします。
-
いずれかのゾーンの埋め込みシーケンスを選択します。
-
エディターで、埋め込みシーケンスの 設定(レンチ)アイコンをクリックします。
-
チャネルパスをとして選択 ゾーン > チャネル > EmbeddedChannels >
Zone1
を参照してください(下図を参照)。 -
同様に、
Zone2
をエディター内の別の埋め込みシーケンスコンポーネントに追加します。
-
ロケーションとディスプレイの作成 creating-location
AEM Screens Player でコンテンツを表示できるように、場所とディスプレイを作成します。
-
ロケーションの作成
- に移動します。 ゾーン > 場所 フォルダー。
- 「」を選択します 場所 フォルダーと選択 作成 アクションバーから。
- を選択 場所 から 作成 ウィザードと選択 次.
- を入力 タイトル as サンノゼ を選択して、 作成.
-
ディスプレイの作成
- に移動します。 ゾーン > 場所 フォルダー。
- 「」を選択します サンノゼ 場所と選択 作成 アクションバーから。
- を選択 表示 から 作成 ウィザードと選択 次.
- を入力 タイトル as ロビー を選択して、 作成.
ディスプレイへのチャネルの割り当て channel-channel
コンテンツを表示するには、ディスプレイにチャネルを割り当てます。ディスプレイにチャネルを割り当てるには、次の手順に従います。
-
ディスプレイへのチャネルの割り当て
-
に移動します。 ゾーン > 場所 > サンノゼ> ロビー.
-
「」を選択します ロビー 表示して選択 チャネルを割り当て アクションバーから。
-
MultiZone チャネルのパスを「チャネルパス」に入力します。
-
「サポートされているイベント」として、「最初の読み込み」、「待機中画面」、「タイマー」を設定します。
-
「保存」を選択します。
-
同様に、他の 2 つの埋め込みチャネル(
Zone1
およびZone2
)を追加して表示します。 -
3 つのチャネルすべてを ロビー ディスプレイを選択すると、割り当てられたチャネルをディスプレイダッシュボードで表示できます。
note important IMPORTANT メインチャネルを割り当てた後(この場合は MultiZone)を表示するには、他の 2 つの埋め込みチャネルを割り当てる必要があります Zone1
およびZone2
同じディスプレイにも。
-
デバイスの登録 registering-device
ロケーションとディスプレイをセットアップしたら、次の手順に従ってデバイスを登録し、ディスプレイをデバイスに割り当てます。
-
デバイスの登録
-
に移動します。 ゾーン > デバイス フォルダー。
-
「」を選択します デバイス フォルダーと選択 デバイスマネージャ アクションバーから。
-
を選択 デバイスの登録 リストから保留中のデバイスを選択します。
note note NOTE デバイスのタイトルは、「デバイスの登録」タブに表示されるデバイストークン(「トークン」フィールド)と一致する必要があります。 -
タイトルがデバイストークンと一致する場合は、デバイスを選択し、を選択します。 デバイスの登録 アクションバーから。
-
登録コードが Screens プレーヤーのコードと一致する場合 デバイスの登録 タブ、選択 Validate アクションバーから。
-
を入力 タイトル as
Chrome-Device1
を選択して、 登録. -
「ディスプレイを割り当て」を選択し、デバイス設定のパスを選択します。
note note NOTE Screens Player でコンテンツを表示しようとしている場合は、必ず次を選択してください オフラインコンテンツを更新 ディスプレイに割り当てられた各チャネルのチャネルダッシュボードから。 -
結果の表示 viewing-the-result
上記の手順を使用してマルチゾーンレイアウトを実装すると、次の出力が表示されます。
Screens Player をチェックして、2 つの異なるゾーンでコンテンツを表示する出力を確認します。 左ゾーンと右ゾーン(どちらも埋め込みシーケンスをコンポーネントとして使用します)。
左ゾーンはシーケンスチャネルで、右ゾーンにはビデオが含まれています。