【概要】
就労支援事業所での勤怠管理をWebブラウザで完結させるために開発したシステムです。スタッフがタブレットやPCから出退勤を打刻し、管理者がログの確認・修正・Excel出力までをブラウザ上で行えます。
Excelや紙での管理を廃止し、リアルタイムで在籍状況を把握できることを目指して設計しました。
【開発の背景】
就労支援事業所では、スタッフの出退勤をExcelや紙の記録で管理しているケースが多くあります。記入漏れや集計ミスが発生しやすく、月末の集計作業に時間がかかるという課題がありました。
そこで、誰でも直感的に操作できるWeb打刻システムを自作しました。
【機能一覧】
| 機能 | 内容 |
| 打刻画面 | スタッフ一覧から選んで出勤・退勤を記録 |
| 在籍状況表示 | 未出勤・在籍中・退勤済みをリアルタイムで色分け表示 |
| 当日ログ確認 | 当日の打刻一覧を管理者が確認 |
| 当月ログ確認 | 月別の出退勤・在籍時間を一覧表示 |
| Excel出力 | 当月の勤務表を日付×スタッフ形式でダウンロード |
| 打刻修正 | 退勤忘れなどの打刻を管理者が追加・編集・削除 |
| スタッフ管理 | スタッフの新規登録・削除 |
| 管理者認証 | パスワードによるログイン保護 |
【技術的こだわり】
- SPA風のUI設計：ページ遷移なしで画面を切り替え、操作がスムーズ
- 色分けによる在籍状況の可視化：一覧を見るだけで誰が出勤中かが一目でわかる
- キャッシュ無効化：タブ切り替えのたびに最新データをサーバーから取得し、常に最新の情報を表示
- 打刻修正機能：退勤忘れなどの実務上のミスに対応できる管理者向け機能を実装
- 責務の分離：HTML / CSS / JS を別ファイルに分割し、メンテナンス性を向上
【システム構成】
| レイヤー | 技術 |
| フロントエンド | HTML / CSS / JavaScript（SPA風） |
| バックエンド | PHP 8.x |
| データベース | MySQL 5.7以降 |
| サーバー | ConoHa Wing（レンタルサーバー） |
| Excel生成 | SheetJS（ブラウザ側で生成） |
【システム図】
【デモ動画】
コメントを残す