日比谷高校オンライン整理券 "Quaint" 2024年開発記

まえがき

2024年9月14・15日に行われた東京都立日比谷高等学校の文化祭である星陵祭のWebサイトおよび当日に使用されたオンライン整理券システムを制作しました。システムは2022・2023年のものを引き継いだものです。2022・2023年の記事もあるのでそちらも読んでくださると嬉しいです。

https://zenn.dev/ekke/articles/ec07943d678340
https://zenn.dev/ekke/articles/bd2d3d6fbda8a6

本記事ではオンライン整理券システム"Quaint"の2024年における開発の経過とシステムを作成した委員会であるIT委員会の反省を書いていきます。本記事が将来の日比谷高校の生徒、また同じようなことをやりたいと志す人の役に少しでも立てたら幸いです。

本記事は知見の共有を目的として個人的に執筆されたものです．本記事に関する学校等への問い合わせはご遠慮ください．

1.システム概要

GitHubのリポジトリはこちらです。
https://github.com/hibiya-itchief/2024-quaint-app
サイトはこちらです（管理が追いついておらず本番時にはなかったバグを含んでいます、、）
https://2024.seiryofes.com/

1-1.目的

• COVID-19の感染防止
  • オンライン整理券システムの計画が本格的に始まった2021年度のきっかけはコロナウイルス対策
  • 2023・2024年では大きな制約を受けなかったため、感染症対策にフォーカスしていません
• Webサイトとしての内容充実・広報力の強化
  • 2023年にシステムを導入したこともあり広報力の強化の需要が高まりました
• 映像配信のプラットフォーム
  • 生徒のアカウントでのみ動画が見られるようになっています
• クラス劇整理券の効率的な配布
  • 2023年では生徒・保護者のみオンライン整理券を使用しました
    • 一般客は長蛇の列を並びかつみたい劇のチケットを取ることができるかは運次第という悲惨な状況になりました
    • 2024年では全ての人がオンライン整理券を使用することにより効率的・快適な整理券の取得をめざしました
  • 保護者優先券のオンライン化

1-2.主な機能

• アカウントに権限をつけ、権限に応じてできることを変えた
  • クラス代表は自分のクラスの紹介ページを自由に編集できる
• 配布状況の確認
  • どのクラスの劇の整理券が余っているかを一目で確認できるようにした
• お知らせ
  • トップページにお知らせを残せるようにしました
• 整理券の取得
  • 保護者用優先権の取得
  • 一般の整理券取得
• 整理券のQRコードスキャンによるチケット有効化
  • 今年はQRコード初導入ということもあり投票機能との連携をしない方向として決まったが来年はぜひ連携させてほしい
• 投票
  • １人２票（見た劇にのみ投票可能）として公平な投票結果につなげた

1-3.2023年からの変化

機能面

• 公演の一括追加機能の実装
  • 2023年では文化祭前日の夜に手動でサイトから公演を追加していた
    • その結果入力ミスが多発
  • csvファイルから情報を読み取って公演をデーターベースに一括で追加する機能をつけました
  • 余裕を持って公演を追加できたのは2024年の整理券が一般客・保護者用優先券含めて、すべてがオンライン化されたから
• 一般客のオンライン整理券化
  • 受付でアカウントのアドレスとパスワードを書いた上を配り、配布
• 保護者用優先券のオンライン化
  • 自分のクラスのみ一般配布開始時間よりも早い保護者用整理券配布時間からニ枚まで取得できるようにした
• QRコードによる整理券有効化
  • クラスの受付でQRコードをスキャンし、その整理券が有効なものを判定する
  • 来年は有効かされた整理券を持っている人のみ投票できるようになってほしい
• 投票機能
  • これまではMicrosoft formsなどを使っていたが、不正な投票を多くできてしまい、投票結果が極めて信憑性の低いものだった
  • １人２票（整理券を取得したクラスにのみ）とすることで正確な投票を行えた

技術面

• 画像を保存するためのオブジェクトストレージをOracleのものからAzure Blob Storageに変更
  • 本番サーバーをAzureで立てているのでそのほうが管理が楽だと思った
  • 後におそらくこれが原因となり本番後にトラブル発生
• FastAPIのバージョン変更
• DBとバックエンドを同じ仮想ネットワーク内に起き、DB・バックエンド間の通信をプライベート通信にした
  • 去年は支払いのアカウントの関係で実現が難しかった

2.技術的構成

2023年からインフラ面を除いてほとんど変化していません

主に使用したツール・サービス

• フロントエンド
  • Nuxt2
  • Vuetify2
• バックエンド
  • FastAPI
  • SQLAlchemy
• DB
  • MySQL

インフラ

2023年に引き続きAzureを使ってサーバーを立てました。ポートフォワーディングを用いてのみデータベースにアクセスできるようにしました。

開発期間においてのサーバー調達

