2018年9月22日土曜日

[枚方] Kansai WordPress Meetup #1 に参加して(9/22)#WordPress #Meetup #kansai

WordBench が終了することを受けて、その関西における後継イベントとなる Kansai WordPress Meetup が立ち上がってから、初めての会合ですね。ちょうど、Gutenberg に切り替わった時に管理している WordPress サイトにどのような影響を与えるのかを含めて、知りたかったので行ってきました。場所も枚方公園近くということで、京都からだと近いんですよね!



会場





最初に建物の写真を見ておくと、すぐに見つけることができると思います。そうじゃなければ通り過ぎる可能性があるので注意!会場はこの建物の4F です。枚方公園が一望できる景色の良いところでした。

最初の挨拶




WordBench 大阪のモデレータをされていた GOUTEN さんが Kansai WordPress Meetup についての一通りを、角田さんが 枚方で開催するにあたってを説明された。枚方では、なるべく初心者向けにしたいなとおもいつつ、テーマやプラグイン開発についてもして、沢山の人に発表してもらいたいとおもっている。2, 3ヶ月に1度ぐらいのペースにしたい。登録数をみると 16名登録、そして16名全員参加!でした!皆さんモチベーション高い!


プログラム




用意した環境


MAMP に素状態の WordPress と実際に運用しているサイトのクローンを用意しました。会場ついてからクローンしたので、始まるギリギリの時間になってしまいました。 Local by Flywheel を使おうとしたら、アップデートが走ってサイトを作成したらエラーになるなど、えええーってなったので急遽 MAMP を使ったのでした。

とりあえず Gutenberg プラグインを入れておきましょう。

始まり!


最初に自己紹介をさらっとした後にセッションが始まりました。
Gutenberg についてわからないことを聞きたい、触ってみて便利だったのでより詳しく知りたい、WordPress を仕事として使い始めた(これから始めたい)ので、詳しくなりたい、クライアントに Gutenberg をどのように案内すればいいのか知りたいなど、いろいろな目的で参加された方々がいました。

さていつものことですが、下記は筆者が聞いた発表内容をまとめたものです。
そのため、必ずしも発表者の意図通りの内容ではないかもしれません。
また筆者のメモは # を先頭につけてます。

『Gutenbergが従来のエディタとどう変わるのか?』:岡田 大誠氏





