category

MTAppjQuery のマルチフィールドで multi-column をつかうか multi-column-content を使うか #movabletype

2020-01-30

MTAppjQuery にはマルチフィールドというブロックエディタみたいなものがある。
標準のブロックエディタを拡張したわけではないが、似たようなもので Craft CMS の Matrix フィールドや a-blog cms のユニットみたいなものになる。

MTAppjQuery v2 にあるメソッドのなかではかなり使われてる方じゃないかと思うので @tinybeans はさすがだなー。

リッチエディタやHTMLを意識せずに入力できるようになるが、1つずつのフィールドだけならあまりメリットはないが、ひとまとまりにグルーピングできるメリットはある。

マルチカラムとマルチカラムコンテンツ

複数のフィールドを組み合わせるパターンとしていくつかあるのだが、マルチカラム(multi-column)とマルチカラムコンテンツ( multi-column-content )などがあり、とりあえずこの2つの違いがぱっと見わからない気がしたのでサンプルを作ってみた。

multifield では「フィールドを追加」という表現でこのパターンを追加していけるのだが、そこに含まれる一個一個のフィールドのことなのかがわからなくなるので、とりあえずフィールドをまとめたものを便宜的に「ブロック」と呼ぶことにする。(フィールドを追加=ブロックを追加)

マルチカラムのサンプル

マルチカラムの場合は1つのブロックが Bootstrap でいうところの 1つの row にあたり、その中にフィールドを col の幅とセットで指定していく感じになる。
なので、12を超えれば次の行にうつるという形。

マルチカラムコンテンツのサンプル


マルチカラムコンテンツはブロックに設定したフィールドのグループの数で分割していく形。
上記サンプルは2つグループがある例。

マルチカラムとは異なり2カラムであったとしても1カラム目は2つのフィールド、2カラム目は1つのフィールドを設定するといった作りができる。

たくさん設定をいれればこのような感じで分割されていく。

基本は2カラムか3カラムにするとは思うが、その幅の中でフィールドを収められるような場合にはマルチカラムコンテンツでも使いやすい。

微妙に高さは異なるが、この4カラムの例はマルチカラムで col-3 の幅で、「タイトル、本文、タイトル、PDF、公開設定」みたいにすれば近しい見た目にはなる。
一番左の列のタイトル、公開設定のところがマルチカラムコンテンツより高さがあく形になる。

マルチカラムかマルチカラムコンテンツか?

マルチカラムの場合は multifield を適用しているフィールドに対して全幅のフィールドも用意することができる。

なのでどちらを使うか?はこの全幅が必要になるかどうか?ということが判断基準にもなりそう。

この例でいうと

ブロック内のフィールドはタイトルから「9, 3, 12, 9, 12」という幅(col)を指定している。
(PDFはアセットだからちょっと分かりにくいが)

単純に縦に積むだけのパターンであればどちらでも問題ない。


扱うデータのパターンによってブロックにどういうフィールドをどう配置するかが決まってくると思うので、使いやすい方を選択すると良さそう。

参考までに表組みみたいなパターンも作ることはできる。


案件で使うときにどっちで作るかをどこまで設計として決めてしまうのがいいのかは悩ましい。

実際に触ってもらいながら使いやすさのFBとかももらったりすることもありそう。

またマルチカラムとマルチカラムコンテンツは保持するデータの構造が微妙に違うため、安易に変更はできないので事前にしっかりと検討しておく必要もある。