Dynamic Layouts
Display Suite、Panels、Drupal CoreのLayout Builderで使用できる再利用可能なレイアウトを作成・管理するためのビジュアルレイアウトビルダーモジュールです。
dynamic_layouts
インストール
composer require 'drupal/dynamic_layouts:^2.1'
composer require 'drupal/dynamic_layouts:^2.0'
概要
Dynamic Layoutsは、コードを書かずにカスタムレイアウトを作成できるユーザーフレンドリーなインターフェースを提供します。サイトビルダーは、直感的なAJAX対応の管理インターフェースを通じて、行と列の追加、CSSクラスのカスタマイズ、列幅の設定を行い、視覚的にレイアウトをデザインできます。
このモジュールはBootstrap v4グリッドシステムとカスタムグリッド構成（6列、8列、または12列）の両方をサポートしています。作成された各レイアウトは自動的にLayout Pluginとして利用可能になり、Drupal CoreのLayout Builder、Display Suite、Panels、またはLayout Pluginを使用する他のモジュールで使用できます。
主な機能には、列の追加・削除時の自動列幅計算、行と列のカスタムCSSクラス、設定可能なリージョン名、Layout Builderインターフェースでのレイアウトプレビュー用のビジュアルアイコンマップなどがあります。
Features
- コーディング不要で再利用可能なレイアウトを作成できる、AJAX対応の行・列管理機能を備えたビジュアルレイアウトビルダー
- Bootstrap v4グリッドシステム（12列）とカスタムグリッドシステム（6列、8列、または12列）をサポートし、CSSクラスプレフィックスを設定可能
- 列の追加・削除時に自動で列幅を計算し、カスタマイズされていない列にスペースを均等に分配
- 行と列の両方にカスタムCSSクラスを設定でき、レイアウト要素ごとに細かいスタイリング制御が可能
- カスタマイズ可能なリージョン/列名がLayout Builderのリージョンラベルとして使用される
- レイアウト内のすべての要素に適用されるデフォルトの行・列クラスで一貫したスタイリングを実現
- Layout Pluginプロバイダーとして統合 - 各レイアウトがLayout Builder、Display Suite、Panelsで自動的に利用可能に
- Layout Builder選択インターフェースでのレイアウトプレビュー用ビジュアルアイコンマップを自動生成
- Drupalの設定管理システムを通じたConfig Entityとしてのエクスポート/インポートをサポート
Use Cases
コンテンツページ用のレスポンシブ2カラムレイアウトの作成
サイト構築 > Dynamic Layouts > 新規レイアウトを追加に移動します。名前に'Two Column Content'、カテゴリに'Content Layouts'、デフォルト行クラスに'row'を入力します。保存して既存の行に1つの列を追加します。各列を編集して幅を設定します（例：メインコンテンツにcol-8、サイドバーにcol-4）。レイアウトはLayout Builderに自動的に表示され、コンテンツタイプに適用して各リージョンにブロックを配置できます。
3カラムフッターレイアウトの構築
1行の新しいレイアウトを作成します。さらに2つの列を追加して合計3列にします。モジュールは自動的に幅を計算します（12列グリッドの場合、各col-4）。各列を編集して'Footer Left'、'Footer Center'、'Footer Right'のような意味のある名前を付けます。これらの名前がリージョンラベルになります。フッター固有のスタイリングのために行にカスタムクラスを適用します。
複雑なランディングページレイアウトの作成
4行から始まるレイアウトを作成します。各行を異なる構成にします：フルワイドヒーロー（col-12で1列）、3カラムの特徴セクション、2カラムのコンテンツエリア、4カラムのフッター。セクション間にスペースを追加するためにカスタム行クラスを使用します。各列にはアニメーションや背景色のためのカスタムクラスを設定できます。
ユニークなデザインのためのカスタム8列グリッドの使用
設定でカスタムフロントエンドライブラリを選択し、列プレフィックス（例：'span'）を入力し、8列グリッドを選択します。モジュールはあなたのプレフィックスでCSSグリッドシステムを生成します。span-1からspan-8のクラスを使用してレイアウトを作成します。フロントエンドCSSライブラリはカスタムグリッド用のレスポンシブFlexboxルールを提供します。
デプロイメントのためのレイアウトのエクスポート
開発環境でレイアウトを作成した後、Drupalの設定管理（drush cex）を使用して設定をエクスポートします。レイアウトConfig EntityはYAMLファイルとしてエクスポートされます。本番環境にはdrush cimでインポートします。キャッシュクリア後、すべてのレイアウトがすぐに利用可能になります。
Tips
- レイアウトを作成する前に必ず設定を構成してください - テーマがBootstrapを使用している場合はBootstrap v4を選択し、それ以外の場合は他のCSSフレームワーク用にCustomを使用します
- 意味のある列名を使用してください。それらがLayout Builderに表示されるリージョンラベルになります
- デフォルト行クラス'row'はBootstrapでうまく機能します。カスタムグリッドの場合は、フレームワークの行クラスを使用してください
- 列を追加すると、モジュールはカスタマイズされていない列間で利用可能なスペースを自動的に分割します
- カスタム列幅のオーバーライドは他の列が追加/削除されても保持されます - 固定幅のサイドバーに便利です
- カテゴリはレイアウトの整理に役立ちます - 'Content Pages'、'Landing Pages'、'Components'のような一貫した命名を使用してください
- レイアウトはConfig Entityです - バージョン管理とデプロイメントのためにDrupalの設定エクスポート/インポートを使用してください
- Layout Builderのビジュアルアイコンマップは行/列構造から自動的に生成されます
- 他のレイアウトに影響を与えずにコンポーネント固有のスタイリングのために列にカスタムクラスを追加してください
- Bootstrapを使用する場合、モジュールはBootstrapのグリッドシステムに一致するcol-1からcol-12のクラスを生成します
Technical Details
Admin Pages 4
/admin/config/dynamic-layouts
作成されたすべてのダイナミックレイアウトを名前とカテゴリとともに一覧表示します。既存のレイアウトを編集または削除する操作を提供します。設定が構成されていない場合は警告メッセージを表示し、レイアウト作成前にフロントエンドライブラリを設定するよう促します。
/admin/config/dynamic-layouts/settings
フロントエンドCSSフレームワークとグリッド構成を含むDynamic Layoutsのグローバル設定を構成します。設定を変更すると、すべてのレイアウトの既存の列幅設定がすべてパージされます。
/admin/config/dynamic-layouts/add
名前、カテゴリ、デフォルトCSSクラス、初期行数を定義して新しいダイナミックレイアウトを作成します。保存後、行と列を視覚的に設定できます。
/admin/config/dynamic-layouts/manage/{dynamic_layout}
既存のダイナミックレイアウトを編集します。ページリロードなしで行と列の追加、編集、削除を行えるAJAX操作による視覚的な行・列管理を提供します。
権限 1
Hooks 4
hook_theme
管理インターフェースでレイアウトエディターをレンダリングするための'dynamic_layouts_backend' Theme Hookを登録します。
hook_help
READMEコンテンツを表示してモジュールのヘルプページにヘルプテキストを提供します。
hook_install
モジュールのインストール後に設定ページへのリンク付きのウェルカムメッセージを表示します。
hook_requirements
ランタイム要件をチェックします。Bootstrapフロントエンドライブラリが選択されているがbootstrap_libraryモジュールがインストールされていない場合に警告を表示します。
Troubleshooting 6
最初にモジュール設定を構成する必要があります。サイト構築 > Dynamic Layouts > 設定に移動し、フロントエンドライブラリ（BootstrapまたはCustom）を選択してください。設定が構成されるまで、レイアウト追加機能は無効になっています。
bootstrap_libraryモジュールをインストールしてBootstrap v4を選択するか、テーマにBootstrap v4 CSSが含まれていることを確認してください。モジュールはBootstrapのクラス構造のみを提供し、Bootstrap CSS自体は提供しません。
列の幅をカスタマイズすると、その列は'ロック'され、他の列を追加/削除しても自動調整されなくなります。カスタム幅が設定されていない列のみが自動幅計算に参加します。どの列にカスタム幅が設定されているか確認してください。
これは期待される動作です。フロントエンドライブラリまたはグリッド列数を変更すると、利用可能な幅クラスが変わるため、既存のすべての列幅設定がパージされます。すべての既存レイアウトで列幅を再設定する必要があります。
すべてのキャッシュをクリアしてください（drush crまたは管理 > 環境設定 > パフォーマンス > すべてのキャッシュをクリア）。モジュールは保存時にプラグインキャッシュをクリアしますが、完全なキャッシュクリアが必要な場合があります。
設定で列プレフィックスとグリッド列数の両方を構成していることを確認してください。フロントエンドライブラリCSSは'カスタム'が選択されている場合にのみアタッチされます。テーマがdynamic-layouts-frontend CSSをオーバーライドしていないか確認してください。
Security Notes 3
- 'Dynamic Layoutsを管理'パーミッションは、レイアウトにカスタムCSSクラスを含めることができるため、信頼できる管理者にのみ付与してください
- 行/列設定で入力されたカスタムCSSクラスはレンダリング時にエスケープされますが、既存のスタイルと競合する可能性があります
- レイアウト設定はConfig Entityとして保存され、Drupalの標準設定セキュリティモデルに従います