第1回群馬WordPress Meetup参加レポート

第1回群馬WordPress Meetupに参加してきたので、そのレポートを軽くまとめます。

LT

1. Gutenbergにすると古いデータはどうなるの？

• エディタが変わる
  • ブロックを積み重ねるようなイメージ
  • 今までのエディタとはほぼ別物
• 今までのサイトを開くとどうなるのか
  • 投稿
    • 1つのクラシックブロックに収まる
    • 編集が続けられる
      • 「ブロックへ変換」でブロックにすることができるが……プラグイン時代とは違ってクラスは引き継がれるようになった。ただし、完全互換の保証はないので、避けた方が良い
    • クラシックブロックは「HTMLとして編集」するとクラスが消えることがあるかもしれない(未確認情報)
      • カスタムHTMLで編集した方が良い
  • 固定ページ(HTMLを入れ子にしてレイアウトを整えたもの)
    • 投稿と同様
  • カスタム投稿(投稿的なもの)
    • カスタム投稿はGutenbergではなく今までのエディタで開く
    • REST APIに対応しているとGutenbergで開く(Show in REST)
  • カスタム投稿(カスタムフィールドあり)
    • 同様
  • カスタム投稿(本文なし、カスタムフィールドのみから成る)
    • 本文を無効にしているとShow in RESTをオンにしても今まで通りのエディタになる

所感

4.9.8までの頃よりもさらに進化している様子が窺えました(HTMLタグのクラスを保持するようになったり)。ただし、やはりどうしても完全に互換性を保つことができるという保証はない(それまでの作り方に大きく依存するため)ので、ブロック変換などの作業は慎重になった方が良さそうだと感じました。

また、LTとは言いつつも途中のデモで参加者(私含む)から質問が多く寄せられ、発表者と聴衆の情報交換が盛んに行われていたため、「WordPressのコミュニティで相互に情報交換・交流して知識や技術を深める」という醍醐味が凝縮されていた発表だと感じました。

個人的にはGutenbergはREST API経由でやり取りしているということを初めて知ったので、自分自身もGutenbergをより深く知ることができたと思います。

2. レガシーな環境からWordPressを移行した話

自分の発表です。どうやってもギリ5分を越えてしまう内容だったのでどこを端折るか迷っていたのですが、直前のLTが意見交換で大幅に時間をオーバーしていた(自分も質問したため片棒を担いでいました。すみませんw)ため、あまり気にせずに発表することにしました。

参加者の方々に何か残るものがあったのであれば、それだけで発表した甲斐があったと思います。

内容は以前のブログ記事に上げたもののダイジェスト版という形です。

3. 20分で作るGutenbergのブロック追加プラグイン

• ブロック
  • 静的ブロック: 見た目がそのまま表示される
    • 見出しブロック、段落ブロックなど
  • 動的ブロック: 外的な要因により動的に変化するブロック
    • ウィジェット: 最新投稿x件など
    • ショートコードブロック
• 必要な言語・知識
  • PHP
  • JavaScript
    • ES6以降の記述ができた方が良い
    • let, constやアロー関数(const hoge = (args) => { /* 処理 */ }のような形)
      • 最近の開発はこちらの記述方法が多い
  • React.js(オプション)
    • facebook社製のJSフレームワーク
      • AirBNB, Slack, Dropbox, Instagram等でも採用
      • GutenberugのブロックはReact.jsのComponentを使って構築する
  • JSX(あった方が良い)
    • React.jsで使用される構文記法
    • HTMLをJS内でほぼそのままの形式で記述できる
  • ES6やJSXをトランスパイルできる環境(node+Babel)がないと開発は厳しい
• 環境
  • node.js(必須)
    • ターミナルやコマンドプロンプトの操作が必要
      • 黒い窓とお友達になろう
  • babel(必須)
    • ES6をブラウザでも動くES5の構文にバックさせる
  • webpack
    • モジュールバンドラ&タスクランナーとして優秀
  • 環境構築のハードルが高め
• Create Guten Blockで頑張る
  • Before Gutenberg – WPerが知っておくべきES6とReactのこと – Capital P
  • 奇しくも翌日にCapitalPで記事が公開されたので参考に: Before Gutenberg – Create Gutenberg Blockでさくっとブロック作成 – Capital P
  • block.jsを編集してブロックの動作を作成。cssはScss。動的ブロックや管理画面にJS・cssを追加する場合はinit.phpにそれぞれ内容を定義する

$ cd /path/to/wp/wp-content/plugins/
$ npm create-guten-block {プラグイン名}

## プラグイン生成

$ cd {プラグイン名}
$ npm start

## ソースファイルのウォッチ開始。開発準備完了

所感

Gutenbergのブロックを自分で作成する場合、どのような手順が良いか迷っていましたが、やはりCreate Guten Blockが楽そうなのでこれで一度試しに作ってみようと思いました。

もくもくタイム

LTの後もくもくタイムに入りました。

Create Guten Blockで簡単なブロックを作成しようかと思っていたのですが、鯖缶あるある話やWeb制作あるある話であっという間に時間が溶けていました。

その中で、いくつか有用なツールについて情報交換ができたので、有意義な時間になったと思います。

サイトの改ざん防止・健全性について

• Wordfence Security – Firewall & Malware Scan | WordPress.org
  • 重いが、一通りチェックしてくれる
• Health Check & Troubleshooting | WordPress.org
  • コアとの差分でチェックしてくれる

懇親会

今回は時間の許す限り最後までいることにしましたが、そのおかげでかなり濃い話ができたと思います。やはり、こうした機会をチャンスに変えることができると良いと感じました。