ドキュメントAEMAEM Screens ガイド

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 中級
  • 管理者
  • 開発者

コンポーネントは、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 Store／Channels／Idle 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 Store／Channels／Idle Channel）。

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

  3. デザイン ​モードをクリックします。

  4. 右側のデザインエディター全体をクリックし、設定シンボルを選択すると、Parsys Design ダイアログボックスを開くことができます。

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

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 に設定します。値を original に設定すると、親シーケンスの各サイクルでサブシーケンスが完全に実行されます。もう 1 つの設定可能な値は single です。このような値を設定すると、各実行でサブシーケンスの項目が 1 つだけ表示されます。例えば、最初のループの最初の項目と 2 番目のループの 2 番目の項目です。

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

動的埋め込みシーケンスを使用すると、チャネルロールによるものを除いて、上記と同様のシーケンスを追加できます。

埋め込みシーケンスについて詳しくは、Screens のオーサリングの節の埋め込みシーケンスを参照してください。

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

プロパティ
説明
チャネル割り当ての役割
チャネルロールを入力します。
デュレーション（ミリ秒）
チャネルのデュレーション全体を選択します。デュレーションを -1 に設定すると、埋め込まれたチャネルが特定のチャネルでノーカットで実行されます。
方法
origina または single に設定します。値を original に設定すると、親シーケンスの各サイクルでサブシーケンスが完全に実行されます。もう 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