Field Group
すべてのフィールド対応エンティティのフォームモードと表示モードでフィールドをグループ化する機能を提供します。
field_group
インストール
composer require 'drupal/field_group:^4.0'
composer require 'drupal/field_group:8.x-3.6'
composer require 'drupal/field_group:8.x-3.3'
概要
Field Groupは、エンティティのフォームとビュー表示でフィールドを整理・グループ化できる強力なモジュールです。コンテンツタイプ、ユーザー、タクソノミーターム、カスタムエンティティなど、Drupalのすべてのフィールド対応エンティティで動作します。
このモジュールはプラグインベースのアーキテクチャを採用しており、フィールドグループの無制限のネストが可能で、フィールドセット、詳細（折りたたみ可能）、タブ（水平・垂直）、HTML要素などの複数のフォーマッタータイプを提供します。各フォーマッターには外観と動作をカスタマイズするための独自の設定オプションがあります。
フィールドグループはフィールド表示管理と同じインターフェースで設定するため、フィールドを論理的なグループに整理することが直感的にできます。グループにはフィールド、他のグループ、または他のモジュールが提供する追加フィールドを含めることができ、複雑な多階層レイアウトが可能です。
Features
- エンティティフォーム表示（追加・編集フォーム）でカスタマイズ可能なフォーマッターを使用してフィールドをグループ化
- エンティティビュー表示（コンテンツ表示ページ）でカスタマイズ可能なフォーマッターを使用してフィールドをグループ化
- フィールドグループ内で他のフィールドグループを無制限にネスト可能
- 複数の組み込みフォーマッタータイプ：Fieldset、Details、Details Sidebar、Tabs（水平・垂直）、Tab、HTML Element
- 他のモジュールがカスタムフォーマッターを作成できるプラグインベースのアーキテクチャ
- 開閉のデフォルト状態を持つ折りたたみ・展開可能なグループ
- 各グループにカスタムCSSクラスとID属性を設定可能
- 自動無効化のための幅ブレークポイントを設定可能なレスポンシブタブ
- 必須フィールドを含む場合にグループを必須としてマーク可能（フォームコンテキスト）
- XSSフィルタリング付きでグループラベルにHTMLをサポート
- Field UIとの統合によるシームレスな設定体験
- contribモジュール経由でDrupal 6/7のフィールドグループからの移行をサポート
- エンティティタイプ・バンドルごとにグループの外観をカスタマイズするためのテーマサジェスチョン
Use Cases
長いノード編集フォームの整理
多くのフィールドを持つコンテンツタイプの場合、フィールドグループを使用して関連するフィールドを論理的なセクションに整理します。水平方向のTabsグループを作成し、各セクション（例：「基本情報」、「SEO設定」、「詳細オプション」）用のTabグループを追加します。各タブに関連するフィールドが含まれ、コンテンツ編集者にとってフォームがより管理しやすくなります。
折りたたみ可能な設定セクションの作成
Detailsフォーマッターを使用して編集フォームに折りたたみ可能なセクションを作成します。使用頻度の低いオプションは'open'をFALSEに設定して視覚的な煩雑さを軽減します。例えば、詳細設定を折りたたまれたDetailsセクションにグループ化することで、利用可能でありながら邪魔にならないようにします。
ノードフォームでのサイドバー整理
Details Sidebarフォーマッターを使用して、公開オプションと一緒にエンティティフォームのサイドバーにグループを移動します。メタデータフィールド、スケジュールオプション、またはメインコンテンツエリアに置く必要のないその他の設定に便利です。
表示でのカスタムスタイルのコンテンツセクション
ビュー表示でHTML Elementフォーマッターを使用して、フィールドのグループをセマンティックなHTML要素（section、article、aside）とカスタムCSSクラスでラップします。テンプレートのオーバーライドなしでリッチなテーマ設定とレイアウト制御が可能になります。
マルチステップ風のフォーム
垂直タブを作成してマルチステップフォームのワークフローをシミュレートします。各タブは論理的なステップまたはカテゴリを表し、すべてのデータを単一のフォーム送信に保ちながら、ユーザーを複雑なコンテンツ入力にガイドします。
レスポンシブタブレイアウト
Tabsフォーマッターにwidth_breakpoint設定を行い、モバイルデバイスでタブを自動的に無効化し、より良いモバイルUXのために標準のスタック型レイアウトに変換します。
Tips
- テンプレートサジェスチョンに表示されるため、意味のあるグループマシン名を使用してください（例：field-group--group-name.html.twig）
- 深いネストなしで2階層の整理を行うには、タブとその中のdetailsを組み合わせてください
- 「空のフィールドを表示」設定はデバッグに便利ですが、本番環境では通常無効にすべきです
- より良いアクセシビリティとSEOのために、HTML Elementフォーマッターでセマンティック要素（section、article、aside）を使用してください
- 良好なモバイル体験を確保するためにTabsにwidth_breakpointを設定してください - タブはブレークポイント以下で自動的にスタック型レイアウトに変換されます
- グループは無制限のネストのために他のグループを含めることができますが、UXを念頭に置いてください - 深いネストはユーザーを混乱させる可能性があります
- テーマサジェスチョンは、きめ細かいテーマ制御のためにエンティティタイプ、バンドル、ビューモード、グループ名に基づいて生成されます
Technical Details
Admin Pages 2
/admin/structure/types/manage/{bundle}/form-display/add-group
コンテンツタイプのフォーム表示に新しいフィールドグループを追加します。このページは2段階のフォームを使用します：最初にグループタイプと名前を選択し、次にフォーマッター設定を行います。
/admin/structure/types/manage/{bundle}/display/add-group
コンテンツタイプのビュー表示に新しいフィールドグループを追加します。フォーム表示と同じように動作しますが、エンティティビューページ用です。
Hooks 7
hook_field_group_pre_render
フィールドグループ要素のビルドをプリレンダー。グループ要素がレンダリングされる前に呼び出されます。
hook_field_group_pre_render_alter
フォーマッターが処理した後のフィールドグループ要素のプリレンダービルドを変更。
hook_field_group_build_pre_render_alter
エンティティビュー全体のプリレンダービルドを変更し、すべてのフィールドグループの変更を可能にします。
hook_field_group_form_process
フォームビルド中にフィールドグループ要素を処理。Form API statesやその他の変更の追加が可能。
hook_field_group_form_process_alter
フォーム処理中の特定のフィールドグループの処理済みビルドを変更。
hook_field_group_form_process_build_alter
すべてのフィールドグループが処理された後の完全なフォームを変更。グローバルな変更が可能。
hook_field_group_delete_field_group
フィールドグループの削除に反応。関連データのクリーンアップが可能。
Troubleshooting 5
フィールドグループが「無効」リージョンにないことを確認してください。「フォーム表示の管理」または「表示の管理」ページで「コンテンツ」リージョンにドラッグしてください。また、フィールドグループに少なくとも1つのフィールドが含まれているか、「空の場合も要素を表示」が有効になっていることを確認してください。
TabフォーマッターはTabsフォーマッターの子である必要があります。まず親のTabsグループを作成し、その中にTabグループを作成してください。Tabフォーマッターを単独で使用すると、適切にネストされていない場合はdetails要素としてレンダリングされます。
field_group/details_validationまたはfield_group/tab_validationライブラリがアタッチされていることを確認してください。これらはrequired_fields設定が有効な場合、フォーマッターによって自動的にアタッチされます。
アコーディオンフォーマッターにはjquery_ui_accordionモジュールとfield_group_accordionサブモジュールが必要です。jQuery UIのサポート終了により非推奨となっていることに注意してください。タブまたはdetailsフォーマッターへの移行を検討してください。
移行後、フィールドグループのregion値がNULLになっている可能性があります。field_group_post_update_0001アップデートを実行するか、UIを通じて手動でリージョンを割り当ててください。
Security Notes 3
- グループラベルのHTMLは、「ラベルでHTMLを許可」が有効な場合、DrupalのXSSフィルター（Xss::filterAdmin）を通じてフィルタリングされます
- HTML Elementフォーマッターで入力されたカスタム属性は、DrupalのAttributeクラスを通じて安全に解析・追加されます
- CSSクラスとID入力は、文字、数字、アンダースコア、ダッシュ、スペースのみを許可するようバリデーションされます