チュートリアル:最初のアダプティブフォームの作成

01-create-first-adaptive-form-hero-image

概要

アダプティブフォーム​は、登録が簡単で効率が高く、作業時間を削減できる、モバイルデバイスに適した​フォーム機能​です。アダプティブフォームは、モバイル、自動化、分析に適したフォームエクスペリエンスを提供します。レスポンシブでインタラクティブなフォームを簡単に作成でき、自動プロセスを使用して管理や繰り返しタスクを減らし、データ分析を使用してフォームに対するユーザーの体験を改善およびパーソナライズできます。

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

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

create-adaptive-form-workflow

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

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

このWebサイトはAdobe Experience Manager(AEM)上で動作し、データの取得と処理にAEM Formsを使用します。 住所の追加とフォームの更新は、アダプティブフォームを使用して行います。データベース内の顧客情報は Web サイト上に保存されます。利用可能なアドレスを取得して表示する際に、アドレスの追加と更新のフォームを使用します。 また、アダプティブフォームを使用して、更新後の住所と新しい住所を入力します。

前提条件

  • AEM オーサーインスタンスをセットアップします。

  • AEM Forms アドオンをオーサーインスタンスにインストールします。

  • JDBC データベースドライバー(JAR ファイル)をデータベースプロバイダーから取得します。このチュートリアルの例は、MySQLデータベースに基づいており、Oracle’s MySQL JDBCデータベースドライバーを使用しています。

  • 以下に示すフィールドを使用して、顧客データを保存するデータベースをセットアップします。アダプティブフォームを作成する場合、データベースは必須ではありません。このチュートリアルでは、データベースを使用して、フォームデータモデルとAEM Formsの永続性機能を表示します。

adaptiveformdata

手順 1:アダプティブフォームを作成する

03-create-adaptive-form-main-image_small

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

ゴール:

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

詳しくは、

手順 2:フォームデータモデルを作成する

05-create-form-data-model-main_small

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

ゴール:

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

詳しくは、

手順 3:アダプティブフォームのフィールドにルールを適用する

07-apply-rules-to-adaptive-form_small

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

ゴール:

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

詳しくは、

手順 4:アダプティブフォームのスタイルを設定する

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

ゴール:

  • 初期設定済みテーマをアダプティブフォームに適用する
  • テーマエディターを使用して、アダプティブフォームのテーマを作成する
  • カスタムテーマでのWebフォントの使用

詳しくは、

手順 5:アダプティブフォームをテストする

アダプティブフォームの11テスト

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

ゴール:

  • アダプティブフォームのテストスイートの作成
  • アダプティブフォームのテストケースの作成
  • テストケースの実行

詳しくは、

手順 6:アダプティブフォームをパブリッシュする

12-publish-your-adaptive-form-_small

アダプティブフォームは、スタンドアロンフォーム(シングルページアプリ)、AEM サイトページに含める、またはFormsポータルを使用してAEM Site上のリストとして発行できます。

ゴール:

  • アダプティブフォームをAEMページとして発行する
  • アダプティブフォームをAEM Sitesページに埋め込む
  • アダプティブフォームを外部Webページ(AEMの外部でホストされているAEM以外のWebページ)に埋め込む

詳しくは、

このページ