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. 名前: Aiji Uejima 職業: Webエンジニア (アプリケーションエンジニア) 分野: Cloudflare, Nodejs, TypeScript

    React, Next.js, Remix, AWS, GCP 所属: Ateam Lifedesign Inc. twitter: @aiji42_dev GitHub: aiji42 Who am I ?
  2. © 2023 Ateam Inc. 8 テックブログ用OG画像の作成フロー(弊社) 1. OG画像用テンプレートがあるGoogleスライドを開く! 2. 背景のパターンを選んでスライドをコピー

    1. タイトルを書く 2. 画像としてダウンロード" 3. はてなブログにアップロードしてOG画像として登録#
  3. © 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
  4. © 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
  5. © 2023 Ateam Inc. 15 ということはCF Workers上でも動くはず" (そもそもVercel Edge Functions

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

    は CF Workersをベ ースにしているので、Edge Functions で動くもの は、大体 CF Workers でも動く)
  7. © 2023 Ateam Inc. 24 結論から言うと動きます 動くけど、結構パッチ当てないといけない$$$ 1. wasmのimport周り 2.

    フォントファイルのローダー 3. init処理(async)が2回以上走らないようにする フラグ管理 (パッチというかほぼ書き換え)