Vercel Edge Functions を使って作る画像メーカー

https://zenn.dev/peperoncicicino/articles/04ddadba105194

Transcript

1. Vercel Edge Functions を使って作る 画像メーカー Engineer Guild Lightning Talk @Doarakko
2. # 経歴 BtoB SaaS、HR、EC（現職） # 仕事 金融系新規プロダクトの開発チームリード バックエンド、フロントエンド、インフラとフルサイクルに開発 # 趣味 ・海外サッカー観戦 ・個人開発 たなあみ @Doarakko 2
3. 自分の体型に一番近いポケモンを見つけられるサービス「PokeFit」 3
4. Vercel とは 4 ・簡単に言うと 　 Web アプリを公開するためにいろいろなものを提供してくれるサービス ・Next.js は Vercel が作ってます ・最近は Postgres・Redis・Storage なども提供 　→ Vercel だけでいろいろなサービスを作れる💪
5. Vercel Edge Functions とは 5 ・JavaScript のコードを CDN 上で動かせるようにするもの ・超簡単に言うと、ユーザーにより近いところで処理が行われるので速い 🍍 ランタイムを「edge」にするだけ
6. 画像メーカーの例 6 https://gigazine.net/news/20201015-ghibli-subtitles-maker/ https://web.save-editor.com/pic/picture_text_jojo_tool.html
7. 画像メーカー？ 7
8. 画像メーカーには OGP 画像が必要不可欠（個人的な意見） 8 生成した画像を SNS で拡散してほしい → 画像付き投稿はアカウント連携しないとできない（X など） → 画像をローカルに保存してから投稿するのめんどくさい → 画像投稿だとサイト URL は共有されずらい 🍇 Web Share API では PC で対応されていない環境がある（2024年4月現在）
9. 画像メーカーには OGP 画像が必要不可欠（個人的な意見） 9 URL 投稿により OGP 画像が展開されるようにすることで アカウント連携なしで間接的に画像を SNS に共有できるようにする
10. OGP ありの画像メーカーを作るつらみ 10 ・生成された画像ごとにページを生成、ページごとの OGP 画像を作成する必要が ・画像メーカーなので画像が大量生成される 　→ 読み込み、書き込み、保存し続けることにお金がかかる💰
11. 「PokeFit」では約30万枚の画像が生成されています 11
12. Vercel Edge Functions を使って無料で運用 12
13. Vercel Edge Functions がリクエストの度にOGP 画像を動的に生成 13 クローラー OGP 画像の URL Vercel Edge Functions 画像を保存するストレージ
14. 画像を返すAPIを実装してメタタグにパスを埋め込み 14 index.tsx /api/og/index.tsx 🍎 HTML/CSS を SVG に変換するライブラリ「vercel/satori」を使用
15. 🚨 永遠に無料で運用はできません 15 ・Vercel Edge Functions の無料枠（月50万回：2024年4月現在） 　を超えるとお金がかかる ・生成された画像ごとにユニークなページを作成している 　→ ページ ID と内容（今回はポケモンの ID）を保存するためのデータストアが必要 　 　→ データストアの無料枠を超えるとお金がかかる（今回は Supabase を使用） 🎉 相当使われないと無料枠は超えません、超えた時は逆に喜びましょう
16. 仕組みは Vercel が用意してくれているので あとは何をどう表示するのか考えるだけ
17. まとめ 17 ・今 Edge が熱い ・オリジナリティも出せて短期間でアウトプットできるので 　勉強ついでに何かアプリを作りたい方に画像メーカーの開発おすすめです ・楽しんでものづくりしてます
18. Vercel Edge Functions を使って作る 画像メーカー Engineer Guild Lightning Talk @Doarakko