WordPressの新エディタ「Gutenberg」を使ってみた

4 min

WordPressの将来のアップデートでコアに実装されるらしい新エディタ「Gutenberg」。

それが先行して使えるようになるプラグインが配布されていましたので、導入してみました。

結論から言うと、「まぁまぁいい感じだけど使うのは今じゃない」といった感じでした。

追記

WordPressのバージョンが5.4になり、いよいよ機能も充実しバグも減ってきました。

今ではもうGutenbergは全力でオススメできるエディタになっています!

利用方法

「Gutenberg」エディタを利用するには、専用プラグインをインストールする必要があります。(WordPress5.0以降では標準搭載されました)

WordPress公式よりダウンロードするか、管理画面のプラグイン->新規追加から検索してインストールしましょう。

ダウンロードページはこちら

追記

現在のWordPressでは、Gutenbergエディタは標準搭載されています。

Gutenbergプラグインは「β機能として開発中の試作品」を試すことにできるものに変化しているので、安定したエディタを使いたい場合はインストールしないことをオススメします。

Gutenbergはどんな感じ?

「Gutenberg」はぱっと見とてもシンプル。
WordPress公式アプリのエディタに近いレベルのまっさら感です。

こんなにまっさらだと、ちゃんと記事を書けるのか心配になりますね(笑)

でも、書き始めると意外と高性能な面もあったりします。

この「Gutenberg」は、シンプルだけど必要な機能は用意されている”Mac的”なエディタのように感じました。

はるしか

ショートコードもちゃんと使えるよ!

モブログとは相性が良いかも

この記事を公開した後に、モバイル端末での使用感はどうか試してみました。

画面が小さく作業スペースが限られたモバイル環境では、むしろこちらのエディタの方が使い勝手がよさそうです。

僕はAndroid端末を愛用していますが、Androidは音声入力の精度が高いので、音声入力メインの記事作成と親和性が高いようにも感じられました。

ちなみにこの項はAndroidの音声入力とGutenbergの組み合わせで書いていますが、ほぼ手直しもせずに短時間で入力を終えています。

ブロックの作成等は手作業する必要はなく、通常の改行で次のブロックが自動的に作成される為、キーボードを表示させたのは仕上げのほんの僅かな時間のみで済みました。

旧エディタとの違い

それでは、今までのエディタとはどんな違いがあるのでしょう?

従来のエディタは「TinyMCE」と呼ばれるもの。

それはユーザー自身がカスタマイズ可能で、様々な便利機能を拡張するノウハウがネット上のあちこちに転がっています。

ビジュアルこそ古臭い印象はありますが、記事執筆に必要なものが全てそこに用意されていました。

こちらは”Windows的”な印象を受けます。

反面、新エディタは非常にスッキリしたビジュアルです。

「あれ、あのボタンはどこ?」「装飾のリストがない!」など、最初は戸惑うと思いますが、記事を書き進めるうちに必要な機能が上手く収納されていることに気付くでしょう。

従来のエディタは記事のコンテンツを一つの文章として編集し、「Gutenberg」は記事の要素を細かなブロックとして組み立てていくスタイルです。

新エディタのここが良い

文章構造がブロックとして管理できる

「Gutenberg」の特徴であるブロックエディタとしての特徴は、そのまま大きなメリットになります。

多くのブロガーにとって、執筆中の文章構造の変更は日常茶飯事ですよね。(僕だけ?)
新しいエディターでは、まるで手帳に貼り付けた付箋を並べ替えるようにブロックを移動することができます。

この記事を書きながら、一番最初に「おっ、便利じゃん!」と思った部分でもあります。

ブロックの並び替えがドラッグ&ドロップでできるようになればなお良しですね。

ビジュアルエディタとHTMLエディタをブロック単位で切り替えられる

従来はコンテンツ丸ごとを一つのかたまりとして編集していたため、ビジュアル/HTMLを切り替える時はすべてまとめて行われていました。

切り替える際に余計な整形が入ったりして、HTMLが崩れたりする事故、経験したことありますよね?

