Word Press(ワードプレス)の新しいエディタ、Gutenberg(グーテンベルク)を試してみた。

2018年9月26日日進月歩Luxeritas(ルクセリタス), Word Press(ワードプレス), そうだったのか!

読了時間: 約731

先ほど、Word Press(ワードプレス)がバージョン4.9.6に更新されました。(2018年9月26日)
Word Press(ワードプレス)が5.0になるのも、時間の問題ですね。

Word Press(ワードプレス)が5.0になるときに、エディタGutenberg(グーテンベルク)も本格リリースされるようです。
ベータ版がリリースされた直後、わけもわからずダウンロードしてみましたが、
数学の記事を書くときに使っているコード入力支援のプラグインがどうやれば使えるのかよくわからなかったので、
あっという間に無効化し、ずっとクラシックエディタで書いてきました。
とはいえ、どういうものか知っておくのもいいかなと思い、再チャレンジしてみることに。

「ブロック」の概念が理解できればそれだけでいい。

Gutenberg(グーテンベルク)に関する記事で飛び交う言葉が、「ブロック」です。
「なんのこっちゃ。」と思っていましたが、
「ブロック」の概念が理解できれば、
Gutenberg(グーテンベルク)は、直感的、感覚的に使える優秀なエディタといえるでしょう。

見出し・画像・テキストの「独立宣言」

ブロックとは「塊(かたまり)」のことですよね。

これまでのエディタでは、見出し、テキスト、画像などがいっしょくたになっていましたが、
Gutenberg(グーテンベルク)では、それらが個別のかたまりとみなされ、独自に移動させたり、削除やコピーができたりするようなのです。

「ブロック」ごとに「見出し」、「テキスト」または「画像」を入れるなどと限定されるので、
干渉を受けません。

また、削除や移動、コピーなども容易なので、

記事のテーマに沿って、「見出し」を量産しておき、
テキストブロックで記事を書いてから、「見出し」タイトルに合うようにブロックを配置し、
最後に画像を一挙にアップロードしておいてから、テキストブロック同様に配置する。
など、記事を書く作業を「バッチ化」することができます。

ここは、「見出し」自治区よっ!

「ブロック」の概念のいいところは、「コードの終わりがどこか。」というのテキストエディタで確認しなくてもよくなった。ということではないでしょうか。

たとえば、ビジュアルエディタで、あるテキストを「見出し2」に設定し、そのまま本文テキストを書こうとしたら、
本文テキストまで、見出しタグの影響を受けてしまい、思いがけないところまででっかい太字で表示されてしまうことがありました。
つまり、本文の一部が、見出し2タグの干渉を受けていたのです。

これを避けるには、テキストエディタのほうで、見出しタグの終わり部分を確認し、その次から本文を書き始める。というようなひと手間が必要でした。

例えるなら、大きな地方自治体が、隣の地方自治体の行政について、意識せずに干渉してしまうようなものでした。
大きな自治体による干渉は無意識なので、自ら解消するようなことはしません。
干渉された側が、少し知識を得て、対応しなければならない状況だったのです。

私も、ブログを始めた6月ごろは、Word Press(ワードプレス)そのものに慣れていなかったので、主にビジュアルエディタを使っていました。

しかし以前、HTMLを少しかじっていたので、テキストエディタの方が使いやすいことに気が付き、テキストエディタを使う頻度が増えました。

そのうち数学の記事を書いたり、ふきだしを挿入する機会が増えたので、今では、記事執筆のほとんどをテキストエディタで行っています。

ビジュアルエディタを使うのは、目的の画像がちゃんと貼られているかどうかを確かめるのと、
文字の色・サイズ・背景色などを変えるときぐらいです。

このように、HTMLを少しでもかじったことがある人ならば、どこがタグの終わりなのかがわかるので、予防線を張ることもできたでしょうが、
知らない人は、結構四苦八苦していたのではないかと思います。

しかし、Gutenberg(グーテンベルク)は、どうやらそんなエディタの使い分けが必要ないようなのです。

