Cloudflare Workersで動くOG画像生成器

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

© 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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Hello, World

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text