アダプティブフォームのコアコンポーネントの概要

Adobe Experience Manager のアダプティブフォームのコアコンポーネントを使用すると、柔軟性とカスタマイズオプションを利用して、魅力的な登録フォームを作成できます。

コアコンポーネント

Adobe Experience Manager（AEM）のコンポーネントとは、ページやフォームの作成に使用される構築ブロックを意味します。 作成者がコンテンツを作成および管理するためのシンプルで強力な方法が提供されると同時に、開発者はカスタムコンポーネントの作成に必要な柔軟性と拡張性を活用できます。 これらは、web サイトやフォームの開発時間を短縮し、メンテナンスコストを削減するように設計されており、特定のニーズに合わせて柔軟かつ容易にカスタマイズできます。

また、コアコンポーネントはレスポンシブに設計されており、デスクトップ、タブレット、スマートフォンなど様々なデバイスに対応します。 また、web コンテンツを作成するための堅牢で信頼性の高いソリューションであり、最新の web 標準規格とベストプラクティスにも準拠しています。

全体的に、コアコンポーネントは AEM で web コンテンツを作成および管理するための不可欠なツールであり、開発時間と保守コストの削減に役立つ一方で、web サイト訪問者に優れたユーザーエクスペリエンスを提供する強力で柔軟なソリューションです。

アダプティブフォームのコアコンポーネント

アダプティブフォームのコアコンポーネントとは、Adobe Experience Manager WCM コアコンポーネントの基盤上に構築された、オープンソースの 24 個のコンポーネントで、BEM に準拠しています。 これらは、ユーザーのデバイス、ブラウザー、画面サイズに適合するアダプティブフォームの作成に使用するように特別に設計されています。

これらのコンポーネントは、テキストフィールド、チェックボックス、ドロップダウンメニューなど、様々なフォームフィールドオプションを提供することで、例外的なデータ取得および登録エクスペリエンスを作成するために使用できます。 また、検証、条件付きロジック、レスポンシブデザインなどの機能も含まれ、ユーザーフレンドリーで使いやすいフォームを作成できます。

さらに、これらのコンポーネントはオープンソースなので、開発者は組織の特定のニーズに合わせて簡単にカスタマイズおよび拡張できます。 また、これらのコンポーネントは、拡張性と保守性が確保される BEM 手法に基づいて構築されています。

機能
本番で使用可能 アダプティブフォームのコアコンポーネントは、24 個の堅牢な WCM コンポーネントです。
クラウド対応 AEM Forms as a Cloud Service で使用可能です。
用途が広い コンポーネントは、ほぼすべてのレイアウトの作成にフォーム作成者が使用できる汎用的な概念を表します。
設定可能 テンプレートレベルのコンテンツポリシーで、許可される機能と許可されない機能を定義します。
高いアクセシビリティ ARIA ラベル、キーボードナビゲーション（既知の問題）、および支援テクノロジー（スクリーンリーダーなど）用のテキストを提供します。
テーマ設定可能 コンポーネントはスタイルシステムを実装し、マークアップは BEM CSS の命名規則に従っています。
カスタマイズ可能 いくつかのパターンが用意されているので、HTML の調整から高度な機能の再利用まで、カスタマイズが容易になっています。
バージョン管理 バージョン管理ポリシーが設定されているので、影響を受ける可能性のある改善の際にも、コアコンポーネントが原因でサイトが機能しなくなることはありません。
オープンソース 何か問題がある場合は、改善案を寄稿できます。

メリット

データキャプチャのエクスペリエンスは、リードジェネレーションと登録において重要です。アダプティブフォームのコアコンポーネントは、データキャプチャ用に最適化されたフォームを作成するための強力なソリューションです。 基盤コンポーネントを介してこれらのエクスペリエンスを作成するために、コアコンポーネントを使用する理由には次のようなものがあります。

  • 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 AEM Forms のアドオン コアコンポーネント
AEM as a Cloud Service Forms - デジタル登録 リリース 2.20.8+
AEM 6.5 Forms のアドオン リリース 1.1.12+

コアコンポーネントに基づくアダプティブフォームの作成

AEM Forms as a Cloud Service：​新しい AEM Forms as a Cloud Service プログラムを作成する際、アダプティブフォームのコアコンポーネントはお使いの環境で既に有効になっています。アーキタイプ 39 以前の Forms as a Cloud Service 環境をご利用の場合は、ご利用の環境でアダプティブフォームコアコンポーネントを有効にします。

ご利用の環境でコアコンポーネントを有効にすると、アダプティブフォーム（コアコンポーネント）​のテンプレートとキャンバステーマが環境に追加されます。AEM SDK バージョンが 2023.02.0 より前の場合は、2023.02.0 リリースより前にアダプティブフォームのコアコンポーネントがプレリリースの一部であったので、お使いの環境で prerelease フラグが有効になっていることを確認してください。

アダプティブフォームウィザードとアダプティブフォームエディターを使用してアダプティブフォームを作成するには、アダプティブフォームの作成（コアコンポーネント）を参照してください。

このページ