ドキュメントAEMコアコンポーネントガイド

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

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

作成対象：

  • 開発者
  • 管理者
  • ユーザー

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

使用方法 usage

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

バージョンと互換性 version-and-compatibility

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

CAUTION
このドキュメントでは、埋め込みコンポーネント v1 について説明します。
埋め込みコンポーネントの現在のバージョンについて詳しくは、埋め込みコンポーネントのドキュメントを参照してください。

コンポーネント出力のサンプル sample-component-output

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

技術的詳細 technical-details

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

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

設定ダイアログ configure-dialog

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

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

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

URL url

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

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

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

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

URL 用の埋め込みコンポーネントの編集ダイアログ

埋め込み可能 embeddable

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

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

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

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

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

埋め込み可能リソース用の埋め込みコンポーネントの編集ダイアログ

NOTE
埋め込み可能リソースをページ作成者が使用できるようにするには、デザインダイアログからテンプレートレベルで有効にする必要があります。

HTML html

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

HTML 用の埋め込みコンポーネントの編集ダイアログ

NOTE
スクリプトなどの安全でないタグは、入力した HTML コードから削除され、最終的なページではレンダリングされません。

セキュリティ security

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

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

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

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

NOTE
AntiSamy サニタイズフレームワークのルールは /libs/cq/xssprotection/config.xml のオーバーレイにより設定することができますが、そうした変更は、埋め込みコアコンポーネントだけでなく、すべての HTL および JSP の動作に影響を与えます。

デザインダイアログ design-dialog

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

「埋め込み可能なタイプ」タブ embeddable-types-tab

埋め込みコンポーネントのデザインダイアログ

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

「YouTube」タブ youtube-tab

埋め込みコンポーネントのデザインダイアログの「YouTube」タブ

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