Add unit tests for Flask application, static files, and timer service

.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+	"servers": {
+		"github-mcp-server": {
+			"url": "https://api.githubcopilot.com/mcp/",
+			"type": "http"
+		}
+	},
+	"inputs": []
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}

README.md

@@ -1 +1,97 @@
+# 🍅 ポモドーロタイマーアプリケーション
+
+高機能なポモドーロテクニックタイマーWebアプリケーションです。
+
+## 🌟 主な機能
+
+- **ポモドーロタイマー**: 25分作業 + 5分休憩の集中管理
+- **カスタマイズ可能**: 作業時間・休憩時間の調整
+- **統計・履歴**: 完了したポモドーロの記録と分析
+- **通知機能**: タイマー完了時の音声・ブラウザ通知
+- **レスポンシブデザイン**: PC・モバイル対応
+
+## 🚀 クイックスタート
+
+### サーバー起動（簡単な方法）
+```bash
+./server_manager.sh start
+```
+
+### サーバー管理コマンド
+```bash
+# サーバー状態確認
+./server_manager.sh status
+
+# サーバー停止
+./server_manager.sh stop
+
+# サーバー再起動
+./server_manager.sh restart
+
+# ログ確認
+./server_manager.sh logs
+```
+
+### 手動でサーバー起動する場合
+```bash
+# インタラクティブモード（ログがコンソールに表示）
+./start_server.sh
+
+# または直接実行
+.venv/bin/python app.py
+```
+
+## 🌐 アクセスURL
+
+サーバー起動後、以下のURLでアクセスできます：
+- **ローカル**: http://127.0.0.1:8000
+- **ネットワーク**: http://10.0.3.246:8000
+
+## 🏗️ 技術仕様
+
+- **フレームワーク**: Flask (Python)
+- **フロントエンド**: HTML5, CSS3, JavaScript (Vanilla)
+- **データ保存**: JSON ファイル + LocalStorage
+- **テスト**: pytest (25個の包括的テスト)
+- **UI**: レスポンシブデザイン
+
+## 🧪 テスト実行
+
+```bash
+# 全テスト実行
+.venv/bin/python -m pytest tests/ -v
+
+# カバレッジ付きテスト実行
+.venv/bin/python -m pytest tests/ --cov=. --cov-report=html
+```
+
+## 📁 プロジェクト構造
+
+```
+├── app.py                    # メインFlaskアプリケーション
+├── server_manager.sh         # サーバー管理スクリプト
+├── start_server.sh          # サーバー起動スクリプト
+├── services/
+│   └── timer_service.py     # ビジネスロジック
+├── templates/
+│   └── index.html           # メインHTML
+├── static/
+│   ├── css/style.css        # スタイルシート
+│   └── js/timer.js          # JavaScript
+└── tests/                   # テストファイル
+    ├── test_app.py
+    ├── test_static_files.py
+    └── test_timer_service.py
+```
+
+## 🎯 使用方法
+
+1. **サーバー起動**: `./server_manager.sh start`
+2. **ブラウザでアクセス**: http://127.0.0.1:8000
+3. **▶ スタートボタン**でタイマー開始
+4. **⚙️ 設定ボタン**で時間をカスタマイズ
+5. **📊 履歴・統計ボタン**で進捗確認
+
+---
+
 ワークショップの手順：https://moulongzhang.github.io/2025-Github-Copilot-Workshop/github-copilot-workshop/#0

app.py

