学生が大学の勉強スペースで使われるシステムを構築・運用してみての学び

はじめに

この記事で一番伝えたいのは、これから日本大学やその他の大学で公式に使われるアプリを作成しようとしている人に対して、どのような問題点で私が困ったか？を共有するための記事です。

私は日本大学の文理学部のキャンパスに所属している修士2年生です。日本大学文理学部のキャンパスには、ラーニングコモンズと呼ばれる、カジュアルな図書館のような立ち位置の勉強スペース（以下、LC）があり、ここでは、PC席と呼ばれるモニターが付いた特別な席が存在します。

他と比べ良い椅子であるということや、みんなで同じモニターを見ながら議論出来たりする点から、この席は大変人気で予約が必須となっています。本記事は、このPC席予約システムについての記事になります。

私はこのLCで補助アルバイトをしており、LCの運営や学生からの質問対応、その他の業務に従事しています。

背景

前提として、私がシステムを作る前からPC席予約のためのシステムは存在しました。そのため、厳密にはシステムのリプレイスに当たります。そして、従来のシステムにはいくつか問題点がありました。

言うまでもないですが、従来のシステムは先輩の学生が作成したものであり素晴らしいシステムでした。その方は情報系でないため、独学であのようなシステムを作り上げた事に対して非常にリスペクトをしています。加えて、止まることなく安定して稼働していたという点も素晴らしいことだと再実感しました。

• Excelで作られていて、メンテナビリティが低い

  • ここではExcel自体のメンテナビリティに言及しているわけではなく、現在や将来的にアルバイトに入ってくるであろう学生のスキルセットを考慮しています

• 外部に公開しているわけではないので、現地に行かないと席の空き具合の確認や登録が出来ない

加えて、従来のシステムに対しての要望は以下のようなものがありました。

• どのような学生が使用しているのか分析したい
• LCで行われるイベントの告知も行いたい
• LCで今働いているアルバイトが確認できれば、質問がしやすい
  • 利用してくださる学生からの専門性が高い質問（例えば、プログラミングや教職のレポートについての質問等。文理学部という特殊な学部のため、質問が多岐に渡る。）が来た時に、勤務中の学生が答えられないため日を改めてもらうケースが多かった
• 管理画面が欲しい
• 学生のスマホ（iOS, Android問わず）やPC等で席の予約状況が確認できるとうれしい

同時に、いくつかの非機能要件も存在します。

• LCにあるWindowsでのPCで動く必要がある
• 常駐している管理人がプログラミングに知見が無いため、出来るだけその方が運用しやすいような形にする

これらの要件を全て満たすため、私はWebでアプリ開発をしようと決めました。

技術スタック

このような技術スタックと構成で実装しようとしていました。

• Next.js
  • Reactを出来れば使う必要がありました（後述）。また、バックエンドを別で用意するのが大変だと考えたので、Next.jsを採用しました。
• Supabase
  • 管理画面が欲しいという点から、認証・認可のサーバが必要になります。自前で実装するのはなかなかにしんどいのでSaaSを何かを採用する必要がありました。また、DBも同時に備えているSaaSを出来れば使いたかったので、Supabaseを採用しました。Firebaseでない理由は、今後データのリレーションが複雑になった際に、NoSQLではクエリが複雑になりそうという点と、今後数年使ってくとなるとDBのパフォーマンスの点が少し気になったためです。SQLにはPosgreSQLを使っています。
• Prisma
  • 実はRDBを使うのが初めてだったため、生SQLを書きたくないという点、そして型付けをしてくれる点から採用しました。O/Rマッパーには他にもいくつか種類がありますが、Prismaの記事が多く散見されたため、採用に至りました。
• ChakraUI
  • 一番手になじんでいるUIフレームワークであったため採用しました。
    

機能・仕様

最終的な機能・仕様は以下のようになりました。

• PC予約ページ
  • 1日にPC席を使える時間を制限しているので、各個人で一意に定まるキーが必要。そのため、予約の際は学籍番号を使用する。また、入力された数字が有効な学籍番号か否かのバリデーションをする術がない（もちろん、学校から全学生の学籍番号を提供してもらえるわけがない。）ので、キーボードから入力でなく学生証についているバーコードを読み取って入力するように。
  • ログインすれば予約可能だが、予約のみして実際にはPC席を利用しないという事態を防ぐため、アカウントは運営用のみを発行し、一般の学生はスマホからは予約できないようにする。アカウントの作成の導線は現状は無し（ログインせずとも席の予約状況は確認できるため、わざわざ出向いたのに席が使えないということは無い）
  • 今後運用方法が変わる可能性はある
• イベント告知ページ
  • LCで開催するイベントを告知する
• シフトぺージ
  • 現在勤務している学生や、シフトの予定を確認することが出来る
  • 専門分野や、趣味等を記載することで質問したい人に質問出来るように
