埋め込みコンポーネント （v1）

コアコンポーネントの埋め込みコンポーネントを使用すると、AEM コンテンツページに外部コンテンツを埋め込むことができます。

使用方法

コアコンポーネントの埋め込みコンポーネントを使用すると、コンテンツ作成者は、AEM コンテンツページ内に埋め込む外部コンテンツを選択して定義できます。さらに、埋め込むフリーフォーム HTML を定義するオプションもあります。

• このコンポーネントのプロパティは、設定ダイアログで定義できます。
• コンポーネントをページに追加するときのデフォルト設定は、デザインダイアログで定義できます。

バージョンと互換性

このドキュメントでは、2019年9月にコアコンポーネントのリリース 2.7.0 で導入された埋め込みコンポーネント v1 について説明します。

コンポーネント出力のサンプル

埋め込みコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細

埋め込みコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

設定ダイアログ

設定ダイアログでは、ページに埋め込む外部リソースをコンテンツ作成者が定義できます。まず、埋め込むリソースの種類を次の中から選択します。

• URL
• 埋め込み可能
• HTML

埋め込み可能なタイプごとに、広告 ID を定義できます。このオプションを使用すると、HTML 内および データレイヤー内のコンポーネントの一意の識別子を制御できます。

• 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
• ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
• ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

URL

URL は、最もシンプルな埋め込みリソースです。埋め込むリソースの URL を「URL」フィールドに貼り付けるだけです。コンポーネントはそのリソースへのアクセスを試みます。リソースがいずれかのプロセッサーでレンダリングできる場合は、「URL」フィールドの下に確認メッセージが表示されます。それ以外の場合は、フィールドにエラーのマークが付きます。

埋め込みコンポーネントには、次の種類のリソースに対応するプロセッサーが付属しています。

• Facebook 投稿、Instagram、SoundCloud、Twitter、YouTube など、oEmbed 標準に準拠するリソース
• Pinterest

開発者は、埋め込みコンポーネントの開発者向けドキュメントに従って、URL プロセッサーを追加できます。

埋め込み可能

埋め込み可能リソースを使用すると、埋め込みリソースをさらにカスタマイズできます。パラメーター化したり、追加情報を含めたりすることができます。作成者は、信頼できる事前設定済みの埋め込み可能リソースから選択できます。このコンポーネントには、すぐに使用できる YouTube 埋め込み可能リソースが付属しています。

「埋め込み可能」フィールドでは、使用するプロセッサーの種類を定義します。YouTube 埋め込み可能リソースの場合は、さらに以下を定義できます。

• ビデオ ID - 埋め込むリソースの一意の YouTube ビデオ ID
• 幅 - 埋め込みビデオの幅
• 高さ - 埋め込みビデオの高さ
• ミュートを有効化 - このパラメーターは、デフォルトでミュートしてビデオを再生するかどうかを指定します。これを有効にすると、自動再生が最新のブラウザーで機能する可能性が高くなります。
• 自動再生を有効化 - このパラメーターは、プレーヤーへの読み込み時に最初のビデオの再生を自動的に開始するかどうかを指定します。パブリッシュインスタンス上の場合か、オーサーインスタンスで「公開されているとおりに表示」オプションを使用している場合のみ有効です。
• ループを有効にする - ビデオが 1 つだけの場合、このパラメーターは、プレーヤーが最初のビデオを繰り返し再生するかどうかを指定します。プレイリストの場合、プレイヤーはプレイリスト全体を再生したあと、最初のビデオから再び再生を開始します。
• インライン再生を有効にする (iOS) - このパラメーターは、iOS の HTML5 プレーヤーでビデオをインライン（オンの場合）とフルスクリーン（オフの場合）のどちらで再生するかを指定します。
• 関連ビデオの制限なし - このオプションを無効にした場合、関連ビデオは再生されたばかりのビデオと同じチャネルから取得され、それ以外の場合は任意のチャネルから取得されます。

