勤怠管理Webアプリ「タイムポチ」

OVERVIEW

SYSTEM / FLOW

従業員の打刻から管理者の確認まで

従業員がスマートフォンから出勤・退勤を打刻すると、勤怠情報がデータベースに保存され、管理者画面から確認・修正・集計できる仕組みです。

データベースで管理する主な情報

MAIN FEATURES

打刻から自動計算・集計まで

従業員側には、ログイン、出勤・退勤の打刻、現在時刻・勤務状況の表示を実装しました。退勤時には勤務時間を判定し、条件に応じた休憩時間を自動反映して実働時間を算出します。

管理者側では、従業員管理、勤怠情報の確認・追加・修正、月別集計、CSV出力を行えます。従業員の打刻から管理者の確認までを、1つのシステム内で管理できる構成にしました。

UI DESIGN

役割ごとに操作を絞った画面設計

従業員と管理者では必要な情報や操作が異なるため、役割ごとに画面を分けました。

従業員画面では、現在時刻と勤務状況を大きく表示し、出勤・退勤ボタンを画面下部に配置しています。日常的な打刻操作に集中できるよう、表示する情報と機能を絞りました。

管理者画面では、当日の勤務状況、従業員情報、勤怠一覧、修正・集計機能へ移動しやすい構成としています。参考デザインをもとに方向性を定め、生成AIで作成したUIを確認しながら、情報の優先順位や操作しやすさを調整しました。

ADMIN FEATURES

確認・修正・集計を一画面から

管理者用ダッシュボードでは、登録スタッフ数、本日の出勤人数、勤務中・退勤済みの人数をまとめて確認できます。

勤怠管理画面では、年月と従業員を指定して勤怠情報を表示し、勤務時刻や休憩時間の修正、新しい勤怠データの追加を行えます。修正内容は理由とともに履歴として保持し、後から変更内容を確認できるようにしました。

IMPLEMENTATION / VERIFICATION

PHPとMySQLを使った勤怠管理

PHPとMySQLを連携し、勤怠情報と従業員情報をデータベースで管理しました。 登録・取得・更新などの処理を実装し、プリペアドステートメントを用いてSQLインジェクション対策も行いました。

管理者・従業員のログインにセッション認証を実装しました。 パスワードはハッシュ化して扱い、CSRF対策、セッションIDの再生成、HTML出力時のエスケープなど、認証・データベースを扱うアプリとして必要なセキュリティも取り入れました。

Service Workerを利用してPWAに対応。 キャッシュ対象や取得方法を調整し、通信できない場合はキャッシュしたCSSを適用した専用オフライン画面へ切り替わるよう実装しました。

生成AIの活用範囲と担当内容

実装では生成AIを、コード生成の補助やエラー原因の整理に活用しました。生成されたコードをそのまま使用するのではなく、開発環境への組み込み、データベースとの接続、動作確認、エラー箇所の特定と修正を繰り返しています。

必要なデータと機能の整理、画面・機能構成、データベース設計、生成コードの採否判断、実装内容の修正、動作検証は自身で行いました。特に、勤怠情報を変更した際に修正内容を確認できるよう、履歴を保持する構成を要件として取り入れています。