WordPress 5.0 から標準搭載されるエディタ、でステージ1から3の段階(最終的にはページビルダーような形になるのか?)で計画されている。
記事の中身は、ブロックを積んでいくイメージ(#PowerPointのような感じか、イメージのように見える。)。Enter を押すとブロックが増えるというイメージ。note というサービスに近いそうだ。

  • ブロックごとの設定ができる。
  • 画像のサイズ変更はメディアではなく、画像のブロックで設定するように変更された。
  • カラムはβ版のようで、3カラムとかすると変になったりして、まだ不安定。
  • プラグインをいれれば、旧エディタに戻すことができる
     # Disable Gutenberg プラグインかな。。。
     # 手動だと https://digwp.com/2018/04/how-to-disable-gutenberg/ あたりか
  • 一部のテキスト色変更が難しい
  • スポットライトモードが追加されていた。
  • ブロックの並び替えがドラッグ&ドロップができるようになっていた。
一ヶ月前に触って、今触ると大きな進化がしていることが実感できるので、今後もどんどん進化していくよ!

注意点


  • pre コードにご注意(ブロックで使われる場合あり)

「更新に失敗しました。」といってプレビューも公開もできない


これ手持ちのローカル環境にクローンしたサイトで出ました。これはちょっと致命的。原因を調べます。
をみると
===
[原因]
カスタムフィールドと連動させていたPHPファイルに、投稿画面内にechoする記述があったため。

[解決策]
echoを消す
===

だそうだ。。。とはいえ、テーマは全部外注して作成してもらったもの。これはサイトによっては更新できないという悲鳴があがりそうで怖いな...
やり取りによって React 等 API を使っているので GETとPOSTしか許可しないサーバーだとうまく動かないようだ。。サーバーログをみると

[Sat Sep 22 15:49:42 2018] [error] [client ::1] script '/Applications/MAMP/htdocs/index.php' not found or unable to stat, referer: https://localhost/info-back/wp-admin/post.php?post=9148&action=edit

これは関係ありそう。でも /Applications/MAMP/htdocs/info-back/ にクローンしたんですけど、なんでかなー。

ソースをみると
<li class="wp-first-item wp-has-submenu wp-not-current-submenu menu-top menu-top-first menu-icon-dashboard menu-top-first" id="menu-dashboard">
<a href='index.php' class="wp-first-item wp-has-submenu wp-not-current-submenu menu-top menu-top-first menu-icon-dashboard menu-top-first" aria-haspopup="true"><div class="wp-menu-arrow"><div></div></div><div class='wp-menu-image dashicons-before dashicons-dashboard'><br /></div><div class='wp-menu-name'>ダッシュボード</div></a>
<ul class='wp-submenu wp-submenu-wrap'><li class='wp-submenu-head' aria-hidden='true'>ダッシュボード</li><li class="wp-first-item"><a href='index.php' class="wp-first-item">ホーム</a></li><li><a href='update-core.php'>更新 <span class='update-plugins count-2'><span class='update-count'>2</span></span></a></li></ul></li>

暫定回避としては

  • ln -s /Applications/MAMP/htdocs/info-back/index.php /Applications/MAMP/htdocs/index.php 

として、WordPressのindex.php を /Applications/MAMP/htdocs/index.php に置けば、うまくいくことはわかりました。

これやっちゃうと、複数サイトいけなくなるので抜本解決ではないけど、テストならいいか。。。でも本番サイトではそうはいかないので、もう少し原因を探らないと駄目だな。

ワークショップ『Gutenbergをさわってみよう』


ローカル環境としては、Pantheon を使ってためしましょう!
これは無料だと2つまでサイトを作成できるとのこと。
SFTP, GITを使うことができる。

個人の Googleアカウントを使ってログインし、サイトを1つ作成


大体5分ぐらいかかる。

に移動するので「Install WordPress」を押して、素のWordPress をインストールするプロセスを進む(パスワードはランダム生成されるので、それをメモるのを忘れずに〜)。


おおー、Gutenberg を使うのか、使わないのかの選択画面が出てきますね!
もちろん「Gutenberg をインストール」ボタンを押してプラグインをインストールして有効化します。

ダッシュボードでは、SFTP/Git 経由で自分のテーマやデータをインポートやエクスポートできる



以前の投稿データは、Gutenbergではどのように表示されるか




のように Classic ブロックという位置づけになって入っている。

データベースにはどのように入っているか


ブロックごとに保存されていて、表示時に組み合わせて表示しているので、前の旧エディタよりは読み込みに時間がかかるかもしれない(ものすごいブロック数にした場合)。

エディタ拡張型プラグインはどうなる?


Gutenberg に対応するようにしなければ、動かない。

Gutenberg から旧エディタに戻せるのか


当分は混在できるが、どこまでうまくいくかは未知数。

### ここからちょっとテスト ####
実際に Gutenberg で、Classic ブロック、普通の段落ブロックを混ぜた上で、Gutenberg を無効にすると、本文内に入りますね。。。
Gutenberg で下記のようにする

*Classic ブロック、段落ブロック
Gutenberg を無効化すると、下記のようになる。


画像とかの場合にはどうなるのかなぁ。。。。

なお Gutenberg で作った場合には、、Gutenberg プラグインが有効なら下記のように、投稿一覧でわかるようにはなっています。



### ここまで、ちょっとテスト ####

Gutenberg では コードエディタは使わないほうがいい


Gutenberg がかなりいろいろ追加するから、これの構造を壊す可能性があるから。

まとめ


筆者は、自身の運営サイトのクローンで Gutenberg で投稿データを更新できないという問題があったので、これを解決するためにいろいろやってました。暫定回避策はみつけたので、もう少し探らないとだめですね。でもそれをするきっかけになったのはよかったです!

さて後は懇親会を楽しみます!

2018年9月22日 @kimipooh

Google+ Badge