カテゴリー: blog

今週はWordPress 6.6 Beta1、6.5.4が公開されました。手持ちの2サイトは順次6.5.4へ、開発環境もとりあえずは6.5.4へアップデートしました。

そんなこんなで気分一新し、新しいブロックでも作ってみようかと思い、「create-block」で新しいプラグインを作成。

% npx @wordpress/create-block hello-blocks

このコマンドは、wp-content/pluginsディレクトリで実行するのが正解なわけだが、先にプラグインのディレクトリを作ってその中で実行しちゃいがち（その度にやり直してる）。

とりあえずプラグインのディレクトリへ移ってビルド。

% npm run build

プラグインを有効化し投稿編集画面を開いてみたが、作ったブロックが表示されない。なんで！？

投稿編集画面のHTMLソースを見ると、cssファイルはロードされているけど、jsファイルが見当たらない。思いついたことは試してみたが原因がさっぱりわからず昨晩は寝てしまった。

夜があけてXを眺めていると、「浜野さん」のポストを発見！

wordpress/scriptsがv28.0からReactの新しいJSXトランスフォームを使用するようになったのですが、これはWordPress6.5以下では動作しないので、ブロック開発でscriptsを使用していてWordPress6.5以下もサポートする場合は、scriptsのv27.9以下を使う必要があります

https://x.com/tetsuaki_hamano/

ということで、プラグインディレクトリのpackage.jsonを確認。確かに、「^28.0.0」になっていた。

  "devDependencies": {
    "@wordpress/scripts": "^28.0.0"
  }

「^28.0.0」を「^27.9.0」に書き換えて保存。wordpress/scriptsを再インストールして、もう一度ビルド。

% npm install --save-dev @wordpress/scripts

% npm run build

投稿編集画面を開き直すと、無事ブロックが表示されました。

---

本件はWordPress 6.6 Beta1が公開され、それに合わせてwordpress/scriptsもアップデート。このタイミングで新しいブロック（プラグイン）を作成したことにより、生じたのでしょう。これからは、wordpress/scriptsのバージョンに注意しないといけませんね。

ファイルのタイムスタンプを変更したくなった際、Windows環境でもLinux環境と同じようにtouchコマンドが使いたいと思うことがある。PowerShellでタイムスタンプを変更する場合は次のようなコマンド（スクリプト？）が使えるようだが、ちょっと長い感じ。

>powershell -C "(Get-Item {ファイルのパス名}).LastWriteTime = (Get-Date)"

このことを検索している過程で、Visual Studio CodeでGithubと連携する際にインストールした「Git for Windows」には「bash」が同梱されており、このbashならtouchコマンドが普通に使えることを知った。

>bash
$ touch --help
Usage: touch [OPTION]... FILE...
Update the access and modification times of each FILE to the current time.

これで問題解決かと思ったのですが、このbashにはひと手間が必要で、インストールしたままだと日本語のファイル名が文字化けしてしまいます。

$ ls
'Visual Studio Code.lnk'   WinSCP.lnk   desktop.ini  '□'$'\202''□□'$'\203\236''□'$'\203''□□'$'\203\211''.lnk'

この問題の解決方法を検索したところ、ユーザーのホームディレクトリ（C:\Users\〇〇〇〇）に.bashrcファイルを作成し、その中に次のような内容を記述するといいらしい。

$ vi ~/.bashrc

export LC_ALL=ja_JP.utf8
export LANG=ja_JP.utf8
export LANGUAGE=ja_JP.utf8
export LC_CTYPE=ja_JP.utf8
export LC_NUMERIC=ja_JP.utf8
export LC_TIME=ja_JP.utf8
export LC_COLLATE=ja_JP.utf8
export LC_MONETARY=ja_JP.utf8
export LC_MESSAGES=ja_JP.utf8

上記を保存し、bashを再度実行。lsコマンドの結果は次のように変わった。

$ ls
 desktop.ini  'Visual Studio Code.lnk'   WinSCP.lnk   コマンド.lnk

.bashrcファイルの内容は、本来.bash_profileファイルに記載する内容として紹介するサイトを参考にしたものです。.bash_profileファイルを使用する場合は、bashの起動時のパラメータに「-l」を指定する必要があるため、ここでは.bashrcファイルに適用しました。

