【個人開発】嘘のポケポケのカードを作れるサービスを作った【コード全公開】


# はじめに

こんにちわ。れとるときゃりー([@retoruto\_carry](https://twitter.com/retoruto_carry))と申します。


個人開発が好きなエンジニアです。また新しいWebサービスを作りました。

# なにを作ったの？

[うそポケ画像メーカー](https://usopoke.asonde.me/)

嘘のポケポケのカードの画像を作れます

↓RTお願いします🙏

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【おしらせ】<a href="https://twitter.com/hashtag/%E3%81%86%E3%81%9D%E3%83%9D%E3%82%B1%E7%94%BB%E5%83%8F%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#うそポケ画像メーカー</a> を開発しました！<br><br>嘘のポケポケのカードが作れます<br><br>遊んでみてください！🙌<br><br>頑張って作ったのでいいね＆RTをお願いします！🙏<a href="https://t.co/6m5REe7e7n">https://t.co/6m5REe7e7n</a> <a href="https://t.co/jMiUKlGlCJ">pic.twitter.com/jMiUKlGlCJ</a></p>&mdash; れとるときゃりー@ピクページ開発者 (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1866425470914531456?ref_src=twsrc%5Etfw">December 10, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 使い方

画像を選んで...

![usopoke_2_2 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/308e847e-ae2d-835a-4c55-9bf3193e1d7c.gif)


テキストを自由に入力！

![usopoke_2_25.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/3170e331-13a3-e326-ee44-f353d16845b7.gif)


完成！

画像をDLしたり、シェアしよう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/5e7a6f1b-3396-609e-c634-3374709ea800.png)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「きつねさん」のカードを作りました<a href="https://twitter.com/hashtag/%E3%81%86%E3%81%9D%E3%83%9D%E3%82%B1%E7%94%BB%E5%83%8F%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#うそポケ画像メーカー</a><a href="https://t.co/DKM6JIfiOf">https://t.co/DKM6JIfiOf</a></p>&mdash; れとるときゃりー@ピクページ開発者 (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1866165878355874173?ref_src=twsrc%5Etfw">December 9, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



## ランダムパック

「みんなが作ったカード」をパックとしてランダムに引くことができます!!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/41e7440b-424f-5cee-3cd1-562c6594996b.png)


![usopoke_random.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/099448ca-6f51-189a-43d7-ffa3b4c51cd5.gif)

いろんな人がいろんなカードを作っていて面白いです！

↓カードを作ったり、パックを引いて遊んでみてください！！

[うそポケ画像メーカー](https://usopoke.asonde.me/)

# GitHubレポジトリ

スターをしてくださると泣いて喜びます

https://github.com/retoruto-carry/usopoke

# どうして作ったの？

「ミューツーが欲しい！」と言ってポケポケのパックを開封し、

"せっけんのミューズ"が出てくる

というShort動画がツボだったので作りました。


# デザインについて

いにしえのインターネットっぽいデザインにしました

tailwindcss(shadcn/ui)を使っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/169c2c9a-9974-66ba-0d6f-0868cb15dee3.png)

![chrome-capture-2024-12-9 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/1847316b-e115-3c74-be20-fef098da3929.gif)


[react-rewards](https://www.npmjs.com/package/react-rewards)で紙吹雪を散らしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/aafeea3b-b984-5562-fba0-3374ca4396ec.png)


イラストとGIFアニメは友達に描いてもらいました！かわいい！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「うそポケ画像メーカー」で、嘘のパック開封のアニメとか描きました！ぜひ作って、開けてみてね<a href="https://twitter.com/hashtag/%E3%81%86%E3%81%9D%E3%83%9D%E3%82%B1%E7%94%BB%E5%83%8F%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#うそポケ画像メーカー</a><a href="https://t.co/I5wys2Fa5S">https://t.co/I5wys2Fa5S</a> <a href="https://t.co/O3FQT50J7Q">pic.twitter.com/O3FQT50J7Q</a></p>&mdash; 清永 凜👻 (@kiyonagarin) <a href="https://twitter.com/kiyonagarin/status/1866137681803260387?ref_src=twsrc%5Etfw">December 9, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# どれくらいの期間で作った？

アドベントカレンダーに合わせて、大体4日で突貫で作りました。

（↓徹夜したんですけど間に合いませんでした、すみません）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">24時間コード書いて終わらせたけど、間に合わなかった...<br><br>起きたら遅刻ですが記事書いてリリースします... <a href="https://t.co/dfoz9BQ25y">https://t.co/dfoz9BQ25y</a> <a href="https://t.co/R0CZyps9zJ">pic.twitter.com/R0CZyps9zJ</a></p>&mdash; れとるときゃりー@ピクページ開発者 (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1865837573446545622?ref_src=twsrc%5Etfw">December 8, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 使った技術

CloudFlare Pages・Remix・Supabaseの組み合わせで作りました！

ほぼ無料で運用できる＆開発体験も割と良いです！

個人的にはかなりアリな組み合わせだと思います。

### CloudFlare Pages
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/78977373-e793-b09a-555a-8a8134764f14.png)


- デプロイが爆速です！(10秒位で終わる）
- コスパも最高です！
- ほぼ無料で運用できます！神！

### Remix
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/f48eec7b-b89a-3eb2-ac76-8b5bd92b3e82.png)


- 最近ちょっと流行ってる(?)、Next.jsに対向するReactのフレームワークです
- Next.jsよりCloudFlare Pagesと相性が良いので採用しました！
- Reactと同一ファイル内で、サーバーサイドを直接書けるので、APIを別で用意しなくて良くてめっちゃ楽です

### Supabase
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/cb84f819-c995-26df-d5db-690e13afb61a.png)



