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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Doarakko
April 10, 2024
Programming
0
77
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
290
JOIN して1ヶ月のエンジニアに聞いた Liiga の良いところ 3 選
doarakko
0
81
わんわおーん
doarakko
0
68
職場を明るくする
doarakko
0
310
コードレビューの時間を削減しました
doarakko
0
98
仕事中に隠れてテレビ番組表を見るぞ
doarakko
0
200
GitHub Project の運用を自動化しました
doarakko
0
110
GitHub Actions に入門しました
doarakko
0
1.3k
積ん読を消化するために
doarakko
0
1.3k
Other Decks in Programming
See All in Programming
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.1k
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
610
Package Management Learnings from Homebrew
mikemcquaid
0
120
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.4k
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
620
大規模Cloud Native環境におけるFalcoの運用
owlinux1000
0
260
AI時代の認知負荷との向き合い方
optfit
0
100
2026年 エンジニアリング自己学習法
yumechi
0
120
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
390
re:Invent 2025 トレンドからみる製品開発への AI Agent 活用
yoskoh
0
710
Python札幌 LT資料
t3tra
7
1.1k
CSC307 Lecture 02
javiergs
PRO
1
770
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
The Limits of Empathy - UXLibs8
cassininazir
1
210
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
440
Measuring & Analyzing Core Web Vitals
bluesmoon
9
740
From π to Pie charts
rasagy
0
120
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
100
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
90
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
130
Design in an AI World
tapps
0
140
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