チャネルへのコンポーネントの追加 adding-components-to-a-channel

コンポーネントは、AEM(Adobe Experience Manager)エクスペリエンスの基本要素です。複数のコンポーネントを使用し、AEM Screens プロジェクトのチャネルに追加できます。

AEM Screens のコンポーネント components-in-aem-screens

AEM Screens には、Screens プロジェクトで使用できる様々な AEM コンポーネントが用意されています。

AEM Screens コンポーネントの表示 viewing-aem-screens-components

AEM Screens プロジェクトを作成するたびに、プロジェクトに追加できるデフォルトのコンポーネントのリストが表示されます。

Screens プロジェクトのデフォルトコンポーネントを表示するには、次の手順に従います。

  1. チャネルをクリックします。 (例:We.Retail In StoreChannelsIdle Channel)。

  2. アクションバーの「編集」をクリックします。

  3. AEM エディターで、 + サイドバーのアイコン。

  4. 次の図に示すように、AEM Screens プロジェクトにデフォルトで含まれているすべてのコンポーネントが表示されます。

screen_shot_2017-12-18at21350pm

新しいコンポーネントの追加 adding-a-new-component

AEM には、他にもいくつかのコンポーネントが用意されています。AEM Screensと互換性がある他のコンポーネント(デフォルトでは含まれていない)があれば、いつでもプロジェクトに追加できます。

次に、AEM Screens プロジェクトへの Livefyre コンポーネントの追加例を示します。

  1. コンポーネントを追加するチャネルをクリックします。 (例:We.Retail In StoreChannelsIdle Channel)。

  2. アクションバーの「編集」をクリックします。

  3. クリック デザイン モード。

  4. 右側のデザイン エディタ全体をクリックし、設定記号をクリックして、 Parsys デザイン ダイアログが表示されます。

  5. AEM Screens プロジェクトに読み込むコンポーネントをクリックすることができます。 次の例は、 Livefyre コンポーネントをAEM Screens プロジェクトに追加する。

adding_components

NOTE
同様に、AEM Screens と互換性のある他の新しいコンポーネントをいくつでもプロジェクトに追加できます。

AEM Screens コンポーネントについて understanding-aem-screen-components

ここでは、プロジェクトで使用できる AEM Screens コンポーネントについて説明します。

NOTE
任意のコンポーネントのプロパティを表示するには、コンポーネントをクリックし、ハンマーアイコンをクリックして、プロパティを開いたり表示したりします。

アプリケーション application

アプリケーション ​コンポーネントを使用すると、チャネルにアプリケーションを追加できます。

アプリケーションコンポーネントには以下のプロパティがあります。

プロパティ
説明
アプリケーションパス
アプリケーションが存在する場所の絶対パスをクリックします。
デュレーション(ミリ秒)
アプリケーションの期間をクリックします。 デフォルトでは、期間は–1 に設定されています。つまり、要素は永遠に実行されます(つまり、単一ページアプリケーションです)。 デュレーションの値を 0 より大きい値に設定すると、指定されたデュレーションの間要素が表示されてから次のアプリケーションに移動します。

次に、アプリケーションコンポーネントを埋め込んでプロパティをプレビューする方法の例を示します。

adding_componentsapplication

NOTE
以下の各コンポーネントのプロパティを表示するには、上記の例を参照してください。

チャネル channel

チャネル ​コンポーネントを使用すると、プロジェクトにチャネル全体を追加できます。

チャネルコンポーネントには、次のプロパティがあります。

プロパティ
説明
チャネルパス
アプリケーションが存在するこの絶対パスを選択します。
デュレーション(ミリ秒)
チャネルのデュレーション全体を選択します。デュレーションを -1 に設定すると、埋め込まれたチャネルが特定のチャネルでノーカットで実行されます。

埋め込みページ embedded-page

埋め込みページ ​を使用すると、プロジェクトに埋め込みページを追加できます。例えば、Web アプリケーションや製品カタログにできます。

埋め込みページには、次のプロパティがあります。

プロパティ
説明
ページパス
チャネルが存在するこの絶対パスを選択します。
デュレーション(ミリ秒)
チャネルのデュレーション全体を選択します。デュレーションを -1 に設定すると、埋め込まれたチャネルが特定のチャネルでノーカットで実行されます。

埋め込みシーケンス embedded-sequence

NOTE
埋め込みシーケンスについて詳しくは、 埋め込みシーケンス 「Screens のオーサリング」セクションで説明します。

埋め込みシーケンスを使用すると、(他のアセットと共に)既存のチャネル内に埋め込みシーケンスチャネルを追加できます。

埋め込みシーケンスには、次のページプロパティがあります。

プロパティ
説明
チャネルパス
チャネルに含めるシーケンスの絶対パスを選択します。
デュレーション(ミリ秒)
チャネルのデュレーション全体を選択します。デュレーションを -1 に設定すると、埋め込まれたチャネルが特定のチャネルでノーカットで実行されます。
方法
origina または single に設定します。値をに設定します。 オリジナル は、親シーケンスの各サイクルでサブシーケンスが完全に実行されることを意味します。 もう 1 つの設定可能な値は single です。このような値は、各実行でサブシーケンスの 1 つの項目のみを表示します。 例えば、最初のループの最初の項目と 2 番目のループの 2 番目の項目です。

