【HTML】ブラウザで動作する出席確認システムの構築

松元 颯大

作成のきっかけ

サレジオ高専では月に一回、各クラスの級長、副級長が代議員として学友会の活動に関わる「代議員会」、いわば国会のような会議が行われています。2025年度では、代議員の出席率が低下するという問題が発生していました。そこで、出席管理を徹底するため、Google スプレットシート(以降スプレットシートと呼称)にて役員が一人一人に聞いて回るという体制をとっていました。しかしながら、これでは役員の負担が多く、会議時間の延長につながるという問題が発生しました。そのため、出席管理をより効率的に行えるシステムを構築する流れになりました。

構築方法

技術スタック

  • 言語: HTML5, CSS3, JavaScript (ES6)　※今回のシステムではフレームワーク不使用 (Vanilla JS)
  • データ保存: ブラウザのLocal Storage
  • データ出力: JSON形式

構築環境

  • コードエディタ: Visual Studio Code (VS Code)
  • 開発OS: macOS 26
  • デプロイ・ホスティング: Netlify

検証

実際に使用できるシステムはこちらです。実際にはより多くのクラスや部活動がありますが、個人情報の秘匿も兼ねて、一部省略しております。

preeminent-khapse-5c3f36.netlify.app

動作説明

ここでは、今回作成したシステムがどのように動作するのかを順を追って解説します。

1, システム使用開始

まず、どの会議を行うのかを選択します。今回は「代議員会」を選択します。

2, 各クラスの代議員による出席登録

代議員を選択するとこのような画面に移行します。このタイミングで代議員の人たちに操作用のデバイスをわたし、各々で登録を行ってもらいます。

今回はA組になったつもりで出席登録を行ってみましょう。

クラスを選択するとこんな画面に移行します。基本、出席するのは級長と副級長の2人ですが、やむを得ない場合、代理を立てることが可能です。そこで代理の選択肢も設けました。しかし、級長と級長代理といった矛盾した状態で登録してしまうバグが発生してしまったため、級長と級長代理や副級長と副級長代理といった選択はできないように設定しています。登録が完了したら「登録する」を押して完了です。

3, 出席人数と会議可能人数の確認

ボタンを押すと元の画面に戻ります。ここで下の部分を見てください。何やらシークバーのようなものが出ていますね？これは出席人数と会議を開始できるまでの人数を確認するものです。代議員会では、採決を取るために2/3以上の出席がないと会議を開始できないという規則があります。今回は最大8人まで出席すると考え、その2/3である5人以上の出席で開始できるよう設定しています。

会議開始できる人数に達すると、シークバーが緑色に変化し、「会議開始」ボタンを押すことができます。

4, 会議開始と再登録

開始ボタンを押すとこのような画面に移行します。ここでは、出席人数の合計を見ることができます。また、議事録を作成するために録音が必要なのですが、これを忘れることが頻発するんです。ということで赤文字で背景と枠線も赤という、めちゃくちゃ主張が激しい表示も加えておきました。万が一後から人が来た時には、戻ってリストを修正するボタンも加えて、登録用の画面に戻るようにしています。

5, 会議終了とログファイルの出力

会議終了ボタンを押すとポップアップが表示されます。いわゆるフールプルーフですね。表示されている文章によると、「この後はデータの変更ができません」と書かれているようですが、終了してもう一度代議員のボタンを押すといくらでも編集できてしまうという致命的なバグが発生してしまいます。まあ実験みたいなものですから、今後改善するべきところでしょう。

終了するボタンを押すと、こんな画面に移行し労ってくれます。会議後こうして労ってくれるのはありがたいです(この記事を書いている当時は3年生なので、後輩に「褒めて」というわけにもいかない立場なのである)ログ出力というボタンを押すとJSON形式で何を入力したのか、ダウンロードして確認することができます。

ダウンロードしたJSONファイルを開くとこんな感じです。どんなデバイスでも開くことができるのはいいのですが、残念ながら私はJSONファイルを読み解こうとする執念はありません。ということで、JSONファイルと相性の良いAIにファイルを読み取らせ、表形式で見やすく出力してもらっています。今後はJSONファイル形式以外で、ログを出力できるようになると利便性が向上するかもしれません。

結果