@@ -0,0 +1,77 @@
+from flask import Flask, render_template, request, jsonify
+from services.timer_service import HistoryService, TimerService
+
+app = Flask(__name__)
+
+# サービスインスタンス
+history_service = HistoryService()
+timer_service = TimerService()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/history', methods=['GET'])
+def get_history():
+    """履歴データを取得するAPI"""
+    history = history_service.load_history()
+    return jsonify(history)
+
+@app.route('/api/history', methods=['POST'])
+def add_history():
+    """履歴データを追加するAPI"""
+    try:
+        data = request.json
+
+        # 必要なデータの検証
+        if not data or 'session_type' not in data or 'duration' not in data:
+            return jsonify({'error': '必要なデータが不足しています'}), 400
+
+        # 履歴エントリを追加
+        history_entry = history_service.add_history_entry(
+            session_type=data['session_type'],
+            duration=data['duration'],
+            pomodoro_count=data.get('pomodoro_count', 0)
+        )
+
+        if history_entry:
+            return jsonify({'message': '履歴が保存されました', 'entry': history_entry}), 201
+        else:
+            return jsonify({'error': '履歴の保存に失敗しました'}), 500
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/stats', methods=['GET'])
+def get_stats():
+    """統計データを取得するAPI"""
+    try:
+        stats = history_service.get_statistics()
+        return jsonify(stats)
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/validate-settings', methods=['POST'])
+def validate_settings():
+    """タイマー設定の検証API"""
+    try:
+        data = request.json
+        work_minutes = data.get('work_minutes', 25)
+        short_break_minutes = data.get('short_break_minutes', 5)
+        long_break_minutes = data.get('long_break_minutes', 15)
+
+        is_valid, errors = timer_service.validate_timer_settings(
+            work_minutes, short_break_minutes, long_break_minutes
+        )
+
+        return jsonify({
+            'valid': is_valid,
+            'errors': errors
+        })
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=8000)

architecture.md

@@ -0,0 +1,73 @@
+# ポモドーロタイマーWebアプリケーション アーキテクチャ案
+
+## 1. 概要
+
+本アプリは、Flask（Python）をバックエンドとし、HTML/CSS/JavaScriptによるフロントエンドでポモドーロタイマー機能を提供するWebアプリケーションです。UIは添付画像のモックを参考に設計します。
+
+---
+
+## 2. 構成
+
+### バックエンド（Flask）
+- ルーティング：`/`でメイン画面（index.html）を表示
+- 静的ファイル（HTML, CSS, JS, 画像）の配信
+- 必要に応じてAPIエンドポイント（履歴保存、設定値取得・保存など）
+- タイマーや履歴管理などのビジネスロジックはサービス層（例：`services/timer_service.py`）に分離
+
+### フロントエンド（HTML/CSS/JavaScript）
+- タイマーUI（カウントダウン、スタート/ストップ/リセットボタン）
+- 状態表示（残り時間、ポモドーロ回数、休憩表示など）
+- JavaScriptでタイマー制御（リアルタイム性重視）
+- 必要に応じてAPIと連携
+
+---
+
+## 3. ディレクトリ構成例
+
+```
+/workspaces/2025-Github-Copilot-Workshop-Python/
+├── app.py
+├── services/
+│   └── timer_service.py
+├── tests/
+│   └── test_timer_service.py
+├── templates/
+│   └── index.html
+├── static/
+│   ├── css/
+│   ├── js/
+│   └── img/
+└── README.md
+```
+
+---
+
+## 4. ユニットテスト対応
+
+- バックエンドのロジックはサービス層に分離し、関数・クラス単位でテスト可能にする
+- `tests/`ディレクトリで各モジュールごとにテストファイルを作成
+- APIエンドポイントは入出力が明確な関数として実装
+- フロントエンドのロジックも関数化し、必要に応じてJest等でテスト可能な設計
+- 依存性注入やモック・スタブを活用し、テスト容易性を高める
+
+---
+
+## 5. 拡張性
+
+- ユーザー認証による履歴管理
+- 設定カスタマイズ（作業/休憩時間）
+- 履歴グラフ表示
+
+---
+
+## 6. 実装ステップ例
+
+1. Flaskで基本ルーティングと静的ファイル配信
+2. HTML/CSSでUIモックを再現
+3. JavaScriptでタイマー機能実装
+4. サービス層・テストコード追加
+5. 必要に応じてAPIエンドポイント追加
+
+---
+
+このアーキテクチャにより、シンプルかつ拡張・テストしやすいWebアプリケーションの構築が可能です。

