概要

Adobe Experience Manager (AEM) Forms のアダプティブフォーム機能を使用すると、魅力的でレスポンシブなアダプティブフォームを作成できます。 

アダプティブフォームの作成時に、フォームのモデルを指定できます。データモデルを選択する際には、要件に適合するかどうかだけでなく、すでに XFA および XSD アセットに投資をしている場合、それらの既存の投資を拡張できるかどうかを考慮することが重要です。アダプティブフォームの作成:

  • フォームモデルなし
    このオプションで作成するアダプティブフォームにはデータモデルは使用されません。このようなフォームで生成されるデータ XML は、フィールドと対応する値を持つフラットな構造です。
  • XML Schema Definition(XSD)を使用
    XML スキーマは、組織のバックエンドシステムによってデータが生成、消費される構造を表しています。アダプティブフォームに XML スキーマを関連付け、その要素を使用することで、アダプティブフォームに動的なコンテンツを追加することができます。スキーマの要素は、アダプティブフォームの作成時にコンテンツファインダーで利用できるようになります。
  • フォームテンプレートを使用
    これまで XFA ベースの HTML5 フォームに投資してきた場合、これが最適なフォームデータモデルです。XFA ベースのフォームをアダプティブフォームに直接変換する方法を提供します。すべての既存の XFA ルールは、関連付けられたアダプティブフォームに保持されます。このアダプティブフォームは、検証、イベント、プロパティ、パターンなどの XFA 構成をサポートします。

アダプティブフォームでは、フォームを論理的な複数のセクションに分割できます。ユーザーは特定のセクションを表示し、その他のセクションを非表示にできます。または、大規模なフォームの場合はユーザーに表示するフォームを指定することができます。アダプティブフォームをオーサリングし、ユーザーの応答、デバイスまたは作業環境に基づいてフォームのセクションを追加または削除して、ユーザーの入力に動的に対応することができます。これにより、エンドユーザーは 1 つのセクションに集中して記入できます。 

アダプティブフォームオーサリング UI

タッチ操作向け UI によるアダプティブフォームのオーサリングは直観的で、次の機能が提供されます。

  • ドラッグ&ドロップ機能
  • 標準フォームコンポーネント
  • アセットのための統合リポジトリ

新しいアダプティブフォームを作成するときまたは既存のものを編集するときは、次の UI エレメントを使用します。

  • サイドバー
  • ページのツールバー
  • アダプティブフォームページ
  • コンポーネントのツールバー
アダプティブフォームオーサリング UI
A. サイドバー B. ページのツールバー C. アダプティブフォームページ 

注意:

従来のオーサリング UI を使用するには、フォーム URL の /editor.html/ を /cf#/ に置き換えることで、クラシックオーサリングモードになります。

サイドバー

サイドバーでは次の操作が可能です。

  • パネル、コンポーネント、フィールド、レイアウトなどフォームのコンテンツを表示する。
  • コンポーネントのプロパティを編集する。
  • AEM Digital Asset Management(DAM)リポジトリのアセットを検索、表示、使用する。
  • フォームにコンポーネントを追加する。
サイドバー
クリックして拡大

A. コンテンツブラウザー B. プロパティブラウザー C. アセットブラウザー D. コンポーネントブラウザー 

サイドバーは次のブラウザーで構成されます。

  • コンテンツブラウザー
    コンテンツブラウザーには以下の項目が表示されます。
    • フォームオブジェクト
      フォームのオブジェクトの階層を表示します。作成者は、フォームオブジェクトのツリーで目的の要素をタップし、特定のフォームコンポーネントに移動することができます。作成者は、このツリーでオブジェクトを探したりオブジェクトの配置を調整することができます。
    • データモデルオブジェクト
      フォームモデルの階層を確認することができます。
      フォームモデルのエレメントをアダプティブフォームにドラッグ&ドロップできます。追加されたエレメントは自動的にフォームのコンポーネントに変換され、元のプロパティは保持されます。フォームに XML スキーマまたは XDP 基づくテンプレートを使用している場合は、データモデルのオブジェクトを確認できます。
  • プロパティブラウザー
    コンポーネントのプロパティを編集することができます。コンポーネントに応じて、プロパティは異なります。アダプティブフォームコンテナのプロパティを確認するには、
    コンポーネントを選択して、 アダプティブフォームコンテナをタップし、それから をタップします。
  • アセットブラウザー
    画像、ドキュメント、ページ、動画など、コンテンツがさまざまなタイプごとに分類されています。DAM 内でアセットを検索する方法について詳しくは、「デジタルアセットの検索と表示」を参照してください。
  • コンポーネントブラウザー
    アダプティブフォームを構築するために使用できるコンポーネントが含まれています。コンポーネントをアダプティブフォームにドラッグしてフォームエレメントを追加し、必要に応じて追加しエレメントを設定できます。次の表で、コンポーネントブラウザーに一覧表示されるコンポーネントについて説明します。
