現在表示中:

ゾーンマッピングを使用すると、様々なゾーンを作成し、ビデオ、画像およびテキストなどの様々なアセットを使用して、コンテキストに沿った方法で単一のスクリーンに組み合わせることができます。画像、ビデオおよびテキストを取り込み、すべてを組み合わせて、直感的でインタラクティブなデジタルエクスペリエンスを作成できます。プロジェクト要件に応じて、1 つのディスプレイに複数のゾーンが必要になることがあります。

例えば、単一のディスプレイの 2 つの個別のゾーンで実行する、関連するソーシャルメディアフィードを含む製品シーケンスなどです。

概要

チャネル用のディスプレイを作成する際、様々なテンプレートオプションを選択して、チャネルにコンテンツを表示したり管理したりできます。

ディスプレイ用のゾーンを作成する際に、次のテンプレートを使用できます。

  • 2 x 1 
  • 2 x 2 
  • 3 x 1 
  • 4 x 1
  • 5 x 1

これらのテンプレートのいずれかを使用すると、様々なコンテンツを単一のスクリーンで利用できる、直感的でインタラクティブなデジタルサイネージエクスペリエンスを作成できます。

注意:

チャネルおよびディスプレイの作成について詳しくは、画面の作成のチャネルの管理およびディスプレイの管理を参照してください。

使用例の説明

この使用例により、コンテンツを利用するチャネルを含む AEM Screens プロジェクトを作成して、画面の複数のゾーンに表示できます。 

注意:

ゾーンはコンテンツを拡大縮小しないので、コンテンツをチャネルに挿入する前に拡大縮小しておく必要があります。

プロジェクト作成のステップ

