~~NOCACHE~~
~~DISCUSSION~~

## Web版WBS作成ツール

## 概要
Excel/VBAで作られていたWBS(進捗管理表)を、サーバー・インストール不要のHTMLファイル1枚に移植したツールです。
CSVファイル(スケジュール)を読み込むだけで、階層構造付きのWBS表とガントチャートを自動描画します。
予定・実績を分けて入力すると、進捗率・遅れ/先行の状況・進捗ズレを示す稲妻線まで自動で計算されます。

データはすべてCSV(スケジュール・オプションの2種類)で管理するため、ツール本体とデータが完全に分離しています。Excelはもちろん、メモ帳やGitでの差分管理もそのまま使えます。

## サンプル
[[https://pg.mnztech.work/dokuwiki/wbs.html|Web版WBS作成ツール]]下の二つを読み込んでみてねっ！
[[https://pg.mnztech.work/dokuwiki/_media/wbs_sample.csv|スケジュールのCSV]]
[[https://pg.mnztech.work/dokuwiki/_media/option_sample.csv|オプションのCSV]]

## 画面イメージ
### メイン画面
左側がWBS表(項番・項目・予定/実績/進捗・担当・状況・備考)、右側がガントチャートです。項番をクリックすると、左右の同じ行がハイライトされます。

{{.:pasted:20260824-114711.png?direct400}}

### スケジュール編集
Excelライクなグリッドで、スケジュールCSVを直接編集できます。セルのドラッグ選択・コピペ(Excel対応)・行の挿入/削除に対応しています。

{{.:pasted:20260824-101419.png?direct400}}

### オプション編集
表示期間・報告日・担当者ごとの色・特別休暇/出勤日を、表形式で編集できます。

{{.:pasted:20260824-101441.png?direct200}}

---

## 主な機能

### 📊 階層構造付きWBS + ガントチャート
- `M`(マイルストーン/親)行と`W`(実タスク)行の2種類。子タスクの日付・進捗は親に自動集計されます。
- 項番は「1」「1.1」「1.1.1」のように、階層に応じて自動採番。
- Daily(1日1列)/ Monthly(1ヶ月を分割数で按分)の2モード。

### 📈 進捗の自動判定と可視化
- 状況列は「完了 / 遅れ〇日 / あと〇日 / 先行〇日 / 実行中」を、予定日・実績日・報告日の比較だけで自動判定。
- 親(M)行の状況は、配下タスクの平均ではなく**一番遅れている子(ボトルネック)**を採用します。他のタスクが終わっていても、1つでも詰まっているタスクがあればその深刻さがそのまま親に反映されます。
- 稲妻線(ジグザグの青線)が、状況の判定結果と完全に連動して報告日ラインからズレて表示され、遅れ/先行が一目でわかります(状況テキストの日数と、線のズレ幅は常に一致します)。
- 「進捗率考慮」をONにすると、%の進捗ぶんだけ遅れ日数・稲妻線のズレを割り引いて表示します。

### 📅 日本の祝日を自動判定(祝日設定)
- 外部通信を使わず、天文計算(春分・秋分の日)とハッピーマンデー制度のルールで日本の祝日を計算します。
- 振替休日(祝日が日曜なら翌平日を休みに)・国民の休日(祝日に挟まれた平日)にも対応。
- 「祝日設定」をONにすると、状況の日数計算・稲妻線・自動日数計算すべてに祝日が反映され、カレンダー上も特別休暇と同じ色で表示されます。

### 📝 Excelライクなスケジュール編集
- セルのドラッグ範囲選択、Ctrl+クリック/Shift+クリックでの複数行選択に対応。
- コピー&ペーストはExcelとの相互貼り付けに対応(タブ区切りテキスト)。
- 行の挿入は「選択行の下に挿入」、削除は選択行をまとめて削除。
- 日付列は`<input type="date">`のカレンダーピッカー、項目・備考列は自動でインデント/左揃え。

### ⚙️ オプション機能
- 表示開始/終了・報告日をオプションCSVで保存・共有可能。
- 担当者ごとに文字色を設定(担当欄が自動で色分け)。
- 特別休暇(通常の平日を休みにする)・特別出勤(土日を稼働日にする)をカレンダーに反映。
- Daily/Monthlyそれぞれのセル幅、Monthlyの分割数もオプションとして保存・共有可能。
- 表示期間から完全にはみ出るタスクは、ガントチャート上には描画されません(表の枠外に飛び出て表示が乱れるのを防止)。

### 🎨 配色プリセット(4パターン)
- ダーク/ライト/ミニマル/カラフルの4種類から選択可能。背景・文字・罫線・土日色まで含めて一括切替。
- 日付ピッカーなどのブラウザ標準部品も、選んだ配色に合わせて明暗が切り替わります。

### 💾 CSVでの保存・共有
- 「スケジュール保存」「オプション保存」で、現在の内容をCSVファイルとしてダウンロード。
- 「スケジュール読込」「オプション読込」で、CSVファイルを選択して復元。
- ツール自体はアップデートしても、CSVはそのまま使い回せます。

---

## 基本操作

### スケジュールCSVの列構成
```
Type,Level,項目,予定日数,予開,予終,実開,実終,実ks,予ks,担当,備考
```
| 列 | 内容 |
|---|---|
| Type | `M`(マイルストーン/親)または`W`(実タスク) |
| Level | 階層の深さ(0が最上位) |
| 項目 | タスク名 |
| 予定日数 | 参考値(実際の表示日数は予開・予終から自動計算) |
| 予開/予終 | 予定開始日・終了日(YYYY-MM-DD) |
| 実開/実終 | 実績開始日・終了日。両方入力されると自動的に「完了」扱い |
| 実ks/予ks | 実績値・予定値(この2つの比率が進捗%になる) |
| 担当 | 担当者名(オプションの担当色と連動) |
| 備考 | 自由記述 |

状況(進捗)は自動計算のため、CSVへの入力項目はありません。

### オプションCSVの種別
| 種別 | キー | 値 |
|---|---|---|
| 表示開始/表示終了/報告日 | 日付 | (空欄) |
| 担当色 | 担当者名 | カラーコード(例: `#ff6b6b`) |
| 特別休暇 | 日付 | (空欄。通常の平日をその日だけ休みにする) |
| 特別出勤 | 日付 | (空欄。土日をその日だけ稼働日にする) |
| Dailyセル幅 | 数値(px) | (空欄) |
| Monthlyセル幅 | 数値(px) | (空欄) |
| Monthly分割数 | 数値 | (空欄。1ヶ月を何列に分割するか) |

これらは表示開始/表示終了/報告日と同じ扱いで、「+行挿入」で種別を選んで数値を入れれば保存・読込できます(自動では追加されないため、必要な行は手動で足してください)。

### 新規に作り始める場合
1. 「スケジュール編集」を開き、`+行挿入`で1行ずつ追加、またはExcelから複数行まとめて貼り付け
2. `Type`列に`M`か`W`、`Level`列に階層を入力
3. 「適用してWBS描画」でメイン画面に反映
4. 表示開始・表示終了・報告日を設定
5. 必要に応じて「オプション編集」で担当色・特別休暇/出勤日を設定
6. 「スケジュール保存」「オプション保存」でCSVとして保存しておく

### 進捗を更新する場合
1. 「スケジュール編集」で該当タスクの実開・実終・実ks・予ksを入力
2. 「適用してWBS描画」を押すと、状況・進捗%・稲妻線が自動更新される

---

## トラブルシューティング

### Q. 状況(遅れ/あと)の日数が思っていた数値と違う
- 「休日考慮」がONの場合、稼働日(土日・特別休暇を除く)だけを数えます。カレンダーの土日・特別休暇/出勤の色分けと突き合わせて確認してください。
- 「祝日設定」がONの場合、日本の祝日(振替休日・国民の休日を含む)も稼働日から除外されます。GW・年末年始をまたぐタスクは、ON/OFFで日数が変わるので確認してください。
- 「進捗率考慮」をONにすると、遅れ日数は`(1-進捗率)`倍に割り引かれます。未着手(進捗0%)のタスクは、ONでもOFFでも同じ数値になります(0%を掛けても変わらないため)。
- 親(M)行の遅れ日数は、配下タスクの中で一番遅れているものがそのまま採用されます(平均ではありません)。

### Q. 稲妻線が報告日の位置で一直線のまま動かない
- 状況が「完了」「あと〇日」「実行中(進捗率考慮OFF)」の場合は、仕様として稲妻線は報告日ラインの位置のままになります。
- 「遅れ」「先行」であれば、稲妻線は必ず該当の予定日を指してズレて表示されます。動かない場合は状況列の表示も合わせて確認してください。

### Q. 日付を手入力/貼り付けしたら表示がズレた
- 日付はハイフン区切り(`YYYY-MM-DD`)・スラッシュ区切り(`YYYY/M/D`)のどちらで入力しても構いません。スケジュール編集を一度「適用」するか、ファイルを読込/保存すると、日付は自動的にハイフン区切りへ統一されます。

### Q. タスクを登録したのにガントチャートにバーが出てこない
- そのタスクの予定期間が、表示開始〜表示終了の範囲から完全にはみ出していないか確認してください。範囲外のタスクは意図的に描画されません(表の外に飛び出て表示が乱れるのを防ぐため)。表示開始/表示終了を広げれば表示されます。

### Q. 担当者名を入れたのに色が付かない
- オプションCSVの「担当色」に、スケジュール側の担当欄と**完全に一致する**名前で登録されているか確認してください(表記ゆれがあると色が付きません)。

### Q. スケジュール編集で日本語入力(IME)がうまく変換できない
- セルを選択した直後にそのまま日本語を打とうとすると、IMEの変換が崩れることがあります。Enterキーまたはダブルクリックで編集モードに入ってから入力してください。

---

## 開発情報
- **形式**: 単一HTMLファイル(サーバー・インストール不要、ブラウザで開くだけ)
- **データ形式**: CSV(スケジュール・オプションの2種類、UTF-8)
- **対応環境**: モダンブラウザ全般(Chrome / Edge / Firefox)
- **元になったツール**: Excel VBAで自作していた社内向けWBS管理ツール
- **生成AI**: Claude

## 更新履歴
- Daily/Monthlyのセル幅・Monthlyの分割数をオプションに追加(保存・共有可能に)
- 横スクロール時にヘッダーとガントチャート本体がズレる不具合を修正(縦スクロールバーの有無による見た目の横幅の違いが原因)
- 日本の祝日を自動判定する「祝日設定」を追加(振替休日・国民の休日にも対応、外部通信なしのオフライン計算)
- 親(M)行の状況判定を「配下タスクの平均」から「一番遅れている子(ボトルネック)」方式に変更。状況テキストと稲妻線のズレ幅も完全に一致するよう修正
- 表示期間から完全にはみ出るタスクをガントチャートに描画しないよう修正(枠外に飛び出す不具合の解消)
- 矢羽根(M行)のラベルがはみ出しても読めるよう、文字に縁取りを追加
- 月表示で分割数0を指定できてしまう不具合、矢羽根の形が負の幅で反転する不具合を修正
- スケジュール編集で日付をダブルクリックすると消える不具合を修正(日付形式の違いが原因)。あわせて、読込・保存・編集適用のすべてで日付をハイフン区切りに統一
- 状況(遅れ/先行)の判定ロジックと稲妻線の位置を統一し、按分計算(進捗率考慮)の反映も一致させた
- 稲妻線・基準線の基準点(セル左端/右端)を統一し、日数表示とのズレを解消
- 日付のハイフン/スラッシュ混在によるタイムゾーン起因の日付ズレを修正
- カレンダーの列幅が自動計算で押し縮められる不具合を修正(表の幅を明示指定)
- 配色プリセット(ダーク/ライト/ミニマル/カラフル)を追加、既定をライトに変更
- スケジュール編集・オプション編集のUIをExcelライクな操作性に刷新(ドラッグ選択・Ctrl/Shift複数選択・行挿入/削除)
- 項番クリックによる左右の行ハイライト機能を追加
- 状況(進捗)列を完全自動計算化し、CSVへの直接入力を廃止
- 要員欄を備考欄に変更

{{tag>Web WBS Tool}}