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

2018年6月24日日曜日

WordBench 大阪 6月(2018-06-23)に登壇して #wbosaka #wordpress

筆者調べでは、第77回にあたる今回、WP-CLIのハンズオンをすることにしました。少し前に開催された WordCamp Osaka 2018 で、WP-CLIのセッション(「WP-CLI を活用したメンテナンスフリーな WordPress の管理運用」)をしたのですが、その資料を作成しているとき、これは言葉だけでは凄さがあまりわからないので、是非体験してほしいなぁと思ったこと、そのセッションに出られないのが残念だというメッセージをもらったことがきっかけでした。WordCamp Osaka 2018 で宣言したとおり、本日開催することができました。




当初定員15名に対して即時に定員オーバーしてしまって、25枠に増やし、それでもオーバーしたので、直前には30名まで拡充しました。最終的に、当日25名(+メンター、運営メンバー)の参加登録がありました。これもメンターそして運営の皆様をあわせて 9名もの方々のフォローがあってこそです!

当日も8テーブルありましたが、ほぼ埋まるぐらい盛況でした、ありがたいことです!

プログラム




セッション



セッション内容は、WordCamp Osaka 2018で発表した内容をベースに、ハンズオンを見据え修正しました。。ハンズオン資料をみて事前にハンズオンしてみたメンターから指摘があった、Macが古すぎると WP-CLIのPHP 5.3.29 を満たさない PHPがあって躓くよ〜ってのことに対する注意をすることにしました。実際には php -v をしてもらって、 5.3.29 未満なら、MAMPや homebrew など、仮想環境ではない Mac上で動作することのできる php をセッション中にいれてもらっておくという感じです。こういうのはメンターいないと難しいですよね。メンターの皆様ありがとうございます。


ハンズオン


