高専祭のクラス展示にホームページと予約システム作ったら予約殺到した話
はじめに
はじめまして！
現在、北九州高専在学中のkurakkeと言います。
先日、高専祭(文化祭)で、クラスメイトがクラス展示としてシューティングゲームを作っていたので、ホームページとゲームの予約システムを作ったところ、予約が殺到して一時期130分待ちのディズニーみたいな待ち時間のコンテンツが出来上がった話について書いていこうと思います。
誰かの参考になれば良いなと言う気持ちで書いているので、もしお時間あれば読んでいただけると幸いです。
VercelのAnalytics
このシステムを作った背景
夏休み前にクラス展示で何を作るかの話し合いがあったのですが、紆余曲折を経てシューティングゲームを作るという話になりました。
そのシューティングゲームは、Unityを使ってゲームを作った上で銃型のコントローラーを自作してジャイロで操作できるようにするというものでした。
自分はフロントエンドとバックエンドを書けるので、ホームページと予約用のLinebotの作成チームのPMとして開発を進めていくことになりました。
自分のチームは9月４日から開発を進め、高専祭が11月4-5日だったので2ヶ月間開発しました。
頑張りましたね。。。
技術構成
ホームページはNext.jsとNextUIで開発しました。
NextUIは経験なかったですが、見た目がいいこととTailwindとの相性が良かったので、挑戦的に採用してみました。
使い心地は悪くなかったです〜
予約システムを作る上でLinebotを動かす用のAPIサーバーと予約情報のCRUD用のAPIサーバーと予約用のLiffの3つでシステムを動かしました。
APIサーバー一つでも良いんじゃない？って声が聞こえてきそうですが、例えば何らかしらの影響でCRUDサーバーが落ちてもLiffやLinebotでメンテナンス中であることを示せるようにしたいという考えから、今回は細分化した構成にしたいなと思いました。(ちなみにここに関しては検討の余地ありな部分と思っています)
バックエンドはDockerを使って環境構築を容易にして、GithubActionsとFly.ioでCI/CDを組んで開発効率を高めました。
アーキテクチャ図は以下の通りです
ホームページ Next.js Tailwind NextUI Vercel
CRUDサーバー Node.js Express Prisma Docker Fly.io
LineBotのサーバー Node.js Express MessagingAPI Fyo.io
Liff Next.js Tailwind Liff
開発プロセス
開発メンバーは以下の通りです。
自分→フロントエンドとバックエンドの開発経験あり。デザインセンス皆無。
ktsr→フロントエンド書ける。実装速度早い。
sakatter→開発もデザインも未経験。
担当は以下の通りです。
自分→フロント少しコーディングとレビュー全部、バックエンド全部、PM
ktsr→フロントエンドのコーディング、フロントエンドのコードのレビュー
sakatter→デザイン、フロントエンドのコーディング
要件定義は、ゲームを作るチームの方やクラス展示全体の統括をしてる方と話して詳細に決めました。プログラミングしたことない人にも伝わるようなコミュニケーションを意識しました。
デザインはsakatterが挑戦してくれました。想像を超えるクオリティのものを作ってくれたので普通に驚いたし、実装していて楽しかったです！
そして、コーディングをしていくのですが、基本的にフロントエンドのコードは自分がレビューしました。ktsrが爆速で開発するためレビュー待ちのPRが5個くらい溜まったこともあったので、PRの粒度やレビューに対する姿勢で反省点があるなと感じました。レビュー依頼きたら自分の作業止めてそっちに優先するべきでしたね。。。
バックエンドは、自分以外にかける人がいなかったため一人で作りました。
フロントのレビューに時間が想定以上にかかったことや通信テストを後回しにしたことから、バックエンドは開発がビハインドしました。
また、ソロで開発していたためタイポに気づくことが出来ず開発終盤までスペルミスに気づかなかった事件が起きました。(結局時間が無かったのでそのまま妥協)
ここでもレビューの必要性を感じてしまいました。
終わりに
今までハッカソンなどで軽く作るくらいの開発が多く、明確に誰かに使ってもらうサービスを作る経験が初めてでした。その割には何事も障害が起きることなく無事に終わることが出来たと思うし沢山の方からお褒めの言葉を頂くことが出来ました。
また、開発もデザインも完全に未経験なチームメンバーは何故かいいデザインを持ってきてコードも段々書けるようになるし、フロント担当の子は最近コード書いていないにも関わらず自分の想定を超えるスピードでコードを書いてくれました。
もっと自分も成長したいなと思えるいい機会になりました。
開発期間中はエラーに悩まされる日々でしたが、当日は自分が作ったものを褒めてくれる人が沢山いたことにただただ感動していました。
これからも誰かに「凄い」って言われるようなサービスを開発していきたいなと思いました。
Discussion