外部 Web ページへのアダプティブフォームの埋め込み

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

アダプティブフォームは、AEM Sites🔗ページまたはAEMの外部でホストされているWebページに埋め込むことができます。 埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。これにより、ユーザーは Web ページのその他のエレメントから離れることなく、同時にフォームの操作を行うことができます。

前提条件

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

  • AEM パブリッシュインスタンスにアダプティブフォームをパブリッシュします。
  • Web サイト上で、アダプティブフォームをホストする Web ページを決定するか、新規に作成します。WebページでCDN🔗からjQueryファイルを読み取れるか、jQueryのローカルコピーが埋め込まれていることを確認します。 アダプティブフォームをレンダリングするには、jQueryが必要です。
  • AEMサーバーとWebページが異なるドメインにある場合は、AEM Formsがクロスドメインサイトに対してアダプティブフォームを提供できるようにするの節に示す手順を実行します。
  • 外部ページと AEM Formsサーバー間の通信を可能にするリバースプロキシを設定します。

アダプティブフォームの埋め込み

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

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

    <!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 をアダプティブフォームで設定されたテーマ以外のテーマへのパスと置き換えます。また、リクエストの属性を使用してテーマのパスを指定することができます。
    • CSS_Selector は、アダプティブフォームが埋め込まれているフォームコンテナの CSS セレクターです。例えば、上の例では、 .customafsection cssクラスがCSSセレクターです。

アダプティブフォームが Web ページに埋め込まれました。埋め込まれたアダプティブフォームで次を確認します。

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

リバースプロキシの設定

アダプティブフォームを埋め込む外部 Web ページは、プライベートネットワークのファイアウォールの中にある AEM サーバーにリクエストを送信します。リクエストを安全に AEM サーバーに向けるようにするには、リバースプロキシサーバーを設定することをお勧めします。

ディスパッチャーなしで Apache 2.4 リバースプロキシサーバーをセットアップする方法について説明します。この例では、/formsコンテキストパスでAEMサーバーをホストし、リバースプロキシ用に/formsをマッピングします。 これにより、Apacheサーバー上の/formsに対する要求がAEMインスタンスに送信されます。 このトポロジは、/formsプレフィックスが付いたすべてのリクエストがAEMサーバーにルートされるので、Dispatcherレイヤーのルール数を減らすのに役立ちます。

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

    LoadModule proxy_html_module modules/mod_proxy_html.so 
     LoadModule proxy_http_module modules/mod_proxy_http.so
    
  2. 次のコードをhttpd-proxy.conf設定ファイルに追加して、プロキシルールを設定します。

    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
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
ProxyPassReverse /content https://<AEM_Instance>/content
メモ

その他のトポロジを設定する場合は、送信、事前入力およびその他のURLをDispatcherレイヤーの許可リストに追加します。

ベストプラクティス

Web ページにアダプティブフォームを埋め込む場合、次のベストプラクティスを検討します。

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

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

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

このページ