アダプティブフォームエディター

概要

アダプティブフォームを使用すると、魅力的でレスポンシブ、かつ動的でアダプティブなフォームを作成できます。AEM Forms には、アダプティブフォームを作成して操作するための直感的なユーザーインターフェイスと、すぐに使用できる各種のコンポーネントが用意されています。フォームモデルやスキーマをベースとしてアダプティブフォームを作成することも、フォームモデルを使用せずにアダプティブフォームを作成することもできます。フォームモデルを選択する場合、そのモデルが業務上の要件を満たしているかどうかだけでなく、インフラに対する現在の投資や既存のアセットを拡張できるかどうかについても慎重に検討することが重要です。アダプティブフォームは、以下のいずれかの方法で作成できます。

• フォームデータモデルを使用
  データ統合 を使用すると、異なるデータソースのエンティティとサービスをフォームデータモデルに統合して、アダプティブフォームの作成に使用できます。作成するアダプティブフォームで、複数のデータソースに対するデータの取得と書き込みが必要になる場合は、フォームデータモデルを選択します。

• XDP フォームテンプレートの使用
  XFA ベースまたは XDP フォームに投資している場合、これは理想的なフォームモデルです。XFA ベースのフォームをアダプティブフォームに直接変換する方法を提供します。すべての既存の XFA ルールは、関連付けられたアダプティブフォームに保持されます。結果のアダプティブフォームは、検証、イベント、プロパティ、パターンなどの XFA 構成をサポートします。

• XML スキーマ定義（XSD）または JSON スキーマの使用
  XML スキーマおよび JSON スキーマは、組織内のバックエンドシステムによってデータが作成または使用される構造を表します。アダプティブフォームにスキーマを関連付けて、そのスキーマの要素を使用することにより、アダプティブフォームに動的なコンテンツを追加できます。スキーマの要素は、アダプティブフォームをオーサリングする際に、コンテンツブラウザーの「データモデルオブジェクト」タブで使用できます。

• フォームモデルを使用せずに作成
  このオプションで作成されたアダプティブフォームは、フォームモデルを使用しません。このようなフォームで生成されるデータ XML は、フィールドと対応する値を持つフラットな構造です。

  メモ

  フォームモデルのプロパティは、アダプティブフォームエディターまたはアダプティブフォームテンプレートエディターから変更することができます。 詳しくは、アダプティブフォームのフォームモデルプロパティを編集を参照してください。

アダプティブフォームを作成するには、アダプティブフォームの作成を参照してください。

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

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

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

新しいアダプティブフォームを作成する場合や既存のものを編集する場合は、以下の UI 要素を使用します。

• サイドバー
• ページツールバー
• コンポーネントツールバー
• アダプティブフォームページ

サイドバー

サイドバーでは、以下の操作が可能です。

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

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

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

• コンテンツブラウザー
  コンテンツブラウザーには、以下の項目が表示されます。

  • フォームオブジェクト
    フォームのオブジェクト階層を表示します。作成者は、フォームオブジェクトツリーで要素をタップすることで、特定のフォームコンポーネントに移動できます。作成者は、このツリーでオブジェクトを探したり並べ替えたりできます。

  • データモデルオブジェクト
    フォームモデル階層を確認できます。アダプティブフォームにフォームモデル要素をドラッグ＆ドロップできます。追加された要素は、元のプロパティを保持したまま、自動的にフォームコンポーネントに変換されます。XML スキーマ、JSON スキーマまたは XDP テンプレートをフォームで使用している場合は、データモデルオブジェクトを表示できます。

• プロパティブラウザー

  コンポーネントのプロパティを編集できます。コンポーネントに応じて、プロパティは異なります。アダプティブフォームコンテナのプロパティを確認するには、以下の手順を実行します。

  コンポーネントを選択し、／アダプティブフォームコンテナ​をタップして、 をタップします。

• アセットブラウザー

  画像、ドキュメント、ページ、動画など、様々なタイプのコンテンツを分類します。

• コンポーネントブラウザー

  アダプティブフォームを構築するために使用できるコンポーネントが含まれます。アダプティブフォームにコンポーネントをドラッグしてフォーム要素を追加し、要件に合わせて追加要素を設定できます。以下の表で、コンポーネントブラウザーにリストされるコンポーネントについて説明します。

ページツールバー

上部のページツールバーでは、フォームのプレビュー、フォームプロパティの変更、フォームレイアウトの変更を可能にするオプションを提供します。フォームの作成者は、フォームをプレビューして変更を加えることができます。ページツールバーには、以下の項目が表示されます。

• サイドパネルを切り替え ：サイドバーの表示と非表示を切り替えます。

• ページ情報 ：ページプロパティの表示、フォームの公開／非公開、フォームワークフローの開始、フォームをクラシック UI で開く操作が可能です。

• エミュレーター ：タブレットや携帯電話など異なる画面サイズでのフォームの外観をエミュレートします。

• 編集：編集、スタイル、開発者、デザイン​など、その他のモードを選択できます。

  • 編集：フォームとそのコンポーネントのプロパティを編集できます。例えば、コンポーネントの追加、画像の削除、必須フィールドの指定などを行うことができます。

  • スタイル：フォームのコンポーネントのアピアランスを調整できます。例えば、スタイルモードでパネルを選択してパネルの背景色を指定できます。

  • 開発者：以下が可能です。

    • フォームの構成要素を確認できます。

    • 何がいつ、どこで起きているかを確認し、問題の解決に役立てます。

    • デザイン：カスタムコンポーネントや、サイドバーにリストされていないすぐに使用できるコンポーネントを有効または無効にできます。

• プレビュー：フォーム公開時の外観をプレビューできます。

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

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

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

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

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

D. 削除：フォームからコンポーネントを削除できます。

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

F. 貼り付け：前述のオプションでカットまたはコピーしたコンポーネントを貼り付けることができます。

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

H. グループ：複数のコンポーネントについて、カット、コピー、貼り付けを同時に実行したい場合に、複数のコンポーネントを選択できます。

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

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

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

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

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

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

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

コンテンツ構造は、通常、以下の一次コンポーネントを含みます。

• guideContainer：アダプティブフォームのルートです。これは、アダプティブフォーム UI 内で​アダプティブフォームの開始​としてマークされています。このコンポーネントでは、以下のことを指定できます。

  • アダプティブフォームのモバイルレイアウト：モバイルデバイスでのフォームのアピアランスを定義します。
  • ありがとうページ：フォームの送信後にユーザーがリダイレクトされるページを定義します。
  • 送信アクション：ユーザーがフォームを送信した後に、サーバーでフォームを処理する方法を定義します。
  • スタイリング：フォームのアピアランスをカスタマイズするために使用する CSS ファイルへのパスを指定します。

• rootPanel：アダプティブフォームのルートパネル。項目ノードの下にサブパネルを含むことができます。ルートパネルを含む各パネルは、それに関連付けられたレイアウトを持つことができます。パネルのレイアウトは、フォームをレイアウトする方法を指示します。例えば、アコーディオンレイアウトでは、その項目はアコーデオンステップとしてレイアウトされます。

• ツールバー：アダプティブフォームコンテナは、フォームに対してグローバルな、関連付けられたグローバルツールバーを持ちます。このツールバーは、編集バーの​ツールバーを追加​アクションを使用して追加でき、作成者は送信、保存、リセットなどのアクションを追加できます。

• アセット：​このノードには、フォームのオーサリングに使用される追加情報が含まれます。例えば、フォームモデルの詳細、ローカリゼーションの詳細などです。

Business.Adobe.com リソース