Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vercel Edge Functions を使って作る画像メーカー
Search
Doarakko
April 10, 2024
Programming
0
32
Vercel Edge Functions を使って作る画像メーカー
https://zenn.dev/peperoncicicino/articles/04ddadba105194
Doarakko
April 10, 2024
Tweet
Share
More Decks by Doarakko
See All by Doarakko
Cloudflare Workers で X(Twitter)のボットを作ってみた
doarakko
0
120
JOIN して1ヶ月のエンジニアに聞いた Liiga の良いところ 3 選
doarakko
0
77
わんわおーん
doarakko
0
61
職場を明るくする
doarakko
0
230
コードレビューの時間を削減しました
doarakko
0
86
仕事中に隠れてテレビ番組表を見るぞ
doarakko
0
110
GitHub Project の運用を自動化しました
doarakko
0
100
GitHub Actions に入門しました
doarakko
0
1.2k
積ん読を消化するために
doarakko
0
1.1k
Other Decks in Programming
See All in Programming
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
CSC307 Lecture 09
javiergs
PRO
1
500
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Terraformテスト入門
msato
0
520
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Building Adaptive Systems
keathley
34
2k
Ruby is Unlike a Banana
tanoku
96
10k
A designer walks into a library…
pauljervisheath
201
24k
Fireside Chat
paigeccino
25
2.8k
What's new in Ruby 2.0
geeforr
338
31k
Faster Mobile Websites
deanohume
303
30k
Web development in the modern age
philhawksworth
203
10k
How to name files
jennybc
67
96k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Optimizing for Happiness
mojombo
373
69k
Transcript
Vercel Edge Functions を使って作る 画像メーカー Engineer Guild Lightning Talk @Doarakko
# 経歴 BtoB SaaS、HR、EC(現職) # 仕事 金融系新規プロダクトの開発チームリード バックエンド、フロントエンド、インフラとフルサイクルに開発 # 趣味
・海外サッカー観戦 ・個人開発 たなあみ @Doarakko 2
自分の体型に一番近いポケモンを見つけられるサービス「PokeFit」 3
Vercel とは 4 ・簡単に言うと Web アプリを公開するためにいろいろなものを提供してくれるサービス ・Next.js は Vercel
が作ってます ・最近は Postgres・Redis・Storage なども提供 → Vercel だけでいろいろなサービスを作れる💪
Vercel Edge Functions とは 5 ・JavaScript のコードを CDN 上で動かせるようにするもの ・超簡単に言うと、ユーザーにより近いところで処理が行われるので速い
🍍 ランタイムを「edge」にするだけ
画像メーカーの例 6 https://gigazine.net/news/20201015-ghibli-subtitles-maker/ https://web.save-editor.com/pic/picture_text_jojo_tool.html
画像メーカー? 7
画像メーカーには OGP 画像が必要不可欠(個人的な意見) 8 生成した画像を SNS で拡散してほしい → 画像付き投稿はアカウント連携しないとできない(X など)
→ 画像をローカルに保存してから投稿するのめんどくさい → 画像投稿だとサイト URL は共有されずらい 🍇 Web Share API では PC で対応されていない環境がある(2024年4月現在)
画像メーカーには OGP 画像が必要不可欠(個人的な意見) 9 URL 投稿により OGP 画像が展開されるようにすることで アカウント連携なしで間接的に画像を SNS
に共有できるようにする
OGP ありの画像メーカーを作るつらみ 10 ・生成された画像ごとにページを生成、ページごとの OGP 画像を作成する必要が ・画像メーカーなので画像が大量生成される → 読み込み、書き込み、保存し続けることにお金がかかる💰
「PokeFit」では約30万枚の画像が生成されています 11
Vercel Edge Functions を使って無料で運用 12
Vercel Edge Functions がリクエストの度にOGP 画像を動的に生成 13 クローラー OGP 画像の URL
Vercel Edge Functions 画像を保存するストレージ
画像を返すAPIを実装してメタタグにパスを埋め込み 14 index.tsx /api/og/index.tsx 🍎 HTML/CSS を SVG に変換するライブラリ「vercel/satori」を使用
🚨 永遠に無料で運用はできません 15 ・Vercel Edge Functions の無料枠(月50万回:2024年4月現在) を超えるとお金がかかる ・生成された画像ごとにユニークなページを作成している →
ページ ID と内容(今回はポケモンの ID)を保存するためのデータストアが必要 → データストアの無料枠を超えるとお金がかかる(今回は Supabase を使用) 🎉 相当使われないと無料枠は超えません、超えた時は逆に喜びましょう
仕組みは Vercel が用意してくれているので あとは何をどう表示するのか考えるだけ
まとめ 17 ・今 Edge が熱い ・オリジナリティも出せて短期間でアウトプットできるので 勉強ついでに何かアプリを作りたい方に画像メーカーの開発おすすめです ・楽しんでものづくりしてます
Vercel Edge Functions を使って作る 画像メーカー Engineer Guild Lightning Talk @Doarakko