チュートリアル：アダプティブフォームの公開

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

アダプティブフォームの準備が整ったら、エンドユーザーが使用できるようフォームを公開することができます。エンドユーザーは、公開されたフォームを任意のデバイスおよびインターネットブラウザーで開くことができます。アダプティブフォームが公開されると、フォームと関連コンテンツが AEM オーサーインスタンスから AEM パブリッシュインスタンスにコピーされます。このパブリッシュインスタンスを通じて、エンドユーザーはフォームを使用できるようになります。

アダプティブフォームを公開するには、次の方法があります。

事前準備

  • AEM Forms パブリッシュインスタンスの設定：パブリッシュインスタンスは、パブリッシュモードで実行される AEM Forms の公開インスタンスです。実稼動環境では、パブリッシュインスタンスは組織のファイアウォールの外部にあります。
  • レプリケーションとリバースレプリケーションの設定：レプリケーションは、コンテンツをオーサーインスタンスからパブリッシュインスタンスにコピーし、ユーザー入力（フォーム入力など）をパブリッシュインスタンスからオーサーインスタンスに返します。

アダプティブフォームを AEM ページとして公開する

アダプティブフォームが AEM ページとして公開された場合、web ページ全体には公開されたフォームのみが含まれます。アダプティブフォームの URL を使用して、別の web ページからリンクすることができます。shipping-address-add-update-form アダプティブフォームを AEM ページとして公開するには：

  1. AEM Forms オーサーインスタンスにログインし、AEM Forms UI で shipping-address-add-update-form アダプティブフォームを探します。
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. shipping-address-add-update-form アダプティブフォームを選択し、「公開」をタップします。アダプティブフォームに関連するアセットを含むダイアログが表示されます。「公開」をタップします。アダプティブフォームが公開され、成功ダイアログが表示されます。
  3. パブリッシュインスタンスでフォームを開きます。エンドユーザーがフォームに入力して送信できるようになります。
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

アダプティブフォームを AEM Sites ページに埋め込む

AEM Forms を使用するとフォーム開発者は、アダプティブフォームをシームレスに AEM Sites ページに埋め込むことができます。埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。これにより、ユーザーは web ページの他の要素に意識を保ちつつ、同時にフォームの操作も行うことができます。

AEM Forms には AEM Forms コンテナという名前のコンポーネントが用意されており、これを使用してアダプティブフォームを AEM Sites ページに埋め込むことができます。デフォルトでは、このコンポーネントは AEM Sites コンテナには表示されません。次の手順を実行して AEM Forms コンテナコンポーネントを有効にし、アダプティブフォームを AEM Sites ページに埋め込みます。

  1. We.Retail サイトでページを作成し、編集用に開きます。（例：https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html）アダプティブフォームが Sites ページに埋め込まれます。

    アダプティブフォームを既存の We.Retail Site’s ページに埋め込むこともできます。例えば、「会社概要」ページ（https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html）に埋め込むことができます。これにより、ページを作成する時間を節約できます。以下では、ページを新たに作成する場合の手順を説明します。

    We.Retail サイトは AEM に付属しています。We.Retail サイトをインストールしていない場合は、We.Retail 参照実装を参照してサイトをインストールします。

  2. プロパティ ページ情報をタップし、新しく作成した We.Retail サイトのページで「テンプレートを編集」オプションを選択します。ブラウザーの新しいタブでページのテンプレートが表示されます。

  3. 「レイアウトコンテナ」ボックス内をタップしてから、 feedmanagement をタップします。「許可されたコンポーネント」タブで、「一般」アコーディオン展開し、「AEM Form」オプションを選択して save_icon をタップします。AEM Forms コンテナコンポーネントはそのページに対して有効になっています。

  4. 手順 1 で開いた AEM Sites ページを含むブラウザータブを開きます。 「コンポーネントをここにドラッグ」ボックスをタップして、 + をタップします。 「新しいコンポーネントを挿入」ボックス内で、「AEM Form」をタップします。この「AEM Forms コンテナ」コンポーネントがページに追加されます。

  5. AEM Forms コンテナ​コンポーネントをタップし、 configure-icon をタップしてください。AEM Forms コンテナのプロパティを含むダイアログボックス が表示されます。アセットパス​フィールドで「 shipping-address-add-update-form 」アダプティブフォームを参照して選択してください。save_icon をタップします。アダプティブフォームがページに埋め込まれました。

  6. アダプティブフォームと Sites ページの両方を公開します。次の点について考慮してください。

    • 初めて AEM Sites ページを公開する場合で、かつ、フォームが埋め込まれている場合は、Sites ページに加えて、埋め込まれたフォームも公開してください。

    • 公開されたサイトページに埋め込まれたフォームのみを変更する場合は、元のフォームを公開します。変更内容は、公開されたサイトページに反映されます。公開されたサイトページにはフォームへの参照情報が含まれているため、ページを再公開する必要はありません。

    • Sites ページと埋め込みフォームに変更を加えた場合、 Sites ページとフォームを再公開します。

      embed-in-aem-sites
      AEM Sites ページに追加された発送先住所と請求先住所の変更フォーム 。

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

外部 web ページに数行の JavaScript を挿入することで、アダプティブフォームを外部 web ページ（AEM の外部でホストされる AEM 以外の web ページ ）に埋め込むことができます。JavaScript コードは、アダプティブフォームおよび関連リソースの HTTP リクエストを AEM Forms サーバーに送信し、アダプティブフォームを web ページに追加します。手順について詳しくは、外部 web ページへのアダプティブフォームの埋め込みを参照してください。

このページ