ドキュメントAEM 6.4Forms ガイド

外部 web ページへのアダプティブフォームの埋め込み embed-adaptive-form-in-external-web-page

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • User
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

外部 Web ページにアダプティブフォームを埋め込む方法について学びましょう

以下が可能です。 AEM Sitesにアダプティブフォームを埋め込む ページまたはAEMの外でホストされる Web ページ。 埋め込まれたアダプティブフォームではすべての機能を使用できるので、ユーザーは、ページから移動することなくフォームを記入および送信できます。これにより、ユーザーは Web ページ上の他の要素のコンテキストにとどまり、同時にフォームを操作できます。

前提条件 prerequisites

アダプティブフォームを外部 Web サイトに埋め込む前に、次の手順を実行します。

アダプティブフォームの埋め込み embed-adaptive-form

Web ページに数行の JavaScript を挿入することで、アダプティブフォームを埋め込むことができます。コードの API は AEM サーバーにアダプティブフォームのリソースを求める HTTP リクエストを送信し、指定したフォームコンテナにアダプティブフォームを挿入します。アダプティブフォームを外部ページに埋め込むためのサンプルコードを以下に示します。 コードは実稼動環境では使用しないでください。 独自のバージョンの jQuery を使用する Web サイト用に iFrame を使用するなど、Web サイトに合わせてコードをカスタマイズします。 iFrame を使用すると、jQuery バージョン内での競合を回避できます。

  1. 次のコードを Web サイトの Web ページに埋め込みます。

    code language-html 
    <!doctype html>
<html>
<head>
 <title>This is the title of the webpage!</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="customafsection"/>
<p>This section is replaced with the adaptive form.</p>

 <script>
 var options = {path:"/content/forms/af/locbasic.html", dataRef:"", themepath:"", CSS_Selector:".customafsection"};
 alert(options.path);
 var loadAdaptiveForm = function(options){
 //alert(options.path);
 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);

 </script>
</body>
</html>

  2. 埋め込まれたコードで、

    • options.path 変数の値をアダプティブフォームのパブリッシュ URL のパスに変更します。AEM サーバーがコンテキストパス上で実行されている場合は、その URL にコンテキストパスが含まれるようにします。例えば、上記のコードとアダプティブフォームは同じ aem forms サーバー上に存在するので、この例ではアダプティブフォーム/content/forms/af/locbasic.htmlのコンテキストパスを使用します。
    • options.dataRef を URL と一緒に渡す属性に置き換えます。dataRef 変数を使用して、アダプティブフォームに事前にデータを取り込むことができます。
    • 置換 options.themePath アダプティブフォームで設定されたテーマ以外のテーマへのパスを含む または、 request 属性を使用してテーマのパスを指定することもできます。
    • CSS_Selector は、アダプティブフォームが埋め込まれているフォームコンテナの CSS セレクターです。例えば、上の例では、.customafsection CSS クラスが CSS セレクターです。

アダプティブフォームは Web ページに埋め込まれます。 埋め込まれたアダプティブフォームで、以下の点を確認します。

  • 元のアダプティブフォーム内のヘッダーとフッターは、埋め込まれたフォームには含まれません。
  • ドラフトおよび送信済みフォームは、フォームポータル上の「ドラフト」タブと「送信」タブで使用できます。
  • 元のアダプティブフォームに設定された送信アクションは、埋め込まれたフォームでも保持されます。
  • アダプティブフォームのルールは、埋め込まれたフォームでも保持され、完全に機能します。
  • 元のアダプティブフォームで設定されたエクスペリエンスのターゲット設定と A/B テストは、埋め込まれたフォームでは機能しません。
  • 元のフォームにAdobe Analyticsが設定されている場合、分析データはAdobe Analyticsサーバーで取り込まれます。 ただし、Forms Analytics レポートでは使用できません。

リバースプロキシの設定 reveseproxy

アダプティブフォームを埋め込んだ外部 Web ページは、AEMサーバーに要求を送信します。このサーバーは通常、プライベートネットワークのファイアウォールの内側に配置されます。 要求がAEMサーバーに安全に送信されるようにするには、リバースプロキシサーバーを設定することをお勧めします。