追加するブロックが「見出し」だとしたら、もう「見出し」以外はそのブロックに入れません。

隣接部分からの干渉を受けず、完全な自治が行われるのです。

less is more

Gutenberg(グーテンベルク)は、執筆枠そのものに、これまでのボタンやメニューが埋め込まれているようなスタイルなので、
ビジュアルはシンプルでスッキリしています。

ちなみに、現在の私のビジュアルエディタはこうなっています。
これらは要不要問わず、いつも表示されているので、
Gutenberg(グーテンベルク)の「必要に応じて表示される」というのは、すごく新しくていい機能だと思います。

初めに、画面右上にある「縦並んだ三点」をクリックして、おおまかな設定をしておきましょう。
慣れるまでは、下の画像の通りにしておくとよいと思います。

また、画面右上にある歯車のマークでは、「ページ」と「ブロック」の設定ができます。
「ページ」とは記事全体のことです。

上の画像を見てもらったらわかるように、これまでの記事投稿画面の右側にあったさまざまな設定がここに集約されています。
ブロック編集中は、見る必要はないので、タブで切り替えられるようになっています。
記事執筆に集中できるしくみができているんですね。

「段落」ブロックの例を挙げてみる。

記事に「段落」ブロックを追加すると、おおよそ以下の画像のような画面になります。

どうですか。めっちゃシンプルでしょ?

「ここは、テキスト入力ブロックなんだよね?だったら、画像や見出しをアップするためのボタンなんていらないでしょ?」という考え方のようです。

たしかに。おっしゃる通りです。

使ってみたところ、ブロック内では文字サイズや文字色を設定すると、変えられないようでした。

たとえば上の行のように、強調したいところだけ文字サイズを大きくし、文字色を変えたいときはどうすればいいんだろう。と思いましたが、
トライ1日目の私には解決できませんでした。(もし解決した方がいらっしゃれば、ぜひ御一報を。)

おそらく、私に解決能力がないだけのことなのでしょうが、
ベータ版だから、できないという可能性もあります。
今後注意する点のひとつかなと思います。

Left Caption

Lukia

ちなみに、右上三点で、「ツールバーを統合」というところにチェックを入れると、テキストブロックで使えるツールバーが画面左上に固定されます。統合しなかったら、入力画面内についてきてしまうので、よりシンプルに使いたい方は、「統合」にチェックを入れるとよいと思います。

「ドロップキャップ」が飛ばし読みを可能にする。

テキストブロックで面白いなと思ったのが、「ドロップキャップ機能」です。
説明にもありますが、「先頭」の一文字が大きく表示されるので、段落が切り替わったことがよくわかります。

たとえば、小テーマにつき見出しを一つつけ、その小テーマに複数の段落が属する場合を考えてみます。

ブログ記事は、「読む」というよりは、「見る」ものだ。という意識をもって書いたほうがよいので、
いわゆる学校の国語で習うような文章の書き方はしません。

見た目のよさ、区切りのよさでバンバン改行しますから、
芸能人のブログなどは、空白行と改行のオンパレードですね。

「見る」とか「眺める」ということを意識するとこういう書き方になります。

「見やすさ」を追究すれば、段落も変えたほうが読みやすいですよね。

これまでは、空白行をおくことで、段落が変わったことを示すしかありませんでしたが、
従来の空白行のを入れ方の文化の影響で、ビジュアル的な要素で改行したのか、はたまた段落が変わったのかが判断しにくくなっていました。
かといって、1つ小さい見出しをつけるのも違う気がしますしね。

そこで、使えるのがドロップキャップです。

段落の最初の文字が大きくなるので、段落が変わったことを読者に印象付けられますし、
記事に飛び石が置かれるようなものなので、読者は要点だけを読む「飛ばし読み」もできるようになります。
(ここだけは、ぜひ読んでほしい。という段落にドロップキャップをつけるとよいかもしれませんね。)

Left Caption

Lukia

