[個人開発]クールポコ。とじゃんけんできるWebサービスを作った
説明
どの手を出すかタップします。
あなたが負けると振り向いてくれません。
以上。
GitHubのリポジトリを公開しています。
動機
かつて「本田とじゃんけん」というのが流行りました。
その時、本田とじゃんけんみたいなじゃんけんを誰でも簡単に作ることができたら面白いんじゃないか?と思いました。
じゃんけんの画像、勝ち・負けの時のセリフを入力して作るイメージです。
ただ、いきなりそういうサービスを作るのは開発が大変そうだし、ほんとに面白いかわからないなと思いました。
なので「じゃんけんを作れるサービス」ではなく「じゃんけんそのもの」を作って、遊ぶ人がいるのか見てみようと考えました。
そこで(「本田とじゃんけん」が流行った)当時、#ハム太郎とじゃんけん を作りました。(今は動いてないです) これは、そんなに遊ぶ人がいないなと感じたので、サービスを消していました。
そして今回はクールポコ。が流行っていたので、作り直してみようと考えました。
技術スタック
軽く紹介。
楽に作りたかったので、DBは使っていません。
インフラ
- GCP Cloud Run
使用理由は単に業務で使っているから。
リクエストが無いときはインスタンスが起動してないので、お金があまりかからず良いです。
Cloud Runのドメインマッピング機能で独自ドメインで簡単にCloud Runへつなげることができたのも楽でよかったです。
(簡単のためロードバランサーは用意せず)
また、Cloud BuildでGitHubと簡単に連携することができ、mainブランチのpushをトリガーにDeployするというのも楽にできてありがたかったです。
アプリケーション
TypeScriptを使いたかったのと素直にサーバー側でレンダリングしたかったので、NestJSとテンプレートエンジンにHBSを使いました。
Twitterシェア時のOGP画像も表示させる必要もあったので。
気を遣ったこと
Twitterシェア時の画像を、URLから推測しにく形で勝ち画像と負け画像を出し分けることができるようにしたこと。
勝ちと負けの画像をTwitterに出し分けるには、URLを勝ちURLと負けURLと用意する必要があると思います。
ただ、URLから勝ちか負かを容易に推測できないようにしようと思いました。
DBも使いたくなかったので、勝ちか負けの記録してURLから辿れるようにすることもできず。
結果として、とある規則に則ったランダム英数字をURLに付与して勝ちか負けかをなるべくユーザーが推測しにくい形で判別できるようにしました。
例:
勝ち
負け
プレイヤーが勝ちの場合のURLパラメータはabcdefghijklmから始まるという規則です。
おわり
ちなみに、どれだけの人が遊んでくれたかというと こんな感じです。
遊んでくれた人、ありがとうございます！🙏
Discussion