コードブロックで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」はインストールされていなかったので、さっそく試してみた。

「Markdown-pdf: Executable path」の内容を空にし、もう一度「export(pdf)」メニューを実行。すると、しばらく「Export」のメッセージが表示されたままになり、その後にPDFファイルが生成された。PDFファイルの中身を確認すると、シーケンス図ではなく、Mermaid記法のテキストのみ。まあ一歩前進なのかな。

PDFファイルがシーケンス図にならない問題は、Windows環境のVSCodeで経験済みで、「Markdown-pdf: Mermaid Server」の内容をデフォルトから次のように変更する。

再度「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 160円4,000円
iPhone 16 Pro4,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へ。安易な対応と確認不足を深く反省。同じことを繰り返さないように注意しないと。

画像を回転できるようにした!

画像に対してフィルター効果をつけるボタンを実装後、ふと画像を回転(傾ける)ことはできないかと思い、試してみたらできてしまった。

AnglePickerControlコンポーネントの角度インジケーターを大きくし、ドラッグ時にPopoverコンポーネントの外に出にくくし、テキストフィールドでは下キーで0から359へ、上キーで359から0へと切り替わるようにしました。

また上部と下部のマージンを自動的に補正するようにしました。こちらは最終的にレスポンシブ対応を考慮しインラインのstyle要素を追加するかたちに落ち着いた感じに。

さて、画像を回転させた際にマージン補正をしない場合、画像の上下の要素との重なりが、ブロックエディターと記事表示時とで差異が生じるので、z-indexあたりを調整しないといけないっぽい。

プラグインをリメイク

JavaScriptでゴリコリ書いていたブロックエディター向けのプラグインを基本部分をJSXで書き換えてリメイクしました。機能面では現行の機能を踏襲しつつ一部機能を拡張した感じです。

マーカー

従来はテキストを選択してボタンでクリックすることで、蛍光ピンクで細目の下線を引いた感じだったのですが、最新版ではマーカーの色と線の太さを選択できるようにしました。

マーカーボタンをクリックすると、ポップオーバーのパネルが表示され、そこでマーカーの色と太さを選択。色は6色、太さは9段階とし、従来に比べてだいぶ自給度が増しました。

グレースケール効果

画像ブロック向けにグレースケール化するボタンについては、グレースケールだけでなくほかの効果を付与できるようにしました。

ボタンをクリックすると画像の右側にポップオーバーでパネルを表示し、「グレースケール」「セピア」「コントラスト」「明るさ」「ぼかし」の効果をそれぞれ適用します。

今できる範囲でちょっと機能強化できてよかったです。Popoverコンポーネントとちょっとなかよくなりましたね。

readme.txtのStable tagがチェックされるようになった!

公式ディレクトリにプラグインをいくつか公開しているのですが、最近readme.txtの「Stable tag」に記述されたバージョンがリポジトリの「tags」内に存在しない場合、コントリビューターに対してエラーを表示するようになっていました。今回WordPress 6.6のリリースに合わせてプラグインのreadme.txtの「Tested up to」を更新した際に気がつきました。。。

公開中のプラグインの「tags」内はこれまで空っぽだったので、順番に用意して行くことに。現状、公式ディレクトリへプラグインをアップロードする場合、Windows環境で「TortoiseSVN」を使用しているのですが、さっぱり方法がわからないので、チョロっと検索してみた。

「tags」を登録する方法はシンプルだった。プルダウンメニューを開き、「TortoiseSVN」-「Branch/tag…」を選択。「To path」欄のプラグインのURLの後に「/tags/(安定版のバージョン番号)」を追加し、「Create copy in the repository from」は「HEAD revision in the repository」を選択して、「OK」ボタンをクリックする。これだけでよかったのか。。。

数分後、プラグイン紹介ページをリロードすると、エラー表示はなくなっていました。この調子で、他のプラグインも更新していきます。

新しければいいってもんじゃないらしい……

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

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

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

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

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

投稿編集画面の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を再インストールして、もう一度ビルド。

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


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

Windowsでtouch

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

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

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

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

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

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

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

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

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