当時、わくわくビンゴを作るにあたって作成した企画原案をそのままお送りします。

わくわくビンゴ

https://bingo.eni-eni.com/

🌷「yo」

UserStory

—Usage—–
オンライン忘年会で使われる。
100人ぐらいまでの人数で使える。

—bingoのルームを作るまで—–
主催者がルームを作る
参加者は主催者からルームのurl(QRコード)をもらってビンゴカードを手に入れる。

—bingoがはじまった!——
主催者がガラガラを回す。(画面共有して参加者に見せる)
参加者:
ビンゴカードの既に出た数は光る
ビンゴカードをタップして穴を開ける。
主催者は前に出た数の一覧が見れる。

—リーチになった!—–
参加者:リーチのラインが可視化される。
主催者:リーチの参加者の一覧が見れる。

—ビンゴ!—–
全体に通知飛ばす。
主催者:ビンゴになった順に一覧が表示される

—ビンゴになったら….—
カードがグレーアウトするorそのまま続けられる(1回上がった人は管理したくない)
通知だけ受け取る
カードを開けれるだけ

Functions

  • 部屋のidを作る -> 参加者が紐づく(入室する)
  • 部屋のurlを作成
  • 入室(名前とクレジットカードの番号を。。。)
  • ガラガラ(数値をランダムで取得する)
  • カードを光らせる(有効なbacknumber)
  • リーチになったら、該当のラインが何かしらのエフェクト & リーチの人の一覧(主催者が閲覧可能)
  • ビンゴになったら該当のラインに何かしらのエフェクト -> 主催者がビンゴになった人を昇順で閲覧可能
  • 通知 -> 数字, リーチの時, ビンゴの時

TODO

  • QRコードの生成
  • 短縮URLの生成
  • URLをクリックでコピー
  • Loaderを出す

Design(UI/UX)

主催者

  • ルーム作成 /room/create
  • ガラガラ
  • バックナンバー
  • リーチ一覧
  • ビンゴ一覧 -> /room/:id/owner

参加者

  • 入室画面 /room/:id/join
  • ビンゴカード /room/:id/user/:id

FireStore

ルーム

sample

{
    "room_id": "xcwefkljfdiucmne14kdj",
    "name": "株式会社エニエニ忘年会",
    "users": [
        "userxcwefkljfdiucmne14kdj1",
        "userxcwefkljfdiucmne14kdj2",
        "userxcwefkljfdiucmne14kdj3"
    ],
    "back_number": [
        1, 2, 3, 4, 5
    ]
}

参加者(ユーザー)

sample

{
    "user_id": "userxcwefkljfdiucmne14kdj",
    "name": "太郎",
    "is_bingo": true,
    "is_reach": false,
}

作ってる人たちについて