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

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ページ)に埋め込む

詳しくは、

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now