<h2 id="h8d027c8ed3">はじめに</h2><p>ブログサイトを運営していると、コンテンツ毎のOGP（アイキャッチ、サムネイル）を自動生成したくなりますよね！</p><p>Remix製の当ブログでもOGP自動生成機能を実装し、下記のようなOGPを自動生成するようになりました。</p><figure><img src="https://images.microcms-assets.io/assets/0b9c56e585404b659842183a9dfaf05a/e46aeeec472048d9bdf5f67f9b6e058c/og-sample.webp" alt="" width="1200" height="630"></figure><p>シンプルですが、気に入るデザインのものができたかなと思います。</p><p>試行錯誤する中でナレッジが溜まったので、今回はRemix + CloudflareでOGPの自動生成を実装する方法をご紹介します。</p><h2 id="h25bb6311c8">OGP（アイキャッチ、サムネイル）を自動生成する方法</h2><p>いきなり結論ですが、Cloudflareが開発している@cloudflare/pages-plugin-vercel-ogというライブラリを使用します。</p><p><a href="https://developers.cloudflare.com/pages/functions/plugins/vercel-og/">https://developers.cloudflare.com/pages/functions/plugins/vercel-og/</a></p><p>急いでる方はこのドキュメントに沿ってミドルウェアを実装しちゃってください。もうそれだけです。</p><p>最終的には私もこのライブラリを使ってOGP自動生成を実装したのですが、そこに至るまでに数日紆余曲折したので、思考と失敗の数々をご紹介します。</p><h2 id="h74813e6b1e">Cloudflare Functionsのファイルサイズ制限について</h2><p>Cloudflareといえば無料である程度使えることも魅力ですが、やはり無料なので制限は厳しめです。</p><p>公式のドキュメントにも記載がある通り、無料プランだとFunctions(Workers)のファイルサイズ制限が1MBとなっています。</p><p>上記で紹介した@cloudflare/pages-plugin-vercel-ogライブラリを使用する方法だと、ビルドした時に1MB以上の大きさとなってしまい、デプロイできなかったのです…。</p><p>無料プランのままデプロイするにはEdge Functions全体の容量が1MB以下となるようにする必要があり、カリカリにチューニングするのも良かったんですが、言ってしまえばOGPのためにそこまでする気にもなれないかつノウハウもないので、一旦別の方法を模索してみることにしました。</p><h2 id="hb85ef7ca84">実行環境の違いでせっかく実装したものが動かず</h2><p>そもそも@cloudflare/pages-plugin-vercel-ogライブラリは、Vercel社が開発しているvercel-ogというライブラリをCloudflareのランタイムでも動くようにしたラッパーライブラリです。</p><p><a href="https://vercel.com/docs/functions/og-image-generation">https://vercel.com/docs/functions/og-image-generation</a></p><p>ホスティング先をCloudflareじゃなくてVercelに移行すれば話は簡単なんじゃ…という邪念が一瞬芽生えたのはここだけの話にしておいてください。</p><p>vercel-ogは、内部で<a href="https://github.com/vercel/satori" target="_blank" rel="noopener noreferrer nofollow">satori</a>というライブラリを使ってTSXをSVGに変換し、さらに<a href="https://github.com/yisibl/resvg-js" target="_blank" rel="noopener noreferrer nofollow">resvg-js</a>というライブラリを使ってSVGをPNGに変換する、という処理を行なっており、その結果OGPが自動生成されるというものでした。</p><p>ランタイムの概念がよくわかっていなかった当時の私は、それならsatoriとresvg-jsを使って自分でOGP自動生成処理を書けばいいじゃん！と思いつき、一旦実装してみました。</p><p>ローカルのnode環境でうまく動作し、達成感と共にデプロイしようとすると、当然のことながら動きません…。</p><p>satoriとresvg-jsはnode依存のライブラリなので、node以外の実行環境では動作しないのです。そりゃそうだ。</p><p>この辺りで一旦心が折れて愛用しているneovimをそっと閉じます…。</p><h2 id="h52674e128d">WebAssemblyむずかしくてよくわからん</h2><p>翌日、諦め切れず色々と調べていると、satoriとresvgのwasm版を使ってEdgeランタイムでも動くようにしている強そうな方の技術記事が見つかりました。</p><p>WebAssemblyというワードは昨今よく耳にするものの、実際に使ったことのない私は計り知れぬハードルの高さを感じてしまいました…。</p><p>OGPの自動生成はあったらいいなくらいのモチベーションで実装しようとしており、ブログサイトの運営という目的においては実装に時間を割きすぎるのも本質的ではないと判断し、いつかちゃんと勉強しようという決意をしてそっとブラウザを閉じました。</p><h2 id="h3c9596c528">力こそパワー。困ったらお金で解決</h2><p>最終的にはCloudflare Workersの有料プランにサブスクリプションすることで、ファイルサイズ制限を10MBまで増やし、解決しました。これが大人の力。パワーイズパワー。</p><p>価格は2024年8月時点で月5ドルです。</p><p><a href="https://developers.cloudflare.com/workers/platform/pricing/">https://developers.cloudflare.com/workers/platform/pricing/</a></p><p>これで公式の@cloudflare/pages-plugin-vercel-ogライブラリを公式通りに実装して、デプロイ成功しました。</p><h2 id="h9be0c3393d">おわりに</h2><p>実践的な技術記事というよりはポエミーな内容になってしまいましたが、結果的にOGPを自動生成できるようになったので満足しました。</p><p>近いうちにFunctionのバンドルサイズを下げるか、wasm版を使ってsatori + resvgで実装する方法も模索してみようかと思いますので、知見が溜まったら記事にできればと思います！</p><h2 id="h44e51f96ce">参考資料</h2><p><a href="https://zenn.dev/uzimaru0000/articles/satori-workers">https://zenn.dev/uzimaru0000/articles/satori-workers</a></p>