News
Meetup
YouTube
Blog
書き起こし
2022/12/02 に公開
536 views
このエピソードについて
Vercelがリリースした新しいOG画像生成ライブラリ @vercel/og (Satori) の実装について、@potato4dと@spring-rainingが話しました。
@vercel/og について
https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images
@vercel/ogでのSVG生成を試せるサイト
https://og-playground.vercel.app/
元々 @vercel/og-image というライブラリがあったが、Serverless Chromeを使うことに起因する問題を解消するため、別のアプローチで生成するようにした
どうやって? → HTML と CSS (のサブセット) からブラウザを介さずに SVG に変換するレイアウトエンジンを実装した
JSXでの入力に加えて、
tw
propertyでTailwind風のスタイル指定ができることも特長
レイアウトエンジンの詳細
@vercel/og の実体は
@vercel/satori
で実装されている
yoga
react-nativeなどで使われている、クロスプラットフォームのレイアウトエンジン
CSS Flex layoutにインスパイアされた設計
C++で書かれているライブラリをemccでWASMに変換して使用している
opentype.js
OpenTypeを読み込むライブラリ
SVG自体はフォントデータを持たないため、テキストをSVGに埋め込む必要がある
resvg-js
Rustで書かれたSVGレンダリングライブラリresvgをWASMで提供
ラスター画像 (PNG) を生成するために使われる
サポートするHTML/CSS
HTML: input, table などブラウザ固有っぽいタグはサポートしない
https://github.com/vercel/satori/blob/main/src/handler/presets.ts
CSS: Flex layoutに加えて、SVGで実現できる装飾は大体対応されている
https://github.com/vercel/satori#css
Grid layoutはサポートしない
Flex gapは対応している?
収録時点でYogaでは対応しているが、satoriにはまだ入っていないっぽい
https://github.com/vercel/satori/pull/262
Refs
BGM&SE
魔王魂/騒音のない世界/OtoLogic
1.0x
1.3x
1.5x