実際にtouchコマンドを使ってみます。

$ ls -al readme.html
-rw-r--r-- 1 tmatsuur 197121 7399  4月 10 10:34 readme.html

$ touch readme.html

$ ls -al readme.html
-rw-r--r-- 1 tmatsuur 197121 7399  4月 10 12:48 readme.html

touchコマンド後、更新日時が変わっていますね。

さて、bash内ではフルパスの指定時に「/c」のようにドライブレターを先頭に指定する必要があるので、これには慣れが必要かもですね。

Autocompleteフィルターを使い段落ブロックで簡単な計算ができるようにしてみた。

「=」をトリガーにし、それに続く式を計算して、答えのみか、式と答えの組み合わせを選択する感じ。四則演算を対応した後でべき乗に対応した際、優先度を考慮しわすれてちょいはまり。定数としてはpi（π）とphi（φ）をサポートしてみました。

今回の対応でAutocompleteフィルターを利用したものを4種類。アイデアしだいでいろいろ実装できるのが楽しいフィルターですね。

現在（絶賛）評価中のWordPress 6.5（Beta）を、いくつかの開発環境で試してみると、日本語で表示されないものがありました。Beta 1のころから3まで症状は解決しなかったので、昨日少し調べてみた。

前提としてその開発環境のロケールは’ja’となっている。これはサイトの言語設定、ユーザーの言語設定とも確認済み。

個別に__()などで翻訳テキストを取得しても、原文（英語）がそのまま返ってくる。

その開発環境のPHPバージョンは次の通り：

PHP 7.4.32 (cli) (built: Sep 28 2022 20:48:52) ( ZTS Visual C++ 2017 x86 )

そんなわけでmoファイルの読み込み部分をトレースしてみる。

「WordPress 6.5 Beta 1の紹介ページ」では直接触れられていないのだが、PHPの翻訳ファイルへの対応が含まれている。この対応にともなって翻訳処理が変更されており、wp-includesディレクトリにはl10nディレクトリが追加され、その中には5つのPHPファイルが存在する。その中の1つがclass-wp-translation-file-mo.phpである。

class-wp-translation-file-mo.phpでは、読み込んだmoファイルの先頭の4バイトを次のように定義されたクラス定数と比較し、moファイルが有効なファイルか評価している。

const MAGIC_MARKER = 0x950412de;

:

if ( self::MAGIC_MARKER === $big ) {
	return 'N';
}

このコード、何の問題もないように見えるのだが、32ビット版PHPの場合は落とし穴が潜んでいる。self::MAGIC_MARKERをダンプすると、期待していたint型ではなく、float型になっていたのだ。

float(2500072158)

このことにより、読み込んだmoファイルは不適切なものとなり、正常に読み込まれていなかった。そして結果的にサイトの表記は英語のままとなっていた。

class-wp-translation-file-mo.phpの問題部分を自分なりに修正し、問題の開発環境にて日本語で表示されることを確認。この問題についてtracに報告した。

今朝、PHPの整数についてドキュメントを見直す。そこには、確かにint型の範囲を超える数値はfloat型になる旨が書かれている。個人的な感覚として、0x950412deはそのまま（8バイトの）int型になってもよさそうなのだが、32ビット版PHPではそうならなかった。

何はともあれ、次かその次のBetaでは修正されることを期待したい。

昨日、久しぶりにMacBook Air（以降MacBook）を立ち上げる。OSのアップデート通知に従い「macOS Sonoma 14.3.1」をインストール。なんだかんだで約1時間、本来の目的である新しいプラグインの動作検証を行った。

このMacBook、Web開発環境を構築する前だったので、この機に少し進めることにした。

Visual Studio Codeから

「ターミナル」を開いて「Homebrew」をインストール。バージョンは4.2.10でした。

% brew -v
Homebrew 4.2.10

続いて「Visual Studio Code」をインストールする。

% brew install visual-studio-code
% code -v
1.86.2
903b1e9d8990623e3d7da1df3d33db3e42d80eda
arm64

「Launchpad」から「Visual Studio Code」をクリックし、起動確認。拡張機能の「Japanese Language Pack」も適用しておく。

あと「Git」も忘れずにインストールする。

% brew install git

% git -v
git version 2.44.0