Gutenbergと吹き出し対応を考える

2019-02-20

猫

 

 
WordPressバージョン5がリリースされてから数ヶ月たったのでそろそろアップデートを考えないといけないのにゃー
人物のアイコン素材 その5

 

 
いろいろと遅せーよ
猫

 

 
バージョン5の目玉といえばGutenbergなのにゃー
人物のアイコン素材 その5

 

 
一番良く使うユーザーインターフェイスが変更になってしまいました
猫

 

 
Classic Editorにやっと慣れたのに非道いのにゃー
せっかく執筆スタイルが確立できたかと思っていたのに残念にゃー
人物のアイコン素材 その5

 

 
その割に記事の投稿数が少ないけどな
猫

 

 
年末のセールでゲーム三昧だったのにゃー
致し方ないのにゃー
人物のアイコン素材 その5

 

 
なんだよそれ
ブログもちゃんと更新していけよな
猫

 

 
買ったゲームはおいおいブログで紹介していきたいと思っているのにゃー
人物のアイコン素材 その5

 

 
で、WordPressバージョン5対応はどうするつもりなのでしょうか?
猫

 

 
それがなかなか厳しそうなのにゃー
人物のアイコン素材 その5

 

 
といいますと?
猫

 

 
Gutenbergで吹き出しがそのまま使えるのか怪しいのにゃー
人物のアイコン素材 その5

 

 
それは一大事ですね
当ブログは見ての通り吹き出しが軸になってますからね
猫

 

 
一応Gutenberg内でもClassic Editorのブロックを呼び出せるらしいにゃー
人物のアイコン素材 その5

 

 
ブロックといえどClassic Editorはオワコンでしょうから今後はあまり使いたくないですね
猫

 

 
Classic Editorは2021年までサポートらしいにゃー
ということでGutenberg対応の吹き出しプラグインを調べてみたのにゃー
人物のアイコン素材 その5

 

 
おお!
猫

 

 
まずはコレにゃー


人物のアイコン素材 その5

 

 
WordPressテーマ、Snow Monkeyを作成されている方の提供しているアドオンのプラグインですね


猫

 

 
テーマは有料でもアドオンを無料で使えるのにゃー
人物のアイコン素材 その5

 

 
それは助かります
猫

 

 
新たにSnow Monkey Blocksが追加されるにゃー
様々なブロックが入っているのだけどその中に吹き出しブロックがあるにゃー
人物のアイコン素材 その5

 

 
おお、良さげですね
猫

 

 
Luxeritasと一緒に使ってみた画面がこちらなのにゃー
人物のアイコン素材 その5

 

 
設定も直感的でシンプルな作りですね
すぐに使うことができましたね
猫

 

 
ウーン、吹き出しと吹き出しの間隔が狭すぎてくっついてしまっているのにゃー
吹き出しの枠線幅や背景の色がカスタマイズできないのにゃー
画像の切り抜きも今みたいに四角にしたいのにゃー
人物のアイコン素材 その5

 

 
Snow Monkeyに最適化されているのでその辺りは仕方がないかと
猫

 

 
改行も行間が開きすぎている気がするにゃー
人物のアイコン素材 その5

 

 
CSSの設定周りがやはりLuxeritasテーマと調和していないのでしょうね
猫

 

 
設定項目があると嬉しかったのにゃー
人物のアイコン素材 その5

 

 
まあ贅沢は言えませんね
猫

 

 
アドオンもGPLなのかにゃ
現状ではコレをベースにコードをカスタマイズする手段があるにゃー
人物のアイコン素材 その5

 

 
それはなかなか敷居が高い気がしますね
猫

 

 
確かにそうなのにゃー
人物のアイコン素材 その5

 

 
ところで私の名前は「右氏」だったんですか?
猫

 

 
いつも右側にいるのでたった今命名したにゃー
人物のアイコン素材 その5

 

 
すこぶる適当すぎる
猫

 

 
吾輩は名前はまだない
人物のアイコン素材 その5

 

 
夏目漱石!


猫

 

 
続いてはコレにゃー



人物のアイコン素材 その5

 

 
こちらもテーマLightning作者さん作のものですね

猫

 

 
これも様々なブロックが入っているにゃ
VK Blocksから吹き出しブロックを使えるにゃー
人物のアイコン素材 その5

 

 
これも無料なので助かります
猫

 

 
Luxeritasと一緒に使ってみた例にゃ
人物のアイコン素材 その5

 

 
これも直感的でシンプルに設定できていいですね
猫

 

 
画像も簡単に設定できて吹き出し背景色も変更可能にゃ
スタイルも三角とバブルの2種類をサポートにゃ
吹き出しブロック間隔もOK
行間隔も問題ないのにゃー
人物のアイコン素材 その5

 

 
吹き出しの枠が100%端っこまで行かないで文字列幅になっているのも現在の吹き出しと同じでグッドポイントです
猫

 

 
現時点で最有力候補のプラグインなのにゃー
人物のアイコン素材 その5

 

 
もうこれでいいのでは?
猫

 

 
ブロック以外にも様々な機能が入ってしまうのにゃー
重くなってしまう懸念があるのにゃー
人物のアイコン素材 その5

 

 
多機能ゆえの悩みですね
猫

 

 
表示のブロックだけ切り出してくれるとありがたいにゃー
人物のアイコン素材 その5

 

 
この辺りもLightningとの併用が前提なのでしょうから難しそうです
猫

 

 
なんてことを言っていたら表示ブロックだけ切り出したものもあったのにゃー