これまたメンターから「当日」の直前にいろいろ指摘をもらいました。
それぞれ、なるほどーと思いました。WordPress のハンズオンって、WordPress が入っていることを前提に進めることが基本だったので、今回ガチに WordPressをインストールするところをするので、各端末の個別問題なんかの影響をもろに受けるんですよね。パソコンは生き物ではないですけど、生き物のように十人十色は反応を示すこともあります。そういうところも面白いのですが、ハンズオンでは大変ですね (^^;

基本的にスライドを見ながらやってもらえれば、出来る内容にしています。
もちろん、事前にメンターがスライドを見ながらハンズオンされた結果、出来たけどひっかかったところもあったということでした。また、ハンズオン中、およびその後から様々な指摘を受けました。

さらにMAMP(Mac)の利用者ごめんなさい。
mysql の Path設定をうっかり(筆者は /usr/local/bin/mysql を別途いれてた)忘れていて、wp-installer.sh がうまく実行できないことがありました。

これらすべての指摘と回答については、


のコメント欄にまとめています!

P. S.
SpeakerDesk ってスライド修正してアップしても、ダウンロードは反映されていますが、スライド表示は修正されないんですよね。。仕様なのかなぁ。なので一度スライド消して新規アップしなおしました。もし23日の時点でスライドへのリンクをはったり、スライドを埋め込んだりしている場合には、変更してくださいませー。


2018年6月24日 @kimipooh

2018年6月3日日曜日

WordCamp Osaka 2018 に参加・登壇して #wcosaka2018 #wordcamp #wordpress

今回は、スピーカー&実行委員として参加しました。



 
実行委員としては、広報チームで英訳担当をし、ブログの英語翻訳、海外スポンサーや問い合わせなどに対する主に英語での返信の英文チェックや作成をしていました。

ウェブサイト


英語情報はほぼすべて(1記事以外)担当するなど、昔に比べて英訳のスキルも上がったなぁと思いました。

関連情報(後付け)


あとで見直して備忘録として残しておきたいリンクをまとめておきます。



前夜祭にて


スピーカーと前日準備した実行委員が集まって前夜祭をしました。梅田ダンジョンに少しハマってしまい、抜け出すのに20分ぐらい右往左往してしまいました。方向音痴にとって夜は鬼門ですね...20時開始で、22時過ぎに帰りの電車がやばくなってきたので、先に帰りましたー。いろいろ話をきけて楽しかったです。

6月2日 DAY 1 (セッション)





さて、さすがに前夜祭で土地勘がついたので、梅田ダンジョンを抜けるのは一瞬でした。また前夜祭の時点で500枚のチケットが完売したという話をきいて、「おおおーー」とテンションがあがっていたのですが、当日朝から沢山の人が来て盛り上がっていました。多くのセッションで「部屋に入れません」「部屋から出られません」というすし詰め状態になるほどの盛況ぶり!



この日は、朝8:15 に集合し、当日スタッフとして撮影とタイムキーパーを若干手伝いつつ、登壇しました!WordCamp としては2年ぶりの登壇です。

登壇:WP-CLI を活用したメンテナンスフリーな WordPress の管理運用




WP-CLI との出会いは、2014年1月8日の自身がメモったブログあたりから使い始めたのかなぁと思います。大抵新しいシステムを利用するときは、技術的なメモを備忘録としてブログにして残すようにしているためです。それから、2014年8月24日の WordBench 大阪でコマンドから「DBの置換ができるじゃん!!」と衝撃をうけて、本格的に使い始めたのは覚えています。

それからずいぶん立ち、WP-CLI は WordPress をメンテナンスする上で無くてはならないツールとなりました。そこで今回持っている知識を伝えたいなと思って登壇したのでした。

  • プログラム:https://2018.osaka.wordcamp.org/session/wp-cli-maintenance-free/
  • ツッコミ(2018-06-08)
     Facebookのつぶやきで、更新手順は「本体更新→プラグイン更新」じゃないと危ないよっと WP-CLI コミッターの一人である宮内氏からツッコミを受けてなるほど~なーと思ったので修正。セキュリティソフトなど先に周辺ソフトから更新してからOSのアップデートをすることが日常的になっているので、プラグイン→本体の順にしていたのですが、むしろプラグインなどがWordPressの最新機能を使っていて、本体が古いままプラグインを先に更新すると、コケてしまうことがよくあるそうな。。。
  • スライド:




40名の部屋になんと60名が来てくれて大盛況でした!!
WP-CLI を知っている人が半数に満たないぐらい、使ったことがある人は10数名ぐらいな感じでした。デモを含めて話すこと 36分ぐらいで何とか収める事ができました。



このハンズオンを、6月の WordBench 大阪でやりたいなーと計画してます。

閉会式



多くの人が集まって、実行委員長の話に耳を傾けた後、実行委員、参加者のみんなで記念撮影をとりました!!!

撮影:WordCamp Osaka 2018 実行委員会
画像ソース:https://twitter.com/Next_Season/status/1002835799342104576


懇親会




閉会式後に同会場にて、懇親会が開催されました。250人ぐらいが登録していて、参加できなかった人たちもいるぐらいの盛況ぶりでした。

6月3日 DAY 2 (コントリビューターデイ)


※下記で顔が鮮明に写っている方々は、公開の許可を得てます。実行委員、許可を得ている方々以外は、顔をぼかしています。




テーマ・プラグイン翻訳(世話人:筆者)



Contact Form 7 で有名な三好氏と世話人をする予定が、三好氏のご都合で急遽一人世話人となり、あたふたしながらアドリブで対応しました。ちょうど 2016年の WordBench 大阪で発表した「WordPress の新しい翻訳システム「GlotPress」を使ってみよう!」というハンズオンの資料があったので、これを参考に、「UI 変わっているぞー」とツッコミを受けながらも、冒頭20分ぐらいやり方、注意点を説明。途中、質問を受けたり、難しい訳を一緒に考えたり、しながら一日を過ごしました。

始まる20分ぐらい前に急遽用意したリンク集


あとは、WordSlack (Slackを使ったチャット)の #translate チャネルで追加資料を提示してもったりしました。
=== こんな感じで ===
そちらにどのような方がいるのか分かりませんけど、どちらかというと取り組みが容易なのはテーマのほうでしょう。

どのテーマでも似たようなフレーズが使われるので、Twenty Seventeen などを流用して翻訳を進めることができます。
---
WordPress Translation Day 2016 日本語翻訳
---
人気プラグインTOP120の未翻訳情報です: 
Plugin Top120
================

などなど。


運良く、日本語のプラグイン翻訳を承認できる権限をもっている @hinaloe さんが参加してくださっていたので、実際に GlotPress で翻訳したものについて、その場でチェックしてもらって承認、拒否をした上で、参加者とともに「何故拒否したのか」を含めての説明と、どうしたらよいのかも含めてディスカッションをするなど、私も含めて参加者にとってとても有意義で刺激的な一日になったのじゃないかなと思います。
またチームを結成して1つの翻訳を分担したり、途中から来た人に自分が知り得た情報をもってやり方を教えてみたりなど、自主的にコミュニケーションを取りながら進めていたのも印象的でした。はじまったときは、20数名あつまったうち、翻訳経験をもっている人は3名でしたが、全員何らかのコントリビュートができたようで、よかったです!

活動内容(WordSlack から抜粋)


WordSlackは誰でも自由に参加できます。きになるようなら参加してみてください!!

==== テーマとプラグインの翻訳チームの活動 ====
katsushi-kawamori [12:51 PM]
以下のプラグインがアップデートで30くらい訳が追加されたので追加翻訳しました。本日は帰ります。あとはよろしくお願いいたします。 https://translate.wordpress.org/locale/ja/default/wp-plugins/wp-gdpr-compliance

kosgis [1:52 PM]
All-in-One WP Migration の本体翻訳しましたー!承認お願いします!(/・ω・)/
https://translate.wordpress.org/projects/wp-plugins/all-in-one-wp-migration/stable/ja/default?filters%5Btranslated%5D=yes&filters%5Bstatus%5D=waiting

kitakado_h [2:10 PM]
Debug bar の Readme を翻訳しました。よろしくお願いいたします。 
https://translate.wordpress.org/projects/wp-plugins/debug-bar/stable-readme/ja/default

kosgis [2:20 PM]
Duplicate Post の本体翻訳しました。よろしくお願いします!
https://translate.wordpress.org/projects/wp-plugins/duplicate-post/stable/ja/default?filters%5Btranslated%5D=yes&filters%5Bstatus%5D=waiting

sinack [2:43 PM]
Better Admin Bar の翻訳しました。宜しくお願いいたします。
https://translate.wordpress.org/projects/wp-plugins/better-admin-bar/stable-readme/ja/default

J.Sugiyama [3:02 PM]
Hello Dollyのプラグイン、埋まってなかったので翻訳埋めました
https://translate.wordpress.org/projects/wp-plugins/hello-dolly/stable/ja/default

Kana.K [3:06 PM]
Nuptialというテーマの翻訳をしました。よろしくお願いいたします。
https://translate.wordpress.org/projects/wp-themes/nuptial/ja/default

Yukinobu Asakawa [4:06 PM]
wp-simple-booking-calendarの翻訳をしました。よろしくお願い致します。
https://translate.wordpress.org/projects/wp-plugins/wp-simple-booking-calendar/dev-readme/ja/default

shintaro.m [4:20 PM]
basicstoreというテーマの翻訳をしました。よろしくお願い致します。
https://translate.wordpress.org/projects/wp-themes/basicstore

sinack [4:39 PM]
Better Admin Barの翻訳しました。承認お願いいたします。
https://translate.wordpress.org/projects/wp-plugins/better-admin-bar/stable-readme/ja/default

shuto0125 [4:40 PM]
All-in-One WP Migrationというプラグインの Stable Readme (latest release)を翻訳しました。
URLに関する(?)warningが出ていますが、確認よろしくお願いいたします。
https://translate.wordpress.org/projects/wp-plugins/all-in-one-wp-migration/stable-readme

kosgis [5:07 PM]
WP-PageNavi の翻訳もしました。よろしくお願いします!

Shu Kobuchi [5:08 PM]
Bitcoin Addressの翻訳を行いました。
https://translate.wordpress.org/projects/wp-plugins/bitcoin-address/dev/ja/default

kosgis [5:08 PM]
本体:https://translate.wordpress.org/projects/wp-plugins/wp-pagenavi/stable/ja/default?filters%5Btranslated%5D=yes&filters%5Bstatus%5D=waiting

========

他のチームの発表をきくと、数名のテーマレビュアーが誕生したり、Coreにマージされたり、WP-CLIのマージをしてもらったりなど皆さん結構真面目ですごい!と思いました。
他のチームもホットですね!!!

WordBench 行動規範について



WordSlack で議論されてる WordBench の行動規範についてのディスカッションが行われました。

どういうことか


※以下、筆者が感じ取ったことを言葉にしたものです。

WordBenchの裾野は現在かなり広がっている。現在の行動規範は、いくつかトラブルが起こりそうなことがでてきて、ちゃんとガイドラインを明示したほうがいいだろうというスタンスで公開された。しかし、その周知や認識が必ずしもうまくいっていない現状がある。そのため、今後どうしていきたいのか、どうしたほうがいいのかはみんなで話ってより良くしていったらいいんじゃないかという声が出てきているということ。

筆者も意見をいいましたが、総じて言えることは「今後どうしたら良くなるのか」という点でした。今後議論が深まっていくことでしょう。筆者も今後注目して、なにがしかの関わりをもてたらいいなと思いました。

昼食


何人かと高架下あたりの店をみてたら、なんとかなりのメンバーが集まっていた店があったので、合流しました。WordCamp Osaka 2018 のブログ「うめだランチマップ」で紹介されていた店「BARBARA market place」でした。

結構お腹がいっぱいになりました!



最後に!


最後に参加者とともに記念撮影!!みんなお疲れ様でした!!!でもブログを書くまでが WordCamp!!みんなもう少し頑張れ〜

撮影:WordCamp Osaka 2018 実行委員会

2018年6月3日 @kimipooh