HonoXでsatoriを使ってOGイメージもSSGする
- meta
- framework
このサイトをHonoXに書き換えたのですが、そういえばOGイメージがないことに気づきました。
どうやって画像を生成するか
今回はOGイメージもSSGしてしまうことにしました。記事数が増えてきて時間がかかるようになってきたら、ダイナミックレンダリングするように変えるかもしれません。
いったんSSGですませるのは、HonoXからCloudflare PagesのAdvanced ModeをSSGと両立していい感じにデプロイする方法がまだいい感じではないからです。何とかしようとは思っています。
satoriとresvgを使ってHonoXでビルドしたい
OGイメージを動的に生成する道具としては @vercel/og が有名どころです。これは内部的に satori と Resvg を使っています。
Open Graph (OG) Image GenerationのLimitationsの項目に記載があるように、Node.jsや他のランタイムで動作させたい場合はsatoriを直接使うことが勧められています。
素朴に導入してみると盛大にエラーが出ますので先行事例をあたると、HonoXと同様にViteに乗っているAstroの事例として、satoriを使ったAstroのOGP画像生成メモ | Marginaliaがありました。
いろいろ細かい調査を省いて、 ssr.external に satori @resvg/resvg-js を追加すると、SSGのコマンドが完走できるようになりました。
satori は単に依存にCommonJSが含まれていました。HonoXでは ssr.noExternal がtrueなので、SSRビルドでも明示的に指定する必要があります。
@resvg/resvg-js はネイティブモジュールがViteの事前ビルドに失敗します。上記記事に書かれているのと同じ問題でした。
バイナリをHonoのSSGヘルパーで出力すると壊れる問題があった（Hono v4.0.8で修正済み）
開発用サーバーだと画像が表示できるのですが、SSRした画像が開けない問題がありました。Resvgを通さずにSVGファイルとして出力すると問題がなかったので当初はResvgを疑ったのですが、開発用サーバーで動くことを思うと説明がつきません。
PNGファイルとして書き出していたので、PNGファイルのヘッダーを念のため確認してみると、各所に書かれている 89 50 4E 47 0D 0A 1A 0A とは異なっていました。
> hexdump -C generated/from-ssr/binary.png
00000000 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 |.PNG........IHDR|
00000010 00 00 00 01 00 00 00 01 08 02 00 00 00 90 77 53 |..............wS|
00000020 de 00 00 00 0c 49 44 41 54 78 9c 63 f8 cf c0 00 |.....IDATx.c....|
00000030 00 03 01 01 00 c9 fe 92 ef 00 00 00 00 49 45 4e |.............IEN|
00000040 44 ae 42 60 82 00 00 00 2f |D.B`..../|
00000049
> hexdump -C generated/from-ssg/binary.png
00000000 ef bf bd 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 |...PNG........IH|
00000010 44 52 00 00 00 01 00 00 00 01 08 02 00 00 00 ef |DR..............|
00000020 bf bd 77 53 ef bf bd 00 00 00 0c 49 44 41 54 78 |..wS.......IDATx|
00000030 ef bf bd 63 ef bf bd ef bf bd ef bf bd 00 00 03 |...c............|
00000040 01 01 00 ef bf bd ef bf bd ef bf bd ef bf bd 00 |................|
00000050 00 00 00 49 45 4e 44 ef bf bd 42 60 ef bf bd 00 |...IEND...B`....|
00000060 00 00 2f |../|
00000063
雑に壊れているPNGの冒頭のバイト列で検索してみると、node.js - Unexpected buffer result when fetching PNG image - Stack Overflowのやり取りを見つけました。バイナリを誤ってUTF-8として解釈してしまっているという話のようです。
なるほど、 ef bf bd はUTF-8のコードポイントU+FFFD（replacement character）にあたります。UTF-8として解釈したときにうまくいかないバイト列があるときに現れます。こうなってくると、SSGの処理に問題がありそうです。
hono/ssg のヘルパーに露骨にバイナリをUTF-8扱いして文字列化する処理が含まれていたので、honojs/hono #2275を出して修正しました。
ついでにBudouXで改行位置をいい感じにする
いい感じの折り返し制御のために、BudouX を使いました。説明は他所に譲ります。これも ssr.external に追加する必要がありました。
実装はBudouXとSatoriを使ってタイトルが分かち書きされたOGP画像を出力する。 - return $lock;が参考になりました。
まとめ
HonoXでOGイメージをSSGするためにsatoriとresvgを使って実現しました。Viteの上でビルドするためのHonoX独特の設定が必要なのと、HonoのSSGヘルパーに問題があったので修正しました。皆さんもお試しください。