水平タブ

アダプティブフォームの水平タブとは、フォームの複数のセクションがグループ化され、別々のタブとして水平方向に表示されるデザインパターンを指します。ユーザーはタブを切り替えて、フォームの異なるセクションにアクセスできます。 各タブは、関連するフォームコンテンツの表示と非表示を切り替えるトリガーとして機能します。 水平タブを使用すると、長いフォームを管理しやすいセクションに整理して、ユーザーエクスペリエンスを改善できます。 タブは、キーボードナビゲーションを使用してセクションを切り替えることができるので、障がいのあるユーザーがフォームにアクセスしやすくなります。

タブは通常、一連のリンクまたはボタンとして作成され、各リンクまたはボタンはフォームのセクションに対応します。 ユーザーがタブをクリックすると、フォームのコンテンツが動的に更新され、対応するセクションが表示されます。

使用方法

アダプティブフォームで水平タブを使用する一般的な理由は次のとおりです。

• ユーザビリティの向上：水平タブを使用すると、特にフォームに複数のセクションがある場合や多数のフィールドがある場合に、ユーザーがフォーム内を簡単に移動できます。

• スペース管理：水平タブは、関連するフォームセクションをタブにグループ化し、一度に 1 つのセクションのみを表示することで、画面のスペースを節約するのに役立ちます。

• フォームの整理：フォームがすっきりと整理された構造になるため、ユーザーが理解して完了しやすくなります。

• ユーザーエンゲージメントの向上：フォームをより視覚的にしてユーザーを惹きつけ、フォームの完了率を向上できます。

バージョンと互換性

アダプティブフォームのアコーディオンコアコンポーネントは、Cloud Service のコアコンポーネント 2.0.4 および AEM 6.5.16.0 Forms 以降のコアコンポーネント 1.1.12 の一部として 2023年2月にリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンドキュメントをご覧ください。

技術的詳細

アダプティブフォームの水平タブのコアコンポーネントに関する最新情報については、 [GitHub] のテクニカルドキュメント（https://github.com/adobe/aem-core-forms-components/tree/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/pageHorizontal tabs/v1/pageHorizontal tabs）をご覧ください。コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けのドキュメントをご覧ください。

設定ダイアログ

設定ダイアログを使用すると、水平タブエクスペリエンスを訪問者に合わせて簡単にカスタマイズできます。 また、簡単に水平タブオプションを定義して、シームレスなユーザーエクスペリエンスを実現できます。

「基本」タブ

• 名前 - フォームコンポーネントは、フォーム内とルールエディター内の両方で一意の名前で簡単に識別できますが、名前にスペースや特殊文字を含めることはできません。

• タイトル - タイトルを使用すると、フォーム内のコンポーネントを簡単に識別できます。デフォルトでは、コンポーネントの上にタイトルが表示されます。 タイトルを追加しない場合、コンポーネントの名前がタイトルテキストの代わりに表示されます。

• タイトルを非表示 - コンポーネントのタイトルを非表示にするには、このオプションを選択します。

• オブジェクトにデータを含める - ウィザードのフィールドデータを JSON オブジェクト内に配置します。 これが選択されていない場合、JSON 送信データはウィザードのフィールド用のフラット構造を使用します。

• レイアウト - ウィザードには固定レイアウト（シンプル）または柔軟なレイアウト（レスポンシブグリッド）を使用できます。 シンプルなレイアウトでは、すべてを固定した状態に保ち、レスポンシブグリッドでは、必要に応じてコンポーネントの位置を調整できます。例えば、レスポンシブグリッドを使用して、「名」、「ミドルネーム」、「姓」を 1 行にフォーム内で整列できます。

• バインド参照 - バインド参照は、外部データソースに保存され、フォーム内で使用されるデータ要素への参照です。バインド参照を使用すると、データをフォームフィールドに動的にバインドして、フォームにデータソースの最新のデータを表示できます。 例えば、フォームに入力された顧客 ID に基づいて、顧客の名前と住所をフォームに表示できます。 さらに、フォームに入力されたデータでデータソースを更新することもできます。 このようにして、AEM Forms で外部データソースとやり取りするフォームを作成し、データの収集と管理においてシームレスなユーザーエクスペリエンスを提供できます。

• コンポーネントを非表示 - フォームでコンポーネントを非表示にするには、このオプションを選択します。このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。 これは、ユーザーが表示する必要のない情報や直接変更した情報を保存する必要がある場合に役立ちます。

• コンポーネントの無効化 - コンポーネントを無効にする場合は、このオプションを選択します。 エンドユーザーは、無効になっているコンポーネントをアクティブにしたり、編集したりすることはできません。 ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。

「項目」タブ

「追加」ボタンを使用すると、「コンポーネント選択」ウィンドウからパネルとして追加するコンポーネントを選択できます。 コンポーネントを追加すると、次のオプションが表示されます。

