2019年11月16日土曜日

[大阪] Kansai WordPress Meetup Osaka #4 に参加して #wordpress #wpmeetuposaka

my_theme_setup WordPress Meetup が日本で始まってから、なかなか都合がつかなくてずいぶんご無沙汰になっていました。
前回は1年ほど前に参加した


でしたね。今後はもっと参加していかねば!



夜はイルミネーションが綺麗でしたよ!

会場




今回の会場は本町にある「本町オープンソースラボ
ステーツ本町の 8F にありました。
私は初めて訪れた場所でした。方向音痴な私ですが、スマホも新しいものに変更し、以前マグネット式ケースを使っていたためにスマホの電子コンパスが動かなかった問題も解消して無事迷わず参加することができました!

冒頭、GOUTEN さんによる WordPress、Kansai WordPress MeetupWordPress Camp Osaka 2019 などの説明があった。20名ぐらいが参加していたなという感じです。人数が少ないということで、次に自己紹介ありました。海外から来られている人、世界中を旅するバックパッカーなど多彩な人たちも参加してましたよ!



最後に、WordPress Camp Osaka 2019 の紹介が、実行委員長からありました!



筆者も広報チームとして翻訳作業を主にしてまーす!みんな気軽に参加してね!

セッション「ブロックエディタの話をしよう!」



Gutenberg がでたときには、HTMLソースコードが崩れてしまうなど多数ある既存 WordPress サイトを移行し、各担当者にそれを教えるのが大変だったこともあって、 Gutenberg を無効にして先延ばし対応してました。そろそろ本腰をいれて、Gutenberg について詳しくならないとなーと思って参加しました。

実際に聞いた印象として、内容がブロックでデザイン・レイアウトのコーディングをしたことがある中級者レベルのように思いました。React や PHP コードも理解していないとわからなさそうかなぁという感じでですね。WordPress のプラグインは開発していますので PHP コードはわかりますが、React や デザイン・レイアウトは全く分かっていない筆者には理解できず。まぁとりあえずかなり面倒だけど、ブロックをカスタマイズすると利用者にとってはかなり便利そうだなという印象をうけました。

筆者としてはテーマは構築や更新も含めて全部外注等誰かにまかせているので(何十とある管理運用サイトがあるなかで、下手にいじるとおかしくなったり、以後メンテナンスをやらないといけなくなるのは物理的に無理なので)、どういう任せ方をしたらよいのかが理解できたらいいかなと思ってます。

以下、筆者がメモった発表内容です。
筆者はプラグイン開発者ではありますが、テーマについては素人(デザインやレイアウトの中身はわからず、ファイル構造ぐらいしかわからない。React は名前しか知らんぞ!って感じ)ので、その筆者が興味のあったところのみしか紹介していません。また聞きながらメモったので、筆者が理解した内容になります。そのため、実際に発表内容と場合によっては異なってしまっている可能性があります。

ブロックエディタのカスタマイズ


editor-styles は必ず設定するようにしましょう。

function my_theme_setup(){
   add_theme_support('editor-styles');
   add_editor_stype('style-editor.css');
}
add_action('after_setup_theme', 'my_theme_setup');

https://wpdocs.osdn.jp/Editor_Style をみたら、 add_theme_support は必要なさそうかなぁとおもったが、さてどうだろう。

既存のブロックの拡張


つまり class 属性を付与して、CSS でデザインをカスタマイズができないかということ。


wp.blocks.registerBlockStyle で、スタイルの設定を記述する。

const { registerBlockStyle } = wp.blocks;
registerBlockStyle ('core/quote', {
   name: 'hoge',
   label: 'ほげ',
});

とかするといいらしい。
# registerBlockStyleでブロックに独自のスタイルを追加する(Capital P)をみて追加してみたが、うまくいっているように見えない。まぁ筆者がちゃんと分かっていないだけでしょう。一応メモしておく。
テーマの functions.php に

add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_script( 'my-style-selector', get_template_directory_uri() + '/editor-helper.js', [ 'wp-blocks' ] );
} );
を追加して、wp-content/themes/twentytwenty/editor-helper.js に、
const { registerBlockStyle } = wp.blocks;
registerBlockStyle ('core/quote', {
   name: 'hoge',
   label: 'ほげ',
});

を追加したのだが、追加されていないなーという感じ。まぁ現時点で正しく理解できていないだけでしょう。

ブロックを作るための準備


  1. https://github.com/torounit/my-first-block をダウンロードし、展開(解答)する。展開したフォルダを「my-first-block」とする
  2. プラグインフォルダ(wp-content/plugins)に「my-first-block」を移動する
  3. WordPress 管理画面のプラグインに出てきた「my-first-block」を有効化する

ただしこの使い方は説明なかったので分かりませんでした。

ブロックを作ってみよう


本体側(register_block_type)、JS側(registerBlockType)でブロックの登録が必要。


# とはいえプラグインを有効しても使えない。
コードをみただけでは理解できず、これは初心者向けのハンズオンあたりに参加するなどしないと駄目かなぁ。

とはいえ、とにかくブロックを追加してみたい!ってことで、ネット検索している


を見つけた。おお、WP-CLIでできるのか!これはやってみなければということでやってみました。

