現在のWordPressのビジュアルエディタはここ長年にわたり、変更を加えておらず、ほとんど元のままです。悪いことではありませんが、多くの人はそろそろ変化の時が来たと考えています。Medium及びGhost のような他のプラットフォームでは、執筆というのは本当にユニークで楽しい体験です。WordPressでも同様なものを開発だきたら・・という希望に応えて、多くの寄稿者とボランティアの皆さんが過去6ヶ月以上の間、WordPressの新しいエディタGutenberg(グーテンベルク)を作成してくれました。彼らの目標は、WordPressにリッチなコンテンツを追加することをしやすくて楽しくすることでした。今回は、新しいエディタとその長短所をご紹介します。

Gutenbergとは?

Gutenbergは、WordPressのエディタの改善版です。500年以上前に活版印刷技術を発明したヨハネス・グーテンベルクにちなんで命名されました。現在のビジュアルエディタでは、ショートコードとHTMLを利用しないと、文章が希望通りにならないことが多いです。改善版の目標は、執筆を特に初心者を対象に、しやすくすることです。「ブロック」の組み合わせがすでに導入済みで、今後も高度なレイアウトオプションを追加する予定のようです。是非、公式の例をご確認ください。

なお、ベータ版ということで、公開中のサイトでは使用できませんので、ご注意ください。しかし、私たちもやはり使用できるようになる前に一旦自分で確認したくて、トライしました。ベータ版の改善事項、変更点が段々出てくるはずですので、本記事は常に更新するようにします。Gutenbergが正式にWordPressのコアに追加せれる前に、Matt Mullenweg(創始者)は100,000件のアクティブなインストールを望んでいるようです。そうすると、多くのバグや問題点が解決でき、新しいアイデアや機能の要求が検討できるようになります。

Gutenbergはまだ試験段階にある為、試してWordPressサポートフォーラムにコメントやフィードバックを残したり、GitHubにてチケットを作成することが奨励されます。または、WordPress Slackのコアにある#core-editorで行われる議論に参加することもできます。GutenbergはWordPress 5.0で開始される予定です。

Gutenbergをインストールする方法について

これを書いている時点でGutenbergプラグインは、ダウンロード数が29万件を超え、アクティブインストールが2万件をわずかに超え、評価は5つ星のうち2.5です。また、使用するにはWordPressの4.8が必要です。

WordPressプラグインGutenberg

WordPressプラグインGutenberg

Gutenbergの最新バージョンはWordPressリポジトリからダウンロードするか、WordPressのダッシュボードのプラグインの新規追加から「Gutenberg」と検索してください。繰り返しますが、テストサイトにインストールするか、ホストのステージング環境を利用することをお勧めします。

WordPressプラグインGutenbergをインストールする

WordPressプラグインGutenbergをインストールする

Gutenbergの使い方

Gutenbergをインストールすると、いつもの「投稿」メニューにも「Gutenberg」リンクが追加されています。フォルトのWordPressのエディタを置き換えることはありません。試験段階では、両方のエディタが使用可能である為、当社の意見ではこれは非常に良いことです。リポジトリの最新バージョンでは、カスタムページもサポートするようになりました。

投稿メニューのGutenbergリンク

投稿メニューのGutenbergリンク

