サイゼリヤでダイエットができてしまうガチャを開発した話
先日、サイゼリヤでダイエットができてしまうガチャガチャウェブアプリを Next.js で開発しました。
私は趣味で筋トレに取り組んでいることから、カロリーを気にしながら生活する日々があります。
似たような境遇の方もいるかなと思い、ガチャガチャでサイゼリヤのメニューを決めれてしまうウェブアプリをリリースしました。
はじめに
実際のウェブアプリはこちら
まずは、実際に作成したウェブアプリをご覧ください！
とてもシンプルな作りになっていて、Twitter界隈で以前バズっていたサイゼリヤ 1000 円ガチャからもインスピレーションを得て、開発に踏み切りました。
機能について
非常にシンプルなつくりで、テキストボックスに目標のカロリーを入力頂くと、ランダムでカロリー範囲内で食べられるサイゼリヤメニューが提案されます。
ランダムで提案されたメニューのスクリーンショットは以下の通りです。
開発について
開発したモチベーション
モチベーションは 2 つあります。
1 つ目は、面白そうだから。私の関心のあるトピックでもありましたし、サクッと実装できそうだったので、思い立った瞬間に開発が開始しました。
2 つ目は、バズらせて、メインで開発しているアプリの宣伝を見て頂きたいからです。
私は、普段は筋トレ記録アプリを開発していますが、アプリの利用者を増やすためのマーケティングコストに困っています。Google Ads での宣伝が利用者流入のメインのソースになっていますが、その他のソースからの流入が増えて欲しいと切実に願っています。
もちろん、このガチャガチャアプリをバズらせることも非常に難しいことであるとは分かっていますが、少ない工数で挑戦できたので、迷わず開発しました！
技術について
難しい技術は一才使っていません。
Next.js でウェブアプリを開発していて、クライアントサイドでガチャガチャを回すたびに json 形式で格納されているサイゼリヤメニューから最適なメニューが選ばれます。
非常にシンプルなロジックです。コードを抜粋するとこんな感じで、
while (true) {
availableMenu = menu.filter((value) => value.calorie < remainingCalories)
if (availableMenu.length == 0) {
break
}
selectedMenu = availableMenu[Math.floor(Math.random() * availableMenu.length)]
randomMenu.push(selectedMenu)
remainingCalories -= selectedMenu.calorie
}
勉強になったこと
以前から Next.js は使っていましたが、今回のアプリで初めて Next.js 13 の App ディレクトリを使いました。
複雑なアプリではないので大きな学習はありませんでしたが、App ディレクトリの仕様などを簡単に理解するためにはちょうど良い難易度の開発でした。
まとめ
以上が、私が開発したサイゼリヤダイエットガチャガチャアプリの紹介でした！
もしよろしければ、次回サイゼリヤに行かれた際に使ってみてください！
宣伝
普段は、誰でも使いやすい「筋トレ記録アプリ」を開発しておりますので、こちらも是非ご利用ください！
Discussion