Bun Webview で画像生成を実装する方法

伝統的なウェブページスクリーンショット方式は通常 Puppeteer や Playwright といったヘッドレスブラウザに依存するが、これらのツールパッケージはサイズが大きく、起動が遅く、メモリ消費が高い。Bun Webview はより軽量な選択肢を提供する。システムネイティブの WebView コンポーネントに基づき、サーバー側でウェブページをレンダリングし画像を生成できる。

Bun Webview の核心 API 設計はシンプルで直感的だ。webview インスタンス作成時に幅と高さを指定し、URL や HTML 文字列を読み込み、ページ完了を待ってから screenshot メソッドで画像を生成し、最後に webview を閉じてリソースを解放する。全体のフローのコード量は少なく、伝統的なブラウザ自動化方案よりずっとシンプルだ。

const webview = new Bun.WebView({
  width: 1200,
  height: 630,
});

await webview.loadHTML("<h1>Hello, World!</h1>");
await webview.waitForLoad();

const image = await webview.screenshot({ format: "png" });
await Bun.write("output.png", image);

webview.close();

動的コンテンツの生成は Bun Webview の得意分野だ。グラデーション背景、すりガラス効果、レスポンシブレイアウトを含む HTML テンプレートを構築し、loadHTML メソッドで直接レンダリングできる。この方式はソーシャルメディアのシェアカード、OG アイコン、個別化レコメンド画像の生成に特に適している。サーバー側でレンダリングを完了するため、クライアントは生成された画像を直接使用でき、ブラウザのレンダリングプロセスを待つ必要がない。

実際の使用ではいくつかの重要なコツを押さえる必要がある。フォントの読み込みは重要で、レンダリングの一致性を保証するためシステムフォントスタックの使用を推奨する。例えば -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto のような組み合わせだ。レンダリングタイミングの制御も重要で、チャートやアニメーションなどの動的コンテンツは追加の待機時間が必要な場合がある。setTimeout と waitForLoad を組み合わせてコンテンツが完全にレンダリングされたことを保証する。エラー処理もおろそかにできない。ネットワークリクエストは失敗やタイムアウトする可能性があり、try-catch で包み合理的なタイムアウト時間を設定すべきだ。

Bun Webview は軽量なスクリーンショットニーズの処理に最も適している。ソーシャルメディアカードの生成、データ可視化チャートの作成、ウェブページサムネイル機能の実装が必要な場合、完全なブラウザインスタンスを起動するよりずっと効率的だ。だが複雑なインタラクション、Cookie 管理、マルチステップ操作が必要なシナリオでは、伝統的なブラウザ自動化ツールの方が適しているかもしれない。

ドット絵生成ツールはこの考え方に基づいて実装されている。Bun Webview で AI 生成のドット絵を読み込み画像をエクスポートする。

関連ツール：

• ドット絵生成 — AI 生成ドット絵

参考文献

• Bun.WebView オブジェクト API ドキュメント