ドキュメントAEMAEM Screens ガイド

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

Last update: Wed Apr 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Intermediate
  • Admin
  • Developer

コンポーネントは、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 > チャネル > アイドル チャネル.

  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 > チャネル > アイドル チャネル.

  2. を選択 編集 アクションバーから。

  3. デザイン ​モードを選択します。

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

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

adding_components

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

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

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

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

アプリケーション application

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

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

プロパティ
説明
アプリケーションパス
アプリケーションが存在する絶対パスを選択します。
期間（ミリ秒）
アプリケーションのデュレーションを選択します。デフォルトでは、デュレーションは -1 に設定されています。これは、要素が無期限に実行される（つまり、シングルページアプリケーションである）ことを意味します。デュレーションの値を 0 より大きい値に設定すると、指定されたデュレーションの間要素が表示されてから次のアプリケーションに移動します。

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

adding_componentsapplication

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

チャネル channel

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

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

プロパティ
説明
チャネルパス
アプリケーションが存在するこの絶対パスを選択します。
期間（ミリ秒）
チャネルのデュレーション全体を選択します。デュレーションを–1 に設定すると、埋め込みチャネルが特定のチャネルで全長にわたって実行されます。

埋め込みページ embedded-page

An 埋め込みページ プロジェクトに埋め込みページを追加できます。 例えば、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 ミリ秒. 画像の再生時間を変更する場合は、「デュレーション (ms)」フィールドを更新します。

トランジション transition

トランジション コンポーネントを使用すると、Screens プロジェクトにトランジションを追加できます。

次の画像は、（ドラッグ＆ドロップで）エディターに追加されたトランジションコンポーネントを示しています。

screen_shot_2019-07-25at104237am

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

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

トランジション

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

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

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

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

ビデオ video

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

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

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

ビデオの縦横比が画面に合わない場合は、レンダリングを次のいずれかに調整できます contain または カバー.

Contain は、完全なビデオが表示され、見つからない領域に黒い境界線が追加されることを意味します。

カバー つまり、ビデオはビューポート全体をカバーしていますが、側面にオーバーフローする一部は非表示になっています。

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