Layout BuilderがDrupal9からコアモジュールに


Post:2021/07/31

Update:2022/04/28

フロントエンド モジュール
Layout BuilderがDrupal9からコアモジュールに
Layout BuilderがDrupal9からコアモジュールに

Asako Okumura

長い間、Drupalユーザーが求めていた機能の1つが、管理画面上からレイアウトをカスタマイズできる、ビジュアルデザインツールでした。この需要に対して、PanelsやDisplaySuiteなど、いくつかのモジュールが提供されてきましたが、それらは多言語対応や他機能との互換性などの課題が解決されていませんでした。
Drupal9では、ビジュアルデザインツールとして、Layout Builderがコアモジュールに採用されました。

Drupal9におけるLayout Builderについて

Drupal8では、Layout Builderは、Drupal本体(コア)の機能ではなく、拡張機能(モジュール)として提供されていました。それがDrupal9では、コアの機能として標準で提供されるようになりました。Layout Builderがコアの機能として提供されるようになったことにより、Layout Builderの機能を利用した、関連モジュールやテーマの開発がより早く進むことが期待されます。

Layout Builderとは

Layout Builderは、次の2つのモジュールで構成されています。

  • Layout Discovery:レイアウトを定義し、レイアウトの登録と出力を処理するAPIモジュール。また、UIのアイコンを自動的に生成するなどのユーティリティも含まれています。
  • Layout Builder:Layout Discovery APIの上に構築された、コンテンツタイプのレイアウトを作成するためのドラッグアンドドロップUI。Layout Builder UIを使用すると、サイト管理者はコンテンツタイプを表示するときに使用するレイアウトを構成し、レイアウト内にコンテンツタイプの各フィールドを配置できます。また、Layout Builderでは、任意のブロックをレイアウトに配置することもできます。

Layout Builderの機能

Layout Builderモジュールは、特定のコンテンツタイプ、ブロック、およびブロックタイプのフィールドで機能します。

最もシンプルな用途は、コンテンツタイプのレイアウトを作成し、そのコンテンツタイプのすべてのノードにレイアウトを適用することです。レイアウトに変更を加えると、その変更は、そのコンテンツタイプの既存および新規に作成されたすべてのノードに適用されます。また、構成オプションを使用すると、コンテンツタイプのデフォルトのレイアウトを指定できると同時に、そのレイアウトをノードごとにカスタマイズすることができるようになります。

  • セクション:セクションは、ブロックを配置するコンテナです。このようなコンテナの例は、2列レイアウトの列です。各レイアウトには必要な数のセクションを含めることができますが、少なくとも1つは必要です。セクションを定義すると、それらを移動することはできません。
  • ブロック:ブロックは、レイアウトに配置できるコンテンツ要素です。セクションにブロックを配置します。ブロックは、そこに表示されるコンテンツを表します。Layout Builder内のブロックは、標準のDrupalのBlockエンティティとは異なります。

コンテンツタイプのレイアウトを設定する

まずは機能拡張ページで、Layout BuilderとLayout Discoveryをインストール(有効化)します。

Layout Builderモジュールの有効化

次に、レイアウトを設定したいコンテンツタイプの表示管理ページで、「レイアウトビルダーを使用」にチェックを入れて保存します。

コンテンツタイプの表示管理

すると「レイアウト管理」ボタンが表示されるので、クリックします。

レイアウト管理画面へ

ここで、レイアウトを設定することができます。
「Add Section」をクリックすると、One columnやTwo Columnのセクションを追加することができます。

Layout Builderでセクションを追加する

追加したセクション内の「Add Block」をクリックすると、コンテンツタイプの各フィールドや、Blockエンティティを配置することができます。

Layout Builderでセクションにブロックを追加する

Twigファイルを編集することなく、管理画面での設定のみで、ノードコンテンツのレイアウトを自由に組み替えることができます。

Layout Builiderの設定01

Layout Builiderの設定01

フロント表示01

フロント表示01

Layout Builiderの設定02

Layout Builiderの設定02

フロント表示02

フロント表示02

なお、コンテンツタイプの表示管理ページで「コンテンツのアイテムのレイアウトをそれぞれカスタマイズできるようにする。」にチェックを入れると、ノードごとにレイアウトを編集することができるようになります。コンテンツの編集画面に「レイアウト」タブが表示されるので、そこから、そのノードのみに対するレイアウト編集ページに移動してして、レイアウトをカスタマイズします。

コンテンツごとのレイアウトをカスタマイズする
コンテンツごとのレイアウトをカスタマイズする

Layout Builderでは、全てのカスタムブロックおよびモジュールにより生成された全てのブロックを使用することができます。例えば、デフォルトで提供されるパンくずや、メッセージをはじめ、Viewsモジュールで生成したVeiwsブロックなども配置可能です。
これにより、簡単に、自由度の非常に高いコンテンツの作成が可能になります。
Layout Builderモジュールは、まだ活発に開発中で、Drupalコミュニティでは機能拡張や関連モジュールの開発に取り組まれています。今後の展開が楽しみなモジュールの1つですね。

Profile picture for user Asako Okumura
Asako Okumura
マネージャー
神戸生まれ、神戸育ちの2児の母。デザイナーとして入社後、Drupal(ドルーパル)の面白さにすっかりはまってしまい、デザインだけに止まらず、ある程度の案件なら開発までしてしまいます。 AcquiaのDrupal認定試験は「サイトビルダー」「デベロッパー」「フロントエンドスペシャリスト」を取得。残りの1つ「バックエンドスペシャリスト」を取得し、グランドマスター資格を目指して勉強中。