AEM Forms を使用すると、フォーム開発者は AEM サイトページまたは AEM の外側にホストされた Web ページにアダプティブフォームをシームレスに埋め込むことができます。埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。これにより、ユーザーは Web ページのその他のエレメントとの整合性を保つことができ、同時にフォームとの相互作用も保つことができます。
AEM サイトページへのアダプティブフォームの埋め込みについて詳しくは、「アダプティブフォームの AEM サイトへの埋め込み」を参照してください。
外部 Web ページにアダプティブフォームを埋め込む方法について説明します。
外部 Web ページにアダプティブフォームを埋め込む前に次のことを行います。
- AEM パブリッシュインスタンスにアダプティブフォームをパブリッシュします。
- AEM サーバーと Web ページのドメインが異なる場合、次のように Apache Sling Referrer Filter バンドルを設定します。
- AEM オーサーインスタンスで、AEM Web Console Configuration Manager(http://[server]:[port]/system/console/configMgr)に移動します。
- Apache Sling Referrer Filter を見つけてクリックし、設定を編集します。
- 「許可済みホスト」フィールドで、Web ページが存在するドメインを指定します。これにより、ホストは AEM サーバーに POST リクエストをできるようになります。また、一連の外部アプリケーションドメインの指定に正規表現を使用することもできます。
- AEM オーサーインスタンスで、AEM Web Console Configuration Manager(http://[server]:[port]/system/console/configMgr)に移動します。
Web ページに数行の JavaScript を挿入することで、アダプティブフォームを埋め込むことができます。コードの API は AEM サーバーにアダプティブフォームのリソースを求める HTTP リクエストを送信し、指定したフォームコンテナにアダプティブフォームを挿入します。
アダプティブフォームを埋め込むには:
-
var loadAdaptiveForm = function(options){ if(options.path) { // options.path refers to the publish URL of the adaptive form // For Example: http:myserver:4503/content/forms/af/ABC, where ABC is the adaptive form // Note: If AEM server is running on a context path, the adaptive form URL must contain the context path var path = options.path; path += "/jcr:content/guideContainer.html"; $.ajax({ url : path , type : "GET", data : { // Set the wcmmode to be disabled wcmmode : "disabled", // Set the data reference, if any "dataRef": options.dataRef // Specify a different theme for the form object "themeOverride" : options.themepath }, async: false, success: function (data) { // If jquery is loaded, set the inner html of the container // If jquery is not loaded, use APIs provided by document to set the inner HTML but these APIs would not evaluate the script tag in HTML as per the HTML5 spec // For example: document.getElementById().innerHTML if(window.$ && options.CSS_Selector){ // HTML API of jquery extracts the tags, updates the DOM, and evaluates the code embedded in the script tag. $(options.CSS_Selector).html(data); } }, error: function (data) { // any error handler } }); } else { if (typeof(console) !== "undefined") { console.log("Path of Adaptive Form not specified to loadAdaptiveForm"); } }
-
埋め込みされたコードで:
- options.path をアダプティブフォームのパブリッシュ URL で置き換えます。AEM サーバーがコンテキストパス上で実行されている場合は、その URL にコンテキストパスが含まれるようにします。
- options.dataRef を URL を渡す属性と置き換えます。
- options.themePath をアダプティブフォームで設定されたテーマ以外のテーマへのパスと置き換えます。また、リクエストの属性を使用してテーマのパスを指定することができます。
- CSS_Selector は、アダプティブフォームが埋め込まれているフォームコンテナの CSS セレクターです。
- 元のアダプティブフォームにあったヘッダーとフッターは、埋め込まれたフォームには含まれません。
- ドラフトおよび送信済みフォームは、フォームポータル上の「ドラフト」タブと「送信」タブで使用できます。
- 元のアダプティブフォームに構築された送信アクションは、埋め込まれたフォームでも保持されます。
- アダプティブフォームのルールは保持され、埋め込みフォームでも完全に機能します。
- 元のフォームに構築されたのエクスペリエンスのターゲット設定と A/B テストは、埋め込まれたアダプティブフォームでは動作しません。
- 元のフォームに Adobe Analytics が構築されている場合、分析データは Adobe Analytics サーバーで取得されます。ただし、フォームの分析レポートでは使用できません。
アダプティブフォームを埋め込む外部 Web ページは、プライベートネットワークのファイアウォールの中にある AEM サーバーにリクエストを送信します。リクエストを安全に AEM サーバーに向けるようにするには、リバースプロキシサーバーを設定することをお勧めします。
ディスパッチャーなしで Apache 2.4 リバースプロキシサーバーをセットアップする方法について説明します。この例では、AEM サーバーを /forms コンテキストパスでホストし、リバースプロキシの /forms をマッピングします。これで、Apache サーバーの /forms へのすべてのリクエストは、AEM インスタンスにダイレクトされます。これにより、前に /forms の付いたすべてのリクエストが AEM サーバー経由になるため、ディスパッチャーレイヤーのルールの数を低減することができます。
ProxyPass /content http://<AEM_Instance>/content ProxyPass /etc http://<AEM_Instance>/etc ProxyPass /etc.clientlibs http://<AEM_Instance>/etc.clientlibs # CSRF Filter ProxyPass /libs/granite/csrf/token.json http://<AEM_Instance>/libs/granite/csrf/token.json ProxyPassReverse /etc http://<AEM_Instance>/etc ProxyPassReverse /etc.clientlibs http://<AEM_Instance>/etc.clientlibs # written for thank you page and other URL present in AF during redirect ProxyPassReverse /content http://<AEM_Instance>/content
注意:
その他のトポロジーをセットアップする場合は、ディスパッチャーレイヤーの送信、事前入力、およびその他の URL を必ずホワイトリストに登録してください。
- Web ページの CSS に定義されたスタイルルールが、フォームオブジェクト CSS と衝突しないようにしてください。衝突を避けるため、アダプティブフォームテーマの Web ページ CSS を AEM クライアントライブラリを使用して再利用できます。アダプティブフォームテーマのクライアントライブラリの使用について詳しくは、「AEM Forms のテーマ」を参照してください。
- Web ページのフォームコンテナがウィンドウの幅全体を使用するようにしてください。これにより、モバイルデバイスに設定された CSS ルールが確実に変更なしで動作するようになります。フォームコンテナがウィンドウの幅全体に表示されない場合は、さまざまなモバイルデバイスに適合するようにカスタムの CSS を記述する必要があります。
- getData API を使用して、クライアントのフォームデータの XML または JSON 表現を取得します。
- HTML DOM からアダプティブフォームをアンロードするには、unloadAdaptiveForm API を使用します。
- AEM サーバーから応答を送信するときは、access-control-origin ヘッダーを設定します。