Gutenbergが正式リリース!
米国時間の2018年12月6日にWordPress 5.0が正式リリースされました。
(日本語訳: https://ja.wordpress.org/2018/12/07/wordpress-5-0-bebo/ )
そしてこのリリースには以前から注目されていた新しいブロックベースのエディターGutenbergがデフォルトで搭載されています。当然 Githubでも公開 されていますが、開発元であるノルウェーの Frontkom社のサイト を見るとWordPressのみならずDrupal向けの開発もしています。それならばDrupalにも組み込めるのではちょっと探してみるとすでに
https://drupalgutenberg.org/ というサイトでDrupalに組み込んだデモサイトまで公開されています。ということでますます期待を膨らませて試してみることにしました。
Gutenbergはどこが違う?
とは言ってもいきなりDrupalに組み込んでも本来のWordPress内での使い勝手との違いがわからないので最新のWordPress 5.0.2をインストールしてさわってみました。
WordPressユーザーのブログなどを参考にしてまとめると、
- 記事の見出しも本文も全てがブロックとして定義される
- テキストは段落毎にブロックになる
- 見出し、リスト、画像、引用、テーブルなどのリッチテキストエディターの要素は殆どがブロックになる
- 最新投稿や最新コメントなどの従来はエディターに組み込めなかったWidgetもブロックとして使用できる
などの多彩な機能があるようで、実際WordPress内ではこれらが確認できました。
ただし、Gutenbergが使えるのはあくまでWordPressコンテンツの投稿やページの本文のみでコメントなどは従来通りシンプルテキストです。また例えばアカウントのBiographical Infoなどのテキスト入力もシンプルテキストのままです。
Drupal8へのインストールは簡単か?
すでに ベータ版がモジュールとして公開 されているのでインストールは簡単です。
機能拡張にはGutenbergのセクションが追加されます。
(Gutenberg Cloudは https://gutenbergcloud.org/ に公開されたGutenberg用の種々のブロックを使用するための機能ですが、今回はテストしていません。)
同時に環境設定>>コンテンツ作成>>テキストフォーマットとエディターに「Gutenberg Blocks」が追加されます。
Gutenbergを使用するには?
インストール後はコンテンツタイプ毎にGutenbergを使用するかどうかを「Enable Gutenberg experience」で設定すればそのコンテンツタイプの編集にGutenbergが使用できます。
もし既に従来のエディター(以降クラシックエディターと言います)で作成したコンテンツがあれば表示は可能ですが編集画面では「Classic」という空白のブロックになって編集できません。ただしその前後にGutenbergのブロックは配置できます。
WordPressの場合と同様にGutenbergが使用できるのはコンテンツへの入力のみでコンテンツに対するコメント入力はクラシックエディターのままです。
新しいコンテンツタイプを定義した場合でも「Enable Gutenberg experience」をオンにするとコンテンツタイプ内の最初に定義されたフォーマット付き長文の編集にGutenbergが使用されます。
それ以外のフィールドは編集画面ではなく画面の右サイドバーの一番下の「MORE SETTINGS」の領域で編集します。領域の幅が狭いのが難点です。
コンテンツは通常通りコンテンツタイプの表示管理で定義した順序で表示されます。
コンテンツエディターとしての使い勝手は?
編集の画面はこんな感じです。
画面の右端のカラムにドキュメントやブロックの設定が表示されていますが、これを閉じるともっとシンプルになります。
ページの任意の場所にブロックを配置できるという点はOneNoteに近いイメージですが、OneNoteでも各ブロックの書式設定は全体共通のメニューバーまたはリボンを使います。一方Gutenbergは編集中のブロックの左上にブロック固有のツールバーが表示されます。筆者も色々とエディターやワープロなどを使ってきましたがこのようなUIはあまり記憶にありません。そしてページ全体のツールバーは極めてシンプルです。
左からブロックの追加・Undo・Redo・Content structure表示・Block Navigationという5つの機能しかありません。ちなみにブロックは入れ子が可能で、その構造を表示してナビゲートするのがBlock Navigationボタンです。
全体の感触をつかんだ後とにかく多機能ということでまずはCover、Table、YouTube、Image、Button、Embedなどと色々なブロックを埋め込んだページを作りました。ブロックの複製機能もあり、ドラッグアンドドロップで移動もできるので色々と試行錯誤しながらページを編集できました。
例えばTableブロックでは行の背景を交互に塗りつぶす機能があったり、ImageをアップロードせずにURLのみで指定するなどのクラシックエディターでは標準では使えない機能があります。パラグラフのテキストの文字色・背景色がデフォルトで設定可能というのも従来にはない機能です。
ということで色々とページを作ってみましたが、突然エラーが発生することもありました。例えば以下のような2カラムのページの各カラムにイメージを挿入したページです。
このページを保存後再度編集しようとすると編集画面で、
「This block contains unexpected or invalid content」というメッセージが表示されて、「Resolve」か「Convert to HTML」が要求されます。ここで「Resolve」をクリックして表示される画面で、
右下の「Convert to Blocks」をクリックすると修復されます。修復後は再度編集してもエラーは発生しなくなります(念のためWordPressでもテストしましたが同様の現象が発生しました)。
現状ではこれ以外に、
- 「Recent content」ブロックによる直近のコンテンツ一覧が編集やプレビューでは動作するがパブリッシュすると動作せずに空白となる。
- インラインイメージのブロックが動作しない(WordPress版ではイメージの選択・アップロード画面に移動)。
などの不具合が検証環境では発生しています。
以上のようにクラシックエディターよりはかなりリッチな内容のページが作成できることが確認できました。また「Drupal Blocks」として現状では直近のコンテンツまたはコメントの一覧やオンライン中のユーザーリストなどの15種類のブロックが提供されており、従来ならばBasic PageとBlockモジュールの組み合わせで編集していたようなページもGutenbergだけで作成できる場合もあると思います。
ParagraphsモジュールをインストールしてGutenbergのブロックに相当する各種のparagraph typeを事前に作成しておけばページ編集時に自由に任意の数のparagraph typeを追加できるようになるのでGutenbergと同様な複雑な構成のページを作成できます。しかしParagraphsを用いたページ編集はGutenbergに比べるとWYSIWYGではなくプレビュー画面と編集画面の切替が発生するので編集効率や操作性は悪いというのが実感です。
もちろん限界もあります。構成要素が自由に配置できるとなるとOneNoteとかPowerPointみたいなページが作れると一瞬期待しましたが残念ながらレイヤーの概念がなく、またOfficeでは標準装備の図形の描画機能もないのでGutenbergだけで実用的なプレゼンスライドを作成するのはまだまだ難しいようです。
新しいテキストフォーマットの活用
実は環境設定のテキストフォーマットにGutenbergを使用するテキストフォーマットを追加すればもう少しコンテンツ編集の自由度が高まります。
テキストフォーマットの追加の画面でテキストエディターとしてGutenbergを選択すると以下の4種のフィルターが使用可能になり、どのDrupal Blockを使用するか、どのようなURLの埋込みを許可するかなどコンテンツのレンダリングを制御できます。
(これらのフィルター以外にデフォルトのCKEditor用のフィルターも「有効なフィルター」として表示されていますがそれらの指定は殆どが無効です。)
このテキストフォーマットに任意の名前を付けて保存するとフォーマット付き長文の編集でその名前が使えます。これにより実際は「Enable Gutenberg experience」をオンにしなくても下図のように任意のコンテンツタイプでGutenbergが使えると言うことになります。一方「Enable Gutenberg experience」をオンにすると下図のようなテキストフォーマットの選択メニューがなくなり最初の長文フィールドのテキストフォーマットが自動的に「Gutenberg Blocks」(Gutenbergモジュールインストール時に設定されるテキストフォーマット)に設定された「コンテンツエディターとしての使い勝手は?」の章で示したような編集画面になります。
従って複数のフォーマット付き長文を持つようなコンテンツタイプもこのようなテキストフォーマットを追加後は以下のように通常の編集画面内でエディターを使い分けて編集できるようになり操作性が向上します 。
ただし、現在のところ編集画面内で複数のGutenbergエディターを選択しても最初に選択したフィールドのエディターでしか入力できないようです。例えば上の図で下にあるDetailフィールドでGutenbergを選択しても以下のようになるだけでDetailフィールド用のエディターが表示されません。
実はこのようなテキストフォーマットを追加するとコメント入力のエディターでもGutenbergが選択できるようになり入力もできるのですが残念ながら現在のバージョンでは保存やプレビューボタンが動作しません。
検証環境
OSはmacOS Mojave (バージョン 10.14.2)です。WordPressでの検証にはBitnami ( https://bitnami.com/stack/wordpress/installer )からダウンロードしたMac版のインストーラを用いて以下の環境で確認しました。
- WordPress 5.0.2
- Apache 2.4.37
- MySQL 8.0.13
- PHP 7.2.13
Drupalについては https://dev.acquia.com/downloads からダウンロードしたAcquia Dev Desktopをインストールした以下の環境を用いました。
- Drupal 8.6.5
- Apache 2.4.29
- MySQL 5.6.41
- PHP 7.2.9
DrupalのGutenbergモジュールは2019年1月10日公開の8.x-1.0-beta5を使用しました。 ベータ版ですので既存の環境へのインストールは容易に原状復旧できるように準備した上で慎重にお願いします。
関連コンテンツ
- 第 13 回 Drupal の権限設定と WordPress や Movable Type との比較
- 第 11 回 Drupal と他の CMS のクエリビルダー機能を比較
- 第 9 回 Drupal のブロックシステム
- 第 7 回 Drupal のボキャブラリとタクソノミーの使い方
- 第 6 回 Drupal にコンテンツを投稿してみる
- 第 3 回 Drupal の特徴
- 第 2 回 Drupal はフレームワークか?CMS か?他の CMS との比較
- 第 1 回 歴史に見る Drupal の DNA
- サーバーサイドエンジニアが初めてDrupalを触ってみた
- Drupal vs WordPress SEOとパフォーマンスの観点から比較
Drupal 初心者講座バックナンバー
- Drupal 9/10 初心者講座
- 第 1 回 歴史に見る Drupal の DNA
- 第 2 回 Drupal はフレームワークか?CMS か?他の CMS との比較
- 第 3 回 Drupal の特徴
- 第 4 回 Drupal 9 / 10 のインストール (1)
- 第 5 回 Drupal 9 / 10 のインストール (2)
- 第 6 回 Drupal にコンテンツを投稿してみる
- 第 7 回 Drupal のボキャブラリとタクソノミーの使い方
- 第 8 回 コンテンツ管理における Drupal と他の CMS との比較
- 第 9 回 Drupal のブロックシステム
- 第 10 回 Drupal の標準クエリビルダー Views の使い方
- 第 11 回 Drupal と他の CMS のクエリビルダー機能を比較
- 第 12 回 Drupal の多言語機能と他の CMS やサービスとの比較
- 第 13 回 Drupal の権限設定と WordPress や Movable Type との比較
- 第 14 回 Drupal のテーマシステムについて
- 第 15 回 Drupal の拡張モジュールの選定と使い方
- 第 16 回 Drupal をもっと知りたい方に向けた各種情報