ヘッドレスアダプティブフォームの仕組み
ヘッドレスアダプティブフォームは基本的に、フォームフィールド（テキストボックス、選択肢などの多くのフィールド）と、フォームにインタラクティブな動作を追加するための対応するルール（条件付きロジック）で構成される JSON 構造（スキーマ）です。アプリケーションや web サイトで REST API を使用して、ホストされた JSON 構造をリクエストし、その JSON 構造をアプリまたは web サイトのフォームとしてネイティブにレンダリングできます。1 つのヘッドレスアダプティブフォームで複数の web ページやアプリケーションに対応でき、アプリや web サイトに合わせて変更を加える必要はありません。
アーキテクチャ architecture
一般的なヘッドレスアダプティブフォームアーキテクチャは、ヘッドレスアダプティブフォームをホストする Adobe Experience Manager Forms サーバーを中心に構成されます。Web、モバイル、JavaScript、チャットボットなどのフロントエンドアプリは、各チャネルのフォームをレンダリングします。
ヘッドレスアダプティブフォームデプロイメントの一般的なアーキテクチャは次のようになります。
ヘッドレスアダプティブフォーム実装のコンポーネント
Adobe Experience Manager Server：Adobe Experience Manager は、ヘッドレスアダプティブフォームのホストとして機能するだけでなく、次のバックエンド機能も提供します。
- ヘッドレスフォームの一覧、取得、事前入力、検証、送信、送信ステータスの追跡を行う RESTful API。
- ヘッドレスアダプティブフォームを簡単に開発できるビジュアルエディター。
- 様々な種類のデータソースにデータを送受信するためのフォームデータモデル。
- 複雑なタスクを自動化するワークフローエンジン。
ヘッドレスアダプティブフォーム：ヘッドレスアダプティブフォームは .json ファイルで表されます。JSON 構造は、フォームのコンポーネント、制約および構造を定義します。
フロントエンドアプリ：SPA（単一ページアプリケーション）、モバイルアプリ、JavaScript アプリなどのフロントエンドアプリは、クライアントでヘッドレスアダプティブフォーム（JSON 表現のフォーム）を使用しフォームをレンダリングします。ヘッドレスアダプティブフォームに付属の React レンダラーコンポーネントを使用すると、アダプティブフォームをレンダリングしたり、独自のカスタムコンポーネントを作成してヘッドレスアダプティブフォームをネイティブにレンダリングしたりできます。
開発者ツール
一般的な開発サイクルでは、まず Adobe Experience Manager Forms サーバー上でヘッドレスアダプティブフォームを作成しホストします。次に、UI コンポーネントをマッピングするか、Google マテリアル UI や Chakra UI などの公開 UI コンポーネントライブラリを使用してフォームのスタイルを設定します。最後に、アプリケーション（web サイト、モバイルアプリケーション、JavaScript アプリケーション、チャットアプリケーションなどの様々なサーフェス）でヘッドレスアダプティブフォームを取得し表示します。
ヘッドレスアダプティブフォームを作成してアプリケーションに統合するには、次のツールが役立ちます。
Forms Web SDK（クライアントサイドランタイム）：Forms Web SDK は、クライアントサイドの JavaScript ライブラリです。Forms Web SDK は、フォームフィールドにクライアントサイドの検証を適用したり、フォームの状態を維持したりするために使用できるだけでなく、UI レイヤーまたはアダプティブフォームのレンダリングされたコンポーネントにフォームを接続するためのフックとしても機能します。ユーザーは Forms Web SDK をフォームの様々なフィールドに適用された制約の検証に使用したり、フォームの JSON 構造を UI フレームワークに接続するためのフックとして使用したりできます。Forms Web SDK には次のコンポーネントがあります。
- ビジネスルールプロセッサー：ビジネスルールプロセッサーはフォームの JSON 構造を入力として受け取り、フォームフィールドの状態を管理し、ルールを実行し、JSON に存在するイベントハンドラーを実行します。
- React Binder：フォームコンポーネントにステートを追加するためのフックをコントローラーに提供します。また、フォームの事前入力にも役立ちます。
- コンポーネントライブラリ：React Spectrum コンポーネントを提供し、React Binder モジュールのフックを使用して対象のコンポーネントにステートを追加します。
Forms Web SDK は、フォームの様々なフィールドに適用された制約を検証する API を提供するだけでなく、ヘッドレスアダプティブフォームを UI フレームワークに接続するためのフックとしても機能します。また、アプリケーションへのヘッドレスアダプティブフォームの統合に役立つ、ヘッドレスアダプティブフォーム用の React レンダラーも提供します。Web SDK の次のコンポーネントが利用可能です。
これらのコンポーネントはすべて AEM アーキタイプに含まれています。ヘッドレスアダプティブフォーム用に AEM Archetype 37 以降のプロジェクトを作成する場合は、上記のライブラリの最新バージョンがプロジェクトに含まれます。
- コードのプレイグラウンド：コードのプレイグラウンドは、開発者がヘッドレスアダプティブフォームの機能を実験、学習、テストする目的で設計されたインタラクティブな環境です。
起動済みのアプリケーション：ヘッドレスアダプティブフォームの使用をすぐに開始するのに役立つ、起動済みのアプリケーションもリリースされています。
ストーリーブック：ストーリーブックは、ヘッドレスアダプティブフォームの様々なコンポーネントの概要を示します。また、サポートされているすべてのコンポーネント、対応するプロパティおよび制約のリストも提供します。
Visual Studio Code 拡張機能：Visual Studio Code 拡張機能は、有効な JSON 構造を作成するのに役立ちます。これは、JSON 構造のコンポーネントの追加、削除、名前変更などの一般的な機能に加えて、IntelliSense のサポートやフォームの JSON 構造の検証も提供します。
HTTP と JavaScript API：HTTP API を使用すると、ヘッドレスフォームの一覧、取得、検証、送信、送信ステータスの追跡を行うことができます。
JSON 式：JSON 構造をクエリし、ヘッドレスアダプティブフォームのルールを作成するのに役立つ、フォーム式の文法を実装したものです。この文法は、スプレッドシートに似た関数と演算子および JSON クエリ言語である JMESPath をマッシュアップしたものです。プレイグラウンドを使用して、JSON 式の構文と機能を調べることができます。
アダプティブフォームバージョン 2.0 の仕様：アダプティブフォームバージョン 2.0 の仕様には、ヘッドレスアダプティブフォームの定義に使用できるすべてのコンポーネント、制約およびメソッドに関する詳細情報が記載されています。仕様は PDF 形式で入手可能です。