チュートリアル：アダプティブフォームの公開 tutorial-publish-your-adaptive-form
これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。チュートリアルの使用例全体を理解、実行、デモするために、シリーズを時系列に沿って実施することをお勧めします。
アダプティブフォームの準備が整ったら、エンドユーザーが使用できるようフォームを公開することができます。エンドユーザーは、公開されたフォームを任意のデバイスおよびインターネットブラウザーで開くことができます。アダプティブフォームが公開されると、フォームと関連コンテンツが AEM オーサーインスタンスから AEM パブリッシュインスタンスにコピーされます。このパブリッシュインスタンスを通じて、エンドユーザーはフォームを使用できるようになります。
アダプティブフォームを公開するには、次の方法があります。
事前準備 before-you-start
- AEM Forms パブリッシュインスタンスの設定：パブリッシュインスタンスは、パブリッシュモードで実行される AEM Forms のパブリッシュインスタンスです。実稼動環境では、パブリッシュインスタンスは組織のファイアウォールの外部にあります。
- レプリケーションとリバースレプリケーションの設定：レプリケーションは、コンテンツをオーサーインスタンスからパブリッシュインスタンスにコピーし、ユーザー入力（フォーム入力など）をパブリッシュインスタンスからオーサーインスタンスに返します。
アダプティブフォームを AEM ページとして公開する publish-the-adaptive-form-as-an-aem-page
アダプティブフォームが AEM ページとして公開された場合、web ページ全体には公開されたフォームのみが含まれます。アダプティブフォームの URL を使用して、別の web ページからリンクすることができます。shipping-address-add-update-form アダプティブフォームを AEM ページとして公開するには：
- AEM Forms オーサーインスタンスにログインし、AEM Forms UI で shipping-address-add-update-form アダプティブフォームを探します。
https://localhost:4502/aem/forms.html/content/dam/formsanddocuments - shipping-address-add-update-form アダプティブフォームを選択し、「公開」を選択します。アダプティブフォームに関連するアセットを含むダイアログが表示されます。「公開」を選択します。アダプティブフォームが公開され、成功ダイアログが表示されます。
- パブリッシュインスタンスでフォームを開きます。エンドユーザーがフォームに入力して送信できるようになります。
https://localhost:4503/content/forms/af/shipping-address-add-update-form.html
アダプティブフォームを AEM Sites ページに埋め込む embed-the-adaptive-form-in-an-aem-sites-page
AEM Forms を使用するとフォーム開発者は、アダプティブフォームをシームレスに AEM Sites ページに埋め込むことができます。埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。これにより、ユーザーは web ページの他の要素に意識を保ちつつ、同時にフォームの操作も行うことができます。
AEM Forms には AEM Forms コンテナという名前のコンポーネントが用意されており、これを使用してアダプティブフォームを AEM Sites ページに埋め込むことができます。デフォルトでは、このコンポーネントは AEM Sites コンテナには表示されません。次の手順を実行して AEM Forms コンテナコンポーネントを有効にし、アダプティブフォームを AEM Sites ページに埋め込みます。
-
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 参照実装を参照してサイトをインストールします。
-
-
「レイアウトコンテナ」ボックス内を選択してから、
-
手順 1 で開いた AEM Sites ページを含むブラウザータブを開きます。 「コンポーネントをここにドラッグ」ボックスを選択して、+ を選択します。「新しいコンポーネントを挿入」ボックス内で、「AEM Form」を選択します。この「AEM Forms コンテナ」コンポーネントがページに追加されます。
-
AEM Forms コンテナ コンポーネントを選択し、
-
アダプティブフォームと Sites ページの両方を公開します。次の点について考慮してください。
- 初めて AEM Sites ページを公開する場合で、かつ、フォームが埋め込まれている場合は、Sites ページに加えて、埋め込まれたフォームも公開してください。
- 公開されたサイトページに埋め込まれたフォームのみを変更する場合は、元のフォームを公開します。変更内容は、公開されたサイトページに反映されます。公開されたサイトページにはフォームへの参照情報が含まれているため、ページを再公開する必要はありません。
- Sites ページと埋め込みフォームに変更を加えた場合、 Sites ページとフォームを再公開します。
AEM Sites ページに追加された発送先住所と請求先住所の変更フォーム 。
外部 web ページへのアダプティブフォームの埋め込み embed-the-adaptive-form-in-an-external-webpage
外部 web ページに数行の JavaScript を挿入することで、アダプティブフォームを外部 web ページ（AEM の外部でホストされる AEM 以外の web ページ ）に埋め込むことができます。JavaScript コードは、アダプティブフォームおよび関連リソースの HTTP リクエストを AEM Forms サーバーに送信し、アダプティブフォームを web ページに追加します。手順について詳しくは、外部 web ページへのアダプティブフォームの埋め込みを参照してください。