ユニバーサルエディターでのフォームフラグメントの作成
フォームフラグメントは、反復的な開発作業を排除し、組織のフォーム全体で一貫性を確保する、再利用可能なコンポーネントです。連絡先情報、住所の詳細、同意契約などの一般的なセクションをフォームごとに再作成する代わりに、これらの要素をフラグメントとして一度作成し、複数のフォームで再利用できます。
この記事で達成されること：
- フォームフラグメントのビジネス価値と技術的機能を理解
- ユニバーサルエディターを使用して再利用可能なフォームフラグメントを作成
- 適切な設定でフラグメントを既存のフォームに統合
- フラグメントのライフサイクルを管理し、フォーム間の一貫性を維持
ビジネス上のメリット：
- 開発時間の短縮：共通のフォームセクションを一度作成すれば、どこでも再利用できます
- 一貫性の向上：すべてのフォーム間でレイアウトとコンテンツを標準化します
- メンテナンスの簡素化：フラグメントを一度更新するだけで、これを使用するすべてのフォームに変更が反映されます
- コンプライアンスの強化：規制セクションの一貫性と最新性を確保します
Edge Delivery Services のフォームフラグメントは、ネストされたフラグメント、単一フォーム内の複数のインスタンス、データソースとのシームレスな統合などの高度な機能をサポートします。
フォームフラグメントについて
Edge Delivery Services のフォームフラグメントは、モジュール形式のフォームを開発するための強力な機能を提供します。
コア機能：
- 一貫性のある管理：フラグメントは、複数のフォーム間で同一のレイアウトとコンテンツを維持します。「1 回の変更でどこにでも反映」アプローチを使用すると、フラグメントに対する更新はプレビューモードのすべてのフォームに自動的に適用されます。
- 複数の使用法：同じフラグメントを 1 つのフォーム内に複数回追加し、それぞれ異なるデータソースまたはスキーマ要素への独立したデータ連結を設定します。
- ネストされた構造：高度なフォームアーキテクチャ用にフラグメントを他のフラグメント内に埋め込むことで複雑な階層を作成します。
技術要件：
- GitHub URL の一貫性：フラグメントと、これを使用するフォームの両方で同じ GitHub リポジトリ URL を指定する必要があります
- スタンドアロン編集：フラグメントはスタンドアロン形式でのみ変更できます。ホスト形式内では変更できません
公開動作：
前提条件
技術的な設定要件：
- AEM 環境と GitHub リポジトリ間の接続が確立された状態で設定された GitHub リポジトリ
- GitHub リポジトリ（既存の Edge Delivery Services プロジェクト用）に追加された最新のアダプティブフォームブロック
- Edge Delivery Services テンプレートが使用可能な AEM Forms オーサーインスタンス
- AEM Forms as a Cloud Service オーサーインスタンス URL と GitHub リポジトリ URL へのアクセス
必要な知識と権限：
- フォームデザインの概念とコンポーネント階層の基本的な理解
- ユニバーサルエディターインターフェイスとフォーム作成ワークフローに精通
- AEM Forms でフォームアセットを作成および管理するための作成者レベルの権限
- 組織のフォーム標準と再利用可能なコンポーネントの要件を理解
Edge Delivery Services フォームフラグメントの操作
ユニバーサルエディターで Edge Delivery Services フォームフラグメントを作成し、作成したフラグメントを Edge Delivery Services フォームに追加できます。Edge Delivery Services フォームフラグメントで実行できるアクションは次のとおりです。
ユニバーサルエディターでフォームフラグメントを作成するには、次の手順を実行します。
-
AEM Forms as a Cloud Service オーサーインスタンスにログインします。
-
Adobe Experience Manager／Forms／フォームとドキュメント を選択します。
-
作成／アダプティブフォームセグメント をクリックします。
アダプティブフォームフラグメントを作成 ウィザードが表示されます。
-
「テンプレートを選択」タブから、Edge Delivery Services ベースのテンプレートを選択し、「次へ」をクリックします。
-
フラグメントのタイトル、名前、説明およびタグを指定します。フラグメントには一意の名前を指定してください。同じ名前を持つ別のフラグメントが存在する場合、フラグメントの作成は失敗します。
-
GitHub URL を指定します。例えば、GitHub リポジトリの名前が
edsformsで、アカウントwkndformsの下にある場合、URL はhttps://github.com/wkndforms/edsformsになります。
-
（オプション）「フォームモデル」タブをクリックして開き、次から選択 ドロップダウンメニューから、フラグメントに対して次のいずれかのモデルを選択します。
-
フォームデータモデル（FDM）：データソースから取得したデータモデルオブジェクトとサービスをフラグメントに統合します。フォームで複数のソースからのデータの読み取りと書き込みが必要な場合は、フォームデータモデル（FDM）を選択します。
-
JSON スキーマ：データ構造を定義する JSON スキーマを関連付けることで、フォームをバックエンドシステムと統合します。これにより、スキーマ要素を使用して動的コンテンツを追加できます。
-
なし：フォームモデルを使用しないで最初からフラグメントを作成するときに指定します。
note note NOTE ユニバーサルエディターでフォームまたはフラグメントをフォームデータモデル（FDM）と統合して、様々なバックエンドデータソースを使用する方法について詳しくは、ユニバーサルエディターでのフォームとフォームデータモデルの統合を参照してください。 -
-
（オプション）「詳細」タブでフラグメントの 公開日 または 非公開日 を指定します。
-
「作成」をクリックしてフラグメントを生成します。編集オプションを含む成功ダイアログが表示されます。
-
「編集」をクリックして、デフォルトのテンプレートが適用されたフラグメントをユニバーサルエディターで開きます。
-
フラグメントコンテンツを設計：フォームコンポーネント（テキストフィールド、ドロップダウン、チェックボックス）を追加して、再利用可能なセクションを作成します。コンポーネントガイダンスについて詳しくは、 ユニバーサルエディターを使用して AEM Forms の Edge Delivery Services の基本を学ぶを参照してください。
-
コンポーネントプロパティを設定：ユースケースに応じて、フィールド名、検証ルール、デフォルト値を設定します。
-
保存してプレビュー：フラグメントを保存し、プレビューモードを使用してレイアウトと機能を検証します。
検証チェックポイント：
- ユニバーサルエディターでフラグメントがエラーなしで読み込まれる
- すべてのフォームコンポーネントが正しくレンダリングされる
- フィールドプロパティと検証ルールが期待どおりに機能する
- フラグメントが保存され、Forms とドキュメントコンソールで使用できる
フラグメントが完成したら、任意の Edge Delivery Services フォームに統合できます。
この例では、従業員情報セクションとスーパーバイザー情報セクションの両方に Contact Details フラグメントを使用する Employee Details フォームを作成する方法を示します。このアプローチにより、開発の労力を削減しながら一貫性のあるデータ収集が確保されます。
フォームフラグメントをフォームに統合するには：
-
フォームを編集モードで開きます。
-
フォームフラグメントコンポーネントをフォームに追加します。
-
コンテンツブラウザーを開き、コンテンツツリー の アダプティブフォーム コンポーネントに移動します。
-
フラグメントを追加するセクションに移動します。例えば、従業員詳細 パネルに移動します。
-
「追加」アイコンをクリックし、アダプティブフォームコンポーネント リストから フォームフラグメント を追加します。
フォームフラグメント コンポーネントを選択すると、フラグメントがフォームに追加されます。追加したフラグメントのプロパティは、この プロパティ を開いて設定できます。例えば、フラグメントのタイトルをこの プロパティ から非表示にします。
-
「基本」タブで「フラグメント参照」を選択します。フォームのモデルに応じて、フォームで使用可能なすべてのフラグメントが表示されます。
例えば、
/content/forms/afに移動して、Contact Detailsフラグメントを選択します。
-
「選択」をクリックします。
フォームフラグメントは、フォームへの参照により追加され、スタンドアロンのフォームフラグメントと同期を維持します。
note note NOTE フラグメントを編集 ボタンを使用すると、ユーザーはフォームフラグメントに直接移動して編集できます。 プレビュー モードでフォームをプレビューして、フォームがどのように表示されるかを確認できます。
同様に、手順 3～7 を繰り返して、
Supervisor DetailsパネルのContact Detailsフラグメントを挿入できます。
AEM Forms ユーザーインターフェイスを使用して、フォームフラグメントに対して複数の操作を実行できます。
-
AEM Forms as a Cloud Service オーサーインスタンスにログインします。
-
Adobe Experience Manager／フォーム／フォームとドキュメント を選択します。
-
フォームフラグメントを選択すると、選択したフラグメントに対して実行できる次の操作がツールバーに表示されます。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 html-authored no-header 操作 説明 編集 フォームフラグメントを編集モードで開きます。 プロパティ フォームフラグメントのプロパティを変更するオプションを指定します。 コピー フォームフラグメントを目的の場所にコピー＆ペーストするオプションを指定します。 プレビュー フラグメントを HTML としてプレビューするか、XML ファイルのデータをフラグメントと結合してカスタムプレビューを実行するオプションを指定します。 ダウンロード 選択されているフラグメントをダウンロードします。 レビューの開始／レビューの管理 選択されているフラグメントのレビューを開始したり管理したりできます。 公開／非公開 選択されているフラグメントを公開／非公開します。 削除 選択されているフラグメントを削除します。 比較 プレビュー目的で 2 つの異なるフォームフラグメントを比較します。
ベストプラクティス
フラグメントデザインと命名：
- わかりやすい一意の名前を使用：フラグメントの目的を明確に示す名前を選択します（例：「fragment1」ではなく「contact-details-with-validation」）
- 再利用性を計画：様々なフォームタイプで機能するように、フラグメントをコンテキストに依存しないように設計します
- フラグメントに焦点を当てる：複雑で多機能なコンポーネントではなく、単一目的のフラグメントを作成します
開発ワークフロー：
- フラグメントを個別にテスト：フォームに統合する前にフラグメント機能を検証します
- 一貫性のある GitHub URL を維持：関連するすべてのフラグメントとフォームで同じリポジトリ URL が使用されていることを確認します
- ドキュメントフラグメントの目的：チームメンバーが各フラグメントを使用するタイミングを理解できるように、明確な説明とタグを含めます
公開およびメンテナンス：
- 公開を調整：フラグメントを更新する際は、すべての依存フォームを同時に再公開することを計画します
- バージョン管理：フラグメントを更新する際に意味のあるコミット、時間の経過と共に変更を追跡します
- 依存関係を監視：各フラグメントを使用するフォームを追跡して、更新の影響を評価します
概要
Edge Delivery Services のフォームフラグメントを活用して開発効率を向上させ、組織のフォーム全体の一貫性を維持する方法について説明しました。
主な達成項目：
- 理解：フォームフラグメントのビジネス価値と技術的機能を把握しました
- 作成：適切な設定のユニバーサルエディターを使用して再利用可能なフォームフラグメントを作成しました
- 統合：正しい参照設定とプロパティ設定でフォームにフラグメントを追加しました
- 管理：フラグメントのライフサイクル操作とメンテナンスワークフローを探索しました
次の手順：
- 組織で一般的に使用されるフラグメントのライブラリを作成します。
- フラグメントを使用するための命名規則とガバナンスポリシーを確立します。
- 動的なデータ駆動型フラグメントのフォームデータモデルとの高度な統合を探索
- フラグメントベースのフォームテンプレートを実装して、一貫性のあるユーザーエクスペリエンスを実現します。
フォームには、一貫性のあるユーザーエクスペリエンスを確保しながら、プロジェクト間で効率的に拡張するモジュール形式のメンテナンス可能なアーキテクチャのメリットを活用できるようになりました。