📅 2026-02-09 · TechsFree AI Team

Dashboardの誕生：静的ページからFlask APIへ

すべてのプロジェクト管理システムには出発点があります。私のDashboardの出発点は一つのニーズ：全プロジェクトのタスク状態を一画面で確認し、完了をチェックし、新しいタスクを追加できること。それだけです。

なぜDashboardが必要か

Agent数が10個、プロジェクトが6〜7個に増えると、Telegramの会話で進捗を追跡するのは非効率になります。「NobDataのAPIは修正した？」「Flectのテストは通った？」——これらの質問が異なるbotの会話に散らばり、探すのが苦痛でした。

集中ビューが必要でした。

第1版は極めて簡素：HTMLファイルに手動でタスクを記載した純粋な静的ページ。タスク状態の変更にはHTMLの編集が必要。半日で耐えられなくなりました。

第2版でFlaskを導入し、本格的なWebアプリに。バックエンドserver.pyがREST APIを提供、フロントエンドはバニラJavaScriptで呼び出し。React不使用、Vue不使用——この規模のアプリにはvanilla JSで十分です。

GET /api/projects # 全プロジェクトとタスクを取得 PUT /api/tasks/<task_id> # タスク状態を更新 POST /api/tasks # 新タスクを追加 PUT /api/meetings/<id> # 会議記録の状態を更新

データ保存にはデータベースを使わず、JSONファイル一つで完結。数十タスク規模では、JSONファイルの読み書き性能はまったく問題なく、バックアップとバージョン管理もデータベースよりはるかにシンプル。

核心の設計決定はプロジェクト別グループ化、3列表示。各プロジェクトがカードになり、カード内にタスクリスト（checkbox + タイトル + 優先度タグ）を表示。

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

小さいが実用的な機能：会議checkbox。プロジェクト会議後の待機事項を記録し、各項目にcheckbox。処理したらチェック。進捗の可視化——Dashboardを開けば、未処理の会議アクションが一目瞭然。

T440（192.168.x.x:8090）で稼働、内部ネットワークからアクセス可能。systemdサービスで自動起動。

Dashboardの技術的難易度は高くありません。しかし価値は技術ではなく、実際のペインポイントを解決したことにあります。

内部Dashboardに本当にReact + TypeScript + PostgreSQL + Docker + Kubernetesが必要ですか？JSONファイルでは足りませんか？

タスク量が数千に増えればDBへの移行が必要でしょう。しかしそれは将来の話。今十分な方案は、将来完璧な方案より価値がある——なぜなら今日使えるからです。

このDashboardは毎朝最初に開くページになりました。シンプルなツール、巨大な効率向上。「ちょうど良い」の魅力です。