Satori + Cloudflare Workers で OG 画像を動的生成した

2022年12月、sampleimg-worker をデプロイした。Satori を Cloudflare Workers で動かして、URL パラメータから OG 画像を生成するやつ。1日でガッと作った。

使い方

幅・高さ・背景色・文字色・テキストを URL に詰めるだけ。

https://sampleimg-workers.ryus.workers.dev/600x400/000/fff?text=あああ

技術

Satori — JSX を SVG/PNG に変換
Cloudflare Workers — エッジで実行

中身は src/lib/img.tsx に Satori で組む画像、src/lib/fonts.ts でフォントを読む、という素朴な構成。

import satori from 'satori';

const svg = await satori(
  <div style={{ /* width/height/背景色/文字色 */ }}>{text}</div>,
  { width, height, fonts }
);

ハマったところ

一番引っかかったのはフォント。Satori は JSX を画像にするのに、使うフォントを自分で読み込んで渡さないといけない。日本語を出そうとすると、当然そのフォントデータが要る。fonts.ts でフォントを抱える形にして解決したけど、フォントファイルのサイズと Workers の制限のバランスは気にする必要があった。

学び

OG 画像の都度生成は Workers 向き。短時間で終わる処理で、グローバルに散らしたい、というのがエッジの得意分野にハマる。逆に、変わらない画像ならビルド時生成でいい。「ビルド時生成 vs リクエスト時生成」をどっちに倒すか、という判断を意識するようになった最初の例。

おわり

これが Cloudflare Workers 実験記シリーズの第1弾。「エッジで何ができるか」を手で確かめる流れが、ここから cloudflare-remix → demo-gpt → 2rab-analytics と続いていく。