【ピ逃げ撲滅】現役大学生が goqr.me API で不正を許さない出席管理システムを作ってみた

学生インターンシップです！
スパイラル株式会社の学生インターンとして、SPIRALを学習しながらユーザー目線で質問に答える活動をしています。
補足情報や調査結果を提供を行い、皆様のお役立てができればと思っています！
※学生による調査・補足情報です、参考としてご利用ください。
　正式な仕様や最終的な内容は保証されません。

みなさんは「ピ逃げ」という言葉をご存知でしょうか？
主に大学生がよく使う言葉の一つで、学生証（ICカード）をピッとカードリーダーにかざし出席だけ済ませて、
そのまま授業に出ずに帰ってしまう行為のことを指します。
大学にいると「今日ピ逃げしようかな」なんて会話が普通に飛び交っていますが、真面目に出席している側からするとめちゃくちゃ不公平。
「だったら、不正できない仕組みを作ってしまえばいいのでは？」
ということで、不正できない出席管理システムを構築していきます。

作るもの

今回は教室のスクリーンに投影されたQRコードを読み取って、スマホから出席登録するシステムを作成します。
常設されているカードリーダーや紙の出席カード、壁に貼られた印刷物のQRコードとは異なり、
Webページ上でQRコードを生成するため、以下のような「不正防止」のメリットがあります。

「不正防止」メリット
1) 授業中しか画面を表示しないため、写真を撮って友達に送る不正（代返）をしにくい
2) 授業が始まりQRコードが表示されるまで必ず教室内にとどまる必要があるため、
　ピ逃げのように帰ることができない

使用方法は以下のとおりです。
➀【先生用画面】 SPIRALのページを開くと、goqr.me APIが「出席フォームのURL」をQRコード化してフォーム上に表示
➁【学生用スマホ】 QRコードを読み取り、出席登録フォームから必要情報を登録
➂【DB】登録された情報が自動でDBに蓄積される

使用ツール

goqr.me API

goqr.me APIページ
無料で使える QR コード生成 APIです。
こちらで生成されるQRコードを利用して出席を管理します。

SPIRAL ver.1

「QRコードを表示するフォーム」と「学生が出席登録を行うフォーム」を作成します。

構築方法

はじめに、SPIRALver.1で出席管理を行うDBを構築します。
今回は授業の出席管理が目的なので「学籍番号」「氏名」「登録日時」フィールドを使用します。
「学籍番号」と「氏名」はテキストフィールドで作成してください。

次に、学生がスマホで出席登録を行うフォームを作成します。
自動で発行されたものをそのまま使用できますが、文言やデザインを変更する場合は入力ページのソースコードを変更してください。

設定が完了したら、フォームのURLをコピーします

次に、先生がQRコードを表示するフォームを作成します。
入力ページのソースコードを、以下のように変更してください。
変更は入力ページのデザインを「ソースデザイン」に設定して行ってください。

                
<html>
<head>
<title>出席登録用QRコード</title>
<style>
  body { text-align: center; padding-top: 50px; font-family: sans-serif; }
  h1 { color: #333; }
  p { font-size: 18px; color: #666; }
</style>
</head>
<body>

  <h1>本日の出席登録</h1>
  <p>以下のQRコードを読み取って出席登録してください。</p>

  <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=コピーした出席登録フォームのURL" alt="出席QR">
  <p>※登録は講義終了まで有効です</p>

</body>
</html>

以上で実装完了となります。
工程も少なくて簡単に作ることができました！

実行結果

QRコードを表示するフォームにアクセスすると、以下のようにQRコードが表示されます。

QRコードを読み取ると、学生用の出席管理フォームが表示されます。

出席管理フォームから送信された情報がDBに格納されます。
（登録日時は自動入力のため、学生に登録させる必要はありません。）

最後に

いかがでしたでしょうか。
今回は「SPIRAL ver.1」と「goqr.me API」を使用した出席管理システムを作成しました。
APIへのGETアクセスのみで実装できますので、SPIRAL初心者の方でも真似しやすいシステムになっていると思います！
この仕組みを利用してイベント入場チェックシステムや会議室の入退室管理システムなどたくさんのシステムに応用できますので、ぜひ活用してみてください！

開発情報・ナレッジ