アダプティブフォームのオーサリングの概要 introduction-to-authoring-adaptive-forms
概要 overview
アダプティブフォームを使用すると、魅力的でレスポンシブ、かつ動的でアダプティブなフォームを作成できます。AEM Forms には、アダプティブフォームを作成して操作するための直感的なユーザーインターフェイスと、すぐに使用できる各種のコンポーネントが用意されています。フォームモデルやスキーマをベースとしてアダプティブフォームを作成することも、フォームモデルを使用せずにアダプティブフォームを作成することもできます。フォームモデルを選択する場合、そのモデルが業務上の要件を満たしているかどうかだけでなく、インフラに対する現在の投資や既存のアセットを拡張できるかどうかについても慎重に検討することが重要です。アダプティブフォームは、以下のいずれかの方法で作成できます。
-
フォームデータモデルの使用
データ統合を使用すると、異なるデータソースのエンティティとサービスをフォームデータモデルに統合して、アダプティブフォームの作成に使用できます。アダプティブフォームを作成する際に、複数のデータソースに対するデータの取得と書き込みが必要になる場合は、フォームデータモデルを選択してください。 -
XDP フォームテンプレートの使用
XFA ベースまたは XDP フォームに投資している場合、これは理想的なフォームモデルです。XFA ベースのフォームをアダプティブフォームに直接変換できます。すべての既存の XFA ルールは、関連付けられたアダプティブフォームに保持されます。得られたアダプティブフォームは、検証、イベント、プロパティ、パターンなどの XFA 構成をサポートします。 -
XML スキーマ定義(XSD)または JSON スキーマの使用
XML スキーマおよび JSON スキーマは、組織内のバックエンドシステムによってデータが作成または使用される構造を表します。アダプティブフォームにスキーマを関連付け、そのスキーマの要素を使用することにより、アダプティブフォームに動的コンテンツを追加することができます。スキーマの要素は、アダプティブフォームを作成する際に、コンテンツブラウザーの「データモデルオブジェクト」タブで使用することができます。 -
フォームモデルを使用せずに作成
このオプションで作成されたアダプティブフォームは、フォームモデルを使用しません。このようなフォームで生成されるデータ XML は、フィールドと対応する値を持つフラットな構造です。
アダプティブフォームの作成について詳しくは、アダプティブフォームの作成を参照してください。
アダプティブフォームオーサリング UI adaptive-form-authoring-ui
タッチ操作向け UI によるアダプティブフォームのオーサリングは、直観的で、以下の機能が提供されます。
- ドラッグ&ドロップ機能
- 標準フォームコンポーネント
- アセットのための統合リポジトリー
既存のアダプティブフォームを作成または編集する場合は、次の UI 要素を使用します。
A. サイドバー B. ページツールバー C. アダプティブフォームページ
サイドバー sidebar
サイドバーを使用すると、次の操作ができます。
- パネル、コンポーネント、フィールド、レイアウトなどのフォームのコンテンツを表示する。
- コンポーネントのプロパティを編集する。
- AEM Digital Asset Management(DAM)リポジトリのアセットを検索、表示、使用する。
- フォームにコンポーネントを追加する。
A. コンテンツブラウザー B. プロパティブラウザー C. アセットブラウザー D. コンポーネントブラウザー
サイドバーは、以下のブラウザーで構成されます。
-
コンテンツブラウザー コンテンツブラウザーには以下の項目が表示されます。
-
フォームオブジェクト
フォームのオブジェクト階層を表示します。作成者は、フォームオブジェクトツリーで要素をタップすることで、特定のフォームコンポーネントに移動できます。作成者は、このツリーでオブジェクトを探したり並べ替えたりできます。 -
データモデルオブジェクト
フォームモデル階層を確認できます。フォームモデルの要素をアダプティブフォームにドラッグ&ドロップできます。追加された要素は、元のプロパティを保持したまま、自動的にフォームコンポーネントに変換されます。XML スキーマ、JSON スキーマまたは XDP テンプレートをフォームで使用している場合は、データモデルオブジェクトを表示できます。
-
-
プロパティブラウザー
コンポーネントのプロパティを編集できます。コンポーネントに応じて、プロパティは異なります。アダプティブフォームコンテナのプロパティを確認するには:
コンポーネントを選択し、 /アダプティブフォームコンテナ、 の順に選択します。
-
アセットブラウザー
画像、ドキュメント、ページ、動画など、様々なタイプのコンテンツを分類します。
-
コンポーネントブラウザー
アダプティブフォームを構築するために使用できるコンポーネントが含まれます。コンポーネントをアダプティブフォームにドラッグしてフォーム要素を追加し、必要に応じて追加した要素を設定できます。以下の表で、コンポーネントブラウザーにリストされるコンポーネントについて説明します。
コンポーネントを使用する場合のベストプラクティス best-practices
ここでは、アダプティブフォームの各種コンポーネントを使用する場合のベストプラクティスと重要事項について説明します。
-
各コンポーネントには、そのコンポーネントの外観と機能をコントロールするプロパティが関連付けられています。コンポーネントのプロパティを設定するには、コンポーネントを選択し、 を選択して、プロパティブラウザーでコンポーネントプロパティを開きます。
-
コンポーネントは要素名で識別されます。コンポーネント名を変更するには、 を選択し、プロパティブラウザーで「要素名」フィールドの値を変更してください。要素名フィールドに使用できるのは、英字、数字、ハイフン(-)およびアンダースコア(_)のみです。その他の特殊文字は使用できません。また、要素名は文字で始まる必要があります。
-
フォーム上にタイトルが表示されている場合は、プロパティブラウザーを起動することなく、アダプティブフォームコンポーネントのタイトルプロパティをフォームエディター内でインライン編集することができます。この作業を行うには、以下の手順を実行します。
-
「タイトル」プロパティが設定されていて、「タイトルを非表示」プロパティが無効になっているコンポーネントをタップして選択します。
-
を選択して、タイトルを編集可能にします。
-
タイトルを変更して Return キーを押すか、コンポーネント以外の場所を選択して、変更内容を保存します。変更内容を破棄する場合は Esc キーを押します。
-
-
メールコンポーネントや電話番号コンポーネントなど、一部のアダプティブフォームコンポーネントには、すぐに使用できる検証パターンが用意されています。ただし、コンポーネントプロパティのパターンアコーディオンの下に表示されている「検証パターン」フィールドを更新することにより、カスタムの検証パターンを指定できます。デフォルトの検証パターンについて詳しくは、前述の表に記載されているコンポーネントの説明を参照してください。
-
特殊な HTML5 入力タイプを許可するようにアダプティブフォームのフィールド(数値ボックスやメールフィールドなど)を設定できます。モバイルデバイスやタブレットでこれらのフィールドにフォーカスを置くと、これらのフィールドで情報を入力する際に共通して使用される特定のアルファベット、数値、文字がキーパッドに表示されます。これにより、キーパッドの文字セットを切り替える必要がなくなるので、情報をすばやく入力できます。特定のコンポーネントで特殊な入力タイプを許可するには、そのコンポーネントのプロパティで「HTML タイプ番号を使用」チェックボックスを有効にします。
-
テキストボックスコンポーネントでリッチテキストを有効にすることもできます。テキストボックスにリッチテキストを入力できるようにするには、コンポーネントプロパティで「リッチテキストを許可」チェックボックスを有効にします。
-
テキストボックスコンポーネント、メールコンポーネント、電話番号コンポーネントを有効にすると、ブラウザーの自動入力設定に保存されている情報から各種フィールドの値(名前、住所、クレジットカード番号、電話番号、メールアドレスなど)が取得され、自動的に入力されます。この機能を有効にするには、コンポーネントプロパティで「自動入力を有効にする」を選択し、「自動入力属性」を選択します。アダプティブフォームの入力時に、ブラウザーの自動入力プロファイルまたは以前に入力された値に基づいて、入力値の候補が表示されます。自動入力機能を使用するには、ブラウザーの自動入力設定がオンになっている必要があります。
-
コンポーネントプロパティでは、ラジオボタン項目とチェックボックス項目の値を
{value}={text}
という形式で指定します。 -
添付ファイルコンポーネントの場合、デフォルトで添付できるファイルの数は 1 つだけです。ただし、複数のファイルを添付できるようにコンポーネントプロパティを設定することができます。また、複数のファイルを同じファイル名で添付すると、問題が発生する場合があります。したがって、フォームを送信する際には、一意の ID を各添付ファイルに関連付けることをお勧めします。そのためには、以下の手順を実行します。
- AEM Forms サーバーで、Adobe Experience Manager/ツール/操作/Web コンソール に移動します。
- 「アダプティブフォーム設定サービス」を探して選択します。
- アダプティブフォーム設定サービスダイアログで、「ファイル名を一意にする」を有効にします。このオプションは、デフォルトで無効になっています。
-
Safari ブラウザーを使用して PDF ファイルを添付できるようにするには、添付ファイルコンポーネントのサポート対象ファイルタイププロパティに application/pdf を追加します。旧バージョンの AEM Forms で作成されたアダプティブフォームでは、application/pdf ではなく .pdf が、サポート対象ファイルタイププロパティに含まれている場合があります。
アダプティブフォームに関するベストプラクティスについては、アダプティブフォームの操作のベストプラクティスを参照してください。
ページツールバー page-toolbar
上部のページツールバーでは、フォームのプレビュー、フォームプロパティの変更、フォームレイアウトの変更を可能にするオプションを提供します。フォームの作成者は、フォームをプレビューして変更を加えることができます。ページツールバーには、以下の項目が表示されます。
-
サイドパネルを切り替え :サイドバーの表示と非表示を切り替えます。
-
ページ情報 :ページプロパティの表示、フォームの公開/非公開、フォームワークフローの開始、フォームをクラシック UI で開く操作が可能です。
-
エミュレーター :タブレットや携帯電話など異なる画面サイズでのフォームの外観をエミュレートします。
-
編集:編集、スタイル、開発者、デザイン など、その他のモードを選択できます。
-
編集:フォームとそのコンポーネントのプロパティを編集できます。例えば、コンポーネントの追加、画像の削除、必須フィールドの指定などを行うことができます。
-
スタイル:フォームのコンポーネントのアピアランスを調整できます。例えば、スタイルモードでパネルを選択してパネルの背景色を指定できます。
-
開発者:以下が可能です。
- フォームの構成要素を確認できます。
- 何がいつ、どこで起きているかを確認し、問題の解決に役立てます。
-
デザイン:カスタムコンポーネントや、サイドバーにリストされていないすぐに使用できるコンポーネントを有効または無効にできます。
-
-
プレビュー:フォーム公開時の外観をプレビューできます。
コンポーネントツールバー component-toolbar
コンポーネントを選択すると、作業で使用できるツールバーが表示されます。切り取り、貼り付け、移動およびコンポーネントのプロパティを指定するオプションを使用できます。以下のオプションがあります。
A. 設定:設定 を選択すると、サイドバーにコンポーネントのプロパティが表示されます。これらのプロパティを設定することで、データ取得方法をカスタマイズできます。コンポーネントのタイトルフィールドのラベルテキストを指定して、コンポーネントの要素名を変更できます。要素名を使用すると、ユーザーがコンポーネントを使用して入力した値を取得できます。コンポーネントのプロパティでは、コンポーネントの動作を指定し、ユーザーの入力を管理できます。サイドバーでプロパティを設定し、ユーザーデータを取得して、そのデータをその後の処理に使用できます。アダプティブフォームコンテナのプロパティでは、クライアントライブラリ、レイアウト、テーマ、レコードのドキュメントの設定、保存設定、送信設定、メタデータの設定を指定することができます。
B. コピー:コピーオプションでは、コンポーネントをコピーしてフォーム内の別の場所に貼り付けることができます。コンポーネントを貼り付けすると、貼り付けられたコンポーネントに新しい要素名が与えられますが、コピーされたコンポーネントのプロパティは保持されます。
C. カット:カットのオプションでは、コンポーネントをアダプティブフォーム内の別の場所に移動させることができます。
D. 削除:フォームからコンポーネントを削除できます。
E. 挿入:選択されたコンポーネントの上にコンポーネントを挿入できます。
F. 貼り付け:前述のオプションでカットまたはコピーしたコンポーネントを貼り付けることができます。
G. ルールを編集:ルールエディターを開くことができます。詳しくは、ルールエディターを参照してください。
H. グループ:複数のコンポーネントについて、カット、コピー、貼り付けを同時に実行したい場合に、複数のコンポーネントを選択できます。
I. 親:コンポーネントの親を選択できます。例えば、テキストフィールドがセクション内のサブセクションの中にある場合、そのセクションはガイドルートパネル内に位置し、アダプティブフォームコンテナはガイドルートパネルの親にあたります。コンポーネントの場合、下位から上位の順の階層ですべてのオプションを確認できます。
例えば、テキストボックスで「親」を選択すると、以下のように項目が表示されます。
- サブセクション
- セクション
- guideRootPanel
- アダプティブフォームコンテナ
J. その他:このオプションにより、選択したコンポーネントを操作するためのその他のオプションを表示することができます。
- SOM 式を表示
- パネルをフラグメントとして保存(パネルのみ)
- 子パネルを追加(パネルのみ)
- パネルツールバーを追加(パネルのみ)
- 置換(パネル以外)
アダプティブフォームページ af-page
アダプティブフォームページは、実際のフォームです。これは、WCM cq:Page
コンポーネントとしてモデル化されたその他すべての WCM ページと似ています。一般的なアダプティブフォームのコンテンツ構造を以下の図に示します。
コンテンツ構造は、通常、以下の一次コンポーネントを含みます。
-
guideContainer:アダプティブフォームのルートです。これは、アダプティブフォーム UI 内で アダプティブフォームの開始 としてマークされています。このコンポーネントでは、以下のことを指定できます。
- アダプティブフォームのモバイルレイアウト:モバイルデバイスでのフォームの表示方法を定義します。
- ありがとうページ:フォームの送信後にユーザーがリダイレクトされるページを定義します。
- 送信アクション:ユーザーがフォームを送信した後に、サーバーでフォームを処理する方法を定義します。
- スタイリング:フォームのアピアランスをカスタマイズするために使用する CSS ファイルへのパスを指定します。
-
rootPanel: アダプティブフォームのルートパネル。項目ノードの下にサブパネルを含むことができます。ルートパネルを含む各パネルは、それに関連付けられたレイアウトを持つことができます。パネルのレイアウトは、フォームをレイアウトする方法を指示します。例えば、アコーディオンレイアウトでは、その項目はアコーデオンステップとしてレイアウトされます。
-
ツールバー: アダプティブフォームコンテナは関連付けられたグローバルツールバーを持ち、これはフォームに対してグローバルです。このツールバーは、編集バーの ツールバーを追加 アクションを使用して追加でき、作成者は送信、保存、リセットなどのアクションを追加できます。
-
アセット: このノードには、フォームのオーサリングに使用される追加情報が含まれます。例えば、フォームモデルの詳細、ローカリゼーションの詳細などです。