ep.135 『@vercel/og で OG 画像生成の Satori を開く』 | UIT INSIDE

2022/12/02 に公開1615 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

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

@potato4d 00:04
こんにちは、UITのpotato4dです。ユーザーインターフェイスとテクノロジーを愛する、開発者のためのウィークリーポッドキャスト UIT INSIDE。今週も始めていきたいと思います。今回はですね、玉田さんに@vercel/ogのライブラリについてお話を聞こうと思いますよろしくお願いいたします

@spring_raining 00:24
よろしくお願いします。

2. @vercel/og について 00:32

@potato4d 00:32
では、早速。えっと、@vercel/ogのパッケージについてと紹介していただきたいなと思うんですけど、結構10月ぐらいですかね。にちょっと話題になって、snsとかでも話が上がったかなと思うんですけど、改めて簡単に概要の方、紹介していただいてもよろしいでしょうか。

@spring_raining 00:48
はい、そうですね、これはあのおっしゃっていた通り、10月ぐらいにえっと、公開されたもので、取り上げたきっかけっていうのが、その技術的に面白いライブラリだということがわかって今回取り上げてみようかなというところに思いました。でですね、どういったものかと言いますと、ogっていうのはオープングラフイメージの略で、オープングラフ向けの画像を生成するというライブラリーになります。

@spring_raining 01:15
で、これがですね。そういう技術的に面白いということがわかりまして、どういったところが面白いかと言いますと、これを元々ライブラリがあったんですね。えっと、@vercel/og-imageというライブラリがあって、それのリプレイズという形で、Vercelのogというライブライが今回出てきたというところです。

@spring_raining 01:35
でどういったところが違うかというと、元々その@vercel/og-imageっていうのが、その画像をサーバーで、そのChromeを使って。そこで、その要するにPuppeteerでPuppeteerを動かして、で、htmlの領域をスクリーンショットを取って、画像を生成するという仕組みで動いてたんですけれども、それだと結構色々な問題があったという風に書かれています。

@spring_raining 02:04
例えば、サーバーレスのChromeが大きいから重いっていう問題もありますし、結構それが起因で速度が遅いとか、あとはま元々そのサーバーレスファンクションで動かすこということを目的としていたんですけれども、それが大きすぎてサーバーレスファンクションにフィットしないという問題がありました。で、ですね、それを解決するための方法として、取った方法ってのが、ブラウザを使うことをやめて、もう1からそのhtmlとcss の内容をsvgに変換しようというレイアウトエンジンを実装したという結構なんて言うんですかね。力技を今回このogというライブラリで実装したという感じになってます。

@potato4d 02:50
なるほ、確かにこれまでChromium系のあのパッケージを使って、ogp生成しようと思うと、FaaSとかだと、結構スペックアップしないといけなかったりとか、こう。あの、単純に処理が遅いとか色々課題あったんで、なんかそういうの根本から力合わさというか、圧倒的な技術で解決しちゃおう。みたいな感じのコンセクトで、生まれたパッケージっていうことですね。

@spring_raining 03:11
そうです、そうです、結構なんて言うんですかね、これまでだと、割とPuppeteer頼みというか、そのブラウザをサーバーレスで動かせばなんでもできるんっていうコンセプトだったんですけども、やっぱりそれだと、どうしても多分Vercelだとそのサーバーのコストとかも考えないといけないという立場にはあると思うのので、そういったものをやっぱり解決するためには、 1からではないんですけれども、まあ、そういう自分たちでなんとかするしかないという判断に至ったっていうのが結構大きいな、というふうに思いました。

@potato4d 03:45
確かに、結構アプローチの仕方が面白いですよね、

@spring_raining 03:48
そうですよね、うんうん。あと、機能の1つとしてはあれですかね。Tailwind風のサポート、cssサポートが入ったってのが結構面白いなと思ったところですね。twというプロパティを与えることで、cssを書く必要すらなくなるみたいな。そういったところも

@potato4d 04:10
ああ、なるほど、jsxでのpropとして、Tailwindっぽいものを渡すといいって感じですかね。そうです、そうですおお、それはかなり使いやすそうな感じか。うん、ありますね、

