DrupalのExperience Builderの雰囲気をつかもう

このページを作成時点でDrupal の StartShot開発が絶賛進行中ですが、その中の機能 Experience Builder モジュールがお試しで表示できたのでその構築手順を残します。

補足として構築してもモックに近い画面がほとんどです。もっと開発が進んでから見た方が面白いかもしれません。

(追記) Experience Builder の機能

コンポーネント組み合わせてページの表示を作成できる

コンポーネント = SDC に依存したconfig定義 になりそう

データはjsonとしてフィールドとして保存されそう

Layout Builder や Panels は、ブロックを組み合わせて表示する機能なので Experience Builder とは機能が異なる

コンテンツごとやview mode の表示でExperience Builderを使えそう

競合はLayout Builder、Display Suitueの他にParagraphモジュールも役割が重複しているのでExperience Builderへ機能転換がされそう

次の手順でできること

Experience Builder の編集UIがチラ見できる

SDCが管理画面で追加できそうなUIが表示できる

SDCの説明に関しては以下の記事をぜひみてみてください

参考) Experience Builder の編集イメージ。左のメニューからコンポーネントを選んでDrop&Drop、右の編集フォームで表示要素のマッピングを行う感じでした。

https://scrapbox.io/files/66a344487adb4c001dc2d808.png

手順

DDEV 利用前提ですが、PHP8.3とNode20系以上が使える環境であれば適宜読み替えてもらうことでサイトは立ち上がると思います。

1) コマンド系の操作

code:shell

# Composer で Drupal取得

composer create-project drupal/recommended-project 1030

cd 1030

# DDEV 起動

ddev config

ddev start

# composer.json にリポジトリ追加、experience_builder の参照先の追加が必要

# 抜粋

"repositories": {

"drupal": {

"type": "composer",

},

"dgcircus/experience_builder": {

"type": "vcs",

}

},

# Experience Builder を追加

ddev composer require drupal/experience_builder:0.x-dev

ddev composer require justinrainbow/json-schema

# Experience BuilderのUI用jsのビルド、npm install & npm build ができればOK

ddev ssh

cd web/modules/contrib/experience_builder/ui

npm install

npm build

exit

2) 画面からの操作とページの確認

画面からインストール

プロファイルは標準を選択

Experience Builder モジュールの有効化

Article(記事)コンテンツタイプのフィールドなどに変更がはいる

Article(記事)コンテンツを作成

Article(記事)コンテンツ で node=1 のコンテンツを作ることが大事。デモ用に直指定されている箇所があるため。

/xbという画面を開くと編集UIが表示される

管理メニューにも Experience Builder PoC が登場し、そこからでもいける

固定でArticle(記事) かつ node=1のコンテンツを元に表示される

おしまいに

現時点の Experience Builder を使ってみた感想としては、モックレベルの機能ではありますが作り込みが始まった感じがしました。Drupal開発者としてはまず実際のレンダリングをになうSDCを理解して使ってみる必要があるなと感じました。今回はここまで、以上になります。