アダプティブフォームのコアコンポーネントの概要 adaptive-forms-core-components-introduction

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

コアコンポーネント overview

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

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

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

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

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

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

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

アダプティブフォームの画像

機能 features

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

メリット 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 モデルが採用されているため、容易にスタイルを理解して変更できます。

  • アクセシビリティ:アダプティブフォームのコアコンポーネントは、障害のあるユーザー(スクリーンリーダーなどの支援テクノロジーを使用しているユーザーを含む)がフォームを確実に使用できるように、アクセシビリティに関する標準規格およびガイドラインをサポートしています

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

アダプティブフォームのコアコンポーネントの現在のバージョンでは、次のコンポーネントを使用できます。

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

AEM Forms as a Cloud Service のアダプティブフォームのコアコンポーネントを有効にすると、AEM Forms Cloud Service インスタンスを使用して、複数のチャネルへのコアコンポーネントベースのアダプティブフォームとヘッドレスフォームの作成、公開、配信を開始できます。 アダプティブフォームのコアコンポーネントを有効にする手順について詳しくは、AEM Forms as a Cloud Service およびローカル開発環境でアダプティブフォームのコアコンポーネントを有効にするを参照してください。

アダプティブフォームのコアコンポーネントには、以下の要件があります。

AEMバージョン
AEM Forms のアドオン
アダプティブフォームのコアコンポーネント
AEM as a Cloud Service
Forms - デジタル登録
リリース 2.0.10+
AEM 6.5
Forms のアドオン
リリース 1.1.12+

AEM Cloud Service SDK バージョンが 2023.02.0 より前の場合は、2023.02.0 リリースより前にアダプティブフォームのコアコンポーネントがプレリリースの一部であったので、お使いの環境で prerelease フラグが有効になっていることを確認してください

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

AEM Forms as a Cloud Service 環境と AEM 6.5 Forms 環境の両方で次のアクションを実行できます。

アクション
AEM Forms バージョン
スタンドアロンのアダプティブフォームを作成
AEM Forms as Cloud Service
AEM Sites ページでのアダプティブフォームの作成
AEM 6.5 FormsAEM Forms as Cloud Service
AEM エクスペリエンスフラグメントでアダプティブフォームを作成
AEM 6.5 FormsAEM Forms as Cloud Service
アダプティブフォームをエクスペリエンスフラグメントに変換
AEM 6.5 FormsAEM Forms as Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c