@spring_raining 04:24
これも面白いと思いました

@potato4d 04:27
概要説明ありがとうございます

@spring_raining 04:28
はい

3. レイアウトエンジンの詳細 04:31

@potato4d 04:31
ではちょっと、@vercel/ogの利用用途とかにもついて。聞こうかなと思っていたんですけど。結構利用用途って言っても、ほとんどogpの作成っていう感じになっちゃうかなと思うんで、あの、今回よかったら気になって興味を持った点であるところの、内部的なところも少し聞いていこうかなと思うんですけど、

@potato4d 04:50
今回内部での実装がそのChromiumに依存しないとか、サーバーレスChromeに依存しないえ、形で作られているって話がありましたけど、なんか、中身って実際どんな感じになってるんですかね。

@spring_raining 05:01
そうですね、そこ私も結構気になって、前のその社内勉強会とかでも、軽く見たんですけれども、その中でも、もうちょっと結構いろんな面白いところがあったから、それについてもちょっと今回紹介しようかなと思います。で、ですね、実際正直1からレイアウト、そのhtmとcssをレンダリングエンジンを作るっていうのは難しいですし、それこそブラウザを作るみたいな感じの話になってしまうので、あの、あくまで、サブセットではあるんですね。その、htmlとcssの中の一部の機能だけを使うっていう。

@spring_raining 05:41
ただ、それを実現するためには、色々な方法を取れるんですけども、結構今回その@vercel/ogっていうライブラリが取ってる方法っていうのが、えーっとですね、レイアウトエンジンをまず他のライブラリを使ってまして、Yoga layoutというライブラリがありまして、これを実際には使ってレイアウトをしているという感じになってます。でですね、Yoga layoutっていうのは、どういったものかと言いますと、クロスプラットホームのレイアウトエンジンになるんですね。

@spring_raining 06:16
で、どういったところで使われてるかというと、1番有名なのがReact nativeですね。React nativeのiosとandroid、両方同じコードでレイアウトできてると思うんですけれども、あれはYoga layoutを使って、レイアウトが組み立てられてます。で、それのレイアウトエンジンを使って実装しているという、結構これを見た時はなるほどなという感じがありました。

@potato4d 06:43
なるほど、じゃああれなんですよね。あの、Yogaの吐き出し先として、そのsvgっていうのを用意しているみたいな。 React nativeでのクロスプラットホームの吐き出し先が、ios androidに使い分けられるのと同じように、そのプラットホームの1つ的な感じで、あのsvg出力っていうのをしてるっていう風な感じなんですかね。

@spring_raining 07:02
そうです、そうです結構apiとかを見てみると、意外とそのReact nativeに近いところはあったりします。で、cssの中でも、なのでその使えるレイアウトの手法が限られてて、フレックスボックスのレイアウトは、そのYoga layoutで対応してるっていうところで使えるようになってます。なので、要するにcssでそのフレックスボックスを組み立てると、それが裏側ではYoga layoutのレイアウトに変換されて、で、svgとして吐き出されるみたいな感じなってます。

@spring_raining 07:43
で、Yoga layoutのソースコードは、いろんなソースコードって書かれてるんですけれども、 javascriptはないんですね。なので、C++のライブラリがあるんですけれども、それをWASMに変換して読み込ませているということをogでやってます。

@spring_raining 08:01
で、あとogという名前は実態はほぼ@vercel/satoriというライブラリ名で公開されてますので、今回そのogと呼んでるものはま、Satoriというライブラリと同等だと思ってもらえると、はい、

@potato4d 08:18
本当じゃあ、SatoriからそのWASMを返して、Yogaにアクセスして、Yogaがsvgを吐き出すみたいなな構図になっているそうです。そうです、はい、もうあれですね、Yoga layoutがベースになってるのであれば、結構React nativeとほぼ一緒の書き心地っていう風な認識でいいですかね。

@spring_raining 08:36
はい、そうですね、結構そこはあの、今回見てて意外な共通点というか、あんまり今回のそのogのプレスリリースでは、あんまりReact nativeっていう単語は出てきてないんですけれども、よく見てみたら、結構React nativeに近いなっていうところは感じると思います。

