概要
地方の公立高校に在籍する筆者が、文化祭の整理券システムを開発したときの話をまとめました。大勢の人に使ってもらうサービスを作ったのは初めてだったのですが、失敗含め自分にとって良い体験になりました。
突っ込みどころも多いと思うので、ご指摘等ありましたらコメントしていただけると嬉しいです。
作ったもの
高校の文化祭で、クラスごとにやる企画の整理券を端末で取得・管理するWebシステム（以下、整理券システム）を作りました。イメージとしては、病院とかの予約システムに近い感じです。
機能
- 整理券の取得・管理
参加したい企画を選んで、整理券をスマホのブラウザなどから整理券を取得します。取得した整理券は、各企画のスタッフが管理し、順番になると企画に参加することができます。また、自分の整理券が呼び出されたら、通知を受け取ることができます。 - 企画についての情報確認
各企画の待ち時間や待ち人数、開催場所などを確認することができます - イベント情報などの確認
冊子で配布されているパンフレットに記載してある、イベントのタイムスケジュールなどの一部の情報を見ることができます。
使用言語
Next.js(App Router)+Typescript+TailwindCSSを使っています。
DBはSupabaseを使っています。（が、後述する問題あり）
Next.jsなのでホスティングなどはすべてVercelで行いました。
開発について
1)開発の経緯
・コロナ禍明けだった昨年の文化祭で、クラス企画を待っている人が多すぎて販売の売り上げが落ちたり、待機列が通行の邪魔になるなどの問題が発生
・上記の問題を解決するために整理券システムなるものを作って、企画の待機問題を解決したい
・だけど外部に委託して作ってもらうのは予算的に無理...
・じゃあ生徒と先生だけで作ってみよう！(by生徒会)
こんな感じで生徒会や実行委員会の上級生が考えてはみたものの、普通科なのでできる人材がまともにいるわけがなく...
2)開発メンバー
・プログラミング担当:1名（筆者）
・デザイン担当:2名（美術部の生徒とか）
・その他担当（テストなど）:4名
・顧問:1名（数学科教師）
結局、生徒会が文化祭の3か月前に有志生徒を募集して、上記のメンバーが集まりました。
募集要件が「プログラミングを使って文化祭のシステムを作ってくれる人募集！」みたいな感じだったので、当時1年生だった自分も応募したのですが、予想通り、システムを作れるのか怪しい面子が集まりました。
プログラミング未経験者だけで開発をしようとすると、どうなるかは去年経験済みだったので（以下の記事）、最初の集まりでこれはまずいなと思ったのを覚えています。
ただ、趣味でプログラミングを書いている数学科の先生が協力してくれることになったので、なんとなくできるんじゃないかという雰囲気になり、そのまま開発が始まりました。
3)開発期間など
メンバーがそろったのが3月の下旬で、文化祭が6月末だったので、開発期間としては約3か月です。ただ部活をしながら一人でプログラムを書き、完成は6月上旬までにしてほしいとのことだったので、要件定義から結合テストまで大体2か月強が実質的な開発期間でした。
4)要件など
開発前に生徒会から要求されていたシステムの要件は、
- 整理券の取得・管理をブラウザからできること
- 3,000人程度の同時アクセスに耐えられること
- 閲覧履歴の削除などによってデータが消えないこと
- 予算は3日間の運営で10,000円以内に収めること
また、素人が開発することを踏まえて学校から、
- アカウント登録を必要としないこと
- メールアドレスなどの個人情報を利用しないこと
ということを求められました。
このことを踏まえて、webアプリとして開発を進めることになりました。
結果だけ言うと...
色々な問題点はあるのですが、結果だけ言えば2日間の文化祭で、大きなトラブルが起きることなく。生徒や一般の方々にシステムを利用してクラス企画を楽しんでもらうことができました。
システムを作ったことで、販売売上の増加や企画の待機列がなくなるなど、導入の目的であったクラス企画の待機問題は解決されました。また、来場者アンケートではシステムについて好意的な意見が多く寄せられ、参加できたクラス企画が増えたなどの副次的な効果も生み出すことができていました。
たくさんの問題点
結果的にシステムは成功しましたが、この成功の裏には大きな問題が山積みになっていました。
以前に同じような状況で開発したときに、
・機能を詰め込みすぎてシステムが完成しなかった
・周囲の理解（特に先生方）の理解が得られず、システムを動かせなかった
・他のメンバーの業務が次第になくなった
ということを経験したので、それを踏まえて今回の開発で自分が行ったことと、その後の問題点をまとめました。
1)人材について
前述したとおり、プログラムを書くのは自分一人、それも大勢の人が使うサービスの開発経験はありません。システムの規模はそこまで大きくないのですが、部活もやりながらので開発に時間が割けないことはわかっていました。
やったこと
・最小限での設計
メンバーが集まった時点で危機感を感じたので、以前にも素人だけで大きなシステムを作ろうとして失敗した経験から、最低限の機能で動くシステムを目指しました。生成AIなども使ったので、コーディングで困ることは特になかったです。
・タスクを明確にする
動くための最低限の機能や他のメンバーができることを明確にし、スケジュールを早めに考えて開発を進めました。画面構成や動作テストなどのプログラミングの知識がなくてもできる業務を割り振れるように意識しました。
やってみての問題点
・思ったより他のメンバーが動かない
自分のタスク管理にも問題はあったと思うのですが、「時間がない」「わからない」と言われ、プログラミングを必要としない業務を断られることが多かったです。例えば、「1週間後までにこのアイコンを作って、このボタンのデザインを考えて」といっても、期限が守られなかったり、そもそもやってもらえないということが多かったです。
・周りのタスクの見積もりが甘い
プログラミングをしたことがないので、周りの生徒や先生が見積もる実装工数がかなり甘かったです。実装に対して「もっと早くできないの？」とか「この機能はなんで実装できないの？」みたいなことを言われ、理由を説明しても理解してもらえないのがかなりきつかったです。
2)開発について
多くの人が使うサービスを作ったことがなかったので、自分なりに工夫して開発しました。
やったこと
・見よう見まねでやってみる
会社でのシステム開発の記事などを参考にして、開発の形だけでもうまくいくように見よう見まねでやってみました。例えば、今までやらなかったgitでのバージョン管理や、コードの可読性を考えて実装してみました。
・要件定義をしっかりやる
生徒会からの要求はざっくりしたものなので、要件定義を細かくやりました。機能要件・非機能要件に分け、画面遷移図やDB設計図なども書きました。
やってみての問題点
・要件定義後に揉める
開発チームと言っても、実行委員会が集めた有志生徒の集まりなので、システムの機能に関して言えることは多くなかったです。他の役員からざっくりとした要望が送られてくるのですが、その内容は技術的に難しいものがほとんどなので実装は無理だというのを伝えるのですが、最終的に機能を決めるのは開発チーム以外の役員なので、そこで食い違いや不満が出て、結果的にコードを実装する僕にしわ寄せがくるのがかなり苦しかったです。そんなことが本番2週間前まで続いていたので、単体テストを本番前日までやっていました。
・実装できない理由を説明するのが難しい
周りに知識を持っている人がいないので、なぜその機能を実装できないのかを説明しても、理解してもらえないことがしんどかったです。役員と話し合う機会もほとんどなかったので、じっくり説明することができなかったのも原因の一つかなと思います。
・謎の制約がある
機能を実装する上での制約について理解できないものがいくつかありました。
例えば、ユーザーの判別について、『Cokkieも使えずNextAuthやSupabase Authでの認証をするのも危ないからだめだけど、localstorageだと何も言われない』みたいな感じです。
3)運用について
2)で述べたように、実際は開発が思うように進まなかったので、運用についても様々な面で苦労しました。特に、開発が遅延したことで他の生徒や一般の来場者に思うように情報が伝わっていないことがありました。
やったこと
・生徒の負担を減らす
クラス企画を運営する係の生徒が各クラスにいるのですが、その人たちに整理券の管理をしてもらう必要がありました。なので、生徒用の管理画面を作り、ITに疎い生徒でも簡単に操作できるようにしました。
・金銭面の管理は先生に任せる
商用利用にあたりそうだったので、VercelやSupabaseは有料プランにする必要がありました。そうなるとクレジットカードが必要になり、未成年では管理できなかったので、支払いや予算の調達については担当の先生に任せました。
やってみての問題点
・情報の共有がされていない
係生徒への操作方法の講習や、先生への依頼などを行う必要があったのですが、自分が実装している間に他のメンバーや役員がそういった業務をほとんどしていなかったので、結果的に操作方法や当日の業務についての情報共有がされず、当日になって混乱することがありました。当日に、来場者がシステムの存在を知らなくてクラス企画に参加できない、ということも起きてしまいました。
・思ったよりも生徒や来場者がシステムを操作できない
普通のアプリと同じような操作感で作ったつもりだったのですが、UI/UX的に使いづらい部分がありました。ここは自分の設計が良くなかったのかなと思います。今回PWAとしてインストールできるようにしていたのですが、インストールの方法がわからず、通知機能が使えない人も多かったのでもったいなかったなと思いました。
まとめ
結局、普通科の高校にはプログラミングができる人がいないので、その中である程度のシステムを作るには、コーディング以外の部分をどれだけ他の生徒に任せるかが大事かなと思いました。今回はタスクの割り振りはうまくいったけれど、その後のことを考えずに機能の実装だけを進めてしまったのが大きな原因かなと思います。以前うまくいかなかった、知識を持たない人への説明はやはり難しいなと感じました。
ただ、学校という特殊な環境で開発することは、個人開発とは違った面白さがあるのかなと思うので、来年も今年の反省を生かして作っていこうと思っています。