Google Cloudの初回登録時の3ヶ月間有効なクレジットを使って仮想マシン上でDockerのコンテナを立てて、バックエンドを動かしてました。僕と一つ上の先輩の二人分のアカウントを使って回した形です。この点については立てるためにデビットカードを作る必要があるという点で来年は議論を深めたほうがいいかもしれません（これからも少なくとも一人はカードを作る必要がある状態は続きそうですが）。特に、開発期間においてのサーバーを自分で調達するのはサーバーの管理を間違えて実際に費用が発生したときの場合を考える必要があります（実際に2024年ではサーバーの管理を間違えて僕が1万円弱自腹で出しました、、、、こんな思いはしないで）。

https://cloud.google.com/free/?utm_source=google&utm_medium=cpc&utm_campaign=japac-JP-all-en-dr-BKWS-all-core-trial-EXA-dr-1605216&utm_content=text-ad-none-none-DEV_c-CRE_602288553768-ADGP_Hybrid+|+BKWS+-+EXA+|+Txt+-GCP-General-core+brand-main-KWID_43700071562407950-kwd-6458750523&userloc_1009307-network_g&utm_term=KW_google+cloud&gad_source=1&gclid=Cj0KCQiA4L67BhDUARIsADWrl7EiPdxbjG5hn7JfD0F9hZ3DIJh2AtMPRDzAkppByYYOM_MrHA8ObM4aAkLfEALw_wcB&gclsrc=aw.ds&hl=ja

3.制作の時系列

2023/12/21

先輩から来年のオンライン整理券を作ることを聞く（当時僕は一年）。振り返ると予算もないし、作れる人がいるかもわからないまま仕事をいつの間にか先輩方が承諾していたのはギャンブルだったな～と思います。

2023年冬

基本的にフロントエンドの2024年に向けての書き換えを行っていました。並行して僕以外に開発を進めてくれる人を育てるために何回かDiscordで会議開いて僕が技術的な説明と何を勉強してほしいかをスライドにまとめてみんなに話していた気がする。

2024年春

新一年生の勧誘のためにIT委員会広報部の人たちにポスターを作ってもらい一年生の教室に張り出しました。昼休みに乗り込んで前で勧誘しました。新しく入った一年生には僕がDiscordのDMでプログラミング経験を教えてもらい、入った後開くことになっていた勉強会の内容とかを考えていました。勉強会については委員会として反省で記述します。

2024/7/19

夏休みの直前、負荷テストを実施しました。生徒全員のアカウント登録に漏れが無いかの確認とバグの有無、負荷の確認が主な目的です。負荷の確認に関しては負荷テスト前日もk6を使ってテストを行いました。

夏休み

開発に専念しました。このあたりから文化祭実行委員会との連絡を活発に行い、必要な機能の多くを作りました。

本番直前期

サイトに実装が終わっていない文化祭の詳細な情報（スケジュールなど）を追加しました。バックエンドのテストコードを充実させてバグがないように確認していきました。

2024/9/9

サーバーを開発用から本番サーバーへ移動させました。

2024/9/12

直前の負荷テストを行いました。負荷テストという名目ですが、どちらかというと機能のバグ確認テストという意味合いが大きいです。特に新しく実装したQRコードと投票の機能について正しく動くことを確認するためのテストでした。この日に保護者向けの優先券配布開始日でした。というのにQRコードで整理券を有効化すると整理券がカウントされないという致命的なバグを発見。めちゃくちゃ焦りながらも直せました。

無事に動いているのを見てテンションが上がりました。

保護者用優先券のQRコードを生徒が遊びでスキャンした事例が見られました。DBを操作して再度使えるようにしてあげましたが、注意喚起をもう少し強めに行ったほうが良かったと思います。

本番(9/14,15)

無事成功しました。席が埋まっていく様子や負荷が集中するグラフを見られてとても嬉しかったです。ちなみに取得されたチケット数は10,526枚（キャンセル分を含む）、投票数は2,233票でした。

後日談

サイトは静的化してバックエンドなしで保存してました。ここで問題が起こりました。

画像を保存するためのストレージとしてAzure Blob Storageを使っていたのですが、おそらくこれによる課金の0.001円ほどが繰り上げられて1円の請求が僕に来ました。問題なく支払いができれば気にすることではないのですが、なぜが支払いができなくなってしまいました。支払おうとすると「金融機関によってブロックされている」というメッセージが表示されるようになってしまいました。カード会社に確認を取ったところブロックした履歴は確認できないとのこと。Azureでサポートリクエストを作成して聞くとマーチャントIDやらなんやらの情報を渡されたので、それを下にもう一度カード会社に問い合わせてみても支払いの要求は見つかりませんでした。Azureのサポートの人が極少額の請求の支払いができないことを確認しているといっていたので、僕も同じ現象に陥ってしまったのでしょう。ということで僕はこれからも毎月このやり取りをするのが億劫に感じ僕のサブスクリプションを軽い気持ちで消しました。その結果、画像が見られなくなりました。


完全に画像のことを忘れていました、、、。大きな過ちを犯してしまった。どこかのタイミングで直せることを祈っています。

4.IT委員会の反省

4-1.予算