Dispatcher を使用せずに Apache 2.4 リバースプロキシサーバーを設定する方法の例を見てみましょう。 この例では、AEM サーバーを /forms コンテキストパスでホストし、リバースプロキシの /forms をマッピングします。これで、Apache サーバーの /forms へのすべてのリクエストは、AEM インスタンスにダイレクトされます。このトポロジにより、前に /forms の付いたすべてのリクエストが AEM サーバー経由になるため、ディスパッチャーレイヤーのルールの数を低減することができます。

  1. httpd.conf 設定ファイルを開き、次のコードの行をコメント解除します。または、これらのコードの行をファイルに追加することができます。

    code language-none 
    LoadModule proxy_html_module modules/mod_proxy_html.so
 LoadModule proxy_http_module modules/mod_proxy_http.so

  2. 次のコードの行を httpd-proxy.conf 設定ファイルに追加して、プロキシルールをセットアップします。

    code language-none 
    ProxyPass /forms https://[AEM_Instance]/forms
 ProxyPassReverse /forms https://[AEM_Instance]/forms

    [AEM_Instance] を、ルールの AEM サーバーパブリッシュ URL で置き換えます。

コンテキストパスに AEM サーバーをマウントしない場合、Apache レイヤーのプロキシルールは次のようになります。

ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter

>[!CAUTION]
>
>AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our [technical support periods](https://helpx.adobe.com/jp/support/programs/eol-matrix.html). Find the supported versions [here](https://experienceleague.adobe.com/docs/?lang=ja).
ProxyPass /libs/granite/csrf/token.json https://<AEM_Instance>/libs/granite/csrf/token.json

ProxyPassReverse /etc https://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect

>[!CAUTION]
>
>AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our [technical support periods](https://helpx.adobe.com/jp/support/programs/eol-matrix.html). Find the supported versions [here](https://experienceleague.adobe.com/docs/?lang=ja).
ProxyPassReverse /content https://<AEM_Instance>/content
NOTE
その他のトポロジーをセットアップする場合は、ディスパッチャーレイヤーの送信、事前入力、およびその他の URL を必ず許可リストに登録してください。

ベストプラクティス best-practices

Web ページにアダプティブフォームを埋め込む際は、次のベストプラクティスを考慮してください。

  • Web ページの CSS で定義されたスタイルルールが、フォームオブジェクトの CSS と競合しないようにします。 競合を避けるために、AEMクライアントライブラリを使用して、アダプティブフォームテーマで Web ページの CSS を再利用できます。 アダプティブフォームテーマでクライアントライブラリを使用する方法については、 AEM Formsのテーマ.
  • Web ページのフォームコンテナで、ウィンドウの幅全体を使用するようにします。 これにより、モバイルデバイス用に設定された CSS ルールが、何も変更しなくても確実に機能するようになります。 フォームコンテナがウィンドウの幅全体を取らない場合は、フォームを様々なモバイルデバイスに適応させるために、カスタム CSS を記述する必要があります。
  • 用途 getData クライアントでフォームデータの XML または JSON 表現を取得する API。
  • 用途 unloadAdaptiveForm アダプティブフォームをHTMLDOM からアンロードする API。
  • AEM サーバーから応答を送信するときは、access-control-origin ヘッダーを設定してください。

AEM Forms がクロスドメインサイトに対してアダプティブフォームをサーブできるようにする cross-domain-sites

  1. AEM パブリッシュインスタンスで、AEM Web Console Configuration Manager（http://[server]:[port]/system/console/configMgr）に移動します。
  2. を探して開きます。 Apache Sling Referrer フィルター設定。
  3. 内 許可されたホスト 「 」フィールドで、web ページが存在するドメインを指定します。 これにより、ホストは AEM サーバーに POST リクエストをできるようになります。また、正規表現を使用して、一連の外部アプリケーションドメインを指定することもできます。
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da