人物のアイコン素材 その5

 

 
完全に見落としてましたね
猫

 

 
まだbeta版扱いらしく公式でもほとんど言及してなかったのにゃー
人物のアイコン素材 その5

 

 
仕様変更があるときついですね
もう少し待ってみますか
猫

 

 
次はコレにゃー



人物のアイコン素材 その5

 

 
こちらもテーマLIQUID PRESS作者さん作のものですね

猫

 

 
これは独自カテゴリではなく一般ブロックに追加される形になっているにゃー
人物のアイコン素材 その5

 

 
ちょっと探しづらいかもしれないですね
慣れれば問題ないですが
猫

 

 
これまたLuxeritasと一緒に使ってみた例にゃ
人物のアイコン素材 その5

 

 
見た目はいいですね
猫

 

 
最初に画像設定が必要にゃ
URLで指定する必要があるけど直感的でないにゃー
一応メディアファイルへの画面移動のリンクはあるにゃー
吹き出し背景色は変更可能にゃ
スタイルも三角とバブルの2種類をサポートにゃ
吹き出しブロック間隔もOK
編集中はおかしい動きするけど最終的に行間隔も問題ないのにゃー
人物のアイコン素材 その5

 

 
最初のハードルがあるけど慣れれば問題ない感じですかね
猫

 

 
全部左寄せになってしまうのが残念にゃー
VK Blocks以外はそうなっているのでこのプラグインだけの問題ではにゃいけど
人物のアイコン素材 その5

 

 
今後のアップデートに期待ですね
猫

 

 
ユニークなのは文字サイズが変更できる点にゃー
インパクトを出したいときに使えそうにゃー
人物のアイコン素材 その5

 

 
そういえば他のプラグインは変更できないですね
猫

 

 
Gutenbergだと難しいのかにゃー?
人物のアイコン素材 その5

 

 
これも今後のアップデートに期待ですね
猫

 

 
Gutenbergのブロック対応ではないけれど表現力の高いプラグインを見つけたので紹介しておくにゃー



人物のアイコン素材 その5

 

 
こちらもテーマSimple Days作者さん作のものですね

猫

 

 
Classic Editorブロックで利用する形態らしいのにゃー
デモページはこれにゃー

Word Balloon デモページ

人物のアイコン素材 その5

 

 

 
他のプラグインでは見たことがない表現力ですね
猫

 

 
流石にここまでの表現は使いこなせる自信がないにゃー
人物のアイコン素材 その5

 

 
他の追随を許さない感じ
これはすごいですね
 

猫

 

 

他に吹き出しブロックとしてはCocoon Blocksが可能性を秘めているにゃー


人物のアイコン素材 その5

 

 

 
可能性とは?

猫

 

 
対応状況を見るとバージョン0.1.2ではまだ実装していないようなのにゃー



人物のアイコン素材 その5

 

 

 
順次機能をブロック化しているので後程実装される可能性があるということですね

猫

 

 
そういうことにゃー

人物のアイコン素材 その5

 

 
早く使ってみたいですね

猫

 

 
でもやはりテーマの作者さんなのでCocoonに最適化されていることが予想されるのにゃー

人物のアイコン素材 その5

 

 
まあそれは当然でしょうね

猫

 

 
そこで最終手段として残された道はコレにゃ



人物のアイコン素材 その5

 

 

 
ツールキットですか

猫

 

 
ズバリ、ブロックを自作するのでしょう!

人物のアイコン素材 その5

 

 
出たー!一番敷居の高いヤツ!!

猫

 

 
WordPressとかReactとか学習コストが半端ないって

人物のアイコン素材 その5

 

 
自分が言いだしたくせに

猫

 

 
あくまでも最終手段なのにゃー

人物のアイコン素材 その5

 

 
勉強という意味ではいいかもしれませんね
暫くはブロックでClassic Editorを呼び出す感じでしょうか

猫

 

 
暫定的にそれで行くにゃー

人物のアイコン素材 その5

 

 
それにしてもClassic EditorとGutenbergが切替可能なら独自エディターも実装可能なのでしょうか?

猫

 

 
WordPressの仕様はよくわからないにゃ
でもそういう切り替えができるなら可能性はあるのかもにゃー
APIとかあるのかにゃー?

人物のアイコン素材 その5

 

 
可能だったらエディター戦国時代になると面白いですね

猫

 

 
既にビルダープラグインとかあるから可能とみたにゃ

人物のアイコン素材 その5

 

 
取り敢えずWordPress自体をアップデートしていきましょう

猫

 

 
ゲームが終わったらやるにゃ

人物のアイコン素材 その5

 

 
コラ!

追記

人物のアイコン素材 その5
 
執筆時点で調べた情報なので各プラグインの今後のアップデートで状況が変わってくると思いますので最新情報を各サイトでご確認ください

猫
 
このあと紆余曲折あってカスタムブロックで吹き出し対応することにしたにゃー
表現だけの簡単なブロックならすぐ作れるにゃー

さらに追記

人物のアイコン素材 その5

Luxeritasテーマを使用している場合は最新バージョンでは標準で吹き出し機能を実装しています

猫

プラグイン不要で実装しているのにゃー

人物のアイコン素材 その5

ブロックとして使えるので便利ですね
ただカスタムブロックで当サイトはやってますけど

猫

Luxeritasがもう少し早く実装していたらそちらを使っていたかもしれないのにゃー

人物のアイコン素材 その5

Luxeritasはやはり高機能ですね
さらなる発展を期待します