2023/12/12
Tag : Craft CMS

Craft 5 alpha : ついに Matrix の入れ子が出来るようになった!!

この記事は「Craft CMS Advent Calendar 2023」12日目の記事です。

Craft 5 ではついに Matrix フィールドの入れ子が出来るようになった。 

これまでは Neo とか SuperTable をつかうことで入れ子状態で可変数のデータを増やすことが出来るようになっていた。
便利なんだけど、あまりプラグインに依存してしまうのもどうだろうと思ったりもしてなかなか導入には踏み切れていなかった。

5日目のエントリで書いたが、エントリタイプがセクションから独立したことで、これが Matrix の入れ子につながる。

Craft 5 alpha : セクションとエントリタイプの関係が変わった #craftcms | mersy note
https://note.mersy418.com/arti...

入れ子になる Matrix フィールドを作成する

まずは入れ子になるMatrix フィールドを用意する。
これまで通り Matrix フィールド test content を作成する。

Craft 4 までであればここでブロックの設定をしてそこに追加するフィールドを入れていくような形になっていた。

Craft 5 ではここで「エントリタイプ」を選択する。
なので実際には先にエントリタイプを作っておく必要がある。

サンプルで選択されている URLcontentbody とかのエントリタイプはシンプルにフィールドを1つ or 必要な数持っているエントリタイプになる。

見出しを入れる想定の content heading だとこんな感じのエントリタイプの設定になる。

コンポーネントをいくつか組み合わせたモジュール単位でエントリタイプを作っておくようなイメージが良さそうな気はする。

慣れていないので色々と頭がこんがらがってくる、、、

Matrix フィールド用エントリタイプの作成

次に入れ子用の Matrix 用のフィールド test content を持つエントリタイプ カラム設定 を作成する。

この時点でだいぶ頭がこんがらがってくるが、、、

カラムの設定をするだろう的な想定をして、カラム数選択用のセレクトフィールドもあわせて持たせておく。

セクションとエントリタイプの設定

次は実際にセクションで利用するフィールド、エントリタイプの設定をする。

Matrix フィールド test Matrix を作成する。

ここで先ほどつくった Matrix フィールドを既に持っているエントリタイプ カラム設定 を選択する。

こうすることで、

カラム設定というブロックが自由に何個も追加出来るようになり、

そのブロックの中では更にブロックをいくつも追加することが出来る。

慣れていないとだいぶややこしい感じではあるが、これで結構柔軟にフィールドやフィールドのパターンを追加していく事ができる。

CraftQuest にも Craft 5での Matrix フィールドの作り方を解説している動画が出ている。

Overview of Matrix Changes in Craft 5 - Craft 5 Guide | CraftQuest
https://craftquest.io/courses/...

こちらの方がわかりやすそうな気はする。

実際に Matrix を入れ子にしてみて

これまで待ち望んでいた Matrix in Matrix が出来るようになった。
すごくうれしい感じがあるのだけど、いざ出来るようになると「はて、どういう風に使おうとしていたんだっけな?」と思ったりするところもある。

案件とかで設計考える時は、ここで入れ子に出来るといいんだけどなぁ、、、と思ったりしたことがあるはずなのに。
それを思い出せないからもう少し考えて試したいところではある。

今回のサンプルはカラム数を指定してブロックを選んで並べていく、みたいなことを想定してみたが。
コンポーネントを想定した作りをもう少し考えてもいいかもしれない。

すべてを Matrix フィールドで作れば入れ子になって自由に増減させることができる。。。はず。


まだ若干挙動が怪しいところはあって、Matrix フィールド内のブロックを追加しようとするとクルクルローディングっぽい感じになってうまく追加出来ないこともある。

まだベータ版でもないからこの辺は仕方無いでしょう。