カテゴリー: blog

投稿日:

joyokanji.infoサーバーのメンテナンス

昨日、joyokanji.infoのサーバーメンテナンスを実施しました。

OSとPHPが古くなっており、これらをバージョンアップするのが目的で、OSはCentOS Stream 9に、PHPは8.1になりました。

OSが変わったことに伴い、MySQLが8.0に。別環境の構築でGRANT文でユーザー作成できないことは知っていたのですが、Webアプリケーションで使用していたアカウントのパスワードが強度不足でそのまま使用できず、再設定してWebアプリケーション側の設定を書き換え、ちょっとだけ時間ロスに。

これで問題なくなったかと思い、ブラウザでjoyokanji.infoにアクセスすると、ステータス「500」。エラーログを確認すべく、/var/log/php_error.logを確認する原因さしきものはなく、ちょっと焦る。あらためて/var/log/を見てみると、php-fpmディレクトリがあったので、その中のerror.logを確認するが、中身は空。次にwww-error.logを確認し、ようやくエラー原因を特定。存在しないテーブルに対してSELECT文を実行した際、Fatal errorになっていました。取り急ぎ、問題部分を修正し、無事サイトが立ち上がりました。

https://joyokanji.info/

今回のメンテナンスに要した時間は約3時間。自分の中での予定では2時間くらいを想定していたので、ちょっとオーバーです（告知していた時間内にはおさまっていますが）。

投稿日:

WordPress 6.4「Shirley」リリース

今日は予定通り「WordPress 6.4」がリリースされました。今回もコントリビューターリストに名前が記載されておりました。今日は手持ちのサイトを順次アップデートしていきます。

これに関連して昨日は、「Login rebuilder 2.8.2」をリリースしました（昨日1日のダウンロード数は3,377）。主な変更点は次の通りで、アップデートを推奨します。

  • 「ログインファイル キーワード」を保存する際のサニタイズ処理を強化しました（キーワードからいくつかの記号を除外など）。
  • ウィジェット向けにユーザーのログイン情報を取得できなかった際、エラーを回避するように調整しました。

後者は先週末にサポートに投稿された不具合に対応したものです。ChatworkやBacklogをメインに使うようになり、メールの確認がおろそかになったことで通知メールに気づくのが遅くなってしまいました。なんとかWordPress 6.4のリリース前に修正版を公開できてよかったと思います。

投稿日:

WordPress 6.3「Lionel」リリース

予定通りWordPress 6.3「Lionel」がリリースされました。久しぶりのメジャーアップデートですね。

メジャーアップデートの「contributors」に名前が記載されたのはずいぶん久しぶりな感じがします。

ベータ版をテストした際、6.3 Beta1からどうも悪い設定が残ってしまったらしく謎の不具合に遭遇したのですが、クリーンインストールしなおしたことで何事もなかったかのように解消。自前のプラグインは改修せずに済みました。

サポートするPHPバージョンは結局「7.0.0」に落ち着き、ツールバーやリストビューの改善、テーマ・プラグインのアップデート失敗時のリカバリー機能の導入なんかも気になりますね。

投稿日:

画像ブロックのメディアライブラリにカスタムタクソノミーを追加

画像ブロックですでにアップロード済みの画像を再利用する際、「メディアライブラリ」を開いてその中から選択するが、画像が多くなったら「日付」だけで絞り込むのはしんどい感じがしたので、カスタムタクソノミーを追加したいと思ったのが、先月くらい。Googleで検索してもそれっぽい内容を検索できず、ChatGPTで問い合わせしても意図した通りの挙動にはならず、ちょっと時間がかかってしまった。

メディアライブラリにカスタムタクソノミー「グループ」を追加したところ

ChatGPT（無料版）でやりとりしている中でちょっと意外だったのが、現時点で対応しているWordPressのバージョンは「5.8」ということ。5.9のリリースは2022年1月になるので、WordPressに関しては2021年以前の情報がベースになるらしい。分野によってどの程度違いがあるのか少し気になる。。。

さて本題も戻すと、「メディア」－「ライブラリ」で表示される内容は、リスト表示とグリッド表示の2種類があり、画像ブロックで表示される「メディアライブラリ」はグリッド表示とほぼ同じふるまいになっていた。拡張方法は、2つの表示内容でまったく異なっており、リスト表示はPHPだけで済むが、グリッド表示のほうはJavaScriptも用意する必要がある。

