お久しぶりですね。今年のテーマは本気だなんだと言っておきながら1週間ぶりの更新。
さて、タイトル通り、今日はこのブログに画像を表示するべく作業をしていた。
前にも書いたように、画像は Cloudflare の R2 ストレージから配信することを目標とした。 Hugo だと画像も GitHub 上にアップロードする人も多いらしいが、画像のようなバイナリファイルを Git 管理するというのはどうにも気持ちが悪い。 また、大量に画像が溜まると clone が遅くなるなど弊害がありそうだったため、別途配信することにした。
Cloudflare R2 ストレージは 10GB 分無料で利用できる。 そのため、なるべくアップロードする画像はサイズを圧縮しておきたい。
また、ブログに画像を貼る場合、画像を別途アップロードして、その URL を Markdown に埋め込んで、とするのは面倒なので、 Markdown に直接画像を貼り付けたい。
上記の要望をかなえるため、画像をエディタ上にドラッグ&ドロップ、またはクリップボードから貼り付けると、webp に変換の上 R2 へアップロードし、リンクを挿入してくれる VS Code の拡張機能を自作した。 自作したといっても、ほとんど Gemini に生成してもらったコードをコピペしただけではあるが。
似たような拡張機能は全然ある(例えば Markdown Image等)が、最近 Chrome 拡張などのマルウェア化などが問題になっているのでちょっと入れるのが躊躇われた。 そんなに難しくなさそうだし、ということで自作してみることにしたのだ。
テンプレートが用意されていたし、Gemini もいたのでサクッと作ることができた。 途中 WSL2 のプラグインの問題で拡張機能がうんともすんとも言わないことがあったのが一番詰まったところ。
アップロードした画像は、Cloudflare のエッジとブラウザでそれぞれ長期間キャッシュさせるようにした。
Cloudflare のエッジキャッシュ、最初 Cache Reserve というのを契約しないといけないのかと思ったら、これはより高機能なもので標準的なキャッシュは何もせずとも使えるようだった。 危うく追加料金を払うところだった。
これで文字だけのブログからはおさらば。
と言いつつここまで全く画像がないのはどういうことだ。
ということでお気に入りの写真などを貼ってお茶を濁す。
↑これは2025年7月に立山に登ったときの写真
↑これは2026年1月に帰省した際に撮った正体不明の植物の写真
それにしても、Hugo の Markdown 形式だとサイズ調整がしにくいんだなあ。 アップロード時にリサイズ機能も付けるべきか。