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