今回作成したシステムを、実際に代議員会で使用したところ、役員がタブレットを渡すだけという信じられないほど手間のかけず出席確認を行うことができました！エクセルで管理していた時を考えると、間違いなく手間は減ったと考えて差し支えないでしょう。また、時間についても約3分という短さで済みました。やはり役員が代議員のところまで移動するという時間がロスタイムへとつながっていたのでしょう。また、肝心の操作性についてもですが、代議員の方たちも特に迷われるそぶりを見せていなかったことからも、UIについてはあまり問題視することもないでしょう。

逆にシステムを使用する上で、いくつかも改善点も見つかりました。一つ目はなんといってもデータを後からいくらでも編集できてしまうことでしょう。おそらく、システムを初期化するためには管理者メニューから操作する必要があるからだと考えています。今後もシステムを運用するためには、ログ出力を行った後、データを初期化するという選択肢に誘導させ、そこで初期化するという工夫を加えた方がいいと考えています。2つ目はログファイルの出力形式です。現在JSONファイルでの出力となっていますが、これを人力で読めるようにするのはかなりの根性がいると考えています。もちろん読めないわけではないですし、ある程度プログラミングを理解している人であれば内容を理解することはできるでしょう。しかし、今後もこのシステムを使用するためには、やはり誰もが使いやすいようにする必要があるでしょう。現在はまだ構想段階ではありますが、入力された値をログ出力画面で表に埋め込むというアイデアがあります。これであれば容易に確認ができますし、スクリーンショットを撮れば記録完了です。3つ目は、誤作動防止機能です。例えば、タブレットを渡すが、悪い人が管理者メニューから全てのデータを初期化する…、なんてこともできなくはないです。もちろんそのようなことをする人が悪いというのは事実ですが、それを対策していなかった開発者にも責任があります。しかしながら、こんなことで責任と取りたくないというのが本音。ということで、今後は代議員の人が入力を行う際には戻るボタンを廃止し、他のことを行えないようにするといった工夫や、タブレット本体の設定より、他のアプリケーションを立ち上げられないようにする、といった設定が必要になるでしょう。とはいえ初めて導入した割には、かなり良い結果を得られたため、今後より便利に使い続けられるように、改良を重ねようと考えています。

応用例

ここまでご覧いただいた方、誠にありがとうございます。ここではこのシステムが、社会でどのように活用できるのかいくつかの例と活用方法についてまとめます。

  • 学校の出席確認

よく小学校や中学校で出席確認を行なっていましたね。「はい、元気です」というのが定番だと思いますが、これをデジタル化するとより負担が少なく済むでしょう。例えば、「Aさんは元気」「Bさんは欠席」「Cさんは遅刻」といった入力を単語帳のような感覚でパラパラと画面が移行され、数タップで登録が完了するという感じです。特に高校や大学などでは出席日数という概念がありますから、そういったものをデジタルで管理すると学生たちとのトラブルも回避できるでしょう。何より「あと何日休んでも大丈夫」という情報はとても重要ですからね。

  • バイトの出席確認

スーパーなどでは、生鮮部門や食品部門、ベーカリー部門といった部門ごとで管理するところもあるでしょう。もし部門で誰もバイトがおらず、誰も対応しなかった結果、後でトラブルになる。そんなことにならないよう、朝礼などのタイミングで確認を取るといった感じです。また、「今日は◯◯さんがいないからペースを上げて取り組もう」や「今日はこの作業を手伝って」といった連絡もスムーズに行えるでしょう。

  • 大人数での移動、宿泊など

大人数で移動する際にはグループLINEなどでは会話が埋もれてしまい、本当に待ち合わせ場所に集まったのか？といったトラブルが発生するでしょう。特に修学旅行といった場所では、いち早く情報を整理することが欠かせません。例えば、「1組の◯◯君は遅れている」といったことを入力すれば公開リンクを取得しているため、誰でもすぐに確認することができます。口頭での伝達は齟齬が発生する原因になるため、デジタルで管理をするのは理にかなっていると考えます。

宣伝

このサイトでは、他にも技術的な取り組みを定期的に更新しております。もしご興味がありましたら、ぜひご覧ください。

より詳細なコードについて

今回のシステムについて、より詳細な技術仕様、ソースコードにつきましては安全のため非公開としております。万が一、ご覧になりたい方は下記のコメントをご利用ください。

コメントする

Related Posts

Back to top