Cloudflare Browser RenderingでHTMLを画像に変換する
はじめに
HTMLを画像にしたい。OGP画像の自動生成、SNS用のスライド作成、レポートのPDF化など、用途はいろいろ。
最初は workers-og（Satori）を試したのですが、CPU時間制限に引っかかって複数画像を一気に生成できなかった。そこで出会ったのが Cloudflare Browser Rendering。
Browser Renderingとは
Cloudflare Workers上でPuppeteer（ヘッドレスブラウザ）を動かせるサービス。
つまり、HTMLを書けばそのまま画像にできる。CSSも完全対応。
料金
- 無料枠: 有料プラン（$5/月〜）で10時間/月
- 従量課金: $0.09/ブラウザ時間
1回のスライド生成（7枚）をする場合は約30秒なので、1日10回生成しても月5時間程度。無料枠で十分。
実装
1. wrangler.toml
ポイントは [browser] セクション。これでPuppeteerが使えるようになる。
2. Worker本体
3. HTMLテンプレート
背景画像の取得
Unsplash APIで取得し、フォールバックとしてPicsumを使用。
ハマったポイント
1. 背景画像が表示されない
最初はCSSの background-image を使っていたが、外部URLだと読み込みが不安定だった。
解決策: <img> タグ + object-fit: cover に変更
2. 画像の読み込み待ち
networkidle0 だけでは不十分なケースがあった。
解決策: 明示的に画像の読み込みを待つ
3. Node.jsモジュールエラー
node:buffer が見つからないエラー。
解決策: compatibility_flags を追加
Cronとの連携
Cron TriggerやCloudflare Queuesと組み合わせれば、定期的な画像生成も可能。
PCを開いていなくても、サーバーサイドで全て完結する。
まとめ
| 項目 | workers-og (Satori) | Browser Rendering |
|---|---|---|
| 日本語フォント | 要設定 | Google Fonts使用可 |
| CSS対応 | 一部制限あり | フル対応 |
| 画像埋め込み | 制限あり | 制限なし |
| CPU時間 | 厳しい | 余裕あり |
| 料金 | 無料 | 有料プランで無料枠 |
複雑なレイアウトや背景画像を使いたいなら、Browser Renderingがおすすめ。
HTMLとCSSの知識がそのまま使えるので、デザインの自由度が格段に上がる。