- 最近流行ってる、Firebase代替サービス
- 無料で運用できます！
- Firestoreとは違って、裏がpostgresだがら、設計の変更が楽そうです！
- Auth・DB・Function、全部あるので、Firebaseでできてたことは全部できそうです！

## カードの見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/9cf55e6e-c0ee-469e-7205-3bc66ffe737e.png)

[pokemon-cards-css](https://poke-holo.simey.me/)というポケモンカードの見た目を再現するコードのサンプルが公開されていたので、そちらを参考にしました

それを解説した[Qiitaの記事](https://qiita.com/degudegu2510/items/81526a0c48a76d7ec793)も参考にしました


## OGP画像の動的生成

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「れときゃ」のカードを作りました！<a href="https://twitter.com/hashtag/%E3%81%86%E3%81%9D%E3%83%9D%E3%82%B1%E7%94%BB%E5%83%8F%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#うそポケ画像メーカー</a><a href="https://t.co/lBcnBsW6ZN">https://t.co/lBcnBsW6ZN</a></p>&mdash; れとるときゃりー@ピクページ開発者 (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1866090840734814588?ref_src=twsrc%5Etfw">December 9, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/72cf426a-6ec6-d5dc-6385-1dfbd4655c44.png)

[@vecel/ogをremixで動かすライブラリ](https://developers.cloudflare.com/pages/functions/plugins/vercel-og/)がremix公式から出ていたので、それを使いました。

かなり楽＆無料で運用できて、良い感じです。

Cloud flare PageにデプロイしたFunction内で、Supabseに接続してデータを取ってきています。

↓コード

https://github.com/retoruto-carry/usopoke/blob/main/functions/card-ogp.png.tsx


# 感想

Remix・Supabaseともに、初めて使ったのですが、面白かったです。

特にRemixは、Next.jsとは勝手が違うところも割とあり、慣れなくて苦戦しました。


# 遊んでみてね

自由に好きなカードを作って遊んでみてください！！！

[うそポケ画像メーカー](https://usopoke.asonde.me/)

↓ユーザーさんが遊んでくれた様子を一部紹介

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/93527fd6-8e5a-98cf-a42f-6efc058a5862.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/d1390980-2909-e26a-2070-1b0a955a3349.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/8b0fa6c8-f05b-0d2d-a5ac-469e74c1f8cf.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/989c8d1f-3208-5200-9d2e-d7591ba41359.png)

↓遊んでみてね！ランダムパック引くの楽しいよ！

[うそポケ画像メーカー](https://usopoke.asonde.me/)

# 宣伝

最近こんなサービスもリリースしました！

いにしえのインターネットを復活させたい思いでやっています。

めっちゃ頑張って開発＆改善しています！そのうち記事も書きたいです！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【おしらせ】<br><br>「画像を貼るだけで個人サイトを作れるサービス」を作りました！🎉<br><br>・イラストや文字をどこでも貼れる🖐<br>・GIFも貼れる！<br>・画像を動かしたり、リンクを設定できる<br>・プログラミング不要！<a href="https://t.co/A3IRzQGl9R">https://t.co/A3IRzQGl9R</a><br><br>いいねRTでみんなに教えて欲しいです🙏 <a href="https://t.co/6C4MaUTPlw">pic.twitter.com/6C4MaUTPlw</a></p>&mdash; れとるときゃりー@ピクページ開発者 (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1796123557090517067?ref_src=twsrc%5Etfw">May 30, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ここまで読んでくれた方へ

以上、[うそポケ画像メーカー](https://usopoke.asonde.me/)を作った話でした。

ここまで読んでくださりありがとうございます。

いいねやコメント、SNSでの共有、はてなブックマーク等をしてくださると、非常にうれしいです。

良かったら、ツイッター ([@retoruto\_carry](https://x.com/retoruto_carry))フォローしてください。

GitHubレポジトリのスターをしてくださると泣いて喜びます。


https://github.com/retoruto-carry/usopoke