WordPress新エディタ「Gutenberg」をさわってみた|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。Tips2019.04.03WordPress新エディタ「Gutenberg」をさわってみたwingdoorシェアツイートブックマークLINEBPSの福岡拠点として一緒にお仕事させていただいてます、株式会社ウイングドアのヤマウラです。2018年度の4月に入社し。今回のテーマはWordPress新エディタ「Gutenberg」がテーマです。みなさまはもうお使いになられましたでしょうか?リリースから3ヶ月ほど経った新エディタです。私は、バージョンの古いWordPressは少しだけ触ったことがある(雀の涙程度です)のですがWordPressが5.0にアップデートされてから、一度も使用したことがありませんでした。今回記事を書ける機会ということで、折角なので今触っておこうと考えた次第でございます。※今回の記事では、WordPress5以降へのアップデートによるセキュリティ等のお話はしておりません。Gutenbergに変更なんといっても注目したいのは、WordPressの標準のエディターが「Gutenberg」へ変更されたことです。ドイツ語のご挨拶のような名前ですが、正体はビジュアルエディターとなります。(調べた感じドイツの昔の人のお名前が由来だそうです。比較的新しい変更だと言えます。実際に触りつつ皆様にご紹介できればなと思います。編集画面に行った際のGutenbergの画面とGutenberg以前の画面を見比べてみようと思います。以前までの編集画面タイトルの入力欄と記事の入力欄が分かれており、ビジュアルモード・テキストモードに切り替えるタブがあります。右側には公開や更新をするための「公開」の項目や、カテゴリー・タグの選択、アイキャッチ画像の設定が行えます。Gutenbergの編集画面それに対して新しい編集画面を見てみます。・・・・・・なんだかすっきりとしています。私が最近見慣れている編集画面はどこにあるのでしょうか「新規投稿を追加」とか「ここにタイトルを入力」とか。今すぐ更新してください。」とか(えっもう彼は私の知っているワードプレスさんじゃないということがわかりました。比較さて、画面を比較してみますと、以前のエディタに情報が多かったわけではないですが、Gutenbergでは真っ白感が強いですね。なんだか不安になります(抽象的ですみませんよくよく見てみると右側のサイドバーなんかは閉じられていてシンプルに表示されています。見慣れない文字として「ブロック」というものが見られます。編集ツールまた、以前あった編集ツールの一覧も5つほどの項目にシンプル化されていました。以前までの編集ツールこのツールで、文字を太字にしたり項目をリスト化したりできていました。新しい編集ツール新ツールでは、見た目上では太字(B)や斜体(I)、文字の中央寄せと行った機能は見受けられず、5つの項目が並んでいるのみでした。新ツールの「+」マークは、「ブロックの追加」となっておりました。先ほど白画面が多く不安と言いましたが、普段ある機能が確認できなくなっている点も私の不安を煽る一要素なのかもしれません。「ブロックの追加」の中身を見てみる何ができるのか見てみようと投稿初期画面の+(ブロックの追加)を押してみます。するとこんなメニューが出てきました。何やらいくつか種類があるようです。全ての項目を見てみようと中身を見ます。見させていただきました。以下各項目の中身です。一般ブロックいわゆる標準的なブロックとなります。「リスト」ではリストを作成したり、「画像」ではメディアの追加が行えます。フォーマットこちらはソースコードを挿入したり、行と列を指定してテーブルの作成が行えます。「カラム」では記事を列で分けることができたり、「メディアと文章」では画像と文章を1ブロック内で取り扱い、CSSで調整せずとも画像の横に文章を書くことができました。ウィジェットWordPressを始めた時によく見る項目「カテゴリー」や「アーカイブ」「コメント」などをウィジェットとして任意の場所に設置ができます。埋め込み動画やSNSの情報を載せることができます。興味のある方はぜひ他の機能を触ってみてください。機能一覧につきましては、こちら記事に既にまとめていらっしゃる方がおりました。テーブルが作れるようになっているとは知りませんでした。今はそれがデフォルトの機能としてあるようですリンク先を決めたボタンの配置も可能ですし、「クラシック」というブロックでは見慣れた以前のツールバーも見られました。ボタンボタンの中身の文字は編集可能で、ボタンを押した際の飛び先のリンクの指定も同時に可能です。クラシック1つのブロックとして、以前の編集機能が使えるようになっています。Gutenbergが扱いにくい!という場合は、ブロック単位ではなくエディタ自体をクラシックの状態に戻すことも可能のようです。プラグインのサポートは、2021年まで続きます。ありますので、プラグインを導入すれば今までと同様に編集を行うことも可能ですね。色の設定、テキストの設定、また追加CSSの設定ができます。実際に触ってみました。結論から言いますと、私はこのエディタが好きになりつつあります。一通り試したのですが、今回はその中でお気に入りの2つを載せたいと思います。1.「スペーサー」ブロックこちらは名前の通り、スペースをあけてくれる機能になります。わかりにくいですが、画像の少し灰色の部分がスペーサー部分になります。ドラッグによって簡単に高さ、幅の変更が可能です。今まで要素の下や上にマージンなどでとっていた空間を管理画面から行えるようになったのですね。2.「カバー」ブロックこちら画像をアップロードしてその上にテキストを書き込めるというものです。後ろの画像は自動的に暗くなるようなので、シックでカッコ良くなります。後ろの画像の明るさが調整できるのかは、触っている限りではわからなかったので調査が必要です。管理画面から直感的に操作しやすくなっている管理画面からできることが増えた!Markdown形式にも対応をしている気になった点タイトルと記事編集の枠は分離しておらず、圧迫感がなくむしろ画面は広くなったのですが、それが逆に慣れませんでした。「詩」というブロックがありました。考えにはなりますが、より直感的な操作ができるようになったと思います。慣れていくのに時間はかかるでしょうが、使いこなせれば非常に便利なエディターです。非常に便利なものでしたので、みなさまもお使いになってはいかがでしょうか?最後までお読み下さいまして、ありがとうございました。編集時点での見出しの構造も確認しやすくなってました。2週間ほど前の記事にはなりますが、WordPress5.2からブロック管理機能なるものがつくそうです。読めておりませんので読み掘ろうと思います。RailsやPHPを活用したwebサービス、webサイト制作を中心に、スマホアプリや業務系システムなど様々なシステム開発を承っています。2019シェアツイートブックマークLINEこの記事を書いた人wingdoor株式会社ウイングドアは福岡のシステム開発会社です。スマホアプリや業務系システムなど様々なシステム開発を承っています。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。