2024年2月24日土曜日

WordCamp Kansai 2024 セッションデイ(2日目)に参加して #wckansai #WordCamp

WordCamp Kansai 2024の2日目は、セッションデイです。昨日のコントリビューターデイについては下記のブログを参考にしてみてください。


Photo by WordCamp Kansai 2024: https://twitter.com/WCKansai/status/1762443015900270719


本日、午前中は海を見たい!という気持ちになって、三ノ宮の商店街、三宮神社、メリケンパークへと散策しました。その時のことは、本ブログの一番最後に紹介します。

そういえば、WordPress 関連で神戸に訪れたのは、WordCamp Kansai 2014のキックオフミーティング & WordBench神戸(現在の WordPress Meetup の前身となる勉強会)のときだったのですねぇ。

以下、セッションに関しては筆者が理解した内容の備忘録です。
そのため実際の発表者と意図しない内容になっている可能性があることをご留意ください。
# は筆者の感想的な内容になります。

セッションの動画配信


下記にて公開されています。

Japan WordPress Community (YouTube) - 部屋ごと

WordCamp TV - 個別

発見した参加者のブログ


公式サイト(2024-02-27追加)
あとから X の #wckansai をチェックしていて見つけた参加ブログで気付いたものをリストアップしておきます(2024-02-25ぐらいまで)。

スポンサーブース



昼過ぎに訪れました。昼からのセッションの少し前でしたが、それなりに賑わっていました。

LINE公式アカウント&WordPressで更新頻度が上がった話




椅子に座りきれないほどの人数が参加していました(50名以上)

LINE の Messaging API よりデータをとってきて、カスタムフィールドのデータを更新している。WordPress にログインして更新するということは、なかなか一般の人はやってくれない。しかし LINE での更新はかなりの確率でやってくれる。

お茶会スペース 純喫茶わぷ~(情報交換スペース)




昨日のコントリビューターデイに引き続きお茶会で提供される紅茶などは L'ATERIER DISCIPLE DU BONHEUR からわざわざ来られて紅茶など飲み物を準備されていました。

あとは運営からの提供されたお菓子を食べながら、初めてお会いする方々と楽しく歓談しました。

ブロックエディタでWebサイトの制作がどうかわったのか?実装事例から見る現在のWordPressの設計と構築



ブロックエディターが出てから 5年がでて、当時で始めた WordCamp Osaka 2019 のときにも、ブロックエディターをつかって制作しているかという質問をするとほとんど手が上がらなかった。今回はちらほらとでている。とはいえ、会場の状況をみるとまだまだ浸透まではしていなさそう。
クラシックエディタのほうは制作フローの過程が多くあった。
  1. 静的HTMLを先に制作
  2. 先に制作したHTMLをもとにテーマを作成
変更・追加が管理画面からできないこと、管理画面と全然見た目が異なる、リニューアル時にも同じ構成が必要。

顧客側は入力を限定(カスタムフィールドなどで)させることでデザインに影響がないようにしたのはよかったが、その結果、制作にかかる負担が増加していた。

いまの ブロックエディター構成前提の場合、
  1. 事前に HTMLコーディングはしない
  2. どの構成を使うかの検討
  3. 構成単位で制作
  4. 入力
サイト全体を管理画面から変更できる

構成の分解が必要
「ブロックスタイル」「ブロックパターン」「ブロック開発」「プラグイン利用」「テンプレート」など

#再利用ブロックは、いつのまにか「同期ブロック」と名称変更になってた。

いまは設計が大事。サイト全体でどのようなパターンがあるのか、どのようなブロックが必要。それは運用するスキルも踏まえて考える必要あり。どういう入力がありえるのかなど。

実装工数がかかることはある
レスポンシブ周り(PCとスマートフォンなどの余白とか)

ブロックエディターになってくると、ページ数での費用ではなくブロック数での費用に変えていく必要がありそう。

