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

検索
Experience Manager 6.3 Forms マニュアル

目次

対象アプリケーション: Experience Manager 6.3 Forms

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

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

AEM Forms を使用すると、フォーム開発者は AEM サイトページまたは AEM の外側にホストされた Web ページにアダプティブフォームをシームレスに埋め込むことができます。埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。これにより、ユーザーは Web ページのその他のエレメントとの整合性を保つことができ、同時にフォームとの相互作用も保つことができます。

AEM サイトページへのアダプティブフォームの埋め込みについて詳しくは、「アダプティブフォームの AEM サイトへの埋め込み」を参照してください。

外部 Web ページにアダプティブフォームを埋め込む方法について説明します。

前提条件

外部 Web ページにアダプティブフォームを埋め込む前に次のことを行います。

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

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

Web ページに数行の JavaScript を挿入することで、アダプティブフォームを埋め込むことができます。コードの API は AEM サーバーにアダプティブフォームのリソースを求める HTTP リクエストを送信し、指定したフォームコンテナにアダプティブフォームを挿入します。 

アダプティブフォームを埋め込むには：

  1. アダプティブフォームを埋め込む Web ページに次のコードを挿入します。 

    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");
        }
    }

  2. 埋め込みされたコードで：

    • options.path をアダプティブフォームのパブリッシュ URL で置き換えます。AEM サーバーがコンテキストパス上で実行されている場合は、その URL にコンテキストパスが含まれるようにします。
    • options.dataRef を URL を渡す属性と置き換えます。
    • options.themePath をアダプティブフォームで設定されたテーマ以外のテーマへのパスと置き換えます。また、リクエストの属性を使用してテーマのパスを指定することができます。
    • CSS_Selector は、アダプティブフォームが埋め込まれているフォームコンテナの CSS セレクターです。

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

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

サンプルトポロジー

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

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

  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 http://[AEM_Instance]/forms
    ProxyPassReverse /forms http://[AEM_Instance]/forms

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

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー