WBS Viewer
単一HTMLで動く、ガントチャート（時間軸）＋進捗軸ビュー（EVMに倣った完了率表示）＋**イナズマ線（進捗線）**の WBS ビューア。サーバー・依存ライブラリ・ビルド不要。 画面上のアプリ名は WBS Viewer（
single-file-wbsは配布名＝このリポジトリ）。
右上の 「時間／進捗」タブで切替。進捗ビュー（EVMに倣った完了率表示・実績/予定/遅れ）:
コンセプト
AI時代の管理者（PL／テックリード）が、AIを含む少数精鋭チームを率いるためのローカルWBS。
人間は GUI で、AI は素の JSON と CLAUDE.md で、同じ計画を編集する。
- 対象：巨大プロジェクトのエンタープライズPMではなく、AIを含む少数精鋭を率いる管理者（作者自身がこのペルソナ＝ドッグフーディング）
- 核の差別化＝2つの第一級インターフェース：大半のPMツールは人間（GUI）前提。本ツールは AIも第一級ユーザーとして、素のJSON＋AI可読な
CLAUDE.mdで計画を保守できる - 背景の論考 → WBSという至高ツールで、このAI時代をサバイブする
30秒で始める
- Releases から
wbs_viewer.htmlをダウンロード - Chrome で開く（
file://のままでOK） - 「ファイルを開く」（同じボタンへのドラッグ&ドロップでも可）で同梱データを読み込む
wbs_sample.json— 架空のサンプル・フォーマットのお手本wbs_roadmap.json— 本ツール自身の開発計画（実データ。Issue と連動し Claude Code が保守）
自分の WBS は wbs_sample.json を雛形にコピーして作成（ファイル名は自由）。編集して保存 → 「更新」 で反映。
アップデートは新しい wbs_viewer.html を上書きするだけ（wbs.json のデータには触れません）。
特徴
- 単一HTMLファイル — Chrome で開くだけ。サーバー・CDN・ビルド・依存ゼロ
- イナズマ線（進捗線） — 本日線から左へ突出＝遅延。着手遅れ・期限超過が折れ線で一目
- 予実オーバーレイのガント — 予定（枠）に実績（塗りバー）を重ね、枠からのはみ出し＝終了遅延（赤＋N日）／枠の左の空き＝着手遅れ。完了はグレー・親（集約）は細いサマリーバーで状態が一目。配色は色覚多様性（CUD）に配慮
- 進捗軸ビュー（EVMに倣う） — 時間軸のガントに加え、横軸を完了率(0–100%)にした進捗ビューをタブで切替。実績(EV)／予定(PV)／遅れを横バーで可視化（2つの表示は混ぜない）
- ヘッダの全体サマリ — 期間・工数(人月)・進捗(EVM)を常時表示。前倒し相殺で全体が0%でも遅れているタスク件数をバッジで見落とさない
- 列の折りたたみ（アウトライン式） — 列ヘッダ上の +/− で列を畳む/展開（数量+時間・進捗・状況・担当・予定・実績・備考）。ガント領域を広く使える
- データは事実だけの 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. の自動振り直し
「編集」ボタンを押すと、いきなりファイルの保存ダイアログが開きます。これは故障ではなく、Chrome のセキュリティ上、ブラウザがファイルに書き込む許可を得るには、保存ダイアログでユーザー自身がファイルを選ぶ必要があるためです（file:// で開くツールの宿命です）。
- 「編集」ボタンを押す → 保存ダイアログが開く
- いま開いている
wbs.jsonと同じファイルをそのまま選んで「保存」 - 「既存のファイルを置き換えますか？」→ はい
- 編集ボタンが緑になれば準備完了
「編集」を押した直後の画面（黄色い案内バーが出ます。この後ろに保存ダイアログが開いています）：
この選び直しは毎回ではなく、Chrome を起動してから最初の編集 ON の1回だけです（Chrome を再起動するとまた必要）。
AIチャットで保守する
WBS が続かない最大の理由は**「更新の手間」**。このツールは表示ロジック（HTML）を固定しデータ（wbs.json）だけを編集する設計なので、Claude Code 等のAIにチャットで更新を任せられます。データが素の JSON 1枚だからプラグインも連携設定も不要で、一括変更・負荷集計・ファイル横断の分析まで一言で頼めます。
- 「設計レビューを今日完了にして」→
actual.endに本日が入る - 「6月のタスクを全部1週間後ろ倒し」→ 一括変更
- 「担当別の負荷を集計して」→ ビューアに無い分析もその場で
- 「5月以前の完了をアーカイブして」→ バックアップ作成＋整理
同梱の CLAUDE.md で AI はデータ形式・編集ルール・運用方針を理解済みです。
データ形式（wbs.json）
{
"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）。
既知の制限：大量行（数千〜）で初期描画が重い（折りたたみで緩和）／同名プロジェクトは折りたたみ状態を共有／キーボード操作・スクリーンリーダー非対応（マウス前提）。