2022・2023年では予算が出ず、委員会の有志が費用を出したり、大学生の先輩^[1]のアカウントを使って費用が出ないようにサーバーを立てていました（実際には想定外？の支出ができてしまい先輩が建て替えていたことも後に知りました）。これまでは実態のないものには支出できないという東京都の制限により、学校からチーフ会や各クラスなどに出る星陵祭の予算は使えませんでした。しかし、今年はPTAとの交渉の結果PTAから本番用のサーバー代が出るということになりました。PTAの皆様には感謝してもしきれません。一方これは一時しのぎの策でしかなく、根本的な解決にはなっていないのが事実です。実際に2024年でもドメイン費用など一部生徒が負担しています。来年2025年の開発に向けては今年の成功を踏まえて学校から予算が出るらしい？ということを聞いているので期待しています。

PTAとの予算交渉

予算についての話は2024/4/20から活発に行っていました。はじめは星陵会に支援をお願いしようと考えましたが時すでに遅しということで無理でした。先輩が先生方にはたらきかけてくれた結果、副校長先生の方からPTAに打診してくれるということになりました。前向きに検討してもらえたのは去年の成功があったからだと思います。5/21にPTAが全額負担してくださることが決まりました。その次の日に担当の先生との話をすることになり、予算の話が確定しました。

↓こんな感じの資料を作っていた

4-2.委員会としての不安定性

今年のプロジェクトは主に僕（２年）、技術部主任（３年）^[2]、委員長（３年）^[3]で回していました（様々な部分で多くの委員会メンバー・生徒の皆さんに助けられています）。ここで提起したい問題はサイト開発という一大プロジェクトが委員会としてではなく特定の人たちのプロジェクトとなってしまったことです。有志の委員会の自由参加という特性上、メンバーに強制的な仕事を投げかけるのは難しいです。どのように委員の参加意欲をかきたてるかというのは大きな課題です。しかしこれに対する効果的なアプローチをすることができませんでした。このプロジェクトを持続可能で安定したものにするには必要不可欠な要素です。特に技術的な仕事をこなせる人材の育成は重要です（これについては次の4-3で詳しく取り上げます）。仕事に関われない原因として、何を実際に委員会がやっているのかがわからないということがあると考え、今年は仕事の連絡はDiscordの全員が見られる場所で行うことを意識しました。結果としてはそもそもDiscordをみる人が少なく、仕事を投げかけている側からだと全員に連絡が伝わっているのかがわからないというものでした。一年生にはDiscordを確認すること・仕事の連絡は全員が見られる場所で行うこと、としつこく僕がいったので来年にはこの状態が改善されていてほしいです。

4-3.技術部員の養成

技術部員の養成のために、今年は僕が月一ぐらいのペースで勉強会を開いていました。

勉強会で教える内容としてフォーカスしたのは

• システムの構造・全体像
• 何を学ぶ必要があるのか

という点です。

少ない時間でプログラミングのすべてを一から教え込むのは不可能です。何を学ぶ必要なのかを明確にし、どのように学ぶのかの提案を出すことで、自主的に勉強できるようにすることを目的としました。練習ができるようにdockerでコンテナを立ち上げればフロント・バックエンドの練習が何もセットアップなしにできるためのレポジトリも用意しました。勉強会で定期的に技術部員を集めることで、ただ知識を得るだけでなく、来年自分がやることになるという自覚を持つことができたと思います。

↓スライドの一部

サイト開発について技術的に学ばなければいけないことが多すぎるかつ内容が初めてやる人にとっては高度すぎるという点は否めません。

4-4.来年のサイト制作

今年の星陵祭が終わってすぐに一年生に「来年君たちはサイトを作るか」ということを聞きました。このオンライン整理券システムを開発する・開発しないのどちらの選択肢がよいというものではありません。これはEkke先輩（2022・2023年の開発記の著者）^[4]からの引用ですがQuaintが負の遺産になってほしくありません。「二年生のチーフ・IT委員が三年に基本的に依存することなく開発・運営を続けることができる」が条件だと僕は考えました。これがこの質問の理由です。

現時点では来年も開発されることになっています。ぜひ成功させてほしいです。

あとがき

まず、開発に伴い、協力してくれたチーフ会・IT委員会のみんな、そして先生方、本当にありがとうございました。また、温かく応援してくださった保護者の皆様、ありがとうございました。

星陵祭に少しでも役に立つことができたことを誇りに思います。これからこのシステムがどのような形で存続していくのかは先が見えない話ですが、来年も成功記が残されることを祈っています。

冒頭にも述べましたが、本記事が将来の日比谷高校の生徒、また同じようなことをやりたいと志す人の役に少しでも立てたら幸いです。

脚注

1. ItsukiKigoshi:75期(2023年度当時大学1年生)IT委員会の前身、チーフ会IT部隊の部隊長。

2. とあふさん：77期(2024年高校3年生)。IT委員会2代目技術主任。2023年整理券システム制作者。

3. K先輩：77期(2024年高校3年生)。IT委員会委員長。

4. Ekke先輩：2022,2023年整理券システム制作者。Quaintを0から作った先輩。2022,2023年開発記著者。