質疑応答
  • 質問:作り始まる前に、顧客から触りたいという要望があるのか、それとも触るように構成しておくのか
    • 回答:後から触りたいという要望が出てくることを想定している(顧客の「絶対に触りません」は参考にしない。

WordPressサイトに関わるキャッシュを理解する



キャッシュはウェブサイトを早くすると思っていた。ただし大規模サイトを手掛けていると、そうした理解はうまくいかない(キャッシュが効きすぎるなど)場合がでてくる。

キャッシュとは、サイトの閲覧をする場合、表示に必要なデータを毎回計算して表示する場合があり(#WordPress などHTMLを動的生成するもの含む)、そうした場合、再利用したほうが速くならないかというために作られた仕組み。

キャッシュはレスポンスに対する応答が速くなるが、しかし根本解決にはならない。たとえはサイトそのものを表示するプロセスが速くなるわけでないため。たとえば動的にサイトを構成するのに3分かかる場合、キャッシュによって事前に表示データを用意することで速くする仕組みのため。そしてキャッシュについては、その管理する仕組みも必要になり、それが設計をややこしくもなる。
#補足:たとえば事前用意したデータ(キャッシュデータ)と、最新データが異なる場合には、事前に用意したデータを一旦破棄して新しく作り直す必要がある。そこは時間がかかってしまうということ、またそのチェックが必要になる。

キャッシュはいろいろある。CDNキャッシュ、サーバー側キャッシュ(ページキャッシュ等)、PHPキャッシュ、WordPress コアキャッシュ、ブラウザキャッシュなど。これらを把握しないと適切にキャッシュを使えない可能性がある。

また相当処理が重いことをするのにキャッシュを使う場合、事前にそれをすることになるのでサーバー負荷が大きくなってしまいサーバーがダウンしてしまう可能性もある。

下記などをキーワードに考えていく必要あり
  1. オリジンサーバーの内か外か(外はネットワーク上)
  2. キャッシングされるデータの粒度は大きいか、小さいか
  3. インフラ側のキャッシュか、WordPress 上のキャッシュか、あるいは独自のものか
  4. プラグイン等のキャッシュ機能があるものは、何のキャッシュなのか
また、キャッシュについて少し深堀りすると
  1. HTTP キャッシュ(ネットワーク)- CDN、ブラウザ、プロキシサーバーなど
     あれ?更新したのに、ブラウザ上で更新されていないという感じ
     何秒経ったかで古い、新しいを判定している(HTTPレスポンスのCache-Controlフィールドで指示。正確には指示要請するレベルで、実際にはどこかで上書きされる可能性あり)。ウェブシステム(apacheやnginx)に対する設定(PHP側ですることもあり)となる。プラグインで実装されている場合には apache の .htaccess に書き込んでいるだけということになる。
  2. ページキャッシュ
     WordPress は毎回動的にHTMLページを作成している。これをあらかじめ作っておこうというもの。粒度が大きいので効果が大きい。CDNはインフラ部分でしていることになる。CDNとのやり取りをするために専用プラグインをインストールするケースもある。プラグインだけで実装しているなら、プラグインで制御するので高速化できるのは一部にすぎない。
     キャッシュするとNGのケースがある。ログインしているページ(会員サイトや管理画面)がキャッシュされると、ログインせずに誰でもアクセスされてしまう。
    #誰かログインできる人がアクセスすると、そのページが生成されるため
    大抵は管理画面にアクセスするURLをキャッシュの対象外にしている。しかしログインURLが変更するようなケースだと事故が起こる可能性があるので注意が必要。
     独自実装しているケースの場合、特定キャッシュだけするようできるものがよく、どれをつかうか考える必要がある。
  3. WPオブジェクトキャッシュ&永続化
     WordPressコアに実装されている。これはメモリに保存される。メモリは利用し終わると破棄される仕組み。そこで永続化が必要になる。これはデータベースへの問い合わせ(クエリ)について WordPress はサイトへのアクセスがあると毎回しているが、ここをメモリに保存させて永続化させることで、同じ問い合わせについては、すでに問い合わせてメモリにいれたデータを再利用する仕組み。
     WP_Object_Cache 関数をつかうことで使うことができる。使えると効果は大きいが難しい。またインフラ側が対応している必要あり。APCu、Memcached、Redis等。
    #インフラ側にそうした機能があるなら、これらを使うことができるプラグインもある。
以上のようにキャッシュは深堀りすると沼にハマっていく。しかしながら、キャッシュの大筋についての少しずつ実践の中で学んでいくと助けになっていくだろう。

ユーザー行動の分析から、サイトの改善ポイントを探ろう




#最後あたりで参加。そのため、細かな内容はわからず。キーワードだけ拾ったので、また後で調べてみることにする。

Microsoft Clarity を使ってみよう!
====
#翌日インストールしてみました。WordPress でのインストール方法については、下記が参考になりました。
無料ヒートマップ Microsoft Clarity を WordPress で使おう | サーバー総研


Clarity の Clarity tour にある See live demo をみると Users overview がでてきました。実際にどのように活用するかは、このセッションの動画や資料が後日公開された後に、じっくり見ることにします。
===

ChatGPT との議論。定量分析も合わせてしておくのがよい。

ただし、個人情報の保護の観点からは、Google Analytics 4や Microsoft Clarity を使わない選択肢もある。

質疑応答は、発表者の意向により、まずは隣の人となにか1つ聞いてみたいことについて話し合うというユニークな形式になった。私自身は隣がいないことと、最後あたりの参加のために状況がよくわからなかったので傍観のみ。

質疑応答

質問:どの程度のタイムスパンで検証したらよいのか
回答:目的によってしまう。ECサイト等の場合にはデータが変わっていくため、毎日みたほうがいいでしょう。3日や1週間で上がり始めたなと思ったら見なくなるとか。落ちたらアラートが来たりするのでそのときにみるとかもある。しかし基本的には最初は毎日みて、普段がどのような推移になっているのか、そもそもデータが取れているのか(取れていない場合もある)をチェックしたほうがいい。あとは定点観測でいいのではないかと思う。

質問:異常値はどのように捉えたらいいか
回答:自分の中での異常値を考えておく必要あり。大体異常値はスパムと思っていいでしょう。Microsoft Clarityの場合、異常値が Botかどうか分かる。そしてこのツールの場合には、 Botを除去できない課題はある。異常値の場合には一日ずっとあがる。

質問:個人情報を取得しないようにするには(確認画面とか)
回答:スライドに対処方法のリンクを書いている
#「Microsoft Clarity(クラリティ)のデメリット(リスク)と対処法」かな

閉会式




長いようであっという間だった WordCamp Kansai 2024 も閉会式となりました。
WordPress Meetup がたくさんあるので、そうしたものに参加してみて!というお話があった

アフターパーティ



会場設営のためスポンサーブースで待機。その間、スポンサーブースでプチ飲み会が始まりました!ドリンクサーバーの方がいて、どのような飲みものがほしいのか尋ねると、おすすめのものをいってくれます。筆者は少し甘めのビールはないかと訪ねたところ、Hazy IPAを進められました。フルーティで非常に飲みやすかったです!


次に飲んだのが、高価なビールはなにか?ときいて指定されたビール
THE ALCHEMIST Focal Bangerですね。1缶で2000円超えのビールです。


こちらも苦みが薄くて飲みやすいビールでした!また歓談する中で、奈良からこられた親子で来ている方とお話する機会があり、お子様は大学1年生工学部とか。初めて訪れた海外がギリシャだったとか。「若いうちから海外を経験するのはいいことだよ〜」など楽しく歓談できました。また知人にも出会ったので、少し仕事上での課題について話し合ったりしました。


そうこうしている内にパーティの準備ができたので会場へ。実行委員長の短い挨拶を聞きながら、ローストビーフやその他いろいろな準備された豪華な料理を楽しみつつ、歓談できたのでした。やはりイベントは対面はいいですね!


散策(海をみたい!)


さて、せっかく神戸にきたのだから海を見に行こうと思いました。そこで実行委員長には大変心苦しいのですが、開会式の間に少し三ノ宮周辺を散策してました。そのときの体験を紹介します。

神戸三宮センター街




神戸三宮センター街は、10時台はまだ店舗も空いていないところが多く、閑散としていました。昼近くになると上の写真のようにかなり混雑していました。


ぶらぶらと散策しつつ、生田神社一の鳥居を南に通り抜けて三宮神社へ。

三宮神社




裏門からはいって参拝。表門から抜けてメリケンパークまで歩きました。

メリケンパーク




メリケンパークにいく途上に歩道橋があります。久しぶりの歩道橋、その上からみた道路もまっすぐに伸びていて見ごたえがありました。メリケンパーク前に、「メリケン地蔵尊」が鎮座していました。海でなくなった方々のための慰霊のために昭和50年頃に安置されたとか(産経新聞


さてメリケンパークについたわけですが、この近くにあるホテルオークラ神戸は、かなり前に家族と泊まったことがありました。私にとっては、ついて「観光に行くぞ!」とおもって、ホテルをでた直後に、つまずいてひっくり返って足を捻挫して歩けなくなって、一人だけホテルで休んで痛みに耐えていたという痛い出来事がありました。となると、リベンジしないとですね!ということで、あまり時間はありませんが、少し海を堪能することにしました。


50 MPモード(上記は 37.5 MP)で撮影した写真。太陽光が海に反射して輝いているのは非常に心が和みました。 

昼食



いくつか行きたい店があったのですが、混んでいたり、ランチをしていなかったりして機会に恵まれませんでした。時間もなくなってきたので、再び神戸三ノ宮センター街に戻って、サンプラザの地下にて、牛カツを食べました。


やはり神戸に来たなら、神戸牛を食べないとですね! 小さくきってあるレアの牛カツは、かみごたえはあるものの、柔らかくて美味しかったです!

2024年2月24日 @kimipooh

2024年2月23日金曜日

WordCamp Kansai 2024 コントリビューターデイ(1日目)に参加して #wckansai #WordCamp

2024年2月23日、 WordCamp Osaka 2019 以来、久しぶりの現地での WordCamp 参加となります。今回は実行委員ではなく、一般参加という形での参加です。

今回も、コントリビューターデイとセッションデイの2日参加しています。
本ブログはそのうち1日目になる、コントリビューターデイに関する備忘録をまとめてました。
2日目については下記で公開しました。

生田神社



子供が大学受験真っ只中ということで、会場である三ノ宮コンベンションセンターとは三ノ宮駅からみて逆方向ですが、お祈りしてきました。


三ノ宮駅周辺。久しぶりに来た気がします。

会場



会場は、三ノ宮コンベンションセンターです。少し早く来てしまったので1Fで少し待機。

コントリビューター開始!



専門店からの人も含めた紅茶サービスがある!


L'ATERIER DISCIPLE DU BONHEUR から、これは本格的です!


Polyglots(翻訳)チームに参加



まずメンターより翻訳についての注意事項や参考情報の紹介がありました。
基本的には、「翻訳スタイルガイド」および「用語集」を参考にすることになります。
機械翻訳、AI 翻訳を利用するという話があった。

また実際に WordPress にインストールして動作を確認してどのような翻訳が適切かも考える必要があります。ship という単語について「配送」なのか「送料」なのか、単語だけではわからないことがあったりするということです。


また翻訳に関してのツールの紹介がありました。
  • 日本語翻訳向け WPGP Tools の設定
    • 日本語への翻訳の場合には、インストールだけではだめで、実際に翻訳できる画面までいって、Translating WordPress タイトルの右側にある「WPGPT Settings」を開いて、3つの設定をしておく必要があるということ。実際に使ってみるとかなり便利だということがわかりました。
  • 強制翻訳アップデート(WordPress プラグイン)
    • この詳細については開発者である  Mayo Moriyama 氏が翻訳チームにいたので、聞くことができました。承認されていない場合でも、強制的に未承認の翻訳を適用させて反映されるプラグイン。これで 90 %を超えていない翻訳のものでも自前の WordPress に反映させることができるので翻訳が捗りそう。
  • Performant Translations プラグイン(WordPress 6.5 でコアに取り込まれるということ)
    • 翻訳のロード時間を短縮してサイトを高速化するプラグインということ。翻訳のチームリーダーより紹介を受けた。
こうしたツールは便利そうですね!これを聞けるだけでも参加した意味がありました!

さて筆者はお世話になっている Simple History というプラグインの翻訳を考えてきました。ただ600以上あることもあり、今回は、筆者自身が開発して公開しているプラグイン以外で、PTE権限のある翻訳について Untranslated があるかどうか調べて、あれば対応しようと思いました。最初の1つについてはどのように翻訳していったかの紹介をします。
筆者が翻訳しているもののリストは、自身のブログで公開しています。
さて筆者の翻訳をするための環境。用語などをみるには、やはりモニタが2つないと辛いですよね!


Login for Google Apps


筆者がもっともお世話になっている WordPress のログインを Google 認証(Googleアカウントによる認証)をするプラグイン。これによって、たとえば業者にテーマを設定してもらうときに、パスワードを業者に発行して教える必要がなくなって助かっています。



翻訳前は上記の状態。まずは Stable (latest release) の3つを訳していきます。
なお、latest release が本来の最新版への翻訳。Development (trunk) が開発版になります。基本的には最新版のみでよいです。同じ翻訳があるなら、自動的に Developmentのほうにも反映されます。


こちらについては、どこに記載されているかコードの場所とその情報へのリンクがあります。

実際には上記の部分の翻訳です。ではこれが実際にどこに表示されているのでしょうか。コードがある程度読めるなら、プラグイン設定のどこかかなぁと言うことはわかります。


そして WordPress 管理画面の 設定 > Login for Google Apps をみると、そのタイトル部分に見つかりました。ここの日本語翻訳をするのですね。用語集に setup はないこともあり
「Login for Google Apps セットアップ」で良さそうです。
*Login for Google Apps settings もあり、こちらの setting = 設定 と区別しておいて問題なさそうです。


筆者は、このプラグイン日本語翻訳のたいして PTE権限をもっているのでそのまま保存・反映させることができます。下記のように 100% の翻訳となりました。


次に、READMEに関する翻訳をいくつかやってみます。
下記のように、 Priority: high を優先してやるのが良いだろうと思います。ここはタイトルと説明文(プラグイン)の部分のためです。プラグインタイトルは、ルールで翻訳しないとなっているのでそのままです。



WP Mail SMTP – SMTP7


WordPress からのメール通知について、正しいメールサーバーから送信できるようにするプラグイン。こちらもよく使っています。最近では SPFなどを設定されているケースもあり、WordPress をインストールしているサーバーと、WordPress システム通知などの差出人として使うメールアドレスを送受信するサーバーが別の場合、なりすましを疑われてしまいます。そのため、WordPress から送信されるメールについて、指定したメールサーバーから送信できるようにします。


おっと、こちらは合計3つですね!



Contact Form DB


Contact Form 7 プラグインが保存するデータを表示・編集するプラグイン。すでに公式リポジトリからは削除(開発者による)されていて、翻訳のみ残っています。そのためスルー。
 


Login Security Solution


以前利用していたセキュリティ対策系プラグイン。もう8年以上更新されていないことと、基本的な翻訳はできているのでこれまたスルー。


Logbook


WP-CLI のコミッターになられたこともある有名な Takayuki Miyauchi 氏が公開されているプラグイン。すでに6年以上更新されていないので、以前はお世話になっていましたが現在は使っていない状況(現在は Simple History プラグインを使っている)。こちらもすべて翻訳済みのためスルー。


WP DBManager


WordPress のデータベースの最適化やバックアップをしてくれるプラグイン。非常に重宝していて、どのような動きをしているのか知りたいこともあって翻訳していました。こちらも基本的なところは翻訳済みのためスルー。


これで一通り、 PTE権限をもっているプラグインはチェックできました。
次にお世話になっているプラグインをみていきます。

BackWPUP


WordPress のデータベースとフォルダやファイルすべてのバックアップを定期的にとることができるプラグイン。WP-CLIによるコマンドによる実行も可能なため、Linuxサーバーなどで cron と組み合わせて任意のタイミングでバックアップを取ることができるので重宝しています。


上記を見るとちょうどいい感じの未翻訳数ですね!

Stable Readme (latest release)において、下記を訳す場合 "Don't backup thumbnails from the site's upload folder" option についてどう訳すかは慎重になる必要あり。というのは本体の Stable (latest release) の訳と一致させる必要があるため 


下記のように誰かが訳していたので、これに合わせる。


オプションは固有的なものになるので " で括るとして下記のような感じか。



あとはずっとモクモクと翻訳を続けました。


このあたりが限界のため、ここで WordSlack の #translate のほうに承認依頼をしました。


ということで本日はこれぐらいですね。

その後、すぐにリクエストした翻訳提案を承認頂けました。


その結果、下記のように BackWPUPだけで 92件の翻訳ができたのでした。


また翻訳チームの成果報告を筆者が発表することに!

このブログまとめを見ながら、下記の三点を報告しました。
  1. メンター(翻訳チーム)から翻訳に関するガイドラインや用語集など注意するべき点があることの説明
  2. 翻訳に有用なツールがあることの紹介
  3. 筆者が何を翻訳したのか、その結果の報告
なお、そのため本ブログを早めにまとめて(この成果報告の数秒前)、 Xにて #wckansai をハッシュタグにいれて公開。

WordCamp Kansai 2024のイベントが終わって(BackWPUPの翻訳続き)


2024年2月25日、少し時間ができたので気になっていた翻訳の続きをしました。
そこで少し翻訳に迷ったところを紹介します。本体部分の翻訳は PHP コードをチェックすることで大体の動きはわかります。しかしながら、 README の場合には、特定バージョンをリリースすることで問題を修正、機能追加などなにか処理をしたことが要約して書かれています。そうした場合、実際にその機能がどのように表示されているか、日本語にして意味が通じかを考える必要があるので難しいですね。

あと 56 あり、イベントの疲れなどもあるので少しずつ翻訳していこうかなと思います。

1. 実際に存在するオプションがあるなら、その表示名に合わせる


こちらについては、 phone home client とはどのように訳すのかということを迷いました。これについてはネットで検索すると、下記のブログの中で「Phone Home Client を有効化」という設定があることが見て取れました。となると "Phone Home Client" の有効あるいは無効化に関するオプションが追加されたのだなとわかりました。

【サイトヘルス勧告】予約したイベントが遅れています

2. これが PHP 側の警告やエラーメッセージの場合には(翻訳されない)、その部分は英文ののままとする



下記の WordPress フォーラムのやり取りで、PHP に関する警告が出ることに対して、BackWPUP 開発者が修正バージョンをリリースしたというやり取りをしています。となると、この警告については翻訳してはいけないということになります。

https://wordpress.org/support/topic/non-static-method-backwpup_adminadmin_css-should-not-be-called-statically-on/

3. 直訳すると意味がわからない文章



これを DeepL 翻訳すると「追加(pro): アーカイブの暗号化に一意のIVを含める」となります。ここで unique IV ってなに?それを含めるって?と疑問に思うかもしれません。README の文章は得てして機能について分かっている開発者が要約して表示していることもあり、それをみた人が意味を理解できない場合もあります。

今回については、BaclWPUP の開発側のブログにおいて、この機能について紹介していました。下記のように、暗号化する際に一意の IV(Intialization Vendor) を生成してこれを含めることでセキュリティを強化したということですね。つまり IVは固有名詞ということですのでそのまま使いつつ、「生成」して「含める」という「生成」を少し置きがうことで全体の意味がわかりやすくなるかとおもって追加しています。

https://backwpup.com/backwpup-release-4-0-0-destinations-support-enhancement/
== 一部抜粋
Now a unique IV is generated with each encryption, making the process more secure and the data encryption safer and stronger to eavesdropping and decryption attacks.
===

そして、毎日少しずつ翻訳をしてついに 2024年2月27日 深夜に、すべての翻訳が完了しました。WordSlack の #translate で承認依頼を出したので、あとは承認されれば完了ということになります!


そして風呂入って上がってきたら、承認されていました!


2024年2月23日 @kimipooh
2024年2月25日 加筆
2024年2月27日 加筆