TimeKeep - Todo & Pomodoro PWA

シンプルなTodoリストとポモドーロタイマーを組み合わせたPWAアプリです。

https://RioHairuma.github.io/timekeepappclaudecode

機能

📝 Todoリスト

• 1行1タスクのシンプルな入力形式
• LocalStorageで自動保存
• ランダムにタスクを1つ選択する機能

⏱️ ポモドーロタイマー

• 視覚的なアナログ円形タイマー
• 背景グラデーションで進捗を直感的に把握
• カスタマイズ可能な作業時間・休憩時間
• タイマー終了時の通知機能

📱 PWA機能

• オフラインでも動作
• ホーム画面に追加可能
• アプリのような体験

セットアップ

1. アイコンの生成

アプリアイコンが必要です。以下の方法で生成してください：

# ブラウザで icons/generate-icons.html を開く
# ボタンをクリックして icon-192.png と icon-512.png をダウンロード
# ダウンロードしたファイルを icons/ フォルダに配置

または、お好きなデザインツールで192x192と512x512のPNG画像を作成してください。

2. ローカルサーバーで起動

PWAの機能を使用するには、HTTPSまたはlocalhostでアクセスする必要があります。

方法1: Python（推奨）

# Python 3の場合
python -m http.server 8000

# Python 2の場合
python -m SimpleHTTPServer 8000

その後、ブラウザで http://localhost:8000 を開く

方法2: Node.js (npx)

npx serve

方法3: VS Code Live Server拡張機能

1. VS Codeで「Live Server」拡張機能をインストール
2. index.htmlを右クリック → "Open with Live Server"

3. PWAとしてインストール

1. ブラウザで開く
2. アドレスバーに表示される「インストール」ボタンをクリック
3. ホーム画面にアイコンが追加されます

使い方

Todoリストの使用

1. ホーム画面のテキストエリアにやることを1行ずつ入力
2. 「ランダムで選ぶ」ボタンをクリックすると、ランダムに1つタスクが選ばれます
3. 選ばれたタスクでそのままポモドーロタイマーを開始することもできます

ポモドーロタイマーの使用

1. 「ポモドーロ開始」ボタンをクリック
2. 必要に応じて作業時間・休憩時間を設定（デフォルト: 25分/5分）
3. 「開始」ボタンでタイマースタート
4. タイマー終了時に通知が届きます

技術スタック

• HTML5 - 構造
• CSS3 - スタイリング（グラデーション、アニメーション）
• Vanilla JavaScript - ロジック（フレームワーク不使用）
• LocalStorage API - データ永続化
• Notification API - 通知機能
• Service Worker - オフライン対応、PWA化
• Web App Manifest - インストール機能

ファイル構成

timekeep/
├── index.html           # メインHTML
├── styles.css          # スタイルシート
├── app.js              # アプリケーションロジック
├── manifest.json       # PWA設定
├── sw.js               # Service Worker
├── icons/              # アイコン画像
│   ├── icon-192.png
│   ├── icon-512.png
│   ├── icon.svg
│   ├── generate-icons.html
│   └── README.md
├── plan.md             # 開発計画
└── README.md           # このファイル

ブラウザ対応

• Chrome/Edge: 完全対応
• Firefox: 完全対応
• Safari (iOS 16.4+): ほぼ完全対応（通知機能含む）
• Safari (iOS < 16.4): PWA対応だが通知機能に制限あり

カスタマイズ

色の変更

styles.css の :root セクションでカラー変数を変更できます：

:root {
    --primary-color: #4A90E2;    /* メインカラー */
    --secondary-color: #50C878;  /* セカンダリカラー */
    /* ... */
}

デフォルト時間の変更

app.js の AppState 初期値を変更：

const AppState = {
    workDuration: 25,    // 作業時間（分）
    breakDuration: 5,    // 休憩時間（分）
    /* ... */
};

デプロイ

GitHub Pagesにデプロイ

1. GitHubリポジトリを作成
2. ファイルをプッシュ
3. Settings → Pages → Source を "main branch" に設定
4. 数分後、https://ユーザー名.github.io/リポジトリ名/ でアクセス可能

Netlify/Vercelにデプロイ

1. リポジトリを接続
2. ビルド設定不要（静的ファイルのみ）
3. 自動デプロイ完了

ライセンス

MIT License - 自由に使用・改変できます

今後の改善案

• ダークモード対応
• 複数のTodoリスト（カテゴリ分け）
• タスク完了チェック機能
• 統計・履歴機能
• カスタムサウンド設定
• 同期機能（クラウド保存）

---

作成者: Claude Code バージョン: 1.0.0