ポモドーロタイマー機能を追加

.github/agents/beastmode3.1.agent.md

@@ -1,6 +1,6 @@
 ---
 description: Beast Mode 3.1
-tools: ['extensions', 'codebase', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'terminalSelection', 'terminalLastCommand', 'openSimpleBrowser', 'fetch', 'findTestFiles', 'searchResults', 'githubRepo', 'runCommands', 'runTasks', 'editFiles', 'runNotebooks', 'search', 'new']
+tools: ['vscode', 'execute/getTerminalOutput', 'execute/runTask', 'execute/getTaskOutput', 'execute/createAndRunTask', 'execute/runInTerminal', 'execute/runNotebookCell', 'execute/testFailure', 'read', 'edit/editFiles', 'search', 'web']
 ---
 
 # Beast Mode 3.1

.vscode/mcp.json

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

app.py

@@ -0,0 +1,16 @@
+from flask import Flask, render_template
+import os
+
+def create_app():
+    app = Flask(__name__)
+
+    @app.route('/')
+    def index():
+        return render_template('index.html')
+
+    return app
+
+if __name__ == "__main__":
+    app = create_app()
+    port = int(os.environ.get("PORT", 5000))
+    app.run(debug=True, host="0.0.0.0", port=port)

architecture.md

@@ -0,0 +1,76 @@
+# PomodoroタイマーWebアプリケーション アーキテクチャ案
+
+## 1. ディレクトリ構成例
+
+```
+/workspaces/2025-Github-Copilot-Workshop-Python/
+├── app.py                # Flaskアプリ本体（ファクトリパターン）
+├── requirements.txt      # 依存パッケージ
+├── static/
+│   ├── css/
+│   │   └── style.css
+│   └── js/
+│       └── timer.js
+├── templates/
+│   └── index.html
+├── timer_core.py         # タイマーロジック（Pure Pythonクラス）
+├── tests/
+│   └── test_app.py
+└── architecture.md       # 本ドキュメント
+```
+
+## 2. 構成要素と役割
+
+- **Flask (app.py)**
+  - アプリケーションファクトリパターンで実装
+  - ルーティング（トップページ、APIエンドポイント）
+  - 必要に応じてセッション管理やユーザー管理
+
+- **HTML (templates/index.html)**
+  - UIモックに基づく画面レイアウト
+  - Jinja2テンプレートで動的要素を埋め込む場合も
+
+- **CSS (static/css/style.css)**
+  - UIモックに忠実なデザイン
+
+- **JavaScript (static/js/timer.js)**
+  - タイマーのカウントダウン・状態管理
+  - スタート/ストップ/リセット等のUI操作
+  - 必要に応じてAPIと非同期通信（fetch/AJAX）
+  - ロジックとUI操作を分離し、テストしやすく
+
+- **タイマーロジック (timer_core.py)**
+  - タイマーの状態遷移や計算ロジックをPythonクラスとして分離
+  - 単体テスト容易
+
+- **API層**
+  - DBや外部サービスへの依存はインターフェース化
+  - テスト時はモックやインメモリ実装に差し替え可能
+
+## 3. テスト容易性のための工夫
+
+- Flaskアプリはファクトリパターンで作成し、テスト時に設定や依存を柔軟に差し替え可能
+- タイマーやビジネスロジックはクラス/関数として分離し、個別にユニットテスト可能
+- APIやDBアクセスはインターフェース化し、テスト時に差し替え可能
+- テスト用設定・テスト用DB（例: SQLite in-memory）を用意
+- テストコードは`/tests`ディレクトリで管理し、pytest等で自動テスト
+- JavaScriptもロジック部分は関数化し、テストしやすく
+
+## 4. バックエンドとフロントエンドの役割分担
+
+- タイマーのロジックは基本的にフロントエンド（JS）で管理
+  - シンプルな場合はサーバー側の状態管理不要
+  - ユーザーごとに進捗や履歴を保存したい場合はAPI設計（FlaskでREST APIを追加）
+- サーバー側（Flask）は主にHTML配信と必要なAPIのみ
+  - 例：ポモドーロ履歴の保存/取得、ユーザー認証
+
+## 5. 開発・運用の流れ
+
+1. UIモックに忠実なHTML/CSS/JSを作成し、ローカルで動くタイマーを実装
+2. Flaskで静的ファイル・テンプレート配信を構築
+3. 必要に応じてAPI設計・DB連携（履歴保存など）を追加
+4. テストコードも並行して整備
+
+---
+
+このアーキテクチャにより、保守性・拡張性・テスト容易性の高いWebアプリ開発が可能です。