単一HTMLで動く、ガントチャート＋**イナズマ線（進捗線）**の WBS ビューア。サーバー・依存ライブラリ・ビルド不要。 画面上のアプリ名は WBS Viewer（single-file-wbs は配布名＝このリポジトリ）。

English README

1. Releases から wbs_viewer.html をダウンロード
2. Chrome で開く（file:// のままでOK）
3. 「ファイルを開く」（同じボタンへのドラッグ&ドロップでも可）で同梱データを読み込む
   • wbs_sample.json — 架空のサンプル・フォーマットのお手本
   • wbs_roadmap.json — 本ツール自身の開発計画（実データ。Issue と連動し Claude Code が保守）

自分の WBS は wbs_sample.json を雛形にコピーして作成（ファイル名は自由）。編集して保存 → 「更新」 で反映。 アップデートは新しい wbs_viewer.html を上書きするだけ（wbs.json のデータには触れません）。

• 単一HTMLファイル — Chrome で開くだけ。サーバー・CDN・ビルド・依存ゼロ
• イナズマ線（進捗線） — 本日線から左へ突出＝遅延。着手遅れ・期限超過が折れ線で一目
• 予実オーバーレイのガント — 予定（枠）に実績（塗りバー）を重ね、枠からのはみ出し＝終了遅延（赤＋N日）／枠の左の空き＝着手遅れ。完了はグレー・親（集約）は細いサマリーバーで状態が一目。配色は色覚多様性（CUD）に配慮
• データは事実だけの JSON 1枚 — 持つのは予定と実績の日付だけ。工数（数量×時間÷8・人日）・進捗・イナズマ線はすべて自動計算で、手でメンテする数字がない
• 編集は3とおり — ブラウザ内編集（自動保存）／テキストエディタ／AIチャット（CLAUDE.md 同梱で Claude Code がデータ形式を理解済み）
• ほか：複数プロジェクト・折りたたみ・マイルストーン線・完了グレー＋✓・備考URLの自動リンク・日本語/English UI 切替

• 折りたたみ：プロジェクト／工程名 or ▼/▶ をクリック。作業項目ヘッダの ▼/▶ で全展開・全たたみ（誤操作は Ctrl+Z で直前の表示に復元）
• ガント：マウスのある日の列がハイライトされ日付ヘッダが強調。バーにカーソルで予定/実績の正確な日付を表示

「編集」ボタンを ON にすると画面上から直接編集できます。変更は約0.4秒後に wbs.json へ自動保存（保存状態は右上に常時表示）。

• できること：各フィールドのその場編集（No./名前/数量/時間/担当/日付/備考。工数は自動計算で編集対象外）。日付は 611・6/11 等の短縮入力／YYYY-MM-DD／📅 カレンダー（今年は MM-DD 表示）／追加 ＋／削除 ✕（確認あり）／上下移動 ⬆⬇
• できないこと（JSON 直編集か AI に依頼）：ドラッグ&ドロップ並び替え／別の親への移動／No. の自動振り直し

WBS が続かない最大の理由は**「更新の手間」**。このツールは表示ロジック（HTML）を固定しデータ（wbs.json）だけを編集する設計なので、Claude Code 等のAIにチャットで更新を任せられます。データが素の JSON 1枚だからプラグインも連携設定も不要で、一括変更・負荷集計・ファイル横断の分析まで一言で頼めます。

• 「設計レビューを今日完了にして」→ actual.end に本日が入る
• 「6月のタスクを全部1週間後ろ倒し」→ 一括変更
• 「担当別の負荷を集計して」→ ビューアに無い分析もその場で
• 「5月以前の完了をアーカイブして」→ バックアップ作成＋整理

同梱の CLAUDE.md で AI はデータ形式・編集ルール・運用方針を理解済みです。

{
  "projects": [
    {
      "name": "プロジェクト名",
      "milestones": [ { "date": "2026-09-30", "label": "リリース", "color": "#ef4444" } ],
      "tasks": [
        { "id": "1", "name": "フェーズ1", "children": [
          { "id": "1.1", "name": "作業", "qty": 1, "hours": 16, "assignee": "担当",
            "plan":   { "start": "2026-07-01", "end": "2026-07-05" },
            "actual": { "start": null, "end": null }, "note": "",
            "_ai":    { "tokens": 70000, "minutes": 25, "model": "fable-5" },
            "_money": { "outsource": 50000, "currency": "JPY" },
            "_links": ["https://example.com/spec.md"] }
        ] }
      ]
    }
  ]
}

• タスクは最大3階層。children あり＝集計ノード、なし＝リーフ（工数を持つ）
• _ 始まりのキーはカスタムキーとして自由に追加できる（上例の _ai=AI実績・_money=外注費・_links=参考リンク。構造も自由）。ビューアは無視し、ブラウザ編集でも保持される。クリックして開きたい URL は note へ（自動リンク化）
• 旧形式 { "project", "milestones", "tasks" }（単一プロジェクト）も後方互換で読める
• 計算式・運用・異常系の扱いなど詳細仕様は CLAUDE.md（仕様の単一ソース）

Google Chrome（最新版）推奨。File System Access API を使用するため Chromium 系ブラウザ専用・file:// 直開きで動作。

• Microsoft Edge などの Chromium 系でも動作（エンジンが同じため。検証は Chrome で実施）
• 会社管理のブラウザでは、ポリシーで File System Access が無効だと編集機能が使えないことがあります（閲覧は可。edge://policy で確認）
• Firefox / Safari は非対応（File System Access API 未対応）

tests/ に正常系・異常系のサンプル JSON と e2e テストを同梱（一覧は tests/INDEX.md）。壊れた入力でもクラッシュしない方針（graceful degradation）。

既知の制限：大量行（数千〜）で初期描画が重い（折りたたみで緩和）／同名プロジェクトは折りたたみ状態を共有／キーボード操作・スクリーンリーダー非対応（マウス前提）。

MIT