Cloudflare Workersで動くOG画像生成器

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

Transcript

1. © 2023 Ateam Inc.
   Cloudflare Workersで動く
   OG画像生成器!
   Serverless Frontend Meetup #1
   

   View Slide

2. 名前： Aiji Uejima
   職業： Webエンジニア
   （アプリケーションエンジニア）
   分野： Cloudflare, Nodejs, TypeScript
   React, Next.js, Remix, AWS, GCP
   所属： Ateam Lifedesign Inc.
   twitter: @aiji42_dev
   GitHub: aiji42
   Who am I ?
   

   View Slide

3. © 2023 Ateam Inc.
   昨年11月エイチームグループでテックブログを開設しました
   4
   https://techblog.a-tm.co.jp/
   

   View Slide

4. © 2023 Ateam Inc. 5
   早速自分も寄稿
   https://techblog.a-tm.co.jp/entry/2023/01/05/165133
   

   View Slide

5. © 2023 Ateam Inc. 6
   OG画像の作成が面倒くさい!
   

   View Slide

6. © 2023 Ateam Inc. 7
   SNS等でシェアするときになどに使われる! みたいな画像
   

   View Slide

7. © 2023 Ateam Inc. 8
   テックブログ用OG画像の作成フロー(弊社)
   1. OG画像用テンプレートがあるGoogleスライドを開く!
   2. 背景のパターンを選んでスライドをコピー
   1. タイトルを書く
   2. 画像としてダウンロード"
   3. はてなブログにアップロードしてOG画像として登録#
   

   View Slide

8. © 2023 Ateam Inc. 9
   こう思いました
   テックブログなのに
   テックっぽくねーじゃん!
   <
   

   View Slide

9. © 2023 Ateam Inc. 10
   こう思いました
   もう少し簡単にOG画像作れるよ
   うにしよう"
   <
   

   View Slide

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
    

    View Slide

11. © 2023 Ateam Inc. 12
    内部ではsatoriと@resvg/resvg-jsを使用し、HTMLをPNG化している
    https://og-playground.vercel.app/
    OG Image Playground
    

    View Slide

12. © 2023 Ateam Inc. 13
    内部ではsatoriと@resvg/resvg-jsを使用し、HTMLをPNG化している
    
    
    
    
    Hello, World
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

13. © 2023 Ateam Inc. 14
    satoriも@resvg-jsもWASMが提供されている
    satori @resvg/resvg-js
    

    View Slide

14. © 2023 Ateam Inc. 15
    ということはCF Workers上でも動くはず"
    (そもそもVercel Edge Functions は CF Workersをベ
    ースにしているので、Edge Functions で動くもの
    は、大体 CF Workers でも動く)
    

    View Slide

15. © 2023 Ateam Inc. 16
    先に動かしている方がいらっしゃった"
    https://zenn.dev/uzimaru0000/articles/satori-workers
    satoriとresvg-jsをCF Workers上で動かす手順について書かれている記事
    

    View Slide

16. © 2023 Ateam Inc. 17
    記事を参考に、背景画像など社内ルールに合うように構築
    R2 背景画像は予めR2に保存しておく
    https://example.workers.dev?t=新規サービスに__Remixを導入したぜ&p=1
    ?t={タイトル}&p={背景画像番号} をつけてリクエスト
    backgroud-image: url(...)で背
    景画像を適応し、
    パターン別に文字列の位置
    を調整
    satori + @resvg/resvg-js
    

    View Slide

17. © 2023 Ateam Inc. 18
    あとはこのURLをmetaタグに設定すればOK
    

    View Slide

18. © 2023 Ateam Inc. 19
    実演#
    

    View Slide

19. © 2023 Ateam Inc. 20
    補足
    - 生成する画像のサイズによってはUnboundタイプにしないと実行時間が足りない
    - 生成後はKVもしくはR2に保存してキャッシュすることで高速化するとよい
    

    View Slide

20. © 2023 Ateam Inc. 21
    おまけ
    

    View Slide

21. © 2023 Ateam Inc. 22
    ということはCF Workers上でも動くはず"
    (そもそもVercel Edge Functions は CF Workersをベ
    ースにしているので、Edge Functions で動くもの
    は、大体 CF Workers でも動く)
    

    View Slide

22. © 2023 Ateam Inc. 23
    こう思いました
    パッチ当てたら、CF Workers上で
    @vercel/og 直接動かせるんじゃね？
    <
    

    View Slide

23. © 2023 Ateam Inc. 24
    結論から言うと動きます
    動くけど、結構パッチ当てないといけない$$$
    1. wasmのimport周り
    2. フォントファイルのローダー
    3. init処理(async)が2回以上走らないようにする
    フラグ管理 (パッチというかほぼ書き換え)
    

    View Slide

24. © 2023 Ateam Inc. 25
    ありがたいことに、絵文字のtwimoji変換とかが動いてくれる
    実演#
    

    View Slide

25. © 2023 Ateam Inc. 26
    おわり
    

    View Slide