VIRTUAL_NATSUMATSURI

夏ですね！！最近、夏祭り、行きましたか？「忙しくて夏祭りに行けない！」という方も、「人が多いけど縁日を楽しみたい！」という方も！

ここから射的の屋台へ！

右側のQRコードを読み込むとスマホ画面にもこのように、射的へ向かうボタンが！

射的の屋台へ行ってみると射的場が！（夏祭りの音楽も！）

手元をみると、なんと、３つのコルク玉とshootのボタンが！

PC画面に向かってスマホを向けて打ってみると、、

商品ゲット！

取れなくても残念賞！

フロントエンド,バックエンド：技術構成図

バックエンド↓↓ https://github.com/claustra01/virtual-natsumatsuri-backend RustのAxumで、WebSocketを実装しました。複数人で同じ射的上で遊べるように、ルームの概念を実装しました。

フロントエンド↓↓ https://github.com/claustra01/virtual-natsumatsuri-frontend React + Vite + SWCの構成 react three fiberを用いて3Dの表現を行い、物理演算はcanonというライブラリを用いました。

インフラ技術構成図

インフラ↓↓ https://github.com/claustra01/virtual-natsumatsuri-infra デプロイ先にはGCPを利用しました。 CI/CDを組んで、効率よく開発できる環境を整えました。また、terraformを用いてIaCにも挑戦しました。

内部仕様

1つのWebアプリケーションですが、スマホで開くとコントローラになります。このスマホの角度や加速度を取得し、WebSocketサーバーを介してPC側に渡すことで、照準や機能を実現しています。また、命中判定については3次元キャンバスの再描画が発生するのを防ぐため、平面投影したレイヤ上で疑似的に命中判定を実現しています。

今回の開発のポイント！

CI/CDをしっかり組みました！GithubActionsでワークフローを自動化.
1泊2日という短期間の中でもレビュー制度を取り込み、レビューしなければマージできないように！
Figmaで必要機能や要件を共有できるように作り込みました.(行きの新幹線の中で頑張りました.)
２時間ごとのスクラムミーティングをキックオフから最終発表まで続けました！

こだわった開発経験から得たもの

スクラムを2時間おきにすると、メンバーが何を進めていて、何に困っていて、いつまでに終わらせるかを共有できます.
タスク管理を6時間ごとに行いたくなる衝動に駆られます.（いい意味で）
レビューでプログラミングの知識を共有できます
Figmaがあると開発での話を進めやすい
綺麗なコードを書こうと少し心がけるようになる

もちろん、うまく行ったことばかりではなかったです。ここまで体制を整えても思った通りに実装が進まなかったり、機能要件でも何度も話し合いましたし、技術力の差で知識の共有ができなかったり、2時間ごとのスクラムは寝れなくてしんどかったり、、、ここまでチーム体制を整えてもいろんな壁がありました。チーム開発は難しいと感じることが多いです。でも、だからこそ、何か作れた時はとても楽しいし、ハッカソンのために鹿児島まで来てしまうんだと思います。改めて強くそう感じました。

付録

Figma↓↓ https://www.figma.com/design/exYbZyulN8aCDeQ0n7UjR1/VIRTUAL_NATSUMATSURI?node-id=0-1&t=IFiPdb0Igz2CzHzD-1

VIRTUAL_NATSUMATSURI

射的で夏祭り気分を楽しめるWebサイトを作ってしまいました！

推しアイデア

作った背景

推し技術

プロジェクト詳細

夏ですね！！最近、夏祭り、行きましたか？「忙しくて夏祭りに行けない！」という方も、「人が多いけど縁日を楽しみたい！」という方も！