2019年10月13日日曜日

WordCamp Asia 2020 の会場に行ってみよう!

WordPress の大きなイベント「WordCamp」のアジア地域での開催(WordCamp Asia 2020)が 2020年2月にタイのバンコクである!ということを聞いて、何も考えずにとりあえずチケットを購入したのでした。それから運良く2019年10月にバンコクにくる用事のついでに会場(ICONSIAM)を見てきました!(他の訪れた場所についての旅日記はこちら)

会場にいく方法はいろいろありますが、歩いていくにしても暑い!最寄りのホテル(ヒルトンホテルとか)でないかぎり、交通公共機関やタクシーなどを使うことになるでしょう。筆者はスカイトレイン(BTS)と呼ばれる電車とICONSIAMの無料フェリーを使って行きました。手軽にいけるので会場(ICONSIAM)までのルートを紹介しますね!

電車(BTS)



Siam 駅を中心に2路線しかありません。ここで乗り換えになります。それだけ知っていれば困りません。現金によるチケット購入は硬貨のみで、紙幣から硬貨への両替窓口が必ずあるので心配ありません。駅にはATMは複数ありますし、場所によっては両替屋もあります。

電車(BTS)で Saphan Taksin で下車し、フェリー乗り場からICOMSIAMへ



タークシン橋の手前の駅、Saphan Taksin で下車します。


構内にマップがあります。実際には1番出口から進んだところのフェリー乗り場でしたが、ICONSIAM のアクセス情報には2番出口から出ろと書いてあること筆者はその情報をもとに2番出口から出たこともあり、2番出口からの案内をします。


改札を出ると、船着き場はこちら(To Sathorn Pier)の案内があります。
そのまま進むと2番出口から出ます。


2番出口をでてまっすぐ進みます!

 

どんどん行きましょう!



するとフェリー乗り場につきます。ICONSIAM 行きの無料フェリーは、右側の橋をわたったところでした。上記写真から右手をみると下の写真の感じです。



ちょうどICONSIAM行きの無料フェリーが止まっていました。上部にICONSIAMって書いてあるから一目瞭然ですね!数十分に1度出ているようなので、来ていなければ待つと良いでしょう。



 乗り込みます!



うん、まちがいなく ICONSIAM 行きですね!



船の中はこんな感じ。帰りはライフジャケットなかったので船によっていろいろみたいですね。結構混んでいて立っている人もいます。



濁っている川ではありますが、少し鑑賞していたら、お!見えてきましたね ICOMSIAM。でかいな!8分ぐらいで ICOMSIAMの船着き場につきました。降りる時かなり揺れるので注意〜。



ICONSIAM の船着き場。帰る時はここに並ぶことになります。



ICONSIAMです、でかいっす!高級感バリバリです!
入った第一印象は、高級デパートに迷い込んだかーという場違い感ですが、しかしグランドフロアには庶民的なエリアもあってそちらは安心して楽しめます!



会場となる TRUEICON HALL は7階です。エレベーターは6階までなので、6階にあがってからエスカレーターで 7階にいきましょう!

ICONSIAM内の写真はあえて載せません。それは参加したときに楽しんでもらったほうがよいと思ったからです!あ!でも1枚だけ載せますね。



そう両替です。ICONSIAM のグランドフロア(G)に両替屋があります。レートはまずまずですかね。なおICOMSIAM は G, UG, 1F という感じで、1F の下に2つ階があります。
1F 以上はまさに高級デパートって感じでめっちゃ高いのでお気をつけを〜。

日本からかなりの人数 WordCamp Asia 2020 に参加されるようですね!皆様 2020年2月、現地でお会いしましょう!

2019年10月13日 @kimipooh



2019年9月13日金曜日

Google開発の画像遅延プラグイン「Native Lazyload」を試してみた! #wordpress

試してみよーと思ってすっかり忘れてしまっていた「Native Layload」プラグイン。




をみるとウェブサイトの画像を遅延読み込みすることで全体的な表示速度を向上しようという仕掛けのようです。たしかに最近の画像はスマートフォンが 1000画素を超えるようになってきて数MBは普通に事になってきましたしね!

翻訳


日本語の翻訳はまだ完成していませんでした。ので分かる範囲で翻訳作業をしましたー。1件だけわからないかったので、誰かによろしくーーー

試す!


とりあえず手持ちで管理しているサイトにいれてみました!!
なお、現在この遅延ロードの恩恵を受けられるのは、 Google Chrome のみのようです!
確かに画像の <img>タグに対して、 loading="lazy" 属性は追加されてますね!!

で、速度はどうなの?


Google PageSpeed Insight


プラグインなし


プラグインあり(有効化)


若干向上してますね!

GTmetrix 



プラグインなし





プラグインあり(有効化)


スコアはほぼ変わっていませんが、 Full Loaded Timeがかなり速くなっていると思います。

このテストサイトは画像が少ないのであまり参考にならないかもしれません。
筆者は今週末から海外にいくので、帰ってきたらメインサイトに順次いれてテストしていこうかなーと思ってます!

2019年9月12日 @kimipooh 




2019年7月30日火曜日

WordCamp Asia 2020 のチケット販売が開始されていた #wordcamp

アジアという地域としては初めてになる WordCamp
2020年2月21日 - 23日の3日間開催されるとのこと。そのあたりに用事があるのですが、少なくても1日以上は参加できるはず!ということで早速チケットを購入しちゃいました。

コントリビューターDAYもあるようだし、筆者としても初の海外WordCamp参加なのでちょっとワクワクしますね!

2019年7月30日 @kimipooh