:WordPress 5.0がリリースされると、Gutenbergがデフォルトのエディタ(#41316)になりますが、互換性の問題が発生した場合、元々のエディタをインストールすることができるとのことです。(下記の新しいお知らせを参照)

WordPress5.0のGutenbergのお知らせ

WordPress5.0のGutenbergのお知らせ

左側のパネルにデモ(下記参照)と新しい投稿を作成する機能が含まれている「Gutenberg」メニューが追加されています。繰り返しますが、このメニューはおそらく試験目的のためだけのものです。ビジュアルエディタの外観は、おそらく皆さんが使い慣れたものとはかなり違っていますね。逆にMediumと非常に似ていますが、当社の意見では素晴らしい外観です。

Gutenbergエディタのデモ版

Gutenbergエディタのデモ版

Gutenbergエディタと現在のビジュアルエディタを比較してみると(クリックして拡大表示)、Gutenbergの方は執筆用のスペースが多い(特にモニターの小さい場合)ことが確認できます。ノートパソコンをご利用の方にとっては、Gutenbergは素敵な改善になるでしょう!本当に「執筆」に重点を置いており、気を取られない環境を提供しようとしています。

Comparing Gutenbergエディタと現在のビジュアルエディタの比較

Gutenbergエディタと現在のビジュアルエディタの比較

WordPressエディタGutenbergでは、 「Post Settings」をクリックすることにより右側のサイドバーを削除できます。画面がさらに多くなり、まるで現在の「集中執筆モード」のようなものです。集中執筆モードについては、Shift+Alt+Wを使って起動しようとしましたが、まだ動作していないようです。まだ追加されていないかもしれません。しかし、おそらくご利用の方がかなりいる為、これから必ず追加されるでしょう。

投稿の設定を隠すgutenberg

投稿の設定を隠す(まるで「集中執筆モード」のようなモード)

ビジュアルエディタとテキストエディタ(コード)を切り替えるには、左上にドロップダウンメニューがあります。各ブロックの最初と最後にHTMLコメントがあることに気付いたでしょうか。たとえば、下記のコードを使用することによりテキストブロックが作成できます。

<!-- wp:core/text --> <!-- /wp:core/text -->

これにより、テキストエディタモードから直接にブロックが作成できます。ただし、このモードで編集している方が慣れているよりクラッタが多いでしょう。

gutenbergのテキストエディタ

Gutenbergのテキストエディタ

ブロックをハイライトすると、矢印で簡単に上下に移動したり、削除したり、該当ブロックの設定に入ることができます。Mediumで使用可能なコントロールと非常によく似ています。

Gutenbergのブロックを編集する

Gutenbergのブロックを編集する

驚きべきことに、モバイルでも基本設定のままで非常良く機能しています。画像を挿入したり、投稿を公開する前に段落を1~2項追加する必要がある場合は、Gutenbergだと簡単にできます。

モバイルによるGutenbergエディタ

モバイルによるGutenbergエディタ

最初に目立つ変更点の一つは、長年見ていたTinyMCEツールバーがなくなっていることです。その代わりに、「挿入」ボタンをクリックすると、ドロップダウンメニューがあります。GutenbergがTinyMCE統合への依存をなくそうとしているように見えますね。それは本当でしょうか。

TinyMCEはもうない

TinyMCEはもうない

Matt Mullenwegが上記についてこう述べています。

「僕らがやろうとしているのは、変化させることです。ブロックについて一度しか学ぶ必要がなく、画像ブロックを学び終わると、その画像ブロックが投稿、サイドバー、ページ、カスタム投稿タイプなどにあっても、 まったく同じように機能します。例えばGoogleフォトやDropboxを持ち込むプラグインなど統合されているものがあっても、今後は同じように機能します。」 — Matt Mullenweg (出典:WP Tavern)

しかし、TinyMCEチームのプロジェクトリーダーであるAndrew Robertsは当社に連絡してくれて、TinyMCEとGutenbergの関係についていくつかを明らかにしました。

僕は始めからGutenbergチームに参加しました。チームワークでした。TinyMCEのコア編集エンジンは、編集可能なコンポーネントに力を与えて、それらはその他のブロックのほとんどに力を与えることが興味深いでしょう。例えば「テーブル」ブロックです。近い将来にもそれが続くでしょう。

また、「クラッシックテキスト」ブロックは基本的にTinyMCEエディタです。どれほど注目されているかは、おそらくコミュニティからのフィードバックによるものでしょう。実は、既存のTinyMCEプラグインとボタンが機能するように、Gutenbergの 「古い」エディタのラッパーのプルリクエスト(#1394)がありますが、現時点では検討中です。

それにもかかわらず、今後ともWPとTinyMCEのコアチームが連携して、WordPressの執筆に関するユーザーエクスペリエンスを高めるために動力しています。最終的にプラグインになっても。

ちなみに、優れたGutenbergチームと一緒にGutenbergプロジェクトを進めてきた理由の1つは、今後12ヶ月以内にこれらのコンセプトをTinyMCEコミュニティにも紹介することでした。これにより、ブロックベースの編集コンセプトを独自のカスタムアプリケーションに組み込むことができます。– Andrew Roberts

以下は当社が興味深いと判断した新しいブロックの紹介です。

テーブルブロックと段落ブロック

簡単な表(テーブル)は、エディタでブロックとして挿入できる為はるかに使いやすくなりました。以前は、サードパーティ製のプラグインまたはHTMLコードを使用する必要がありました。現時点では、挿入オプションを使用して2行2列の表しか追加できず、テキストモードに切り替えないとその設定も変えられません。最終的には、ビジュアルエディタからも行えるようになるでしょう。

Gutenbergの表

Gutenbergの表

または、「レスポンス列」ブロックも追加されました。素晴らしいことです!現在の選択肢は2、3及び、4段落のレイアウトです。過去、WordPressのレスポンス列は挿入しにくく、正しく動作するのにサードパーティ製のプラグインが必要でした。

Gutenbergの段落

Gutenbergの段落

ライブHTMLブロック

または、「ライブHTMLブロック」というもの用意されています。コードを挿入するとそのプレビューをブロック内で確認できます。ビジュアルエディタとテキストエディタの間の切り替えをなくしますので、便利な機能に違いありません。

GutenbergエディタのHTMLブロック

GutenbergエディタのHTMLブロック

画像のドラッグアンドドロップ

Gutenberg 0.5.0以降は、ビジュアルエディタを使用するのと同様に、画像をイメージブロックに直接にドラッグアンドドロップできます。しかし、これを行うときには不思議なフェード効果が発生しますので、嫌がっている方もいるでしょう。

画像のドラッグアンドドロップ

画像のドラッグアンドドロップ

また、特定のブロックにCSSクラスを追加することもできます。

CSSクラスを追加する

CSSクラスを追加する

よく使うブロック

Gutenbergエディタには数多くのブロックが組み込まれており、その数がさらに増える可能性がらう中を、挿入手順をスピードアップする為「よく使うブロック」が追加されました。

よく使うブロック

よく使うブロック

見出しのオプション

Gutenberg 0.9.0以降、見出し(カバーテキスト)の新しいビジュアルスタイルのオプションが導入されました。フォントサイズを変更したり、ドロップキャップに変換したり、新しいカスタムカラーパレットコンポーネントを使って色を変更することができます。

Gutenbergのカバーテキスト

Gutenbergのカバーテキスト

スラッシュ・オートコンプリート

Gutenberg 1.1.0で追加された素敵な機能ですが、オートコンプリートを使ってブロックを挿入する機能です。Slackを毎日使っている方にとっては、コンテンツの書式設定の非常によく知っている方法ですね。クリックの数を減らし、キーボードが利用できるのは、常に良いことです!

Gutenbergのオートコンプリート

Gutenbergのオートコンプリート (画像の出典: WordPress.org)

目次とアンカーのサポート

サイドバーに目さえ追加されました。クリック可能なリンクである為、簡単に記事の特定の部分にジャンプできます。長いコンテンツを書くときに便利です。

Gutenbergの目次

Gutenbergの目次

ブロックで使用できるもう1つの新機能はアンカーです。かなり喜ばしく、長い間要求されてきたものです。アンカーを追加すると、記事の特定の部分または見出しに直接リンクすることができます。これはシェアにもSERP用のジャンプメニューを作成するにも便利です。

Gutenbergのアンカーのサポート

Gutenbergのアンカーのサポート

単語数とブロック数のカウント

WYSIWYGエディタの下部に単語数が表示されることに慣れている方が多いでしょう。そこでGutenberg 1.2.1では、見やすいデータのポップアップが追加されました。総単語数、ブロック数と見出しの数が確認できます。

Gutenbergの単語数とブロック数のカウント

Gutenbergの単語数とブロック数のカウント

プル引用ブロックと新しいアライメントオプション

何年も使ってきたblockquoteだけでなく、新しい「プル引用」も追加されました。プル引用は違うものです。また、ブロックの配置に関する選択肢が増えたのも良いことです。何年もの間、標準のビジュアルエディタでは、左寄せ、右寄せ、中央揃え、およびアライメントなしの文章が作成できました。Gutenberg WordPressエディタでは、ワイドに揃える(下を参照)ことと、全幅に揃えることもできます。

Gutenbergのワイドに揃えたプル引用

Gutenbergのワイドに揃えたプル引用

ボタン

簡単なボタンを追加するための機能さえあります。ボタンのオプションはあまり多くありませんが、ブロガー及びパブリッシャーの多くが記事内に「行動を呼び出す」ボタンが必要である為、喜ばしいことです。現時点では、HTMLを使用するか、サードパーティ製のボタン・ショートコードプラグインを使用する必要があります。

Gutenbergのボタン

Gutenbergのボタン

埋め込みオプション

多くの方のご希望に応えて、GutenbergではYouTube、SoundCloud、Hulu、Flickr、Imgur、Twitter、Slideshare、Redditなどのメディアコンテンツの埋め込みの使用が驚くほどに簡単です!今までもこれらのすべてを埋め込むことができましたが、ビジュアルエディタには言及されていない為、多くの方が認識しなかったでしょう。埋め込みをブロックとアライメントオプションと組み合わせることで、完璧なユーザーエクスペリエンスになりました。ただし、混乱しやすい外観ですので、レイアウトが再検討される可能性があります。

Gutenbergの埋め込みオプション

Gutenbergの埋め込みオプション

WordPressのエディタGutenbergの長所

既存のエディタに対してのGutenbergの長所のいくつかを挙げます。

  • TinyMCEへの依存の*一部*をなくすのは、当社の意見では良いことです。コア、テーマの開発者、プラグインとエディタの間の緊密な統合ができたらいいと考えております。

  • 新しいMediumスタイルの編集を好む方は、WordPressのGutenbergエディタが大好きでしょう。
  • Gutenbergは、スクリーンスペースを増やすことにより気を取られない経験を提供します。
  • ブロックを使用するのは楽しく、新しいアラインメントオプションは高解像度のスクリーンと全幅のテンプレート化されたレスポンスウェブサイトに便利です
  • すでにモバイルでもうまく機能しています。今後、活用しているユーザーの数が増えるでしょう。移動中に携帯電話から編集する必要がありますか? 問題ありません。
  • テーマとプラグインの開発者が独自のカスタムブロックを作成できます。
  • 初心者にも使いやすい。

もう一つの注目すべき点は、Gutenberg 0.4.0の開発ログで貼り付けたコンテンツを処理するためのAPIを追加することについて述べたことです。(目的はWord、Markdown、Google DocsをネイティブのWordPressブロックに変換するための特別な処理を行うことです。)できたら、すばらしいことです。現時点では、Google DocsからWordPressへのコピーは完全にダメです。

WordPressのエディタGutenbergの短所

それでは、Gutenbergエディタの短所も紹介します。まだ試験段階である為、これらの短所の多くはおそらく修正されることを覚えておいてください。

  • 現在、Markdownのサポートがありません。
  • 初心者には使いやすいと書いていますが、習いにくい方も多いでしょう。
  • 2017年10月現在、Gutenbergはメタボックスをサポートしています。しかし、これはあくまでも初期サポートに過ぎず、開発者のさらなら動力が必要です。正しい方向への第一歩に違いありませんが・・例えば、Yoast SEOなどの設定を微調整し始められますね。
Gutenbergのメタボクス

Gutenbergのメタボクス

  • テーマとプラグインが非常に多いため、後方互換性は今後の課題になるでしょう。実は、TinyMCEとの統合のあるものの開発者を含む多くの開発者が今後動力しないといけません。すべてのWordPressのアップデートのうち、開発者を最も困らせるのはこれでしょう。一方、TinyMCEとの後方互換性を提供するラッパーが今後来るかもしれません。プルリクエスト#1394をご参照ください。
  • Gutenbergのアクセシビリティについて懸念している方もいます。始めてこの懸念を表明したのはYoast SEOの開発者であるJoost de Valkです。スクリーンリーダーを使ってGutenbergを使用することについてのこちらの記事も必ずご確認ください。

開発者はGutenbergとの懸念を表明し始めています。Ahmad Awaisは、WordPressのテーマとプラグインの開発者のGutenberg関係の開発を支援する為、Gutenbergのボイラープレートコードをリリースしました。確認する価値があります。

今後、Gutenbergは必須になるか任意になるかご心配の方は多いでしょう。答えは必須になるとのことです。Gutenbergが一旦WordPressのコアに含まれると、無効にすることはできません。WordPressの公式編集画面になります。ただし、Classic Editorという無料のプラグインがあり、これを使って古いエディタを復元できます。しかし、目的達成の手段としてご利用ください。

また、さらなる質問のある方は是非、Gutenbergに関する怪しい噂を検証するこちらの素晴らしい記事をご確認ください。

Gutenbergのデモ版をトライしましょう!

インストールせずにGutenbergを触ってみたいと考えている方は、WordPressのGutenbergエディタの限定フロントエンドデモであるFrontenbergをご確認ください。

まとめ

結論ですが、当社が新しいGutenberg WordPressエディタが大好きです。必ず楽しみにしているものに違いありません。誰もがWordPressリポジトリから入手し、開発サイトまたはステージングサイトにインストールすることをお勧めします。待ちに待ったエディタの構築に協力できるチャンスです!皆さんの大好きなCMS上でMediumと同様なユーザーエクスペリエンスをすることができます!Kinstaのチームは必ず協力いたします。

Gutenbergを試してみたことがありますか。ご意見をお寄せください。

848
シェア