Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cloudflare Workersで動くOG画像生成器

AijiUejima
January 24, 2023

Cloudflare Workersで動くOG画像生成器

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

AijiUejima

January 24, 2023
Tweet

More Decks by AijiUejima

Other Decks in Technology

Transcript

  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 おわり