投稿

投稿日:

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 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コンポーネントとちょっとなかよくなりましたね。

投稿日:

オートコンプリートで虎視眈眈！

若干不満はあるものの「editor.Autocomplete.completers」フィルターは楽しい拡張ポイントです。

今回追加したのは四字熟語。トリガーは「:ju」にしてみました。

ここで選択された熟語は 虎視眈眈こしたんたん のようにルビに加え、abbrタグで表示するようにしてみました（四字熟語は純粋な略語ではないけれど）。

オートコンプリートの不満は、オプション候補が10を超える場合に上下キーなどで11番目以降の候補を表示・選択する術がないことくらい。追加の文字で絞り込みは可能だけど、シンプルに上下キー（＋Ctrlキーなどの組み合わせ）で候補の切り替えが可能になってほしい。

投稿日:

ログインページをちょっと変えた！

Googleアカウントでログインできるプラグインを作り、しばらく運用してきたが、特に問題がなかったのでログインページをちょっと変えることにした。

具体的には「ID」と「パスワード」の入力ボックス、「ログイン」ボタンなどのログインフォームをとっぱらうこと。従来の表示への切り替えは、wp-config.phpの定数で変更できるようにしたり、ログインフォームが非表示の場合は「ID」と「パスワード」によるユーザー認証を不可にしたりといった対応をしています。

Googleアカウントでログインする際はそのボタン1つで十分だったので、今回ログインフォームを見えなくしたことで、見た目はかなりスッキリしました。