タスクごとにカウントダウンタイマーを設定できるTodoアプリケーションです。
A task management application with countdown timers for each task.
- タスク管理 - タスクの作成・編集・削除・完了
- カウントダウン表示 - 各タスクに期限を設定してリアルタイムでカウントダウン表示
- カレンダー形式の日付選択 - 直感的なUIで期限を設定
- データ永続化 - サーバーサイドでJSONデータベースに保存
- 通常タスク - 特定の期限を設定
- 今から始めるタスク - 作業時間を指定（5分〜3時間）
- 繰り返し設定 - 毎日/毎週/隔週/毎月/平日のみ
- 事前通知 - 10分前〜1日前に通知
- メモ機能 - タスクにメモを追加
- 複数タスク一括登録 - 同じ設定で複数タスクを一度に作成
- フィルタータブ - アクティブ/今日/明日/完了済み/統計/週間/スケジュール
- ステータス表示 - SCHEDULED/ON TIME/SOON/URGENT/OVERDUE
- 週間ビュー - 1週間のタスクを俯瞰
- 統計機能 - タスク完了状況の統計表示
- プリセット - よく使うタスクセットを保存
- スケジュール - 定期的なタスクをテンプレート化
- 一括作成 - スケジュールから今日/明日のタスクを生成
- 天気表示 - 時計横に午前/午後の天気をドット絵アイコンで表示
- 位置情報 - 手動入力またはGPSで位置を設定
- プリセット都市 - 東京/大阪/名古屋/札幌/福岡
- PWA対応 - ホーム画面に追加してアプリとして利用可能
- ダークテーマ - 目に優しいダークモードUI
- レスポンシブ - PC/タブレット/スマートフォン対応
- 通知機能 - ブラウザ通知でタスクをリマインド
┌─────────────────────────────────────┐
│ 14:32:45 │
│ 2025/12/20 (土) ☀️ ☁️ 12°/5° │
├─────────────────────────────────────┤
│ [アクティブ][今日][明日][完了][統計] │
├─────────────────────────────────────┤
│ ● 買い物に行く 00:45:30 │
│ ● レポート提出 02:15:00 │
│ ● ミーティング 05:30:00 │
└─────────────────────────────────────┘
# Node.jsがインストールされている場合
node server.js
# または npm を使用
npm start
# ポートを指定する場合（例：3000番ポート）
PORT=3000 node server.js# Python 3 の場合
python3 -m http.server 8080
# Python 2 の場合
python -m SimpleHTTPServer 8080# PHP の場合
php -S 0.0.0.0:8080
# Ruby の場合
ruby -run -e httpd . -p 8080
# http-server (npm) の場合
npx http-server -p 8080サーバー起動後、以下のURLでアクセスできます：
- ローカルアクセス:
http://localhost:8080 - LAN内アクセス:
http://<サーバーのIPアドレス>:8080 - VPN経由アクセス:
http://<VPNで割り当てられたIPアドレス>:8080
サーバーは以下のREST APIを提供します：
| メソッド | エンドポイント | 説明 |
|---|---|---|
| GET | /api/todos |
全タスクを取得 |
| POST | /api/todos |
新規タスク作成 |
| PUT | /api/todos/:id |
タスク更新 |
| DELETE | /api/todos/:id |
タスク削除（アーカイブ） |
| POST | /api/todos/sync |
全タスク同期 |
| メソッド | エンドポイント | 説明 |
|---|---|---|
| GET | /api/presets |
プリセット一覧取得 |
| POST | /api/presets |
プリセット作成 |
| PUT | /api/presets/:id |
プリセット更新 |
| DELETE | /api/presets/:id |
プリセット削除 |
| POST | /api/presets/:id/apply |
プリセット適用 |
| メソッド | エンドポイント | 説明 |
|---|---|---|
| GET | /api/schedules |
スケジュール一覧取得 |
| POST | /api/schedules |
スケジュール作成 |
| PUT | /api/schedules/:id |
スケジュール更新 |
| DELETE | /api/schedules/:id |
スケジュール削除 |
| POST | /api/schedules/batch-create |
一括タスク作成 |
| メソッド | エンドポイント | 説明 |
|---|---|---|
| GET | /api/stats |
ユーザー統計取得 |
| POST | /api/stats/complete |
完了統計更新 |
Tailscaleは設定が簡単で安全なメッシュVPNサービスです。
-
Tailscaleのインストール
- 公式サイトからダウンロード: https://tailscale.com/download
- Windows/Mac/Linux対応
-
サーバー側の設定
# Tailscaleを起動してログイン tailscale up # Tailscaleの割り当てIPアドレスを確認 tailscale ip -4
-
クライアント側の設定
- Tailscaleをインストールして同じアカウントでログイン
- 自動的にサーバーとVPN接続が確立されます
-
アクセス方法
http://<TailscaleのIPアドレス>:8080 -
Tailscaleの利点
- ファイアウォール設定不要
- 自動的にNATトラバーサル
- エンドツーエンド暗号化
- 設定が非常に簡単
- VPNサーバーに接続
- サーバーマシンでアプリケーションサーバーを起動
- VPN内のIPアドレスを確認：
# Windows ipconfig # Mac/Linux ifconfig
- VPNクライアントから
http://<VPN内のIPアドレス>:8080でアクセス
外部からアクセスする場合は、ファイアウォールで8080番ポートを開放する必要があります：
# 管理者権限で実行
netsh advfirewall firewall add rule name="Todo App" dir=in action=allow protocol=TCP localport=8080sudo ufw allow 8080/tcpシステム環境設定 → セキュリティとプライバシー → ファイアウォール → ファイアウォールオプション
countdown_todo/
├── index.html # メインHTML
├── script.js # フロントエンドロジック
├── style.css # スタイルシート
├── server.js # Node.jsサーバー
├── package.json # npm設定
├── manifest.json # PWAマニフェスト
├── service-worker.js # Service Worker
├── data/
│ └── todos.json # データベース（自動生成）
├── fonts/
│ └── Nosutaru-dotMPlusH-10-Regular.ttf
├── icon-192.png # PWAアイコン
└── icon-512.png # PWAアイコン
- ZIPファイルをダウンロードして展開
install_and_run.batを実行
# リポジトリをクローン
git clone https://github.com/yyamada722/countdown_todo.git
cd countdown_todo
# サーバーを起動
node server.js- Node.js 12.0.0 以上（推奨）
- または Python 3.x
- モダンなWebブラウザ（Chrome, Firefox, Safari, Edge）
- このアプリケーションは開発・個人利用を想定しています
- インターネットに直接公開する場合は、適切なセキュリティ対策を実施してください
- VPN経由でのアクセスを推奨します
MIT License
このアプリケーションでは「ノスタルドット（M+H）」フォントを使用しています。
- フォント名: ノスタルドット（M+H）
- デザイナー: 永山嘉昭（フロップデザイン）
- ライセンス: M+ FONT LICENSE
- ライセンスページ: https://logotype.jp/nosutaru-dot.html