なお、「有効化」系のオプションは、デザインダイアログでアクティブにする必要があり、デフォルトとして設定できます。

同様のフィールドが備わったその他の埋め込み可能リソースを開発者が定義することもできます。その場合は、埋め込みコンポーネントの開発者向けドキュメントに従います。

HTML

埋め込みコンポーネントを使用して、ページにフリーフォーム HTML を追加できます。

セキュリティ

作成者が入力できる HTML マークアップは、セキュリティ上の理由からフィルタリングされます。作成者に管理者権限の取得を許可するなどのクロスサイトスクリプティング攻撃を回避するためです。

一般に、すべてのスクリプトおよび style 要素とすべての on* および style 属性は出力から削除されます。

ただし、埋め込みコンポーネントは AEM のグローバル HTML AntiSamy サニタイズフレームワークのフィルタリングルールセット（/libs/cq/xssprotection/config.xml を参照）に従っているので、ルールはさらに複雑になります。必要に応じ、開発者によってプロジェクト固有の設定に対応するよう、これをオーバーレイすることができます。

追加のセキュリティ情報は、AEM 開発ドキュメントのオンプレミスのインストールならびに、AEM as a Cloud Service のインストールを参照してください。

デザインダイアログ

デザインダイアログでは、埋め込みコンポーネントの使用時にコンテンツ作成者に提供されるオプションと、埋め込みコンポーネントの配置時のデフォルト設定をテンプレート作成者が定義できます。

「埋め込み可能なタイプ」タブ

• URL を無効にする - コンテンツ作成者に対して URL オプションを無効にします。
• 埋め込み可能コンポーネントを無効にする - 使用可能な埋め込み可能リソースプロセッサーに関係なく、コンテンツ作成者に対して「埋め込み可能」オプションを無効にします。
• HTML を無効にする - コンテンツ作成者に対して HTML オプションを無効にします。
• 許可される埋め込み可能コンポーネント - 「埋め込み可能」オプションがアクティブな場合に、コンテンツ作成者が使用できる埋め込み可能リソースプロセッサーを指定する複数選択フィールド。

「YouTube」タブ

• ミュート動作の設定を許可 - YouTube 埋め込みタイプが選択されている場合に、コンポーネントの「ミュートを有効化」オプションの設定をコンテンツ作成者に許可します。
  • ミュートのデフォルト値 - YouTube 埋め込みタイプが選択されている場合、「ミュートを有効化」オプションが自動的に設定されます。
• 自動再生動作の設定を許可 - YouTube 埋め込みタイプが選択されている場合に、コンポーネントの「自動再生を有効化」オプションの設定をコンテンツ作成者に許可します。
  • 自動再生のデフォルト値 - YouTube 埋め込みタイプが選択されている場合、「自動再生を有効化」オプションが自動的に設定されます。
• ループ動作の設定を許可 - YouTube 埋め込みタイプが選択されている場合に、コンポーネントの「ループを有効にする」オプションの設定をコンテンツ作成者に許可します。
  • ループのデフォルト値 - YouTube 埋め込みタイプが選択されている場合、「ループを有効にする」オプションが自動的に設定されます。
• インライン再生の設定を許可 (iOS) - YouTube 埋め込みタイプが選択されている場合に、コンポーネントの「インライン再生を有効にする (iOS)」オプションの設定をコンテンツ作成者に許可します。
  • インライン再生のデフォルト値 (iOS) - YouTube 埋め込みタイプが選択されている場合、「インライン再生を有効にする (iOS)」オプションが自動的に設定されます。
• 関連ビデオの設定を許可 - YouTube 埋め込みタイプが選択されている場合に、コンポーネントの「関連ビデオの制限なし」オプションの設定をコンテンツ作成者に許可します。
  • 無制限の関連ビデオのデフォルト値 - YouTube 埋め込みタイプが選択されている場合、「関連ビデオの制限なし」オプションが自動的に設定されます。

Business.Adobe.com リソース