wp scaffold plugin guten-blocks --skip-tests --activate

として、 wp-content/plugins/guten-blocks を作成した上で、

wp scaffold block first-block --category=formatting --title="hello custom"  --plugin=guten-blocks

をすると、wp-content/plugins/guten-blocks/blocks が作成される

wp-content/plugins/guten-blocks/guten-blocks.php の末尾に

require_once( plugin_dir_path( __FILE__ ) . 'blocks/first-block.php' );

を入れる
するとブロックの「フォーマット」に「hello custom」ブロックが追加されていますね!


ふむふむ、これなら私でもブロックを追加することぐらいはできますね。


管理画面でブロックが簡単に使えるよっていうプラグインのデメリット


  • プラグインを無効にすると、消えてしまう
  • 仕様変更でプラグインが対応しない場合、動かなくなるかも
  • DBに入っていないので、検索なども聞かない

とはいえ、プラグインによる実装は便利ではあるので、ブロック1つごとにプラグインを作ってリリースするなど、影響範囲を限定する方式もあるよ。


まず、React と仲良くなる


ということのようです。

# 確かにその通りだよなぁと思いました。

Block Editor Handbook



あたりに少し和訳しているサイトがありましたね。お!ここをみると


を使うのが便利だということですね、ふむ...


ブロックごとの仕様を定義する必要がある


更新するユーザーが使いやすいか、ユーザーが意図しない動作をしないか、そういうことを考えておく必要がある。

可能な限りカスタマイザーを使わず、全てブロックエディタ上で完結したほうが、ユーザーとしては、ブロックエディタとカスタマイザーの行き来をしなくてよく混乱が避けられるのではないか。

カスタムブロックを大量につくっても、ユーザーは使いこなせないだろう。


質疑応答&ディスカッション


特に結論があるわけではありません。聞いた話で頭に残ったものをメモしているって感じです。


  • 何故プラグイン化するのですか(テーマに埋め込むのは何故ダメなのか)
    • テーマにいれてしまうと、テーマが消えたり変更したら使えなくなるのはまずいのではないかというコンセプト
  • 移行はどうしたらいいのか(クラシックエディタからの変更)
    • 担当者がウェブの知識がまったくない、入れ替わりもある中で、どうやって教えるのか。いつかは変えないといけないが。なかなか難しいテーマ。
  • Classic Paragraph と クラシックブロックの2つが出てしまう
  • 新規サイトで Classic エディタを使うのは問題か
    • いろいろなブログをみて、まだ 使いたいテーマなどが Gutenberg に対応していなかったりする場合もある。すでに1年前に新エディタはリリースしているわけで、新しく立ち上げるなら新しいほうがいいのでは。でも修正が初学者には難しくなってきている。

その他メモ





昼食



- 口コミ(TripAdvisor)

本町オープンソースラボにいく道すがらあったカフェ。どうやらオープンしてまだ間もないようですね!おしゃれな感じの店内で、食べたカルボナーラも美味しかったです!

懇親会




- 口コミ(TripAdvisor)

いろいろ歓談していたら、いつのまにか3時間たっていました。さすがに終電が近いので2次会はパスでそのまま帰りました。みんなの熱い会話を聞きながら、やっぱりこういう雰囲気っていいし、自分なりのモチベーションが上がってくるのを感じるので、定期的にいかないとなーと思ったのでした。

2019年11月16日 @kimipooh
 











2019年11月1日金曜日

WordPress のプラグインバージョンアップ中にブラウザを閉じたらどうなる?

WordPress のプラグイン更新方法は、WP-CLIなどコマンドラインからも可能です。それは脇において、WebブラウザからWordPressにログインし、「更新」よりプラグインを更新している途中に、ブラウザを閉じたらどうなるでしょうか。

のようなブログをみると、メンテナンスモードのままになるよって書いてあります。そのとおりなんでしょうが、こういったものは実際にテスト環境で体験してみるのが一番いいなと思ったのでやってみました。

ブラウザを閉じた時点で強制処理が終了する


実際にローカル環境にいれたマルチサイト環境のWordPress で試してみました。
するとサイトがメンテナンスモードになったままログインできない事態に・・・


この段階でブラウザを閉じてみると


のようにメンテナンスモードが解除されずにサイトにアクセスできなくなりました(運が良ければメンテナンスモードにならない)しました。こちらは、WordPress本体にできたロックファイル「.maintenance」を削除することでメンテナンスモードは解除できます。FTPなどでサーバーにログインする必要がでてきます。

このメンテナンスモード用ファイルを削除してプラグインを見てみると、更新中だった Loco Translate までは更新できていて、あとは残っている感じですね。


基本的に WP-CLI のコマンドラインでサーバー上で自動アップデートしているので気にしていませんでしたが、ブラウザ上でやるのってネットが不安定だと問題が発生するんだなぁと思った瞬間でした。。。(ネット不安定な海外からやっちゃうと危ないってことか)。場合によってはプラグインが壊れて、壊れたプラグインを探し出して一旦削除しないと駄目なんて事態になるかもしれません。なんでも試して見るものですね。

2019年11月1日 @kimipooh

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