| 打刻画面(メインUI) | 日次・月次集計グラフ |
|---|---|
![]() |
![]() |
| 月次データ一覧 | チーム集計(管理者向け) |
|---|---|
![]() |
![]() |
| 残業・休暇申請画面 |
|---|
![]() |
本アプリは README の手順に従って実行することで、どなたの PC でも動作確認が可能です
- Django REST Framework と Streamlit を組み合わせた、勤怠打刻と勤務時間集計を自動化・可視化するWebアプリです
- 出勤・退勤・休憩の打刻API、日次/週次/月次の勤怠集計、グラフ表示を実装
- ローカル開発環境で実行可能なポートフォリオ・学習用プロジェクトです
- 「勤怠データの記録・集計・可視化」を一連の仕組みとして自作し、フロントとバックエンドの連携設計・API構築・データ可視化の理解を深めることを目的としました
- バックエンド(Django)とフロントエンド(Streamlit)の統合構成を実践的に学習
- Backend:Django / Django REST Framework / SimpleJWT / CORS Headers
- Frontend:Streamlit / Altair / Pandas / Requests
- その他:python-dotenv / jpholiday / SQLite3
- 開発環境:Windows 10 / Python 3.11
- 出勤/退勤/休憩の打刻API(POST)
- 日次・週次・月次の勤怠集計API(GET)
- Streamlit UI(ボタン打刻・集計結果の可視化)
- 社員別の勤務時間・残業時間・休暇日数の可視化
- JWT認証によるユーザー管理(開発モード対応)
- Django REST Framework を用いてシンプルかつ拡張性のあるAPI設計を構築
- Streamlit と Altair によるリアルタイム集計グラフ表示
- 祝日ライブラリ(jpholiday)で自動的に休日を判定
- コードとUIを極力シンプルに保ち、学習用途にも理解しやすい構成に設計
-
1.ソースコードの取得
以下のコマンドでリポジトリをクローンします
git clone https://github.com/mikan202510/Django-Attendance-System.git
cd Django-Attendance-System/hrm_py/hrm_py
-
2.仮想環境の構築
Pythonの仮想環境を作成・有効化します
python -m venv .venv
Windowsの場合
..venv\Scripts\Activate.ps1 (※「..」ではなく「.\」が正しい表記です)
- 3.依存パッケージのインストール
python -m pip install --upgrade pip
python -m pip install -r requirements.txt
- 4.環境ファイルの作成
PowerShellで以下を実行し、.envファイルを自動生成します
if (!(Test-Path .env)) {
New-Item -Name ".env" -ItemType "file" | Out-Null
Add-Content .env "DEBUG=TruenSECRET_KEY=django-insecure-testkeynALLOWED_HOSTS=127.0.0.1,localhost`nHRM_API_BASE=http://127.0.0.1:8000"
}
(※GitHub上では改行が崩れています)
- 5.データベース初期化とテストユーザーの作成
python manage.py migrate
python manage.py shell -c "from django.contrib.auth import get_user_model; U=get_user_model(); U.objects.filter(username='test@example.com').delete(); U.objects.create_user(username='test@example.com', email='test@example.com', password='test1234')"
(※GitHub上では改行が崩れています)
- 6.Djangoサーバーの起動
python manage.py runserver 8000
-
7.Streamlitアプリの起動
別のターミナルを開き、同じディレクトリへ移動します
cd Django-Attendance-System/hrm_py/hrm_py
- 8.仮想環境を有効化とUIの起動
..venv\Scripts\Activate.ps1 (※「..」ではなく「.\」が正しい表記です)
streamlit run app.py
ブラウザで勤怠システムの画面が開きます
もし自動で開かない場合は、ターミナルに表示されたURLをクリックしてください
(※GitHubでの表示が難しく、上手く表現できてない部分があります)
-
9.ログイン情報
ユーザー名 test@example.com
パスワード test1234
- チームや個人の勤務時間を簡単に記録・可視化
- 小規模事業所の勤怠・残業・休暇の記録に利用
- /api/hr/me の社員情報APIを実装し、Streamlitに表示
- 月次KPIグラフの拡張(平均残業時間・稼働率)
- Streamlit Cloud へのデモ公開
- 開発期間:約2日
- 開発環境:Windows 10 / Python 3.11 / Django 4.2 / Streamlit 1.36