グリッド表示で今回使用したのが、admin_enqueue_scriptsアクションのほか、ajax_query_attachments_args、media_view_settings、media_view_stringsフィルターになる。media_view_settingsとmedia_view_stringsフィルターはwp_enqueue_media関数内で呼び出されるもので、JavaScript側ではwp.media.view.settingsとwp.media.view.l10nのプロパティからそれぞれのデータを参照できる。JavaScript側へデータを渡す汎用的な方法としてはwp_add_inline_script関数を使用すうこともできるが、メディアライブラリ用のJavaScriptであれば、media_view_settingsおよびmedia_view_stringsフィルターを使うほうがよいと判断した。

admin_enqueue_scriptsアクションのコールバック関数のポイントは、第1パラメータをチェックする際、投稿編集ページも含めること。post.phpだけでなく、post-new.phpも指定する。

if ( in_array( $hook_suffix, [ 'upload.php', 'post.php', 'post-new.php' ] ) ) {

ajax_query_attachments_argsフィルターのコールバック関数ではカスタムタクソノミー「グループ」を検索条件に追加する処理を行う。プルダウンメニューの選択が変わる度にこのフィルターは呼び出されており、$query[‘tax_query’]に検索条件を設定することになる。

今回予想以上に時間がかかってしまったが、想定通りに動いてくれればその苦労も報われた。既存ブロックのちょっとした拡張はなかなか面白い。

投稿日:

ログインページにHTTP認証を

WordPress 6.2が無事リリースされ、手持ちのサイトを順番にアップデート中。公開しているプラグインは今回はバージョンアップせず、readme.txtに動作検証結果を反映させる予定だ。

実のところ、「Login rebuilder」についてはネタ切れ中で、まれに見かけるログインページにHTTP認証を実装するところまではできているのだけど、いまひとつ気がのらない。

今回実装したのは、BASIC認証ではなく、ダイジェスト認証であり、機能的には問題ないレベルになっている。WordPressでは$_SERVERもスラッシュでクォートされているため検証がちょっと面倒だったり、設定ページでパスワード生成や強度表示を実装してみたりと勉強になることもあったが、使い勝手がしっくりこない感じだ。

というわけで、ゴールデンウイークくらいまでは自サイトで使ってみて最終的に公開するか決定しようと思う。

投稿日:

画像ブロックに効果を付与

投稿記事の表現を強化しようと思い画像ブロックに4つの効果を付与した。効果は画像ブロックの実態となるdiv要素かfigure要素のclass属性に追加される。

フレーム

画像の外側に空きを作って昔の写真（紙焼き）っぽい見た目にする。

ドロップシャドウ

画像の背後に薄い影を付ける。

輪郭をぼかす

画像の輪郭を背景色でぼかす。

モノクローム

画像にモノクロームフィルターを適用する。セピアフィルターをあるがとりあえずはこちらのみ。

それぞれの効果は組み合わせ可能で、バリエーションはそれなりの数になる。今後もよさそうな効果があったら追加していきたい。

さて、スタイルは効果に応じてdiv要素（またはfigure要素）と内包するimg要素に指定した。テーマによって背景色などのカスタムプロパティ名が異なるので、汎用的なプラグインにするにはちょっと工夫が必要だ。

投稿日:

registerFormatTypeでルビ

そんなに使うわけではないのだが、ルビの入力を何とかしたかった。そんなわけで次のような2つのボタンを追加してルビ入力支援を実装した。

ツールバーのリンクボタンの左側に2つのボタンを追加

リンクボタンのすぐ左がrtタグ用ボタン、さらにその左がrubyタグ用ボタンとなる。ボタンのイメージはdashiconsではなく、「Tabler Icons」のSVGを使ってみた。

このボタンを実際に使ったのが、挨拶あいさつ。「挨拶あいさつ」とタイプした後でそれらを選択し、rubyタグ用ボタンをクリック。続いて「あいさつ」を選択してrtタグ用ボタンをクリックする。rtタグ用ボタンについていくつか制御を検討したのだが、読みの部分を入力するタイミングはユーザー任せでいいかなと思い、rubyタグ内のみ有効にするといった制限については今回見送った。

理想的には、rtタグで囲むタイミングでrpタグを自動的に挿入したかったのだが、うまく対応する方法がわからなかった。かといってrpタグ用ボタンを追加するのも野暮ったいので、とりあえずはこんな感じに。

RichTextToolbarButtonのiconプロパティにdashiconsではなくSVGを指定するわけだが、JavaScript（ES5）の場合はcreateElement関数を使う必要があるのでちょっとだけ面倒かも！？（svgタグをそのまま記述できるJSXの方が楽だよね）

投稿日:

Autocompleteで住所入力

Autocompleteで日付・時刻の入力を作っていた時、住所入力もいけそうだなと思い試行錯誤した。住所は、JavaScript（ブラウザ）のnavigator.geolocation.getCurrentPosition関数で取得した現在の緯度・経度を使ってGoogleのジオコーディングAPI（の逆引き住所検索）を使った。

「here」とタイプすると、候補リストに現在の住所が表示される

ジオコーディングAPIの逆引き住所検索はPHP側（file_get_contents関数）で行い、AJAXで取得した住所リストを取得。住所検索で取得した住所は郵便番号、国名を含んており、今回はそれらを取り除いた。Autocompleteフィルターのoptionsは定数ではなく、メソッドにしてAJAXで取得した住所リストを利用するようにした。

作業中、地味にハマったのは、ジオコーディングAPIのAPIキー。はじめは静的マップで使用しているものを使用したのだが、このAPIキーではうまく取得することができなかった。理由はAPIキーの制限で、静的マップで使用したAPIキーは「ウェブサイトの制限」を制限していたためだった。このためPHP側は新しくAPIキーを取得し、別の制限を設定した（「Geocoding API で API キーを使用する」参照）。うまく両立する制限設定はあるのだろうか。

投稿日:

Autocomplete、いいかもしれない

ブロックエディターの拡張ポイントの1つにAutocompleteがある。任意のブロックに対して「何か」をタイプしたら「選択リスト」が表示され、続けて文字をタイプすると絞り込みできる仕組みのだ。使い方は wp.hooks.addFilter で　 ‘editor.Autocomplete.completers’ 向けの関数を登録する感じなので、いくつか実装してみた。

絵文字

🙂 とタイプしたら一覧が表示され、そのリストから選択する感じに。例えば、😀や🚃といった絵文字の入力が楽になる。難点を挙げるなら絵文字の種類が多すぎること。ツールバーにボタンを追加して候補がパパッと表示される方がいいかもしれない。

現在の日時

nowとタイプしたら日付や時刻の例が一覧で表示され、そのリストから選択する。例えば、2023年1月23日や10:07:34といった感じ。こちらについては曜日と12時間制（今は24時間制のみ）の対応は残っている。

追加の文字タイプによるインクリメンタルサーチについて、nowの後に/や:をタイプしても反応するのだが、これらは候補リストの内容も検索対象になっている表れだと思う。このあたりのくわしい仕様を知りたい。また候補リストの最大表示件数が10になっているが、この変更方法だったり、2列や3列に表示する方法があれば知りたいところだ。

そういえば「Create Block Theme」というテーマ開発用のプラグインがあることを最近知った。すごく気になる。。。

投稿日:

サーバーのOSをアップデート

ようやくまとまった時間ができたので、本サーバーのOSをCentOS 7からCentOS Stream 9へアップデート。PHPは8.0系になりました。

OSをインストールする前に、「mysqldump」でデータベースのバックアップを取り、子テーマ、プラグイン、アップロードファイルなどの関連ファイル一式をまとめてダウンロード。続いて「certbot revoke」でSSL証明書を削除。VPSサーバーのコンパネからOSをインストールした。

Webサーバーは「Apache 2.4」をインストールし、「certbot」でSSL証明書を取得しなおす。はじめはこのままでいいかと思ったのですが、OSを変えたことだし、「NGINX」をインストールして運用することにしました。

今回の作業で少し戸惑ったのが、「MySQL」のユーザーパスワード。「mysql_secure_installation」でrootアカウントのパスワードを設定する際、次のようなメッセージが表示され、先に進めません。

Your password does not satisfy the current policy requirements
Estimated strength of the password: 50
Do you wish to continue with the password provided?

パスワードの強度不足なのは理解できるのですが、指定したパスワードには英小文字、数字、記号を含んでいたのでちょっと戸惑いました。最終的には、パスワードに英大文字を含めることで強度が「100」になり、先に進めました。なお、このパスワードの強度は、「create user」コマンドなどのパスワード指定にも関わってくるようです。

今日はとりあえずここまで。