@vercel/ogから学ぶOG画像生成技術の変遷/ジャムスタックチョットデキル!! 秋のLT大会2022

Jamstackによる開発を得意とするchot Inc.主催のライトニングトークイベントで登壇した資料です。

Transcript

1. ちょっと株式会社 noe @vercel/ogから学ぶ OG画像生成技術の変遷
2. noe chot Inc. フロントエンドエンジニア 0xnoe_ @
3. @ Next.js + Vercelで動的OG画像生成をしたい場合は @vercel/ogを使うとよさそう @ Edge Computing環境のWebAssembly対応が進み、 パフォーマンスが改善されている LTでお伝えしたいこと
4. @vercel/ogとは
5. 2022/10/10に発表されたOG画像生成ライブラリ
6. 基本的な仕組み @vercel/ogとは  コアエンジンとしてSatoriを使い、HTMLとCSS をSVGに変換すI  ResvgによってSVG→PNGに変換すI  これらの処理をVercel Edge Functions上で行`  2022/11月現在はVercelのベータ版機能
7. Q デフォルトのNode.jsランタイムはサポート されていないため、runtimeオプションで Edgeランタイムであることを明示する Q ImageResponse関数にマークアップを渡す Q テキストなど動的に変えたい場合は
 クエリパラメータから引っ張る 実装例 @vercel/ogとは
8. @vercel/ogとは
9.  画像配信CDN → Cloudinary, imgix  サーバーサイドで画像処理 → node-canvas, RMagick  Serverless Functionsでスクリーンショット
 → puppeteer, playwrite（Chromium） 以前からあるOG生成手法
10. 従来の課題 - 保守性
11. 画像配信CDN系 → 座標、パラメータ等の指定
12. 画像配信CDN系 → 座標、パラメータ等の指定 しんどみ深太郎
13. サーバーサイド画像処理  Canvasを立てる  最大幅を超えた場合に文字を
 折り返すための処理を独自定義  ...etc → 簡単な画像を作りたい場合でも
 　 コード量が膨れ上がる
14. サーバーサイド画像処理  Canvasを立てる  最大幅を超えた場合に文字を
 折り返すための処理を独自定義  ...etc → 簡単な画像を作りたい場合でも
 　 コード量が膨れ上がる
15. Q デフォルトのNode.jsランタイムはサポート されていないため、runtimeオプションで Edgeランタイムであることを明示する Q ImageResponse関数にマークアップを渡す Q テキストなど動的に変えたい場合は
 クエリパラメータから引っ張る 実装例 @vercel/ogとは
16. 従来の課題 - 速度
17. – 旧@vercel/og-imageはSurverless Functions + puppetee‰ – 同梱のChromiumが重い（~280MBW – AWS Lambdaのサイズ上限に引っかかるため
 圧縮しなければならない→それでも50M5 – コールドスタート（Lambdaインスタンスが
 処理する最初のリクエスト）時に解凍するが、遅い。 Surverless + Headless Browserの課題
18. @vercel/ogが解決すること 実装が容易 - node-canvasやImageMagicによる実装コスト と比べると、ほぼHTML, CSSのみ意識すれば良いため組み やすい。 速い - Headless browserを使わず、Edge環境上で WebAssemblyを介しているため高速。旧vercel/og-image と比較して5倍速いらしい
19. 8 Vercel + Next.jsで動的OG画像生成なら@vercel/o デザインテンプレート 8 上記以外の環境でも、satori + resvgを使えば同様の処理を実現できT 8 いい感じにOG画像を作るための あり（有志） 8 Serverless Function + Headless browser → Edge Function + WebAssembly
 に変化 最後に
20. https://fullstackheroes.com/resources/vercel-og-templates/
21. chot Inc. noe 完