category

MTBlockEditor を触ってみる

2022-07-01

Movable Type のブロックエディタをちゃんと触っていなかったと思ったので、少し触ってみた。
MovableType.net の方ではなく、パッケージ版にインストールするプラグインの方。

新しいブロックエディタプラグインを正式公開 - ブログ | CMSプラットフォーム Movable Type ドキュメントサイト
https://www.movabletype.jp/blo...

bit part で案件で似たようなことをやるなら基本的には MTAppjQuery のマルチフィールドでくみ上げることがほとんどではある。

前提

今回試そうと思った前提として、、、CMSはコンテンツを管理するという当たり前の話ではあるのだけど。

コンテンツというのはWebサイトの1ページ1ページなのか?と言うのはありつつ、そういった「ページを管理する」のがメインで、データを管理するというよりは見た目も含めて管理する必要があった。
全部のパターンを網羅するためにマルチフィールドでやっているのだけど、なんかいい方法がほかにないものか?と言うのを考えたかったというのが始まり。

ページを管理するということは、リッチエディタをつかうなり、HTMLを書けばいいわけだけど、できるだけフィールドに分けて管理できるようにしたい(= HTML はできるだけ書かせない)というオーダー。
ページの細かい構成要素は Storybook で管理されていて、それをCMSで運用できるようなイメージが近いという感じか。。。

この辺になるとみたまま編集的な話になりそうなので、 Concrete CMS とか StoryBlok とか STUDIO とかの方がいいのでは無いか?と言うのもありつつ、それはそれでまた別の話になりそうなので一旦スキップ。

Concrete CMS is an open source content management system for teams
https://www.concretecms.com/
Headless CMS: Organize your content for the world - Storyblok
https://www.storyblok.com
STUDIO | Web Design Platform for All Creatives.
https://studio.design/

自由にできるとはいえ、そこにある程度のルールも必要だろうし。

WordPressのブロックエディタ、Full Site Editing とかもちゃんと把握できていないのでスキップ。。

この辺ももう少し自分の理解を広げたいところではある。

ブロックエディタ

「ブロックエディタ」といってイメージするものがいくつかありそうなきはするのだけど。
リッチエディタの延長にあるブロックエディタ。
今回のMTブロックエディタだったり、WordPress の Gutenberg。

入力欄の塊としてのブロックを積み上げるようなブロックエディタ。Craft CMS の Matrix だったり、 MTAppjQuery のマルチフィールド。
Drupalのパラグラフや a-blog cmsも個人的にはこっちかなぁという気がする。

ひとまず今回は前者を想定する。

デフォルトのテキストブロックが使いやすそう

デフォルトで入っているテキストブロックが結構いいかも?と言う気がする。

20220630 074231

段落にも見出しにもリストとかもやりやすい。
段落ごとにブロックが分かれるのは使いやすいかどうかとか好みが分かれそうではあるけど。

リストは入れ子が発生するからどうしても入力フィールドだけでやるには限界があるように個人的には思う。

20220630 074336

シンプルに使いやすい。
(よくあるリッチエディタで十分では?というのもあるけど。)

オプション的なものをどうするか

結局ページを作っていくとなるとリストにもいくつか種類があったりする。
となるとリストに種類を選択できるようなオプションを持たせる必要がある。
Storybook の Args みたいな?というかんじ。

そういうオプションを持ったリスト用のブロックを作ってみる

リスト用のテキストブロックを追加

20220630 074850

リストの種類を選ぶセレクトボックスを追加

20220630 074904

これでコンテンツデータ側でリストを追加する

20220630 075038

リストのデータを入れたところ

20220630 075057

カーソルが外れるとプレビュー状態になる。

20220630 084258

このプレビュー状態っぽいところにオプション的なものも出てしまうのがちょっと残念。
選択肢に class を振るようにして、カスタムスクリプトでプレビュー表示の時は見えないようにするといった形がいいのかなー。
そもそもとして、テキストブロックを拡張して、リストのパターンを選べるとかがいいんだろうか。。。

自分で運用してみないことには見えないものがありそうだけど、使うときには余計な情報は見えない方がよさそうだよなー。

ただ、ブロックエディタの方針としては、ここにオプション的なブロックがが入ってくることは想定していないだろうし。
タグでサクッと出すためにはそれは邪魔だろうから今後何か変わってくれるといいなぁとは思う。

WordPress のブロックエディタがその辺はやりやすそうな気もする。

Block Editor Handbook | WordPress Developer Resources
https://developer.wordpress.or...
20220630 080610

まー、色々ありそうだ。

もう少し見ていってみよう。
なにかあったら北のひげの人に相談してみよう。