新しいエディタではブロック単位で切り替えができる為、コンテンツ全体が壊れたりするリスクが最小限にとどめられています。

ブロックが使いまわし可能

よく使う文章などを「再利用ブロック」として管理して、使いまわすことができます。

記事冒頭のあいさつだったり、広告のタグなんかを登録しても良さそうですね。

別の記事にも使いまわしできて、変更を加えると同じブロックを利用しているすべての記事で変更が同期されます。

特定の記事だけ同期されるのが嫌な時は、その記事内でだけ「再利用されない通所のブロック」に変換することもできるようです。

正直これはかなり捗りますよ!

HTML構造が一目でわかる

エディタ左上に「コンテンツ構造」というボタンがあり、そこから現在のHTML構造やブロックの数などが見られるようになっています。

見出しが正しいかや全体のバランス等、一発でチェックできるので重宝しそうですね。

新エディタの良くない点

従来の「TinyMCE」向けに行われたカスタマイズが全て無効になる

まず最初に、結構深刻な問題点。

従来のエディタ向けに開発されたプラグインやカスタマイズは、当然ですが根本から”別物”である「Gutenberg」には反映されません。

これはWordPressに限らず、何かしらの仕組みを刷新する場合には必ず起こる問題です。

「Gutenberg」がユーザーフレンドリーで、本当に良い執筆体験を提供してくれるものであれば、いずれ開発者たちは「Gutenberg」向けのカスタマイズを提供してくれるでしょう。

エディタのカスタマイズ、できますよね……?

装飾が物足りない

カスタマイズが普及してくれば解決できる内容かもしれませんが、標準で用意された装飾だけではやや物足りない印象。

例えば、<p>タグで囲まれた文章を一つのブロックとして認識しますが、フォントサイズの変更はブロック単位でしかできません。
つまり文章の一部だけ文字を大きくしたい場合、それができないのです。

正確にはHTMLエディタに変更すればできるのですが、ビジュアルエディタでサクサクお手軽に書きたい人には使い勝手が悪くおすすめできません。

総評

「Gutenberg」はとても良く洗礼されたモダンなエディタであると感じられました。

しかし記事をゴリゴリ書いていくブロガー達の実用に耐えれるレベルかどうかは、現時点では疑問が残ります。

今のところ、開発者的には「新環境で従来のエディタを使いたいならプラグインを導入してね」というスタンスのようですが、現状完成されている環境を取り除いてまで実装するものではないのではないでしょうか。

WordPressコアとして導入するのであれば、従来のTinyMCEと共存する(設定などで自由に変更できる)状態がベストだと思います。

なんて一個人が思ったところで何も変わらないんですけどねw

新エディタが使いやすいかどうかは好みに依るところが大きいと思いますので、ぜひ一度試してみてください。

未経験からITエンジニアになりました!

今までは趣味としてプログラミングを独学してきたけど、やっぱりこれを仕事にしたい……!

そう思い立ったはいいものの、世間の情勢などもあり未経験でのエンジニア職の中途採用が絶望的な状況

大手転職エージェントを通して何社も面接を受けては落ちてを繰り返し、諦めかけていたのですが……。

気分転換で登録した転職サービスで、とある企業から内定をいただくことができました

同じように未経験からITエンジニアを目指している方へ、どんなに厳しくても可能性がゼロではないことを伝えたい。

ポイントは、IT業界に精通した転職サービスを利用すること。
これだけで少なくとも面接へ進める可能性がグッと高くなります。

あなたがもしIT特化の転職サービスに未登録で苦しんでいるなら、ぜひ利用してみてください。きっと可能性が広がりますよ!

\無料のIT系転職サービス/

はるしか

はるしか

ゲーム・漫画・クルマ・ガジェットなど多趣味な雑食系。
モノづくりが楽しくてプログラミングをポチポチしてたら本業エンジニアになってしまったASPの中の人。
動物占いは子鹿。
忘れっぽい自分へのメモ代わりの記事が多めです。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です