ふと思いついたのが、過去の投稿のリンクをもう少し手軽に使えないかというもの。ブログで昨日（前回）の続きの投稿する際に便利ではと思った次第だ。
実装したのはこんな感じ。
トリガーとなるプレフィックスは「:post」とし、最新の投稿タイトルを表示させた。製作途中では投稿日を含めてみたのだが、投稿タイトルの長さとの兼ね合いもあって、まずは投稿タイトルのみを表示することにした。
autocompleteに投稿リンクを追加してみた
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へ。安易な対応と確認不足を深く反省。同じことを繰り返さないように注意しないと。
画像を回転できるようにした！
画像に対してフィルター効果をつけるボタンを実装後、ふと画像を回転（傾ける）ことはできないかと思い、試してみたらできてしまった。
AnglePickerControlコンポーネントの角度インジケーターを大きくし、ドラッグ時にPopoverコンポーネントの外に出にくくし、テキストフィールドでは下キーで0から359へ、上キーで359から0へと切り替わるようにしました。
また上部と下部のマージンを自動的に補正するようにしました。こちらは最終的にレスポンシブ対応を考慮しインラインのstyle要素を追加するかたちに落ち着いた感じに。
さて、画像を回転させた際にマージン補正をしない場合、画像の上下の要素との重なりが、ブロックエディターと記事表示時とで差異が生じるので、z-indexあたりを調整しないといけないっぽい。
プラグインをリメイク
JavaScriptでゴリコリ書いていたブロックエディター向けのプラグインを基本部分をJSXで書き換えてリメイクしました。機能面では現行の機能を踏襲しつつ一部機能を拡張した感じです。
マーカー
従来はテキストを選択してボタンでクリックすることで、蛍光ピンクで細目の下線を引いた感じだったのですが、最新版ではマーカーの色と線の太さを選択できるようにしました。
マーカーボタンをクリックすると、ポップオーバーのパネルが表示され、そこでマーカーの色と太さを選択。色は6色、太さは9段階とし、従来に比べてだいぶ自給度が増しました。
グレースケール効果
画像ブロック向けにグレースケール化するボタンについては、グレースケールだけでなくほかの効果を付与できるようにしました。
ボタンをクリックすると画像の右側にポップオーバーでパネルを表示し、「グレースケール」「セピア」「コントラスト」「明るさ」「ぼかし」の効果をそれぞれ適用します。
今できる範囲でちょっと機能強化できてよかったです。Popoverコンポーネントとちょっとなかよくなりましたね。
オートコンプリートで虎視眈眈！
若干不満はあるものの「editor.Autocomplete.completers」フィルターは楽しい拡張ポイントです。
今回追加したのは四字熟語。トリガーは「:ju」にしてみました。
ここで選択された熟語は 虎視眈眈 のようにルビに加え、abbrタグで表示するようにしてみました（四字熟語は純粋な略語ではないけれど）。
オートコンプリートの不満は、オプション候補が10を超える場合に上下キーなどで11番目以降の候補を表示・選択する術がないことくらい。追加の文字で絞り込みは可能だけど、シンプルに上下キー（＋Ctrlキーなどの組み合わせ）で候補の切り替えが可能になってほしい。
ログインページをちょっと変えた！
Googleアカウントでログインできるプラグインを作り、しばらく運用してきたが、特に問題がなかったのでログインページをちょっと変えることにした。
具体的には「ID」と「パスワード」の入力ボックス、「ログイン」ボタンなどのログインフォームをとっぱらうこと。従来の表示への切り替えは、wp-config.phpの定数で変更できるようにしたり、ログインフォームが非表示の場合は「ID」と「パスワード」によるユーザー認証を不可にしたりといった対応をしています。
Googleアカウントでログインする際はそのボタン1つで十分だったので、今回ログインフォームを見えなくしたことで、見た目はかなりスッキリしました。
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リリース！
WordPress 6.6が予定通りリリースされました。メジャーバージョンのコントリビューターリストに名前が載っていたは嬉しいことです。
最近、ちょっとした手違いで作っていたカスタムブロックを壊しまい、作り直しをしたのですが、機能的には以前のものと同等以上であっても微妙なところが違っていておもしろい感じです。
カスタムブロックについては自分なりに作り方のスタイルが固まってきたのもいい傾向だと思っています。attributesの項目が多くなりがちで、それにともないサイドのUIが肥大化しつつあるのが悩みどころ。もう少しシュッとコンパクトにまとめたい。