コンポーネント 機能
アダプティブフォームのフッター
通常、企業のロゴ、フォームのタイトル、概要を含むページヘッダーを追加します。
アダプティブフォームのヘッダー 通常、著作権情報と他のページへのリンクを含むページフッターを追加します。 
ボタン ボタンを追加します。ボタンは、保存、リセット、進む、戻るなどのアクションを実行するように設定できます。
グラフ アダプティブフォームとドキュメントで使用できるグラフを追加して、繰り返し可能なパネルとテーブル行で 2 次元のデータを視覚的に表現します。
チェックボックス チェックボックスを追加します。
日付選択 日付を選択するためのカレンダーフィールドを追加します。
ドキュメントフラグメント 再利用可能な通信のコンポーネントを追加することができます。
ドキュメントフラグメントグループ 関連するドキュメントフラグメントのグループを追加することができます。このグループは、レターテンプレートで単一のユニットとして使用できます。
コンボボックス ドロップダウンリストを追加します(単独または複数選択)。
E署名

ユーザーがフォームに署名できる署名領域を追加します。ここでは、Adobe Document Cloud eSign サービスまたは手書き署名サービスを設定できます。

XDP フォームテンプレートを使用しているアダプティブフォームの場は、E署名コンポーネントにアダプティブフォームに関連付けられている元のフォームテンプレートが表示されます。 

注意: E署名コンポーネントを含むアダプティブフォームは、匿名ユーザーをサポートしません。

添付ファイル ユーザーがサポートドキュメントを参照しフォームに添付するためのボタンを追加します。
ファイル添付リスト
ファイル添付のコンポーネントを使用してアップロードされたすべての添付を一覧表示するフィールドを追加します。
画像 画像を挿入できるようにします。
数値ボックス 数値を取得するためのフィールドを追加します。
パネル パネルまたはサブパネルを追加します。
パスワードボックス パスワードを取得するためのフィールドを追加します。
ラジオボタン ラジオボタンを追加します。
前へボタン ユーザーが前のページまたはパネルに戻ることができるボタンを追加します。
リセットボタン フォームのフィールドをリセットするボタンを追加します。
手書き署名 手書き書名を取得するためのフィールドを追加します。
区切り文字 フォーム内のパネルを視覚的に分類できるようにします。
静止テキスト 静止テキストを指定できます。
送信ボタン フォームを設定済みの送信アクションに送信するための送信ボタンを追加します。
サマリ 作成者が指定するサマリテキストを追加します。これはフォームの送信後に表示されます。
テーブル 行と列のデータを整理して示すことができるテーブルを追加します。 
利用条件
ユーザーがフォームに記入する前に確認するための利用条件を作成者が指定するために使用できるフィールドを追加します。
テキストボックス ユーザーが必要な情報を指定できるテキストボックスを追加します。
確認

XDP フォームテンプレートを使用しているアダプティブフォームの場合は、確認コンポーネントは、ユーザーが情報を確認するためのフォームをレンダリングします。

注意: 確認コンポーネントを含むアダプティブフォームは、匿名ユーザーをサポートしません。

データ入力フィールド フォームのデータ入力フィールドコンポーネントを使用して、顧客が日、月、年の 3 つのボックスに個別に入力できるようにします。コンポーネントの外観はカスタマイズできます。また、日付形式を変更することもできます。例えば、MM/DD/YYYY または DD/MM/YYYY の形式で顧客は入力できます。
Numeric Stepper フォームの Numeric Stepper を使用して、事前に定義された手順に基づいて増減可能な数値を顧客は入力できます。
画像選択 フォームの画像選択コンポーネントを使用して、情報の提供を行う画像を顧客が選択できるようにします。画像の情報により、パーソナライズされたサービスを顧客に提供することができます。
切り替え 切り替えまたは有効化/無効化のアクションを行う切り替えスイッチを追加します。

各コンポーネントは、その外観と機能をコントロールするプロパティを関連付けています。コンポーネントのプロパティを設定するには、コンポーネントをタップし、プロパティブラウザーで をタップしてコンポーネントのプロパティを開きます。

コンポーネントは要素名で識別されます。 をタップし、プロパティブラウザーで要素名フィールドの値を変更することでコンポーネントの名前を変更できます。

注意:

要素名フィールドに使用できるのは、英字、数字、ハイフン(-)、およびアンダースコア(_)のみです。その他の特殊文字は使用できません。また、要素名は英字で始まる必要があります。 

ページのツールバー

上部のページツールバーを使用し、フォームのプレビュー、フォームプロパティの変更、フォームレイアウトの変更を行うことができます。フォームの作成者はフォームをプレビューして変更を加えることができます。

ページのツールバーには、以下の項目が表示されます。

  • サイドパネルを切り替え :サイドバーの表示と非表示を切り替えます。
  • ページ情報
    :ページのプロパティの表示、フォームの発行と非公開、フォームのワークフローの開始、フォームをクラシック UI で開く操作を行います。
  • エミュレーター :タブレットや携帯電話など異なる画面サイズでのフォームの外観をエミュレートします。
  • 編集編集、スタイル、開発者、デザインなどのその他のモードを選択します。
    • 編集:フォームとフォームのコンポーネントのプロパティを編集します。例えば、コンポーネントの追加、画像の削除、必須フィールドの指定などを行います。
    • スタイル:フォームのコンポーネントのスタイルを調整します。例えば、スタイルモードではパネルを選択してパネルの背景色を指定することができます。
    • 開発者
      • 開発者はフォームの構成要素を確認することができます。
      • 開発者はいつどこでどのような不具合が発生しているか確認し、問題の解決を図ることができます。
    • デザイン サイドバーに一覧表示されていないカスタムコンポーネント、またはあらかじめ用意されたコンポーネントを有効または無効にします。
  • プレビュー:フォーム発行時の外観をプレビューします。