ちなみに、飛ばし読みはよくないように思われますが、
要点だけ覚えておこう!と強く意識するので、案外いつまでも残っているんだそうです。
試験直前に、「これだけは覚える!」っていうようなときの頭の働きに似ているのかもしれませんね。

スポットライトモード

文字入力画面で、「これはいいなぁ。」と思ったもう一つの機能が、「スポットライトモード」です。
下の青枠で囲まれた画像は、Gutenberg(グーテンベルク)のスクリーンショットです。

ちょっとわかりにくいのですが、ピンクの枠で囲んだテキストブロックを編集していた時に撮ったスクリーンショットなので、
ピンクの枠内の文字は、黒く、すでに編集した他のテキストブロックの文字色は、灰色になります。(見出しも灰色になっています。)

どのテキストブロックを編集しているのかがわかるので、
一時離席して、戻ってきても、すぐに編集が行えます。
また、編集していないブロックの文字が灰色になることで、目にも優しく、(白地に黒文字って結構しんどい)
記事執筆に集中できる気がします。

Mathjax LaTexなどはどうやったらいいのかよくわからない。

こうしてみると、結構いいことずくめのGutenberg(グーテンベルク)ですが、
トライ1日目では解決できないことも。

本格リリース前だからかもしれませんが、現段階では、数式を書き込むときに使うプラグインや、
Luxeritas(ルクセリタス)の入力支援機能のひとつである定型文登録などをどうやって使えばいいのかは、ちょっと使った限りではよくわかりませんでした。

現在のエディタは、「Classic Editor」という名前がついています。
プラグイン一覧画面にある説明では、

WordPress の旧エディターと、以前のスタイルの投稿編集画面レイアウト (TinyMCE、メタボックスなど) を有効化します。この画面を拡張する古いプラグインをサポートします。

となっています。

ということは、現在お世話になっているプラグインが、Gutenberg(グーテンベルク)用にもアップデートされるまでは、
こちらのクラシックエディタとGutenberg(グーテンベルク)との併用が必要となると考えられますね。

一方、プラグイン「Gutenberg(グーテンベルク)」の説明は次のとおり。

印刷技術は、1440年に誕生。コアに採用される新しいブロックエデイターの開発プラグイン。

ちなみに、読むべきは「コアに採用・・・」以下です。

Left Caption

Lukia

「印刷技術は、1440年に誕生。」なんてトリビアいらんやろ。


Word Press(ワードプレス)5.0のリリースがいつになるのかは、ちょっとネット検索しただけでははっきりわかりませんでしたが、
今日のバージョンアップが、4.9.6でしたので、さほど遠い時期ではないと思います。
ということは、今後ともプラグインを利用するためには、開発者さんたちの意欲にかかっているといえますね。

Left Caption

Lukia

開発者の皆様!どうか、お見捨てになりませんよう!

日本語対応も待たれます。

あと、これは困ったな。ということも。

現時点でのGutenberg(グーテンベルク)には、文字数カウント機能がついていないので、書いた文字数がわかりません。

他の方が書かれたブログ記事では、単語数のカウントはされるとのことでした。
でも、「単語数」というのは、欧米の言語のカウント方法であって、日本語にとっては意味がない機能ですよね。
これも、今後の対応が待たれるところといえるでしょう。

コアな使い方ならGutenberg(グーテンベルク)は最強かも。

Gutenberg(グーテンベルク)自体は、まだまだ開発中のようなので、今後使いやすさが加わることが期待されますが、
見出しがあって、文字が書けて、ところどころ写真が入れられればいい。というようなコアな執筆スタイルの方は、
Gutenberg(グーテンベルク)はオススメだと思います。

しかし、これまでのエディタで書いた記事は、記事の構成などが崩れてしまうおそれがあるので、
エディタを一本化してしまうのは避けたほうがよさそうです。

プラグイン「Classic Editor」もダウンロードしておき、都度、有効化・無効化で切り替えて、
試してみるとよいでしょう。

カテゴリー