アダプティブフォームのコアコンポーネント adaptive-forms-core-components-introduction
Adobe Experience Manager のアダプティブフォームのコアコンポーネントを使用すると、魅力的な登録エクスペリエンスを実現できます。
コアコンポーネント overview
Adobe Experience Manager(AEM)のコンポーネントとは、ページやフォームの作成に使用される構築ブロックを意味します。 作成者がコンテンツを作成および管理するためのシンプルで強力な方法が提供されると同時に、開発者はカスタムコンポーネントの作成に必要な柔軟性と拡張性を活用できます。 これらは、web サイトやフォームの開発時間を短縮し、メンテナンスコストを削減するように設計されており、特定のニーズに合わせて柔軟かつ容易にカスタマイズできます。
また、コアコンポーネントはレスポンシブに設計されており、デスクトップ、タブレット、スマートフォンなど様々なデバイスに対応します。 また、web コンテンツを作成するための堅牢で信頼性の高いソリューションであり、最新の web 標準規格とベストプラクティスにも準拠しています。
全体的に、コアコンポーネントは AEM で web コンテンツを作成および管理するための不可欠なツールであり、開発時間と保守コストの削減に役立つ一方で、web サイト訪問者に優れたユーザーエクスペリエンスを提供する強力で柔軟なソリューションです。
アダプティブフォームのコアコンポーネント
アダプティブフォームのコアコンポーネントとは、Adobe Experience Manager WCM コアコンポーネントの基盤上に構築され、BEM に準拠した、オープンソースの 30 個のコンポーネントのセットです。これらは、ユーザーのデバイス、ブラウザー、画面サイズに適合するアダプティブフォームの作成に使用するように特別に設計されています。
これらのコンポーネントは、テキストフィールド、チェックボックス、ドロップダウンメニューなど、様々なフォームフィールドオプションを提供することで、例外的なデータ取得および登録エクスペリエンスを作成するために使用できます。 また、検証、条件付きロジック、レスポンシブデザインなどの機能も含まれ、ユーザーフレンドリーで使いやすいフォームを作成できます。
さらに、これらのコンポーネントはオープンソースなので、開発者は組織の特定のニーズに合わせて簡単にカスタマイズおよび拡張できます。 また、これらのコンポーネントは、拡張性と保守性が確保される BEM 手法に基づいて構築されています。
機能 features
メリット benefits
データキャプチャのエクスペリエンスは、リードジェネレーションと登録において重要です。アダプティブフォームのコアコンポーネントは、データキャプチャ用に最適化されたフォームを作成するための強力なソリューションです。 基盤コンポーネントを介してこれらのエクスペリエンスを作成するために、コアコンポーネントを使用する理由には次のようなものがあります。
-
GitHub で利用可能:AEM アダプティブフォームのコアコンポーネントはオープンソースであり、GitHub で利用できます。包括的なドキュメントも用意されています。これにより、開発者はコンポーネントとその動作を理解し、開発に貢献することが容易になります。 また、aemcomponents.dev web サイトは、開発者がコンポーネントの動作を確認し、詳細なドキュメントにアクセスできる貴重なリソースです。
-
BEM モデルを使用したスタイル設定:コアコンポーネントは、BEM(ブロック要素修飾子)モデルに従ってスタイル設定されます。BEM は、CSS を整理するための、広く使用されている確立された手法です。これにより、開発者はスタイルの編成方法と、特定のニーズに合わせてスタイルを変更する方法を理解しやすくなります。
-
サードパーティライブラリへの依存なし:コアコンポーネントの利点の 1 つは、JQuery や Underscore など、サードパーティの JavaScript ライブラリに依存しない点です。 これにより、コンポーネントが高速で軽量になり、既存の AEM 実装に統合しやすくなります。
-
パフォーマンスとアクセシビリティへの焦点:コアコンポーネントは、パフォーマンスとアクセシビリティを考慮して構築されており、それは Google Lighthouse のスコアと web のバイタルスコアに大きく反映されています。 これにより、開発者はアクセシブルでパフォーマンスの高い web ページを容易に作成できます。これは、現在のデジタル環境でますます重要になっています。
-
Sites 30 のテンプレートおよびテーマのフォームコンポーネント:コアコンポーネントは、Sites 30 のテンプレートおよびテーマでフォームコンポーネントをサポートしており、開発者は AEM 内でフォームを簡単に作成およびカスタマイズできます。
-
スタイル設定が容易:コアコンポーネントは、基盤コンポーネントとは異なり、スタイル設定が容易です。テーマの作成プロセスは Sites に似ていますが、同じテーマと CSS を親 Sites ページから継承できます。 さらに、スタイル設定に BEM モデルが採用されているため、容易にスタイルを理解して変更できます。
-
アクセシビリティ:アダプティブフォームのコアコンポーネントは、障害のあるユーザー(スクリーンリーダーなどの支援テクノロジーを使用しているユーザーを含む)がフォームを確実に使用できるように、アクセシビリティに関する標準規格およびガイドラインをサポートしています。
-
バージョン管理:コアコンポーネントベースのアダプティブフォームの複数のバージョンを作成および管理し、コメントを通じて共同作業でディスカッションを行い、特定のフォームコンポーネントに注釈を添付することで、フォーム作成全体のエクスペリエンスを向上させることができます。
使用可能なコンポーネント:コンポーネントタイプ別の分類
AEM Forms の現在のバージョンには、次のコアコンポーネント、基盤コンポーネントおよびフォームブロックコンポーネント(Edge Delivery Services)があります。
- 上記のコンポーネントに加えて、フォームブロックはすべての有効な HTML5 入力タイプとテキスト領域をコンポーネントとしてサポートします。
- 上記以外のコンポーネントが必要ですか?公式アドレスから aem-forms-ea@adobe.com にメールを送信してリクエストしてください。
使いやすいフォームエディター
コアコンポーネントベースのアダプティブフォームのエディターは、AEM Sites ページの作成に既に使用しているエディターに類似しています。次の機能を利用できます。
-
使い慣れた UI 要素と設定:フォームコンポーネントのプロパティを設定する際、WCM コアコンポーネントで使用しているプロパティと同様のプロパティダイアログが表示されます。これにより、必要なオプションをより早く見つけることができます。WCM コアコンポーネントと同様に、フォームコンポーネントのプロパティダイアログはエディターの中央に表示されます。ダイアログには、基本オプションと詳細オプション、ヘルプテキスト、アクセシビリティ情報がわかりやすいタブ形式で表示され、容易にナビゲートできます。
-
ルールエディター:コードを記述せずに、フォームにロジックと動的機能を追加できます。組み込みのルールエディターを使用して、次を実行できます。
- ユーザーの選択に基づいてフィールドを表示または非表示にする
- オブジェクトの有効/無効を切り替える
- オブジェクトの値を設定する
- 計算を実行する
- オブジェクトのプロパティを設定する
- データ入力を検証する
- サービスを呼び出す(外部機能を呼び出す)
- 組み込み関数(一般的なタスク用の定義済み関数)を使用する
- カスタム関数(特定のニーズに合わせた独自のコード)を使用する
- フィールドとパネルを検証する(データが要件を満たしていることを確認する)
- オブジェクトの値を検証する
- 関数を実行することにより、オブジェクトの値を計算する
- フォームデータモデル(FDM)サービスを呼び出して操作を実行する
- スタイルを動的に追加する(条件に基づいて外観を変更する)
- その他のルール(チェーンアクションとロジック)を作成する
- その他
ルールエディターには、コードエディターがありません。カスタム関数を使用して、特定のニーズに合わせた独自のコードをルールエディターに追加できます。
-
フォームへの事前入力:ユーザーがフォームを開いた際に、フォーム内の特定のフィールドに既存のデータを自動的に入力できます。これにより、既に利用可能な情報を手動で入力する必要がなくなり、ユーザーの時間と労力が節約されます。コアコンポーネントエディターでは、フォームデータモデルを使用してフォームフィールドにデータを入力する OOTB 事前入力サービスを利用できます。また、より複雑なシナリオ向けにカスタム事前入力サービスを作成することもできます。
-
レコードのドキュメント(DoR):レコードのドキュメント(DoR)とは、フォームを通じて送信されたデータの正式かつ印刷可能な表現を指します。ユーザーが入力した情報の永続的なレコードとして機能し、送信されたデータのスナップショットをユーザーが使いやすい形式(通常は PDF ドキュメント)で利用できます。エディターを使用してカスタムテンプレートを簡単に設定したり、OOTB テンプレートを使用して DoR を生成したりできます。
-
フォームデータモデル:アダプティブフォームデータモデル(FDM)は、アダプティブフォームとデータソースの間のブリッジとして機能します。基本的に、フォームが収集して操作するデータの構造と編成を定義します。エディターを使用すると、フォームをフォームデータモデル(FDM)に簡単に接続できます。
-
フォーム送信:フォーム送信とは、ユーザーがフォームに必要事項を入力して送信するプロセスを指します。フォームの設定内で定義された一連のアクションがトリガーされ、最終的に送信されたデータが保存または処理されます。アダプティブフォームエディターには、フォーム送信を設定するための様々なオプションが用意されています。一般的な送信アクションの一部は次のとおりです。
-
Sites ページエディターでのアダプティブフォームのコアコンポーネント:AEM ページエディターおよび AEM エクスペリエンスフラグメントでアダプティブフォームのコアコンポーネントを有効にして使用すると、Sites ページの構築と共にデータキャプチャエクスペリエンスを直接作成できます。
embed
アダプティブフォームのコアコンポーネントの有効化
AEM Forms as a Cloud Service のアダプティブフォームのコアコンポーネントを有効にすると、AEM Forms Cloud Service インスタンスを使用して、複数のチャネルへのコアコンポーネントベースのアダプティブフォームとヘッドレスフォームの作成、公開、配信を開始できます。 アダプティブフォームのコアコンポーネントを有効にする手順について詳しくは、AEM Forms as a Cloud Service およびローカル開発環境でアダプティブフォームのコアコンポーネントを有効にするを参照してください。
アダプティブフォームのコアコンポーネントには、以下の要件があります。
AEM Cloud Service SDK バージョンが 2023.02.0 より前の場合は、2023.02.0 リリースより前にアダプティブフォームのコアコンポーネントがプレリリースの一部であったので、お使いの環境で prerelease
フラグが有効になっていることを確認してください。
コアコンポーネントベースのアダプティブフォームの作成
AEM Forms as a Cloud Service 環境と AEM 6.5 Forms 環境の両方で次のアクションを実行できます。