2019年7月27日土曜日

【複数拡張子対応】拡張子アップロード追加許可プラグイン WP ADD MIME TYPES(WordPress) 2.4.0リリース #wordpress

WordPress.org のサポートフォーラムにて筆者が開発し公開している wp add mime types プラグインについて
というリクエストが来ました。内容としては、拡張子が複数ある場合への対応です。
具体的には、 *.min.css や *.min.js などのケースですよね。

wp add mime types の仕様関連

基本、興味を引いたらガッと開発するタイプなので、緊急対応が必要な何か以外は返事が1ヶ月なしとかあります。そのあたりはまったりお待ち下さい。たぶん、そのうち見るでしょう。

WordPress は拡張子が複数ある場合にファイル名をサニタイズにしてしまう

対応自体はそれほど難しくないのですが、WordPressのファイルアップロードに対するフックで、そのあたりをサポートしていないのにはなにか理由があるはず!ということで、WordPress のソースを漁ってみたら

wp-includes/formatting.php の sanitize_file_name 関数内にありました。


まず、拡張子が1つのケース(hogehoge.jpg など)ではサニタイズしません。それは上記のコードで明らかです。では複数の場合にはどうでしょうか。


コメントにも書かれていますが、
  1. 拡張子は一番最後に発見されたドット(.)を起点とする
  2. それ以前に発見されたドット(.)について 2文字〜5文字の範囲かつ許可された拡張子以外なら、ドット(.)の前にアンダーライン(_)を挿入する
の2点です。. が _. になってもセキュリティ面でのサニタイズ処理ではないので、ドット(.)が複数あることに対する何らかのポリシーがあるのでしょう。その理由は少しネット検索しましたが見つけることができませんでした。

しかし、それでは困るケースもあります。ファイル名に複数拡張子がついているケースは珍しくないためです。実際に WordPress でも *.min.css 等で使われているケースがあります。たとえば、自作したコードをアップロードしてサイトで提示したい場合に、ファイル名が *.min_.css となってしまうと、ダウンロードもその名前になってしまって混乱を生んでしまいます。

そうしたことを考えた上で、wp add mine types では複数拡張子に対応することにしました。

アプローチ


最初に考えたのが、次のことでした。しかし、後述する問題があるのでプラグインでは実装しませんでした(実際には実装を試して動作確認までしましたが、やめたという感じですね)
  • ファイル名に存在する拡張子すべてを許可する
こうすることで先程の2番目の条件
  • それ以前に発見されたドット(.)について 2文字〜5文字の範囲かつ許可された拡張子以外なら、ドット(.)の前にアンダーライン(_)を挿入する
の「許可された拡張子以外」になるので、サニタイズされません。

しかしプラグイン側でそれをやると意図しない拡張子も許可してしまうことになります。ですのでプラグイン側では素直に
  1. 拡張子は一番最後に発見されたドット(.)を起点とする
  2. 複数拡張子があるときのみ、サニタイズされたファイル名を修正する(_. を . に変更する)
で対応しました(バージョン 2.4.0)。


ところで、いつのまにか有効インストール数が 2万を超えてるんですね。
最初は勉強会のハンズオン題材にーということで準備、その後プラグイン公開までを目指していたので公開し、ついでだからと仕事で必要だったこともあり使い始めたのが 2013年。途中マルチサイトに対応してくれー対応した)とか、WordPress 4.7.2からうまくアップロードできなくなった(WordPress 4.7.1からデータ内をチェックしてMIME判定するようになり、誤検出とか出てきた。対応した。)とか、いくつかのリクエストを経ましたがもう 6年経ったのですね。シンプルなのですが、割と使っていて今後も対応していければーと思っています。

2019年7月27日 @kimipooh






2019年2月23日土曜日

WordCamp Osaka 2019 を企む会に参加して #wordcamp #wcosaka2019

WordCamp Osaka 2018で利用していた Slackチャンネルで知ったのですが(Twitterでもつぶやかれてましたね)、WordCamp Osaka 2019が始動するということで、企む会に行ってきました。この企む会はキックスタートではなく、WordCamp Osaka 2019に興味があってどういうものだろうと説明をききたい人向けになります。そのため気軽に参加できる会です。



実行委員募集サイト



早速実行委員として申し込みました!
今年も英語翻訳関連を中心にお手伝いできればなと思っています。


企む会に 25名参加表明!



においては25名も、話を聞きに参加したいという表明をした人がいました。実際の
実際に自己紹介をしてみるといつものメンバーだけではなく、興味があるから来たという人もいました。現地参加は16名申し込み中16名だったので、全員参加になったのかなと思います。

100% GPL やチームについての説明!



今年の開催日程はまだ未定


会場の空きがあまりないという事情もあり、まだ予定は未定ということ。
今年は仕事場がが建物改修のため一時退去が必要だったり、その他海外でのイベントなどで6-9月中旬ぐらいは多忙になるので、さてどうなるかなと思っています。

質問!


新しく参加された方から、いくつか質問が出てきた。


  • WordCamp の目的はなんですか?
  • 実行委員って、ウェブに関係ない人が入っても浮かないですか?
  • 規模はどれぐらいですか?

やりたい、面白そうだなという気持ちがあれば、技術あるなしに関わらず誰でもウェルカム!ただ途中から参加するとよくわからない混乱状況(忙しくて)に遭遇する可能性があるので、最初から参加しておいたほうがいいかなという感じの話をされていました。また各チームで過去実行委員をした人から、どういう感じだったのかの感想をそれぞれが話していました。


2019年2月23日 @kimipooh

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