Display Builder
高度なデザインシステムネイティブのディスプレイ構築ツール。Layout Builder、Block Layout、Viewsディスプレイビルダーに代わる統合的な選択肢として、リアルタイムコラボレーションや動的プレビューなどのモダンな機能を提供します。
display_builder
概要
Display Builderは、UI Suiteチームによって開発された高度なディスプレイ構築ツールで、Drupalにおけるディスプレイ構築への統合的なアプローチを提供します。エンティティビューディスプレイ用のLayout Builder、ページディスプレイ用のBlock Layout、Viewsディスプレイ構築機能のモダンな代替として機能します。
このモジュールはデザインシステムネイティブであり、コンポーネント、スタイルユーティリティ、アイコン、テーマ/モード、CSS変数を含むデザインシステムとの完全な統合を、互換性レイヤーなしでDrupal内で直接実現します。HTMXを使用した動的プレビュー、再利用可能な設定のためのパターンプリセット、Server-Sent Events（SSE）によるリアルタイムコラボレーション、Drupal APIとの深い統合を特徴としています。
Display Builderはアイランドベースのアーキテクチャを採用しており、UIはプラグ可能なアイランド（パネル、ボタン、メニュー項目）で構成され、プロファイルごとに有効化、無効化、設定が可能です。これにより、異なるユーザーロールやユースケースに応じた構築体験のカスタマイズに優れた柔軟性を提供します。
Features
- デザインシステムネイティブ：コンポーネントベースのレイアウトのためのUI Patterns、UI Styles、UI Skinsとの完全統合
- 統合ディスプレイ構築：Layout Builder（エンティティビュー）、Block Layout（ページ）、Viewsディスプレイビルダーを置き換え
- アイランドベースのプラグ可能なUI：プロファイルに整理された設定可能なパネル、ボタン、メニュー項目
- リアルタイムコラボレーション：Server-Sent Eventsによるライブ更新で複数ユーザーが同時編集可能
- 動的プレビュー：HTMXを使用したシームレスなユーザー体験のための変更のライブプレビュー
- パターンプリセット：コンポーネント設定をプリセットとして保存・再利用
- 履歴管理：最大10ステップの履歴による元に戻す/やり直し機能
- ビューポートスイッチャー：ブレイクポイントベースの幅切り替えによるレスポンシブレイアウトのテスト
- コンポーネントライブラリ：グループ化、バリアント、モザイク表示でSingle Directory Components（SDC）を参照・ドラッグ＆ドロップ
- ブロックライブラリ：プロバイダー/カテゴリ別に整理されたすべての利用可能なBlockへのアクセス
- コンテキスト設定：選択したコンポーネントとBlockのスタイル、デザイントークン、表示条件の設定
- キーボードショートカット：キーボードによる高速ナビゲーションとアクション（Bでビルダー、Yでレイヤー、Pでプレビュー）
- レイヤービュー：複雑なネストされたコンポーネントのためのプレビューなしの階層管理
- ロールベースのアクセス：Display Builderプロファイルごとの動的権限
Use Cases
エンティティビューディスプレイの構築
コンテンツタイプ、ユーザー、その他のエンティティの表示方法を設定するためにLayout Builderの代わりにDisplay Builderを使用します。display_builder_entity_viewを有効にし、プロファイルを作成してから、エンティティの表示管理ページに移動してDisplay Builderを選択します。ライブラリからコンポーネントをドラッグし、スロットにネストして、propsを設定し、スタイルを適用します。
ページレイアウトの作成
標準のpage.html.twigを置き換えるページレイアウトを設計するためにDisplay Builderを使用します。display_builder_page_layoutを有効にし、/admin/structure/page-layoutでPage Layoutエンティティを作成し、ルートや条件に割り当ててから、ビルダーを使用してヘッダー、ナビゲーション、コンテンツエリア、フッター用のコンポーネントを配置します。
Viewsディスプレイの設計
Viewsの出力レンダリング方法を制御するためにDisplay Builderを使用します。display_builder_viewsを有効にし、Viewを編集してDisplay Builderディスプレイプラグインを選択します。ヘッダー、公開フィルター、行、ページャー、フッターエリア用のコンポーネントでViewレイアウトを構築します。
再利用可能なプリセットの作成
頻繁に使用するコンポーネント設定をプリセットとして保存します。ビルダーでコンポーネントを右クリックして「プリセットとして保存」を選択します。プリセットはプリセットライブラリタブに表示され、任意のディスプレイに素早くドロップできます。
共同コンテンツ編集
複数のユーザーが同じディスプレイを同時に編集できます。Collaborationアイランドは現在編集中のユーザーを表示し、変更はServer-Sent Eventsを通じてリアルタイムで同期されます。
レスポンシブレイアウトのテスト
ビューポートスイッチャーを使用して、異なる画面サイズでレイアウトがどのように応答するかをテストします。スイッチャーはテーマのブレイクポイントを使用してビルダープレビューエリアをリサイズします。
Tips
- 異なるユーザーロール用に複数のプロファイルを作成する - 編集者はサイトビルダーよりもシンプルなインターフェースが必要かもしれません
- アコーディオンやモーダルなどの複雑なネストされたコンポーネントには、プレビューがドラッグ＆ドロップを困難にするため、Layersパネルを使用します
- キーボードショートカットでワークフローを高速化：Bでビルダー、Yでレイヤー、Pでプレビュー
- プリセットは頻繁に使用するカードレイアウト、ヒーローセクション、コールトゥアクションコンポーネントに適しています
- コンポーネントライブラリは3つのビューで表示できます：グループ化（プロバイダー別）、バリアント（バリアント付きコンポーネント別）、モザイク（ビジュアルサムネイル）
Technical Details
Admin Pages 9
/admin/structure/display-builder
Display Builderプロファイルを管理するメイン管理ページ。設定済みのすべてのプロファイルを一覧表示し、追加、編集、有効化/無効化、削除のオプションを提供します。プロファイルは利用可能なUIアイランドとアクセスできるロールを定義します。
/admin/structure/display-builder/add
カスタマイズ可能なアイランド設定で新しいDisplay Builderプロファイルを作成します。
/admin/structure/display-builder/{profile}/edit
アイランド設定を含む既存のDisplay Builderプロファイルを編集します。各アイランドは有効化/無効化でき、特定のオプションで設定できます。
/admin/structure/display-builder/preset
ビルダーから保存してディスプレイに挿入できる再利用可能なパターンプリセットを管理します。プリセットはスロットコンテンツを含む完全なコンポーネント設定を保存します。
/admin/structure/display-builder/preset/add
再利用可能なコンポーネント設定用の新しいパターンプリセットを作成します。
/admin/structure/display-builder/instances
すべてのアクティブなDisplay Builderインスタンスを表示します。インスタンスは、履歴、ユーザー、未保存の変更を含む現在の編集セッションを追跡する一時的なStateエンティティです。
/admin/structure/page-layout
Display Builder for Page Layoutサブモジュールが有効な場合にページレイアウトを管理します。特定のルートや条件に割り当てられるカスタムページレイアウトを作成します。
/admin/structure/page-layout/{page_layout}/builder
ページレイアウトを編集するためのDisplay Builderインターフェース。ページ構造を設計するためのアイランドを備えた完全なビルダーUIにアクセスします。
/admin/structure/views/display-builder
ディスプレイ設定にDisplay Builderを使用するすべてのViewsを一覧表示します。
権限 5
Hooks 1
hook_display_builder_provider_info
モジュールがDisplay Builderプロバイダーを登録できるようにします。プロバイダーはDisplay Builderを異なるDrupalディスプレイシステムに接続する統合です。
Troubleshooting 4
display_builder_entity_viewサブモジュールが有効で、少なくとも1つのロールが割り当てられたプロファイルが存在し、ユーザーがプロファイル権限を持っていることを確認してください。
Component Libraryアイランドの設定を確認してください。プロバイダーが除外されているか、コンポーネントのステータス（実験的/非推奨）がフィルタリングされている可能性があります。プロファイルのアイランド設定で設定します。
Collaborationアイランドがプロファイルで有効になっており、HTMX SSEライブラリが読み込まれていることを確認してください。ブラウザコンソールでSSE接続エラーを確認します。
履歴は10ステップに制限されており、編集セッション中のみ利用可能です。プロファイルのツールバーボタンでHistoryアイランドを有効にしてください。
Security Notes 3
- プロファイル権限は設定によってはセキュリティ上の影響を及ぼす可能性があります - BlockとコンポーネントはPHPコードを実行できます
- 管理用Blockへのアクセスを制限するために、Block Library設定でどのBlockが利用可能かを確認してください
- エンティティビューのオーバーライドはエンティティごとのカスタマイズを許可しますが、多用するとパフォーマンスに影響する可能性があります