コンポーネントのツールバー

タッチ UI のコンポーネントのツールバー

コンポーネントを選択すると、以下の機能を使用できるツールバーが表示されます。切り取り、貼りつけ、移動、およびコンポーネントのプロパティを指定するオプションを使用することができます。次のオプションがあります。

A. 設定:「設定」をタップすると、サイドバーにコンポーネントの各種プロパティが表示されます。これらのプロパティを設定することで、データ取得の方法をカスタマイズすることができます。コンポーネントのタイトルフィールドのラベルテキストを指定して、コンポーネントの要素名を変更することができます。要素名によって、ユーザーがコンポーネントを使用して入力した値を取得することができます。コンポーネントのプロパティでは、コンポーネントの動作を指定し、ユーザーの入力を管理することができます。サイドバーでプロパティを設定し、ユーザーデータを取得して、そのデータをその後の処理に使用することができます。アダプティブフォームコンテナのプロパティでは、クライアントライブラリ、レイアウト、テーマ、レコードのドキュメントの設定、保存設定、送信設定、メタデータの設定を指定することができます。

B. コピー:コピーのオプションでは、コンポーネントをコピーしてフォーム内の別の場所にペーストすることができます。コンポーネントをペーストすると、ペーストされたコンポーネントに新しい要素名が与えられますが、コピーされたコンポーネントのプロパティは保持されます。

C. カット:カットのオプションでは、コンポーネントをアダプティブフォーム内の別の場所に移動させることができます。

D. 削除:フォームからコンポーネントを削除します。

E. 挿入:選択されたコンポーネントの上にコンポーネントを挿入します。

F. ペースト:上記のオプションでカットまたはコピーしたコンポーネントをペーストします。

G. ルールを編集:ルールエディターを開きます。詳しくは、「ルールエディター」を参照してください。

H. グループ:一度に 2 つ以上のコンポーネントを同時にカット、コピー、ペーストするために複数のコンポーネントを選択します。

I. :コンポーネントの親を選択します。例えば、テキストフィールド行がセクション内のサブセクションの中にある場合、そのセクションはガイドのルートパネル内に位置し、アダプティブフォームコンテナはガイドのルートパネルの親にあたります。コンポーネントでは、すべてのオプションは下位階層から順に表示されます。

例えば、テキストボックスで「」をタップすると、以下のように項目が表示されます。

  • サブセクション
  • セクション
  • guideRootPanel
  • アダプティブフォームコンテナ

J. その他:選択したコンポーネントの操作について、さらにオプションを提供します。

  • SOM 式を表示
  • パネルをフラグメントとして保存(パネルのみ)
  • 子パネルを追加(パネルのみ)
  • パネルツールバーを追加(パネルのみ)
  • 置換(パネル以外)

アダプティブフォームページ

アダプティブフォームページは実際のフォームです。これは、WCM cq:Page コンポーネントとしてモデル化されたその他すべての WCM ページと似ています。一般的なアダプティブフォームのコンテンツ構造を以下の図に示します。

アダプティブフォーム WCM ページのコンテンツ構造

コンテンツ構造は一般に、次の一次コンポーネントを含みます。

  • guideContainer: アダプティブフォームのルートです。これは、アダプティブフォーム UI 内でアダプティブフォームの開始としてマークされています。 このコンポーネントでは、次のことを指定できます。
    • アダプティブフォームのモバイルレイアウト: モバイルデータにおけるフォームの外観を定義します。
    • ありがとうページ: フォームの送信後にユーザーがリダイレクトされるページを定義します。
    • 送信アクション: ユーザーがフォームを送信した後に、サーバーでフォームを処理する方法を定義します。
    • スタイリング: フォームの外観をカスタマイズするために使用する CSS ファイルへのパスを指定します。
  •  rootPanel: アダプティブフォームのルートパネル。これは項目ノードの下にサブパネルを含むことができます。ルートパネルを含む各パネルは、それに関連付けられたレイアウトを持つことができます。パネルのレイアウトは、フォームをレイアウトする方法を指示します。例えば、アコーディオンレイアウトでは、その項目はアコーデオン手順としてレイアウトされます。
  • ツールバー: アダプティブフォームコンテナは関連付けられたグローバルツールバーを持ち、これはフォームに対してグローバルです。このツールバーは、編集バーのツールバーの追加アクションを使用して追加でき、作成者は送信、保存、リセットなどのアクションを追加できます。
  • アセット: このノードは、フォームのオーサリングのために使用する追加情報を含みます。例えば、フォームモデルの詳細、ローカリゼーションの詳細など。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー