埋め込みコンポーネント

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

使用方法

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

バージョンと互換性

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

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 互換性あり 互換性あり 互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

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

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

技術的詳細

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

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

設定ダイアログ

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

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

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

URL

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

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

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

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

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

埋め込み可能

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

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

  • ビデオ ID - 埋め込むリソースの一意の YouTube ビデオ ID
  • - 埋め込みビデオの幅
  • 高さ - 埋め込みビデオの高さ

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

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

メモ

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

HTML

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

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

メモ

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

セキュリティ

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

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

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

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

メモ

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

デザインダイアログ

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

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

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

このページ