@potato4d 08:53
おおじゃ結構あれですね、どちらかというとこうhtmlというか、DOMを書いているっていう感じよりも、jsxを書いている。React nativeとかって、特にそういう感覚がすると思うんですけど、なんかそういうこう書き心地で書くツールっていう、感じですかね

@spring_raining 09:07
そうです。そうです、なんであんまりhtmlで全部使えるという風には感じではないですね。

@potato4d 09:16
本当にサブセットと思う方が良い

@spring_raining 09:19
そうです。そうですで、他にいろんなライブラリを裏側で使ってるんですけれども、1つが、OpenType.js ですね。これは何に使ってるかと言いますと、フォントデータを読み込むライブラリなんですけれども、これをなぜ読み込む必要があるかというと、svgに変換するためにはですね。そのテキストデータを、svgに埋め込む必要が

@spring_raining 09:45
あるんですね。で、なぜ埋め込むかというと、そのフォントデータっていうのは、見ている環境によって違うものなので、それをどこでも表示できるようにするためには、そのフォントデータからsvgに埋め込むグリフを取り出して、フォントデータではなくて、その形状としてsvgに埋め込むという作業は

@spring_raining 10:09
必要になるんですね。それを実現するためのライブラリですね。

@potato4d 10:14
あれですよね、デザインツールでいうところのアウトライン化みたいなところをやってくれる、ツールっていう風なイメージをするといいですかね。

@spring_raining 10:21
あ、そうです、そうです、まさしくそうです

@potato4d 10:24
なるほど、結構その辺りも明示的にやらないといけないんですね。

@spring_raining 10:28
そうです、そうです、これも自分たちで実装しないといけないっていうのがすごいプルスクラッチ感があって、

@potato4d 10:34
そうですね

@spring_raining 10:37
面白いです。あとはそうですね、これはなんて読むんだろう。アールイーエスブイジーですかね、リエスブイジーですか、

@potato4d 10:44
resvgなんですかね、

@spring_raining 10:46
これを使っているみたいです、これは何かと言いますと、svgレンダリングライブラリですなので、つまり、 svgからpngに変換するためのライブラリですね。で、これ自体もRustで書かれていて、jsではないので、resvgをWASMに変換したものが、resvg-jsというタイトルで

@spring_raining 11:11
提供されてるので、ま。それを使っているという状態になって。

@potato4d 11:15
おお、なるほど、じゃあ、大きく分けて3つで、まず1つベースとある部分をYogaに任せながら、細かな例えば、そのフォントデータであったりだとか、細かな部分の対応を他のライブラリに任せて、最後にresvgで画像化している画像化というか、svgデータからラスタ画像への変換をしているっていう風な3部構成になってるって感じなんですね。内部としては

@spring_raining 11:38
そうです。そうですなので、本当になかなか見ていて面白いですし、単にその自分自力で実装しました。っていうだけじゃなくて、こうライブラリの選定みたいなのがすごく頭がいいというか、あのすごくなんて言うんですかね。そのjsという枠にとらわれないライブラリ選定だなっていうところ、関心を受けました。

@potato4d 12:03
確かに、こうやって全体で使われてる技術を見てみると、なんかむしろjsに依存してる部分の方が少ないレベルですもん。

@spring_raining 12:10
そうですよね、実際これほとんど、まあほとんどではないですけれども、大部分はWASMなんですよね。すごくなので、WASMをとても活用したライブラリと言えると思います。

@potato4d 12:25
うん、うん、すごいですね、これは確かにあれですもんね。jsの資産だけで、そういったレイアウトとかを完全に再現しようと思うと、多分莫大なコストがかかるので、なんか、そこをうまくWASMに依存する方が、コストが低いっていうところは、しっかりと頼るべきところで頼ってるって感じがあるんで、すごいなんか面白い中身になってますね。

@spring_raining 12:47
そうですよね、本当にそうだと思います結構まあ速度もそうですし、あとは単純にそのまま実装コストというか、資産を生かせるっていうところは、やっぱりすごくWASMの将来を考える上でもすごいなかなかいいライブラリだと思いました。

@potato4d 13:06
うん、そうですね、僕、なかなか面白い内部について聞いただいて、ありがとうございました。

4. サポートするHTML/CSS 13:14

@potato4d 13:14
えー、では、次聞いてみたいのが、さっきサブセットっていうのを強調して話されてるかなと思うんですけど、やっぱりこう他の概念だったり、特にReact nativeの構造とかを見ててもわかるのが100パーセント、そのhtmlを再現しきってるわけではないみたいなところがあるかなと思うんですけど、なんか具体的にあのhtmlとかcssで普段コーディングするのと比較して、なんかこう違う部分とか。あの、サポートされていないものって、どういうところがあったりするんですかね。

@spring_raining 13:40
そうですね、大部分分けてhtmlとcssという枠組みで分けて考えると、まずは htmlで言うと大体サポートされてるんですけども、ブラウザ固有っぽいタグはえーっとサポートされてないかなという状態です。具体的に言うと、あのinputタグとかですね、タグ

@spring_raining 14:04
buttonタグも、多分ボタンの表示とかはされないと思いますので、そういったところとか、あとは、tableタグですね。tableタグも、多分表示自体がそのYoga layoutがテーブルに対応してないので、できないみたいな制約があるかなと思います。なので、そうですね、それ以外はでも、色々と対応していて、

@spring_raining 14:30
ヘッティングタグとか、そういった基本的なレイアウトにあんまり関係しなさそうなものは、大体使えそうですね。で、もう1つcssの面で言うと、これはそのSatoriのREADMEの方にも、対応しているプロパティが書いてあるんですけれども、大まかに言うと、svg

@spring_raining 14:54
がサポートしているスタイルと、フレックスボックス関連のレイアウトは大丈夫という感じですね。

@potato4d 15:05
あ、最終的にsvgに落とし込まれるから、そこは全部サポートされているみたいな

@spring_raining 15:12
はい、そうです。そうですで、個人的には結構なんて言うんですかね。そのsvgにはサポートされていても、その画像化するときに壊れるんじゃないかみたいな心配を結構してたんですけども、そこらへんはそのresvgがサポートが結構良いみたいで、あんまり気にしなくても良いのかなとはい思いました。

@spring_raining 15:35
あとは、結構Satori自体のテストが充実していそうなので、その辺りは結構どこまで表示でき、どこまで表示できできてないのかっていうところは、割とSatoriライブラリ側が把握しているところだと思うのではい、その辺りは結構安心感があるかなと思いました

@potato4d 15:58
な。サトリライフライ側で把握しているサポートしてないものって、なんか具体的にはどういうもったものがあるんですか。

@spring_raining 16:04
そうですね、えっと、まず対応してないのは、そのさっき言ったテーブルレイアウトだったり、あとはグリットレイアウトですね。グリットレイアトは、そのYoga layoutは、そのフレックスボックスベースで組み立てられてるもので、それは残念ながら使えないです。はい、

@potato4d 16:25
なんか結構グリットだったら使わなくてもいいかなと思うんですけど、なんか、フレックスギャップの方とかって、使えたりするんですかね、これって、

@spring_raining 16:32
あー、ギャップですか。ギャップギャップそういえば、

@potato4d 16:35
ギャップって元々グリッド用に作られてたって、後からフレックスギャップのサポートが追いついたみたいな感じありましたけど、いはい、フレックスギャップも結構あのUI作るなら必要な時多いかな。確かにそう

@spring_raining 16:47
ありますけど、えっと、ちょっとSatoriが今対応してるか確認してないんですけど、確かそのYoga layoutをフォークして、そのSatori側が読み込んでるんですけど、そこにギャップの対応が入ったみたいなところがあったような気がします。ちょっとこれははい、後で確認します。

@potato4d 17:11
はい、ありがとうございますじゃ、基本的にあれっすね、Yoga側が対応してくれたら、まSatoriもすぐではないが、対応する可能性が高いっていう風なそうです。そうです、考えておけばいいってことですね、

@spring_raining 17:23
あとはあれですね、その当たり前ですけれども、アニメーションとかは、対応していない

@potato4d 17:32
ま、画像になりますからね。

@spring_raining 17:34
そうですね、まあ、あくまでogですね。はい、

@potato4d 17:36
うん、うん静止画

@spring_raining 17:38
静止画向けですね。はい、

@potato4d 17:40
なんかでも、こうやって見ていると、ユーザーインターフェースに関わる部分とかはなかなかこう。サポートされていないとはいえ、なんか、それは画像を出力するためだからっていうふうに言われれば、納得するところですし。なんかこう画像生成っていうところに至っては、なんかそんなにこう困るところはなさそうですね。

@spring_raining 17:57
うん、そうですね、結構あの割と素人が考えそうな穴は大体防がれてると思うので、結構よくできているなと思いました。

@potato4d 18:08
いいですね、また、最終的なアウトプットがsvgであったり、静止画であったりするって考えるとこうなんでしょう。極端な話、セマンティックなマークアップでなくてもいいっていう部分はあると思いますし、なんかそう考えると最低限。それこそ、divとcssがちゃんと動けば画像が作れるみたいなところはあると思いますし、なんかこう不便はしなさそうな感じがしますね。

@spring_raining 18:31
そうですよね、そうですよね、結構まあ、フレックスボックスが使えるんで、割と大体なんでもなんとかなりそうな気がします。

@potato4d 18:38
ですね、なるほど、なかなか面白いライブラリですね、ありがとうございます

5. UIT INSIDEでの活用事例 18:46

@potato4d 18:46
では、最後にですね。ちょっと私もこれ最近見て知ったところで、まだあんまり詳しく把握はしてないんですけど、UIT INSIDEでも、この技術が最近使われ出してるっていう話が上がってるんで、ちょっとだけ紹介しててもいいですか。

@spring_raining 18:59
はい、どうぞ

@potato4d 19:01
ちょっと。また、来週以降のUIT INSIDEで紹介しようかなと思ってるんですけど、実はこの@vercel/ogとか。えっと、Satoriの方を使ってるんですけど、

@potato4d 19:09
UIT INSIDEの方でも、UITのog-image-generatorっていう名前で最近開発されていて、実はちょっとずつ。これがUIT INSIDEのページで採用されていたりします。もしですね、今、お聞きになっている方でブラウザから聞いていたらですね。見てほしいんですけど、UIT INSIDEの出演者のアイコンをクリックすると、出演者ごとのページに行くかなと思うんですけど、今実は出演者ページのogpが実はSatoriによって自動生成されていたりします。

@potato4d 19:37
またですね、今後のpodcastで紹介しようかなと思ってるんですけど、なんか、こういうパターンに合わせていろんなogp画像を大量に生成するみたいな時は、こういうものがあると、なんかいいかなっていう気がするんで。また、別途来週以降紹介させてもらえればなと思います。

@spring_raining 19:55
ありがとうございますいや、これあの、私も全然その話でしか聞いたことなかったんですけど、すごく楽しみです。

@potato4d 20:03
また、これの実装した人に話を来週以降聞こうかなと思います。

@spring_raining 20:08
ぜひ、聞いてみたいです。

6. クロージング 20:16

@potato4d 20:16
というわけで、今回は@vercel/ogパッケージについて話を聞いてみました。 LINEのフロントエンド組織UITでは、このようなフロントエンドに関する情報交換を日々行っております。これまでUIT INSIDEで公開してきた情報の中では、社内勉強会から始まったものなどなども多多くありますので、今後も

@potato4d 20:38
情報発していければなと思います。また、このポッドキャストを聞いて、LINEに興味を持ってくださった方は、Shownote最下部にあります求人へのリンクから、カジュアル面談などなどを申し込んでいただければなと思います。現在、新卒中途ともに、採用活動を行っているところではございますので。ぜひ興味あれば、お話ししましょう。

@potato4d 21:00
また、このポッドキャストについてのご意見、ご感想があれば、#UIT_INSIDE、UIT INSIDEのハッシュタグでつぶやいていただければ、スタッフの方で拝見させていただきますので、ぜひ何かあればそちらにお願いいたします。というわけで、今回は@vercel/ogについてでした。ありがとうございました、

@spring_raining 21:20
ありがとうございました。