動的埋め込みシーケンス dynamic-embedded-sequence

動的埋め込みシーケンスを使用すると、チャネルロール以外の上記のようなシーケンスを追加できます。

埋め込みシーケンスの詳細については、を参照してください。 埋め込みシーケンス 「Screens のオーサリング」セクションで説明します。

動的埋め込みシーケンスには、次のプロパティがあります。

プロパティ
説明
チャネル割り当ての役割
チャネルロールを入力します。
デュレーション(ミリ秒)
チャネルのデュレーション全体を選択します。デュレーションを -1 に設定すると、埋め込まれたチャネルが特定のチャネルでノーカットで実行されます。
方法
origina または single に設定します。値をに設定します。 オリジナル は、親シーケンスの各サイクルでサブシーケンスが完全に実行されることを意味します。 もう 1 つの設定可能な値は single です。このような値を指定すると、各実行でサブシーケンスの項目が 1 つだけ表示されます。 例えば、最初のループの最初の項目と 2 番目のループの 2 番目の項目です。

エクスペリエンスフラグメント experience-fragment

エクスペリエンスフラグメントを使用すると、エクスペリエンスフラグメント(ページ内で参照できるコンテンツおよびレイアウトを含む 1 つ以上のコンポーネントのグループ)をAEM Screens チャネルに追加できます。 コンポーネントをAEM エディターにドラッグ&ドロップし、エクスペリエンスフラグメントをクリックします。

エクスペリエンスフラグメントを作成して AEM Screens プロジェクトに適用する方法について詳しくは、エクスペリエンスフラグメントの使用を参照してください。

exp

プロパティ
説明
エクスペリエンスフラグメント
エクスペリエンスフラグメント
エクスペリエンスフラグメントを選択します。
デュレーション
チャネルで再生されるエクスペリエンスフラグメントのデュレーション全体を選択します。
オフライン設定
クライアント側ライブラリ
JavaScript ファイルと CSS ファイル。
静的ファイル
エクスペリエンスフラグメントにオフライン設定として追加できる静的ファイル。
NOTE
このコンポーネントから追加する​ クライアント側ライブラリ ​と​ 静的ファイル ​は、設定済みの​ クライアント側ライブラリ ​と、エクスペリエンスフラグメントの​ プロパティ ​から追加されている静的ファイルにそれぞれ追加されます。

画像 image

画像を使用すると、チャネルに画像を追加できます。

イメージアセットには、「画像」、「アクセシビリティ」および「シーケンス」の 3 つのタブがあります。

プロパティ
説明
画像
イメージアセット
画像アセットをクリックします。
タイトル
画像のタイトル。
リンク先
画像にリンクを追加します。
説明
画像の概要。
サイズ
画像のサイズ。
アクセシビリティ
代替テキスト
画像の代替テキスト。
シーケンス
デュレーション
デフォルトでは、デュレーションは 8000 ミリ秒 に設定されています。画像の再生時間を変更する場合は、「デュレーション」フィールドを更新します。

トランジション transition

切り替えコンポーネントを使用すると、スクリーンプロジェクトに切り替えを追加できます。

次の画像は、トランジションコンポーネント(ドラッグ&ドロップで追加)をエディターに表示しています。

screen_shot_2019-07-25at104237am

トランジションアイコンをクリックし、 設定 (レンチアイコン)をクリックして、 遷移 ダイアログが表示されます。 このダイアログボックスには次の 3 つのタブが含まれています。

  • トランジション
  • シーケンス
  • アクティベーション
NOTE
デフォルトでは、シーケンスは 600 ミリ秒に設定されています。「シーケンス」タブを使用して、トランジションシーケンスを別の値に更新できます。

トランジション

トランジションコンポーネントには、次のプロパティがあります。

プロパティ
説明
トランジション
タイプ

前の要素と後の要素の間のトランジションのタイプ。トランジションの タイプ には、次の選択肢があります。

  • 標準
  • フェード
  • 右からスライドイン
  • 左からスライドイン
  • 上からスライドイン
  • 下からスライドイン
シーケンス
デュレーション
トランジションのデュレーション全体を選択します。デフォルトでは 600 ミリ秒に設定されています。
アクティベーション
次の日から有効
トランジションがアクティブになる時点を示すタイムスタンプ。
次の日まで有効
タイムスタンプは、トランジションをアクティブにできるようになるまでを表します。
スケジュール
定義済みのスケジュールを追加します。

ビデオ video

ビデオコンポーネントを使用すると、スクリーンプロジェクトにビデオを追加できます。

ビデオコンポーネントには、次のプロパティがあります。

プロパティ
説明
ビデオアセット
ビデオへのリンクをクリックします。
デュレーション
ビデオのデュレーションを選択します。デフォルトでは、デュレーションは -1 に設定されています。これは、要素が無期限に実行されることを意味します。デュレーションの値を 0 より大きい値に設定すると、指定されたデュレーションの間要素が表示されてから次のアプリケーションに移動します。
レンダリング

ビデオの縦横比がスクリーンに合わない場合、含む または カバー のどちらかでレンダリングを調整できます。

含む は、ビデオ全体が表示され、足りない領域は黒い境界線で埋められることを意味します。

カバー は、ビデオが表示域全体を占めますが、サイドのオーバーフローする部分は非表示になります。

サイズ
ビデオのサイズ。
recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053