AEM Screens プロジェクト用のゾーンマッピングを実現する方法を示す AEM Screens プロジェクトを作成するには、次の手順に従います。

  1. 新しいスクリーンプロジェクトの作成

    1. Adobe Experience Manager リンク(左上)を選択し、「スクリーン」を選択します。または、http://localhost:4502/screens.html/content/screens から直接アクセスすることもできます。
    2. 作成」をクリックして、新しいスクリーンプロジェクトを作成します。
    3. スクリーンプロジェクトを作成ウィザードで「スクリーン」を選択し、「次へ」をクリックします。
    4. タイトルに "Demo Mapping Project" と入力し、「作成」をクリックします。
    zm1
  2. 新しいチャネルフォルダーの作成

    1. Zone Mapping Project に移動します。
    2. アクションバーから「作成」をクリックします。ウィザードが開きます。
    3. チャネルフォルダー」を選択し、「次へ」をクリックします。
    4. タイトルに "Dual Zone" と入力し、「作成」をクリックします。
    zm2
  3. 新しいチャネルの作成

    1. 作成した Zone Mapping Project に移動し、チャネルフォルダー(Dual Zone)を選択します。
    2. アクションバーから「作成」をクリックします。ウィザードが開きます。
    3. シーケンスチャネル」を選択し、「次へ」をクリックします。 
    4. タイトルに "Left" と入力し、「作成」をクリックします。

    同様に、他のシーケンスチャネルを Right としてZone Mapping Project に作成します。

    zm3
  4. チャネルへのコンテンツの追加

    1. 作成した Zone Mapping Project に移動し、作成したチャネルを選択します。
    2. アクションバーから「編集」をクリックします。
    3. Left 用のエディターが開きます。アクションバーの左側にあるサイドパネルを切り替えるアイコンをクリックし、アセットとコンポーネントを開きます。
    4. チャネルに追加するコンポーネントをドラッグ&ドロップします。

    同様に、Right チャネルにもコンテンツを追加します。

    zm4

    注意:

    プロジェクト要件に応じて、様々なアセット(画像、ビデオ)でチャネルのコンテンツを設定できます。

  5. 新しい場所の作成

    1. Zone Mapping Project に移動し、場所フォルダーを選択します。
    2. アクションバーのプラスアイコンの横にある「作成」をクリックします。ウィザードが開きます。 
    3. ウィザードから場所を選択し、「次へ」をクリックします。
    4. 場所のタイトルSan Jose)を入力し、「作成」をクリックします。
    zm5
  6. San Jose 用の新しいディスプレイの作成

    1. ディスプレイを作成する場所に移動し(Demo Mapping ProjectLocationsSan Jose)、San Jose を選択します。
    2. アクションバーから「作成」をクリックします。作成ウィザードから「表示」を選択し、「次へ」をクリックします。
    3. ディスプレイの場所のタイトルDual Zone)を入力します。
    4. 表示」タブで、レイアウトの詳細を選択します。「解像度」で「フル HD」を選択します。
    5. デバイスの数 - 水平」に「2」を選択します。デバイスの数 - 垂直」に「1」を選択します。
    6. 作成」をクリックします。
    zm6
  7. チャネルの割り当て

    1. Zone Mapping Project/Locations/San Jose/Dual Zone ディスプレイに移動します。
    2. Dual Zone ディスプレイを選択し、アクションバーの「チャネルを割り当て」をタップまたはクリックします。または、
    3. 以下の図に示すように、「ダッシュボード」をクリックし、割り当てられたチャネルとスケジュールパネルの右上にある「+ チャネルを割り当て」を選択します。チャネル割り当てダイアログボックスが開きます。
    4. 「チャネルロール」に "Zone" と入力します。
    5. パスで参照チャネルを選択します。「チャネル」でチャネルフォルダーのパス(Zone Mapping Project/Channels/Dual Zone)を選択します。
    6. このチャネルの「優先度」として「1」を選択します。「サポートされているイベント」として「最初の読み込み」および「待機中画面」を選択します。
    7. 「保存」をクリックします。
    zm7
  8. デバイスの登録および割り当て

    1. 別のブラウザーウィンドウを起動します。Web ブラウザーを使用して Screens Player にアクセスするか、AEM Screens アプリケーションを起動します。デバイスを開くと、デバイスの状態が未登録であることがわかります。 
    2. AEM ダッシュボードから、Zone Mapping Projectデバイスに移動します。
    3. アクションバーから「デバイスマネージャー」をクリックします。
    4. デバイスの登録」をクリックすると、保留中のデバイスが表示されます。
    5. 登録するデバイスを選択して、「デバイスを登録」をクリックします。
    6. Web ブラウザーまたは AEM Screens Player からコードを確認して、コードを検証する必要があります。「検証」をクリックして、デバイスの登録画面に移動します。
    7. タイトルに "Zone Device" と入力し、「登録」をクリックすると、デバイスが登録されます。
    8. ディスプレイを割り当て」をクリックして、次の手順のディスプレイへのデバイスの割り当てに移ります。
    9. デバイスを割り当て」をクリックして、チャネルのディスプレイのパス(/content/screens/Test_Project/Locations/TestLocation/TestDisplay)を選択します。「割り当て」をクリックします。
    10. 完了」をクリックしてプロセスを完了します。デバイスが割り当てられます。
    zm8
  9. マルチゾーンディスプレイの作成

    1. Zone Mapping ProjectLocationsSan Jose Dual Zone ディスプレイを選択して、アクションバーからダッシュボードをクリックします。
    2. デバイスパネルから Player のデバイス設定の左側のアイコンを選択して、プロパティをクリックします。
    3. デバイス設定」タブに移動して、「マッピング」および「テンプレート」フィールドに入力します。「マッピング」フィールドに "{"a1":"${display.channel}/left", "a2": "${display.channel}/right"}" と入力し、「テンプレート」に "grid-2x1" と入力します。
    4. 保存して閉じる」をクリックして、Player を再読み込みします。

    注意:

    デバイス設定のマッピングおよびテンプレートについて

    • ゾーンに対応する識別子 "a1" および "a2" はテンプレートに定義されています("screens-zone-a1" および "screens-zone-a2")。
    • 「${display.channel}/left」はゾーンに埋め込むためのチャネルを指し、「display.channel」は、ディスプレイの現在のチャネルパスを指しています。これにより、チャネルの子「left」および「right」が効果的に埋め込まれます。

    screen_shot_2018-01-22at114708am

AEM Screens Player でのコンテンツの表示

AEM Screens Player を読み込むか Web ブラウザーを使用します。

両方のチャネル(Left および Right)のコンテンツが Screens Player に表示されます。コンテンツは、2 x 1 ディスプレイゾーンとして表示されます。

screen_shot_2018-01-22at120206pm

推論

ゾーンマッピングでは、AEM Screens でチャネルを作成する際に、使用可能ないずれかのテンプレートを使用します。そのゾーンマッピングにより、クライアント側のフラット化をおこなうことができます。スクリーンに様々なゾーンを作成でき、さらにビデオ、画像および他の使用可能なアセットを含むゾーンを設定できます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー