Cloudflare Workersで動くOG画像生成器

2023/01/24 Serverless Frontend Meetup #1 「Cloudflare Workers」のLT枠で発表した資料です。
https://serverless-frontend.connpass.com/event/271894/

1. © 2023 Ateam Inc. Cloudflare Workersで動く OG画像生成器! Serverless Frontend Meetup #1
2. 名前： Aiji Uejima 職業： Webエンジニア （アプリケーションエンジニア） 分野： Cloudflare, Nodejs, TypeScript React, Next.js, Remix, AWS, GCP 所属： Ateam Lifedesign Inc. twitter: @aiji42_dev GitHub: aiji42 Who am I ?
3. © 2023 Ateam Inc. 昨年11月エイチームグループでテックブログを開設しました 4 https://techblog.a-tm.co.jp/
4. © 2023 Ateam Inc. 5 早速自分も寄稿 https://techblog.a-tm.co.jp/entry/2023/01/05/165133
5. © 2023 Ateam Inc. 6 OG画像の作成が面倒くさい!
6. © 2023 Ateam Inc. 7 SNS等でシェアするときになどに使われる! みたいな画像
7. © 2023 Ateam Inc. 8 テックブログ用OG画像の作成フロー(弊社) 1. OG画像用テンプレートがあるGoogleスライドを開く! 2. 背景のパターンを選んでスライドをコピー 1. タイトルを書く 2. 画像としてダウンロード" 3. はてなブログにアップロードしてOG画像として登録#
8. © 2023 Ateam Inc. 9 こう思いました テックブログなのに テックっぽくねーじゃん! <
9. © 2023 Ateam Inc. 10 こう思いました もう少し簡単にOG画像作れるよ うにしよう" <
10. © 2023 Ateam Inc. 11 昨年10月にVercelがEdgeFunctions上で動くOG生成ライブラリ(@vercel/og)を公開 Introducing OG Image Generation: Fast, dynamic social card images at the Edge https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images
11. © 2023 Ateam Inc. 12 内部ではsatoriと@resvg/resvg-jsを使用し、HTMLをPNG化している https://og-playground.vercel.app/ OG Image Playground
12. © 2023 Ateam Inc. 13 内部ではsatoriと@resvg/resvg-jsを使用し、HTMLをPNG化している <div style={{ height: '100%', ...}}> <svg width="75" viewBox="...> <path d="M37.59.25l36.95...></path> </svg> <div style={{ marginTop: 40 }}> Hello, World </div> </div> <svg width="800" ...> <rect x="0" y="0"...></rect> <clipPath id="satori_cp-id-0"> <rect x="363"...></rect> </clipPath> <mask id="satori_om-id-0"> <rect x="363" ...></rect> </mask> <image x="363"...></image> <path fill="black" d="...></path> </svg> HTML SVG PNG satori @resvg/resvg-js
13. © 2023 Ateam Inc. 14 satoriも@resvg-jsもWASMが提供されている satori @resvg/resvg-js
14. © 2023 Ateam Inc. 15 ということはCF Workers上でも動くはず" (そもそもVercel Edge Functions は CF Workersをベ ースにしているので、Edge Functions で動くもの は、大体 CF Workers でも動く)
15. © 2023 Ateam Inc. 16 先に動かしている方がいらっしゃった" https://zenn.dev/uzimaru0000/articles/satori-workers satoriとresvg-jsをCF Workers上で動かす手順について書かれている記事
16. © 2023 Ateam Inc. 17 記事を参考に、背景画像など社内ルールに合うように構築 R2 背景画像は予めR2に保存しておく https://example.workers.dev?t=新規サービスに__Remixを導入したぜ&p=1 ?t={タイトル}&p={背景画像番号} をつけてリクエスト backgroud-image: url(...)で背 景画像を適応し、 パターン別に文字列の位置 を調整 satori + @resvg/resvg-js
17. © 2023 Ateam Inc. 18 あとはこのURLをmetaタグに設定すればOK
18. © 2023 Ateam Inc. 19 実演#
19. © 2023 Ateam Inc. 20 補足 - 生成する画像のサイズによってはUnboundタイプにしないと実行時間が足りない - 生成後はKVもしくはR2に保存してキャッシュすることで高速化するとよい
20. © 2023 Ateam Inc. 21 おまけ
21. © 2023 Ateam Inc. 22 ということはCF Workers上でも動くはず" (そもそもVercel Edge Functions は CF Workersをベ ースにしているので、Edge Functions で動くもの は、大体 CF Workers でも動く)
22. © 2023 Ateam Inc. 23 こう思いました パッチ当てたら、CF Workers上で @vercel/og 直接動かせるんじゃね？ <
23. © 2023 Ateam Inc. 24 結論から言うと動きます 動くけど、結構パッチ当てないといけない$$$ 1. wasmのimport周り 2. フォントファイルのローダー 3. init処理(async)が2回以上走らないようにする フラグ管理 (パッチというかほぼ書き換え)
24. © 2023 Ateam Inc. 25 ありがたいことに、絵文字のtwimoji変換とかが動いてくれる 実演#
25. © 2023 Ateam Inc. 26 おわり