最初のアダプティブフォームを作成する

アダプティブフォームは、登録が簡単で効率が高く、作業時間を削減できる、モバイルデバイスに適したフォーム機能です。アダプティブフォームは、モバイル、自動化、分析に適したフォームエクスペリエンスを提供します。レスポンシブでインタラクティブな特性を持つフォームを簡単に作成することができます。自動化されたプロセスをこのフォームで使用して管理業務や繰り返しの作業を減らし、データ分析機能により、顧客のエクスペリエンスをカスタマイズして改善することができます。 

このチュートリアルでは、アダプティブフォームを作成するためのエンドツーエンドのフレームワークについて説明します。このチュートリアルは、1 つのユースケースと複数のガイドから構成されています。各ガイドでは、このチュートリアルで作成するアダプティブフォームと、このアダプティブフォームに追加する新しい機能について説明します。すべてのガイドに、作業用アダプティブフォームが用意されています。アダプティブフォームを作成するためのガイドも用意されています。その他のガイドについても、間もなく公開する予定になっています。このチュートリアルを完了すると、次の操作を実行できるようになります。  

• アダプティブフォームとフォームデータモデルを作成する。
• アダプティブフォームのスタイルを設定する。
• アダプティブフォームのルールエディタ－を使用してビジネスルールを作成する。
• アダプティブフォームをテストしてパブリッシュする。

最初に、このチュートリアルで使用するユースケースについて説明します。

さまざまな顧客に対応するため、幅広い製品を提供する Web サイトがあります。顧客はこの Web サイトのポータルを閲覧し、製品を選択して注文します。すべての顧客がアカウントを作成し、配送先の住所と請求先の住所を入力します。既存の顧客である Sara Rose は、Web サイトに配送先住所を追加しようとしています。この Web サイトには、配送先住所の追加と更新を行うためのオンラインフォームが用意されています。

この Web サイトは Adobe Experience Manager（AEM）上で稼働し、AEM Forms を使用してデータの取得と処理を行います。住所の追加とフォームの更新は、アダプティブフォームを使用して行います。データベース内の顧客情報は Web サイト上に保存されます。顧客は、住所の追加とフォームの更新を行い、有効な住所を取得して表示します。また、アダプティブフォームを使用して、更新後の住所と新しい住所を入力します。

• AEM オーサーインスタンスをセットアップします。
  
• AEM Forms アドオンをオーサーインスタンスにインストールします。
• JDBC データベースドライバー（JAR ファイル）をデータベースプロバイダーから取得します。このチュートリアルに記載されている例は、MySQL データベースをベースとしています。これらの例では、Oracle の MySQL JDBC データベースドライバーを使用しています。
  
• 以下に示すフィールドを使用して、顧客データを保存するデータベースをセットアップします。アダプティブフォームを作成する場合、データベースは必須ではありません。このチュートリアルではデータベースを使用して、AEM Forms のフォームデータモデルと永続性機能を表示します。 

アダプティブフォームは、レスポンシブで動的な特性を持つ、柔軟性の高い次世代型の高機能なフォームです。アダプティブフォームにより、エクスペリエンスをターゲット用にカスタマイズすることができます。AEM Forms には、ドラッグアンドドロップ操作でアダプティブフォームを作成するための WYSIWYG エディターが用意されています。アダプティブフォームについて詳しくは、「アダプティブフォームのオーサリングの概要」を参照してください。

目標：

• 顧客が配送先住所を追加するためのアダプティブフォームを作成する
• 顧客の情報を表示して保存するためのアダプティブフォームフィールドのレイアウトを設定する
• フォームコンテンツが記載された電子メールを送信するためのアクションを作成する
• アダプティブフォームのプレビューと送信を行う
  

フォームデータモデルにより、アダプティブフォームを複数の異なるデータソースに接続することができます。例えば、AEM ユーザープロファイル、RESTful Web サービス、SOAP ベースの Web サービス、OData サービス、関連データベースなどに接続することができます。フォームデータモデルは、接続されたデータソースで使用可能なビジネスエンティティとサービスの統一されたデータ表現スキーマです。フォームデータモデルをアダプティブフォームとともに使用すると、接続されたデータソースに対して、データの取得、更新、削除、追加を行うことができます。 

目標：

• データソースとして Web サイトのデータベースインスタンス（MySQL データベース）を設定する
  
• MySQL データベースをデータソースとして使用して、フォームデータモデルを作成する
• データモデルオブジェクトをフォームデータモデルに追加する
• フォームデータモデルの読み取りサービスと書き込みサービスを設定する
  
• テストデータを使用して、フォームデータモデルと設定済みサービスをテストする

アダプティブフォームには、アダプティブフォームオブジェクトにルールを書き込むためのエディターが用意されています。これらのルールにより、フォームオブジェクト上でトリガされるアクションを定義します。このアクションは、事前に定義された条件、ユーザーによる入力、ユーザーがフォーム上で実行した操作に基づいてトリガされます。ルールを適用することにより、フォームのフィールドに短時間で正確に情報を入力できるようになります。 

目標：

• ルールを作成してアダプティブフォームのフィールドに適用する
• ルールを使用してフォームデータモデルサービスをトリガーし、データベースのデータを更新する
  

アダプティブフォームには、アダプティブフォームのテーマを作成するためのテーマとエディターが用意されています。テーマには、コンポーネントとパネルの詳細なスタイル設定が含まれています。様々なフォームでテーマを再利用することができます。スタイルには、背景色、状態を表す色、透明度、配置、サイズなどのプロパティが含まれています。テーマをフォームに適用すると、指定したスタイルがフォームの対応コンポーネントに反映されます。アダプティブフォームは、フォーム専用スタイルのインラインスタイル設定をサポートしています。 

目標：

• 配送先住所を変更するためのアダプティブフォームのテーマを作成する
• アダプティブフォームにテーマを適用する
• モバイルデバイスとデスクトップ上のアダプティブフォームの外観を確認する
  

テーマとテーマエディターについて詳しくは、「AEM Forms のテーマ」を参照してください。

アダプティブフォームは、顧客とのやり取りを行う上で欠かすことができないものです。アダプティブフォームを変更したら、必ずテストを行うことが重要です。しかし、フォームのすべてのフィールドをテストするのは面倒な作業です。AEM Forms には、アダプティブフォームのテストを自動化するための SDK（Calvin SDK）が用意されています。Calvin を使用すると、Web ブラウザーでアダプティブフォームを自動的にテストすることができます。 

目標：

• Calvin SDK をインストールする
• アドレスフォームを変更するためのテストスイートとテストケースを作成する

SDK について詳しくは、「アダプティブフォームのテスト自動化」を参照してください。

アダプティブフォームは、AEMの サイトページに含めることも、フォームポータルを使用する AEM サイトに表示して、スタンドアロン形式（単一ページのアプリケーション）としてパブリッシュすることもできます。

目標：

• アダプティブフォームを単一ページアプリケーションとしてパブリッシュする