「MiNERVA」コロナ禍での学祭対面開催に向けた、情報系大学生の奮闘記 #JavaScript

この記事は、法政大学アドベントカレンダー2021の2日目の記事です。

本記事は、大学を批判するものではありません。今回の活動は全て大学の全面的な協力があってこそでした、ありがとうございました。

三行で表す

コロナ禍で学祭を運営するにあたり、入室管理が必要になりました。
紙で記録するのは追跡が面倒なので、QRコードで管理できるシステムを作りました。
作ったら大学に褒められたので、図にのってQiitaにも投稿します。

自己紹介

@taikis
Twitter( taikis_jp ), GitHub( taikis )

法政大学でITを学んでいる大学4年生
研究内容は画像認識、機械学習
新入生歓迎会や学祭を運営する団体の代表をやってました

作ったもの

QRコードを用い、どんな端末でも簡単にスキャンできる入室管理システム「MiNERVA」を作成しました。

…
…
…と思ってたらまさかの同じコンセプト、よりモダンなものを作られている方がいらっしゃいました。
こちらの記事もご紹介いたします。

動いている様子

基本的な動き

場所選択画面

スキャン画面

登録成功画面

初回登録未完了時

求められる機能

ベータ版を作り始めたのは、新入生歓迎会の時でした。
2020年度の新入生歓迎会は、対面で実施ができなかったため、2021年度がコロナ禍で初めての新入生歓迎会の対面開催となりました。

その際、大学から「来場者(新入生)が、どのブース・教室に立ち寄ったかを、分刻みで記録するように」との指示を受けました。
コロナ禍の中、その指示は的確なもので、もっともなことです。
ただし、新入生は1200人超、この量を紙で管理するのは~~アホのやること~~とても大変です。

来場者管理に必要なものとして、以下の三つが挙げられます。
① 有事の際に簡単にデータを分析できること
② 個人固有のID
③ 簡単に打刻ができること

① 有事の際に簡単にデータを分析できること

先述したように、紙で管理するととてつもない量になります。
新入生の人数が1200人を超え、1人3団体のブース見て回るとしても3600行を手で探す、あるいはエクセル等に落とし込まないといけません。
無理です。

ここで、何らかの情報技術を使うことが確定しました。

② 個人固有のID

名前を使うことが考えられますが、空白や、漢字の表記ぶれがあるため適しません。
では、学籍番号を使えるのでは？と思いますよね。
3月の私と大学のやりとりを見てみましょう

私 : 学籍番号で管理したいんですけどいいですか？
大学 : 学籍番号の発行は新歓期間中なので無理です
私 : じゃあ予約フォーム作って整理番号発行するので、メール流してください
大学 : 新入生のメアドの発行まだなのでできません
私 : 前日は流石に発行されてますよね…？
大学 : 3月末からシステム更新で事務のPC使えないので無理です
私 : じゃあどうしたらいいんですか？
大学 : 紙で管理してください！(満面の笑み)
私 :

当日にならないと誰が来るかわからないため、登録→整理番号発行を当日行う必要が起きました。
この時点で、メール配信が必要になりました。

③ 簡単に打刻ができること

実際に打刻をしてくれるのは、各サークルなんですよね。
打刻が番号を入力するとかめんどくさいと、従ってくれない可能性があります。

手軽にささっと打刻できて、これならやってやってもいいかなと思えるもの。これがQRコードスキャンでした。

しかし、QRコードスキャナーを団体分配布するわけにもいかないため、スマホを用いることになります。ネイティブアプリの開発は、OS分作らなければならず、開発費用もかかります。そのため、ブラウザ上で動くWebアプリを作成することになりました。

ベータ版でうまくいかなかったこと

新入生歓迎会で運用したベータ版でうまくいかなかったことをもとに、学祭で大幅アップデートを行いました。その記録を残します。

① GASのメール送信上限を知らなかった

整理番号発行→QRコードの生成→メール送信はGoogle フォームとGoogle App Scriptを使用していました。

メールの送信上限が100件なので、新歓期間中に上限超えました。
途中からメールが完全に送信されなくなる恐怖は今でもトラウマです。

外部のサービスを使う際は、制限や仕様をよく確認しなければですね。

② 画面上のQRコード晴天下で反射して読めない

メールでQRコードが送られるため、スキャナーでそれを読み込む仕様でした。

晴天下では、日光が画面に反射してスキャナーで読み込めないという声が多数上がりました。

実地で読み込んでいれば、こういった不具合は想定することが難しかったでしょう。実地でのテストが必要と思い知らされ、改良版ではQRコードのカードを配ることにしました。

工夫した点

① Webブラウザで動くようにした

先述した通り、ネイティブアプリを作るにはコストがかかりすぎるため、Webブラウザで完結するシステムにしました。
QRコードを読み取るにあたり、下記の記事を参考にさせていただきました。

使用したライブラリ

全ての端末で確実に動かしたかったため、100人以上の委員を動員し、数十種の端末で徹底したテストを行いました。
結果的に動作不能端末が見つからなく、当日バグも一切なくなったため、成功と言えるでしょう。

② 読み込む人によってQRの遷移先を変えた

新歓の反省から、来場者にQRコードが書かれた紙を渡すことにしました。
QRコードのURLを下記のようにすることで、来場者は整理番号と個人情報の紐付けページへ飛ぶことができます。

URL

https://example.com/form?number=123456

実際読み込んだ場面

MiNERVAのQRコードリーダーでは、正規表現を使うことでURLではなく整理番号のみ抽出し、DBに登録します。

正規表現

url.match(/number=(\d{6})/);

一つのQRコードを標準カメラで読み込むと初回登録画面へ、MiNERVAのスキャナーで読むと場所の登録ができるようになりました。

③ 初回登録をしていないユーザーは、場所登録ができないようにした

初回登録って時間かかるんですよね。ただ登録まで見張っていると、時間がかかって滞留してしまいます。
感染対策のシステムで密になるのは本末転倒なので、初回登録をしてなければどのブースにも立ち寄れないことにしました。

初回登録していないとこの画面になります。
この機能により、入場口での混雑を減らすことに成功しました。

最後に

今年の学祭は、何としてでも対面で開催しなければいけませんでした。
一般の学生団体は3年生で引退します。コロナ禍から2年がたち、今年対面で会うことができなければ多くの伝統が消えることになってしまいます。
コロナ対策と課外活動。この二つを相反させないために、我々は自分にできる全てのことを行いました。

私がやったことが、今後評価されたら嬉しいです。

参考文献・使用させていただいたライブラリ等

明日は@reud さんの「OpenAPI Generatorでハッカソンを楽しむ」です！

「MiNERVA」コロナ禍での学祭対面開催に向けた、情報系大学生の奮闘記