features.md

@@ -0,0 +1,57 @@
+# ポモドーロタイマーWebアプリケーション 実装機能一覧
+
+---
+
+## 基本機能
+
+1. **タイマー機能**
+   - 作業時間・休憩時間のカウントダウン
+   - タイマーのスタート／ストップ／リセット
+   - ポモドーロ回数のカウント
+
+2. **UI表示**
+   - 残り時間の表示
+   - 現在の状態（作業中／休憩中）の表示
+   - ポモドーロ回数の表示
+   - ボタン（スタート／ストップ／リセット）の配置
+
+3. **設定機能**
+   - 作業時間・休憩時間のカスタマイズ
+   - 設定値の保存（セッション or DB）
+
+4. **通知機能**
+   - タイマー終了時の通知（音・ポップアップ等）
+
+---
+
+## 追加・拡張機能（任意）
+
+5. **履歴管理**
+   - ポモドーロ実施履歴の保存
+   - 履歴の一覧表示
+
+6. **ユーザー認証**
+   - ログイン／ログアウト
+   - ユーザーごとの履歴管理
+
+7. **グラフ表示**
+   - 履歴データの可視化（グラフ等）
+
+8. **レスポンシブ対応**
+   - スマホ・タブレットでも使いやすいUI
+
+---
+
+## バックエンド（Flask）側
+
+- ルーティング（画面表示、APIエンドポイント）
+- 設定値・履歴の保存／取得API
+- 必要に応じてユーザー認証API
+
+---
+
+## フロントエンド（HTML/CSS/JavaScript）側
+
+- タイマー制御ロジック
+- UI操作・状態管理
+- APIとの通信（設定・履歴保存等）

main.py

@@ -0,0 +1,9 @@
+# Fibonacci数列を計算する関数
+def fibonacci(n):
+    if n == 0:
+        return 0
+    elif n == 1:
+        return 1
+    else:
+        return fibonacci(n - 1) + fibonacci(n - 2)
+

plan.md

@@ -0,0 +1,50 @@
+# ポモドーロタイマーWebアプリケーション 段階的実装計画
+
+---
+
+## 第1段階：UIと基本ルーティング
+- Flaskでルート（`/`）に静的なHTMLを表示
+- UIモック画像に近いレイアウトをHTML/CSSで作成
+- 「スタート」「ストップ」「リセット」ボタンの配置（動作は未実装）
+
+---
+
+## 第2段階：タイマー機能の実装
+- JavaScriptでタイマーのカウントダウン機能を実装
+- ボタン操作でタイマーの開始・停止・リセットが可能に
+- 残り時間・状態（作業/休憩）・ポモドーロ回数の表示
+
+---
+
+## 第3段階：設定機能の追加
+- 作業時間・休憩時間のカスタマイズUI追加
+- 設定値をフロントエンドで保持し、タイマーに反映
+
+---
+
+## 第4段階：通知機能の追加
+- タイマー終了時に音やポップアップで通知
+
+---
+
+## 第5段階：履歴管理・API連携
+- 履歴保存用API（Flask）を実装
+- タイマー完了時に履歴をサーバーへ送信
+- 履歴一覧表示（簡易でOK）
+
+---
+
+## 第6段階：テスト・リファクタ・サービス層分離
+- タイマーや履歴管理ロジックをサービス層へ分離
+- バックエンド・フロントエンドのユニットテスト追加
+
+---
+
+## 第7段階：拡張機能（任意）
+- ユーザー認証（履歴の個人管理）
+- 履歴グラフ表示
+- レスポンシブ対応（スマホ・タブレット）
+
+---
+
+各段階で「UI→ロジック→データ連携→テスト→拡張」の流れを意識すると、着実に品質を高めながら開発できます。