WordPress本体のアップデートが繰り返されている昨今、Login rebuilderを久しぶりにアップデートしました。
先週メールで受け取った脆弱性対応のほか、セキュリティ関連のアップデートになります。
このブログもしばらく更新していなかったのですね。。。
PHPクライアントライブラリをgoogle/auth パッケージのみに変更した
1年ほど前から本サイトではログイン時にGoogle OAuthを利用しています。そのプラグインの開発ではPHPクライアントライブラリを使用していたのですが、このライブラリは汎用性が高い多機能なこともあり、ファイルサイズが大きいことが気になっていました。この週末にもう少しコンパクトにできないかと思い、ちょっと調べてみました（ありがとう、ChatGPT先生）。
先生曰く、Google OAuthの利用だけれあればgoogle/auth パッケージのみで対応できるとのこと。google/auth パッケージはPHPクライアントライブラリにも含まれているので、さっそく試してみた。
変更したアクセストークンの検証部分は次のような感じ。
$client = new \Google_Client(
[ 'client_id' => $this->google_oauth_client_id ]
);
return $client->verifyIdToken( $token );上記を次のように変更してみた。
$accessToken = new \Google\Auth\AccessToken();
return $accessToken->verify(
$token, [ 'audience' => $this->google_oauth_client_id ]
);本番サイトのプラグインを更新して試したところ、何の問題もなくログインできた。
Composerでgoogle/auth パッケージを取得し、プラグイン内のvenderディレクトリを差し替えてます。
$ composer require google/auth本番サイトのプラグインを再度更新してログインしようとしたところ、アクセストークンを検証するAJAXリクエストが404エラーになっていました。リロードするなどして数回試しても変化がなかったため、エラーログを確認してみると、次のような内容が書き出されていました。
PHP Fatal error: Uncaught RuntimeException: Please require phpseclib/phpseclib v3 to use this utility.というわけで、Composerでphpseclib/phpseclib v3を追加。
$ composer require phpseclib/phpseclib:^3.0無事、本番サイトでログインできるようになりました。今回のケースでは、google/auth パッケージにphpseclib/phpseclib v3が必須ということですね。
さて、今回の目的はPHPクライアントライブラリ部分の軽量化なので、実際にvenderディレクトリの容量を確認してみます。
$ du -s ./vendor
270176 ./vendor
↓
9920 ./vendor容量は約10MB、変更前の1/27とかなりコンパクトになったようです。
joyokanji.infoをアップデート
joyokanji.infoで「熟語それぞれの読みがわかるようになればいいな」と思い、少しアップデートしました。主な変更点は次の通り。
- 各漢字の「例」が片方だけのものがあったら相互になるように追加した。
- 熟語の「音訓（読み）」が促音や濁音・半濁音などに変化する場合は、「音訓」と「例」を分割した。
- 「常用漢字一覧」「学年別常用漢字」「部首各数別一覧」の各漢字の「例」で漢字がポップアップ表示するようになった。
- 各ページのスタイルを微調整した。
一部の「音訓」の「例」が多くなり過ぎた感があるので、表示を調整できればいいのですが、良いアイデアが浮かばないのでとりあえずは現状維持ですね。
joyokanji.infoリニューアル
ゴールデンウィークに時間ができたので、「joyokanji.info」をリニューアルしました。主な内容は次の通り。
- JavaScriptはjQueryを使用しないようにした。
- メインのコンテンツ幅を少し広げ、表示要素のレイアウトの多くをグリッドレイアウトに変更した。
- AdSenseの自動広告で隠れていた下部のナビゲーションを左側面に移動させ、内容を見直した。
- 常用漢字チェッカーでURLを指定した際に正しい結果が得られない不具合があったので、原因を調査して対応した。
- 常用漢字チェッカーで取り扱える文書サイズを500Kバイト（従来の約2倍）に増量した。
こんな感じでしばらく様子見しようと思います。
Gmailの英日翻訳は要注意かも！？
先日お客様から次のようなメールをいただく（抜粋）。
〇〇さまサポート費の上限と年間の御見積をしては、
今年度と金額の変更などは無しでございます。少し違和感のある文章で、まだサポート費の更新については話し合っていなかったはずだが、まずはそのほかに共有していただいた情報もあったので感謝の旨を返信したところ、次のような内容が送られてきた。
〇〇さまサポート費の単価と年間の御見積としましては、
今年度と金額のご変更なしとのことで承知いたしました。なんだかおかしなやり取りです。あわてて最初のメールの原文を確認すると、該当部分は次のようになっていました。
〇〇さまサポート費の単価と年間の御見積としましては、
今年度と金額のご変更などは無いでしょうか。原文中の「無いでしょうか。」が「無しでございます。」に改ざんされていました。受け取り側の対応に影響するレベルの改ざんです。
このようになった原因は、Gmailにて「英語→日本語」翻訳が自動で適用される設定にしていたことでした。対象メールの文面は日本語だったのですが、日本語の文面でもこの翻訳機能が影響しているようです。ちょっと恐ろしくなりました。
とりあえず「英語→日本語」翻訳は「自動的に適用」から「確認して適用」に変更。本件、コミュニケーションのトラブルになりかねないと思い、記憶にとどめておきます。
コードブロックでmermaid.jsを
VSCodeでシーケンス図が書けるようになったが、その過程で知ったmermaid.jsはブロックで利用できるの利用できるのではと思った（作成途中で検索した際、カスタムブロックはすでに存在していた）。
今回はブロックを増やしたくなかったので、コードブロック向けのプラグインで実装することにした。主な機能は次の通り。
- トグルスイッチによるmermaid.jsの適用
- トグルスイッチによるプレビュー
- コートコンプリートによる入力サポート
- ダイアグラム別の諸設定
コードブロックに「Gitgraph」で路線図のようなものを書いてみた。
%%{init:{"theme":"default","gitGraph":{"mainBranchName":"東急東横線"},"themeVariables":{"fontFamily":"monospace","commitLabelFontSize":"14px","tagLabelFontSize":"12px"}}}%%
gitGraph
commit id:"渋谷"
commit id:"中目黒"
commit id:"自由が丘"
commit id:"武蔵小杉"
commit type:HIGHLIGHT id:"日吉" tag:"直通/乗換"
branch "東急新横浜線"
commit id:"新綱島"
commit id:"新横浜"とりあえずは、シーケンス図、円グラフ、Gitgraphをサポート。時間ができたら他のダイアグラムも追加していきたい。
autocompleteに投稿リンクを追加してみた
ふと思いついたのが、過去の投稿のリンクをもう少し手軽に使えないかというもの。ブログで昨日（前回）の続きの投稿する際に便利ではと思った次第だ。
実装したのはこんな感じ。
トリガーとなるプレフィックスは「:post」とし、最新の投稿タイトルを表示させた。製作途中では投稿日を含めてみたのだが、投稿タイトルの長さとの兼ね合いもあって、まずは投稿タイトルのみを表示することにした。
VSCodeでシーケンス図を作りたい
今サブ機として使っているM1 Macbook Air（以下M1 Mac）は、メモリーが8GBとロースペック。ちょっとしたWeb系の開発はなんとかなっている感じだ。今回はそんなM1 Macでシーケンス図を作る環境の話になる。
シーケンス図（UML）を作るツールはいくつか存在するが、検索するとVSCodeのエクステンション「Mermaid Graphical Editor」があった。この「Mermaid Graphical Editor」はMarkdownテキストのMermaid記法を手助けするもので、テキストエディターとGUIで編集できるようになっている。
「Mermaid Graphical Editor」がサポートしているのはフローチャートとシーケンス図、クラス図、ER図の一部となっているが、その点については不満はない。まあ右側の「Mermaid Editor」を開くためにMermaid記法の宣言的なものが記述される必要があるので、適当なスニペットを用意するのがよいだろうか。
さて「Mermaid Graphical Editor」によりシーケンス図の編集はなんとかなったが、PDFやPNG画像の出力には別のエクステンション「Markdown PDF」が必要だった。
「Markdown PDF」はMarkdownテキストをPDFやHTML、PNG、JPEGなどにエクスポートしてくれるものだが、インストールした直後、私のM1 Macではうまくいかず、エクスポート途中のHTMLファイルが生成されるのみだった。このHTMLファイルをChromeで開くとシーケンス図が表示され、さらにPDFファイルとして保存できるのだが、せっかくならきっちり動作させてPDFファイルを生成させたい。
「Markdown PDF:export(pdf)」メニュー選択時に表示されるエラーメッセージは「Unknown system error-86」で、以下のURLのページを参照するように促される。
https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
「Markdown PDF」はPDF生成時、PuppeteerによってChrome/Chromiumをヘッドレスで実行しているが、その実行に失敗していることがわかった。ただ上記のページにM1 Macの環境については触れられておらず、別の解決策を検索することにした。
まず試したのは、検索結果で紹介されていた「Markdown PDF」の「Markdown-pdf: Executable path」（Chrome/Chromiumのパス）を設定すること。はじめはインストール済みのChromeのパス「/Applications/Google Chrome.app」を指定。「export(pdf)」メニューを実行すると、エラーメッセージは変わったが解決はしなかった。次にHomebrewでChromiumをインストールし、そのパス「/Applications/Chromium.app」を指定してみたが、これでも解決できなかった。しかたなく別の検索ワードを試したところ、次のページが見つかった。
https://stackoverflow.com/questions/74121253/unable-to-launch-puppeteer-on-local-mac-m1
このページの下部に記載されているように、私のM1 Macには「Rosetta 2」はインストールされていなかったので、さっそく試してみた。
softwareupdate --install-rosetta「Markdown-pdf: Executable path」の内容を空にし、もう一度「export(pdf)」メニューを実行。すると、しばらく「Export」のメッセージが表示されたままになり、その後にPDFファイルが生成された。PDFファイルの中身を確認すると、シーケンス図ではなく、Mermaid記法のテキストのみ。まあ一歩前進なのかな。
PDFファイルがシーケンス図にならない問題は、Windows環境のVSCodeで経験済みで、「Markdown-pdf: Mermaid Server」の内容をデフォルトから次のように変更する。
https://unpkg.com/mermaid@9.0.1/dist/mermaid.js再度「export(pdf)」メニューを実行。無事シーケンス図のPDFファイルが生成できました。「Mermaid Graphical Editor」「Markdown PDF」ありがとう！
2025/1/22追記
いくつかシーケンス図を作っていくと、「export(pdf)」で作ったPDFファイル内に空ページができたり、1ページに収まりきらなかったことがあった。「export(html)」で作ったHTMLファイルをChromeで表示する限りでは問題なかったのだが、そのままPDFファイルに変換すると「export(pdf)」で作ったPDFファイルと同様の状態になってしまった。
HTMLファイルには「Markdown-pdf: Mermaid Server」で指定されたURLが記述されており、「@9.0.1」を削除してChromeで表示させてPDFファイルに変換。これで意図した通りのPDFファイルを作成できた。「Rosetta 2」のインストール前の状況に戻った感じだが、対処方法がわかっていれば問題ないかな。。。
iPhone 16 Proに機種変！
2年半ぶりにiPhone 13をiPhone 16 Proに機種変更。3世代の進化です。
液晶画面は6.1インチから6.3インチへサイズアップしたけど、それほど大きくなった感はなく、重さも気にならない。
個人的にうれしかったのが付属のUSBケーブル。両端のコネクタはUSB-Cとなり、ケーブルの外被はメッシュに変わっています。使用期間が長くなるほど、ケーブルがボロボロになる傾向があったので、この変更はうれしいですね。
これまで使っていたiPhone 13ですが、今年の2月に機種変するタイミングだったのですが、ちょっとうっかりしていてそれに気づいたのが5月頃。その際iPhone 15に変更するよりも今回のタイミングで新機種にしたほうがよいと思い、今月に至りました。
どのように機種変したかというと、きっかけは先週金曜日に届いたショップからのショートメール。先週金曜日はiPhone 16の発売日で、テレビのニュースでも取り上げられ、「そうだ、機種変しなきゃ！」と思い、すぐに翌日のショップを予約。とりあえずiPhone 16（無印）を取り置きしてもらいました。
予約時間にショップへ行き、まずはiPhone 16（無印）とProの料金確認。2年半ぶりで円安も重なって、毎月の支払いは高くなった感じですね。
| 1年目の月額 | 2年目以降の月額 | |
| iPhone 16 | 0円 | 4,000円 |
| iPhone 16 Pro | 4,000円 | 4,000円 |
1年目の4,000円/月の有無が基本的な差でした（まあざっくりですが）。これくらいの差額であれば思い切ってiPhone 16 Proでもいいかなと思い、店員さんに在庫を確認するとデザートチタニウムが1台あったので、即決しちゃいました。
iPhone 16 Proはボタンの配置が変更され、慣れるまでは少し戸惑いそうです。日本語に対応したAI機能、早く使ってみたいですね。
Login rebuilderをアップデート、しくった。。。
一昨日から昨日にかけてプラグイン「Login rebuilder」をアップデートし、バージョンが2.8.5になりました。不具合の修正を一度で済ませることができず、申し訳ない感じです。
不具合の原因は、5年前にホスト名の取得を$_SERVER[‘SERVER_NAME’]から$_SERVER[‘HOST_NAME’]へ変更したところまで遡る。この時はサーバー環境によって$_SERVER[‘SERVER_NAME’]が参照できないことが理由だったわけだが、今回は一部のサーバー環境で$_SERVER[‘HOST_NAME’]が参照できないことがあり、それに対し安易な対応してしまったのが大きなミスだった。
もう1つはnamespace。他のプラグインから順次namespaceを使用するように変更しており、Login rebuilderにも適用していた。これだけのためにLogin rebuilderをアップデートするわけにもいかず、他の更新と合わせてアップデートしようと考えていました。そんな感じで、namespaceを適用した後は十分な動作検証ができておらず、今回の初回アップデートで設定ページが何も表示されなくなってしまいました。
昨日はこんな感じの不具合に対してアップデートを繰り返してしまい、この2日間で2.8.3、2.8.4、2.8.5へ。安易な対応と確認不足を深く反省。同じことを繰り返さないように注意しないと。