• 管理画面
  • LCの管理者が管理しやすいようにUIを作成
  • シフト入力や、イベントの入力、その他PC席の詳細な予約情報を確認できるように

デザイン

LCには、先輩が作ってくださったオリジナルキャラが存在します。そのため、それらを使用することで出来るだけ学生に愛されるようなアプリにしたいと考えていました。キャラクターのデザインや、アプリのUI等のアドバイスをその方からいただきました。

• 以前から使用されているキャラクター
  
  

問題点

上記の設計で実装を一通り終えたところで、問題が2つ発生しました。

セキュリティ面

日本大学の教務課やコンピュータセンターの職員の方にシステムを見ていただき、運用開始のための許可を受けるためプレゼンを行ったところ、
「学籍番号は個人を特定しうる情報になるので、外部のDBに保存しないでほしい」
というフィードバックを頂きました。
適切な暗号化を施してもだめですか？と聞いたところ、ダメだと言われました。（暗号化すれば正直問題はないと思いますが、それが適切な暗号化かどうか職員の方も判断できないし、それを学生にゆだねるのは怖いという気持ちも理解出来ます。）
一方で、「学内のサーバにDBを置くのは可能だが、そのための準備に色々時間がかかるので少し待ってほしい」とコメントを頂きました。それなら、一旦LCのPCでローカル環境で運用を開始し、段階的に学生がスマホで見れるように準備を進めていこうという方針でまとまりました。

フィードバックを受け、Next.jsとPostgreSQLをDockerに乗せ、DBをローカルで立てることでLCのPCで運用を始めることが出来ました。

運用

結局はLCの管理者の方がアプリを起動するので、出来るだけアプリの立ち上げを簡略化する必要がありました。そのため、Docker Desktopでボタンを1つ押せば立ち上がるようにしました。

一方、そのPCが2013年製という古いPCであったため、メモリ不足やその他ハードの原因からコンテナが落ちたりすることがあり、その都度対応が必要でした。幸いにも補助学生には何人か情報科の人がいたので、自分がいない時でも対応してもらうことが出来ています。

実際の画面

予約画面

予約するとデザインが変わる

ログインすると予約検索が可能であり、忘れてしまった場合も自分で対応可能

その他の画面

スマホで見ることが出来ないと意味を成さないぺージなので、現在は閲覧不可にしています。

学び

物事を進める力

前提として、周りの大人たちがとても協力的な方達でした。「No」といえば、面倒な仕事が増えずに済むのに私の気持ちを汲んでくださってとても感謝しています。
それとは別に、私の物事を進める力が強みであることを再実感しました。ミーティングの日程調整の催促であったり、プレゼンまでにデモとプレゼン資料を作りこみ、本気で大人たちを説得しに行く熱量や、なかなか話が進まないのを周りのせいにせず、ガンガン自分から行動していき、それらをした上で人間関係を壊さないためのコミュニケーション能力が備わっていると思いました。

導入

システムの導入を初めて行いました。LCの管理者の方がなるべく起動しやすいようにだったり、現状の機能を損なわないようにすることや、出来るだけシステムを止めないようにということに初めて意識を向ける機会になりました。
また、実際に動かしてみないと気付かない不具合やユースケースの不足等がたくさんあり、初めての導入としては大失敗でしたが、様々な学びがありました。

セキュリティ

やはり学生の情報を学校の許可を受けて扱うのにはかなり壁があると感じました。ただ、問題になってからでは遅いので皆さんもしっかり許可を取って行ってください。

機能の制限はかなりいろいろなケースを考えました。例えば、勝手に他の人の予約を削除出来たりしないように、予約の削除は管理者のキーか、予約した人の予約番号が必要という制約だったり、全員が共通のPC・アカウントで予約確認や削除を行うという前提から産まれる変な仕様みたいなものが存在します。

また、「あの席に座ってる女の子可愛いな。何学科なのかな？」と考えた人が、簡単に学籍番号が分からないように、自分の学籍番号の席の情報しか取得できないようにしました。このあたりはアドホックな仕様ですが、学校で運用するようなシステムでは考慮するべきだと考えています。

おわりに

導入してから1ヶ月しか経っていないため、修正するべきところがたくさんあったり、安定稼働にはほど遠い状況ですが、学生のうちにユーザが存在するアプリを設計・実装・運用出来ているのはとても良い経験をさせていただいていると感じています。引き続き頑張りたいと思います。

余談: Reactを使う必要があった理由

私の学部ではExcelやVBAに関しての授業が存在しません。また、Webプログラミングの担当教員が@likr さんであり、（https://zenn.dev/likr/articles/6be53ca64f29aa035f07 の著者。この記事がそのまま授業資料に使われています。）Webプログラミングの授業でReactを用いることから、今後アルバイトに入ってくる学生もReactを使える学生である確率が高いというのが理由です。