夏にカレーをより楽しむアプリ「CoCoガチャ」

どうもきらぷかです。
1週間でWebサービスを作るイベント『web1week』、今回のお題は「バケーション」

バケーションといったら、夏。。
夏といったら、カレー。。
カレーといったら、ココイチ!!

今回はココイチのトッピングをガチャで決めるアプリを作りました!
(サイゼリヤ1000円ガチャCoCo壱番屋バージョンです(´ω`))

■「CoCoガチャ」
https://coco-gacha.memory-lovers.com/

ogp.png

作ったもの

内容はシンプルでトッピングの種類と予算を設定してガチャを回すだけ

スクリーンショット 2021-07-20 16.16.17.png

ガチャを回すと、ベース/ライス/辛さ/甘さ/トッピングを選んでくれます。

スクリーンショット 2021-07-20 16.47.46.png

お、SSRヒレカツですね(´ω`)

野菜はいらないって人は肉類だけにチェックすればOK

スクリーンショット 2021-07-20 16.17.47.png

みんなのトッピング」という今までの結果も見れるようになってます。

スクリーンショット 2021-07-20 16.52.41.png

ガチャを回すと結果は保存されるので、
奇跡的に良いトッピングがあれば、これを見て注文することも(´ω`)

使っている技術

今回の目標は、最近開発しているSSSAPIを使ってサクッと作ること。ドックフーディングを兼ねてます。

いつも使ってる3点セット(Nuxt/Buefy/Firebase)+SSSAPI

NuxtのSPAだけど、個別のページのタイトルとかも変えたいので、
NetlifyのPreRenderingを使ってる。

SSSAPI

SSSAPIは、GoogleスプレッドシートのAPI化サービスで、
こんなスプレッドシートの内容から

スクリーンショット 2021-07-20 16.20.05.png

こんな感じのJSONを返してくれるAPIを作成してくれます。

[
  {
    "id": 1,
    "name": "ポークカレー",
    "price": 514,
    "rarity": "C"
  },
  {
    "id": 2,
    "name": "甘口ポークカレー",
    "price": 514,
    "rarity": "R"
  },
// 略...
]

SSSAPIのおかげで、初期データ突っ込んだり、後でフィールド増やすときの手間を省けたので、だいぶ楽にできた気がする(´ω`)

  • とりあえず、データをスプシにまとめる
  • API化して表示を実装する
  • レアリティが必要だと気づき、項目を増やす
  • APIを更新する

みたいな流れで使ってました。

今まではJSONでやってたけど、JSONの編集って面倒。。(´ω`)

中身のスプレッドシートはこちらで確認できます。
スプレッドシート(CoCoガチャ)

よかったら遊んでみてください!

ぜひぜひ〜

CoCoガチャ

ogp.png

SSSAPIもβ版公開中なので、興味ある方は事前登録フォームよりご連絡ください!

SSSAPI
SSSAPI事前登録フォーム

ogp2.png

どちらのフィードバックもお待ちしてます(´ω`)
Twitter: @kira_puka


きらぷか@積読ハウマッチ/SSSAPIなど

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい #DMでお仕事募集はお休み中 Kotlin/Python/Swift/Unity/Java/Haskell/DDD

コメント