費用ゼロでOG画像を生成する方法
APIの料金を支払うことなく、数百もの記事のOG画像を生成できます。
私はPlaywrightを使用してHTMLテンプレートのスクリーンショットを撮っています。これにより、CSSを完全に制御でき、外部キーも必要ありません。
静的サイトを運営している場合、これが一括画像生成を処理する最良の方法です。
私のアプローチの詳細は以下の通りです。
他の選択肢ではなくPlaywrightを選んだ理由：
- Cloudinary: カスタムフォントに費用がかかり、URL構文が複雑です。
- Vercel OG: 動的なサイトには適していますが、私はCloudflare上で静的サイトを使用しています。
- Node-canvas: C++の依存関係があるため、CIでのセットアップが困難です。
- Pillow: 複雑なCSSレイアウトやflexboxを使用するのが困難です。
Playwrightを使った方法はシンプルです。CSSを含むHTML文字列を作成し、それをヘッドレスブラウザに渡して、スクリーンショットを撮ります。
ブラウザがフォント、グラデーション、flexboxなど、すべてを処理してくれます。
主な技術的詳細：
- アクセントカラー: スクリプト内で正規表現を使用して、記事のタグに基づいて色を選択します。「AI」タグなら紫、「Webdev」タグなら青を選択します。
- 動的なサイズ調整: タイトルの長さに応じてフォントサイズを調整し、文字溢れを防ぎます。
- フォント問題の回避:
wait_until="networkidle"を使用しています。これにより、スクリーンショットを撮る前にGoogle Fontsが確実に読み込まれます。これがないと、画像には汎用的なシステムフォントが使用されてしまいます。 - スピードの最適化: ブラウザのインスタンスを1つだけ開き、すべての記事でpageオブジェクトを再利用します。これにより、CIパイプラインでの時間を大幅に短縮できます。
ワークフロー：
- スクリプトがPNGを生成する。
- スクリプトが記事のfrontmatterに画像のURLを書き戻す。
- CIパイプラインが画像をコミットする。
- サイトがデプロイされる。
これにより、Dev.toやHashnodeなどのプラットフォームに記事が公開される前に、画像が確実に利用可能な状態になります。
避けるべきケース：
オンデマンドでの生成には使用しないでください。Playwrightは画像1枚につき約2秒かかります。また、重いブラウザバイナリを必要とするため、ライブリクエストには遅すぎます。
タイミングを制御できるバッチビルドで使用してください。