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