• アイコン - アイコンは、リスト内のパネルのコンポーネントを識別します。アイコンの上にマウスポインターを置くと、完全なコンポーネント名がツールチップとして表示されます。
• 説明 - パネルのテキストとして使用される説明。デフォルトでは、パネル用に選択されたコンポーネントの名前です。
• 削除 - タップまたはクリックすると、水平タブコンポーネントからパネルを削除できます。
• 並べ替え - タップまたはクリックしてドラッグすると、パネルを並べ替えることができます。

「ヘルプコンテンツ」タブ

• 短い説明 - 短い説明は、特定のフォームフィールドの目的に関する追加の情報や説明を提供する簡単な説明文です。これにより、ユーザーは、フィールドに入力するデータの種類を理解しやすくなります。また、入力された情報が有効で目的の条件を満たしていることを確認できるように、ガイドラインや例を提供できます。デフォルトでは、短い説明は非表示になっています。 「短い説明を常に表示」オプションを有効にすると、コンポーネントの下に説明が表示されます。

• 短い説明を常に表示 - このオプションを有効にすると、コンポーネントの下に短い説明が表示されます。

• ヘルプテキスト - ヘルプテキストとは、フォームフィールドの正しい入力を支援するためにユーザーに提供される追加の情報やガイダンスを指します。コンポーネントの横に配置されているヘルプアイコン（i）をクリックすると表示されます。 ユーザーがフィールドの要件や制約を理解できるように設計されているヘルプテキストは、フォームフィールドのラベルやプレースホルダーテキストよりも詳細な情報を提供できます。また、フォームへの入力をより簡単かつ正確にするための提案や例を提供することも可能です。

「アクセシビリティ」タブ

• スクリーンリーダー用テキスト - スクリーンリーダー用テキストとは、視覚に障害のあるユーザーが使用する、支援テクノロジー（スクリーンリーダーなど）によって読み上げられる追加のテキストを指します。このテキストでは、フォームフィールドの目的に関するオーディオの説明が提供され、フィールドのタイトル、説明、名前および関連するメッセージ（カスタムテキスト）に関する情報を含めることができます。スクリーンリーダー用のテキストを使用すると、視覚に障害のあるユーザーを含むすべてのユーザーがフォームに確実にアクセスして、フォームフィールドとその要件を完全に理解できるようになります。

• スクリーンリーダーが通知を行うための HTMLの役割 - HTMLの役割は、スクリーンリーダーなどの支援テクノロジーに対する HTML 要素の目的を指定するための属性です。役割の属性は、要素に追加のコンテキストと意味論的意味を提供するために使用されます。これにより、スクリーンリーダーがコンテンツを解釈して読み上げやすくなります。 例えば AEM Formsでは、フォームフィールドのラベルが「label」という役割を持ち、入力フィールドが「textbox」という役割を持つ場合があります。 これにより、スクリーンリーダーはラベルと入力フィールドの関係を理解し、ユーザーに対して正しく通知できるようになります。

デザインダイアログ

デザインダイアログでは、テンプレート作成者がデフォルトでの表示方法を制御できます。アダプティブフォームのコンポーネントでは、次の設定を行うことができます。

• フォーム作成者がアダプティブフォームエディターで水平タブに追加できるコアコンポーネント
• スタイル（CSS クラス）のシンプルな名前。アダプティブフォームエディターの水平タブコンポーネントの「プロパティ」ダイアログで適用できます。

この名前を使用することで、フォームの作成やカスタマイズのプロセスが、分かりやすく効率的になります。

「許可されたコンポーネント」タブ

「許可されたコンポーネント」タブを使用すると、アダプティブフォームエディターの水平タブコンポーネントで、パネルに項目として追加できるコンポーネントを、テンプレートエディターで設定できます。

「スタイル」タブ

タブを使用して、コンポーネントの CSS スタイルの定義と管理を行います。アダプティブフォームの水平タブコアコンポーネントは、AEM のスタイルシステムをサポートしています。

• デフォルトの CSS クラス：アダプティブフォームの水平タブコアコンポーネントのデフォルト CSS クラスを指定できます。

• 許可されたスタイル：スタイルを表す名前と CSS クラスを指定してスタイルを定義します。 例えば、「bold text」という名前のスタイルを作成し、CSS クラス「font-weight: bold」を指定できます。アダプティブフォームエディターでアダプティブフォームにこれらのスタイルを使用または適用できます。スタイルを適用するには、アダプティブフォームエディターでスタイルを適用するコンポーネントを選択し、「プロパティ」ダイアログに移動して「スタイル」ドロップダウンリストから希望のスタイルを選択します。スタイルを更新または変更する必要がある場合は、デザインダイアログに戻り、「スタイル」タブでスタイルを更新して変更を保存します。

Business.Adobe.com リソース