【WordPress】シンプルで使いやすいエディタ、「Gutenberg」

はじめに

本記事ではWordpressのエディターをシンプルにするプラグイン「Gutenberg」と使った感触をご紹介します。

Gutenbergとは？

そもそもGutenbergとはどういったもので、どうして話題を集めているのでしょうか？

Guntenbergが話題を集めたきっかけは、World Camp Europe 2017というパリで行われたWordpressのイベントでWordPressの共同開発者であるマット・マレンウェッグが特別セッションでこのプラグインを紹介したことです。

私はシンガポールのWordPressのイベントに行った際に紹介されていて、はじめてこのプラグインを知りました。

GutenbergはWordPressのエディターをさらに使いやすく、シンプルにするためのプラグインです。

UIがシンプルで直感的なだけでなく、動画の埋め込み、facebookやtwitterなどの外部サービスの埋め込み、ギャラリーの作成などが簡単にできるのが特徴です。

現在はベータ版が出ており、まだ本格的に導入するのはリスクが高いですが、マット・マレンウェッグが出したプラグインということで、注目を集めています。

気になる方は以下、リポジトリからご覧ください：
https://github.com/WordPress/gutenberg
公式WordPressのプラグイン上のGutenbergはこちらです。

Gutenbergを使ってみた

では、実際にどのようなエディタなのか、どんなことができるのか、使ってみたいと思います。

プラグインをインストール/有効化する

「Gutenberg」をインストールすると、投稿の下に「Gutenberg」という新しい項目ができます。「Gutenberg」エディタを使用されたい方はこちらをクリックして、エディタへ進みます。

エディタのインターフェース

実際に「Hello World」を「Guntenberg」で開いたものがこちらです。

普通のWordPressエディタと比べて非常にシンプルになっています。

ちょっと中身を書き換えて、メニューを開くと、このような感じになっています。

メニューの中にはテキスト、イメージの他に、ギャラリー、見出し、引用、リスト、カバー画像などがあります。

カバー画像を試す

まずは、カバー画像を追加してみたいと思います。

メニューからカバー画像を選択し、背景に設定する画像を選択するとこのようになりました。

カバー画像の横幅の大きさなども決められるみたいです。

また、右側にあるサイドメニューを見ると、

カバー写真を暗めにするか明るめにするか、位置を固定にするかなどのオプションも選べるようになっています。

試しにテキストを追加すると、こんな感じです。

その他の機能

その他の機能、まずは見出しをみていきます。

こんな感じになっています。
タグも、h2タグ , h3タグ , h4タグと選べるようになっています。

引用をしたいときも、引用のブロックを使えば、綺麗に整えてくれます。

ソースコードを入れたい時も、他のプラグインなしで綺麗に整えてくれます。

ギャラリーを入れる際には、それぞれの画像にキャプションがつけられるようになっています。

また、ギャラリーを入れ込んだ際、カラム数が右のサイドバーで設定できるようになっています。
このように2カラムにしたり…

このように4カラムにしたりできます。

動画を埋め込んだりすることもできます。

こちらは、インスタグラムの埋め込み。

こちらは、Twitterの埋め込みです。

全体として、このような状態になりました。

全体として見ると、エディタ上で見えるコードやインスタグラムよりも綺麗にまとまっている気がします。

Gutenbergのメリットとデメリット

メリット

Gutenbergを使ってみた感想としては、UIが非常にシンプルになり、使いやすくなっていると感じました。

Wixなどのホームページビルダーやmediumなどのブログサービスが流行り出し、WordPressもコンテンツ作成に置いてのユーザーエクスペリエンス上昇に乗り出したようです。

Yoast SEO の 開発者、Joost de Valkもコンテンツ作成において、ユーザーエクスペリエンスをさらに強化していくことに関して非常に関心を寄せているようなので、全体的なこの動きは続いていくと思われます。

デメリット

現在、多くの開発者が懸念していることが、Gutenbergが他のプラグインの対応をしていない、ということです。

例えば、Yoast SEOや、カスタム投稿タイプなどが一部のサイトでサポートされておらず、このまま対応されないようだとUIがどんなに使いやすくても、開発者は離れる一方になると思われます。

まとめ

以上、本記事ではシンプルで使いやすいエディタのプラグイン、Gutenberg（ベータ版）をご紹介しました。
この機能がワードプレスのコア機能になるかはまだ分かりませんが、UIとしては非常に優秀で書きやすいので、気になった方はぜひ試してみてください。