プロジェクトを始めるとき、
「まずはWBSを作りたい」と思うことは多いですよね。
ただ、
- Excelは管理が煩雑
- 高機能なプロジェクト管理ツールは少し重い
- インストールやアカウント作成が面倒
こう感じる方も少なくありません。
そこで今回は、
HTML1枚だけで動作する、DB不要のシンプルWBS管理ツール
「Simple WBS」を紹介します。
ブラウザさえあればすぐ使え、JSONでデータ保存もできる実用的なツールです。
このSimple WBSツールでできること
このツールでできることは、次のとおりです。
「最低限だけど、ちゃんとWBS」
そんな立ち位置のツールになっています。
ツールの全体構成（HTML1枚完結）
使用技術
このツールは、以下の技術だけで作られています。
- HTML
- CSS
- JavaScript（Vanilla JS）
ReactやVueなどのフレームワークは使っていません。
また、サーバー・DBも一切不要です。
そのため、
というメリットがあります。
データ管理の考え方
データはすべて、ブラウザ上のJavaScriptメモリ内で管理しています。
- タスク情報：
Mapで管理 - 親子関係：IDベースで紐付け
- 保存：JSONとして出力
「保存＝JSON」という割り切った設計なので、構造もシンプルで理解しやすくなっています。
プロジェクト情報管理機能
画面上部には、プロジェクト情報の入力欄があります。
入力できる項目
入力後に「プロジェクト情報を更新」ボタンを押すと反映されます。
プロジェクト情報がJSONに含まれる仕組み
このプロジェクト情報は、
タスク情報と一緒にJSON出力されます。
つまり、
- プロジェクト単位でデータを保存
- 別環境でも同じ状態を再現
といった使い方が可能です。
WBS（タスク管理）機能の特徴
階層構造のタスク管理
このツールの中心は、
親子関係を持つWBS構造です。
- 親タスクを指定 → 子タスクになる
- 親を指定しない → 最上位タスク
ツリー構造で表示され、
折りたたみも可能です。
タスクに設定できる情報
各タスクには、以下の情報を設定できます。
- タスク名（必須）
- 担当者
- 作業詳細
- 備考
- 開始日／終了日
- 工数（人日）
WBSとして必要な情報は、
一通りそろっています。
編集・削除時の安全設計
親子関係のあるツールで怖いのが、循環参照です。
このツールでは、
- 自分自身を親にできない
- 子孫タスクを親にできない
というチェックが入っています。
また、タスク削除時は、配下のタスクもまとめて削除されます。
工数の自動集計が便利
親タスクの合計工数表示
子タスクに工数を入力すると、親タスクには
自分＋子孫すべての工数合計
が自動で表示されます。
これは、WBSを使う上で非常に重要なポイントです。
全体サマリー表示
画面上部には、以下のサマリーも表示されます。
- タスク数
- 工数合計
プロジェクト全体の規模感を、すぐに把握できます。
ガントチャート機能
ガントチャートの表示条件
「ガントチャート」ボタンを押すと、
フローティング表示でガントチャートが開きます。
※表示されるのは
開始日・終了日が両方設定されているタスクのみです。
日・週・月の切り替え
ガントチャートは、
以下の単位で切り替えできます。
- 日
- 週
- 月
プロジェクトの期間や規模に応じて、見やすい単位を選べます。
フローティング表示のUI
ガントチャートは、
- ドラッグで移動可能
- 右下ハンドルでリサイズ可能
になっています。
WBSを編集しながら進捗イメージを確認できる点は、地味ですが便利です。
JSONインポート／エクスポート機能
JSON出力でできること
JSON出力を使うと、
といった使い方ができます。
JSON読み込みで即復元
JSONを読み込めば、
- プロジェクト情報
- タスク階層
- 工数・日付
すべて元通りに復元されます。
保存・復元が非常に明快なのが特徴です。
このツールが向いている人
このSimple WBSは、
次のような方に向いています。
「軽く使いたい」人ほど、ハマりやすいツールです。
HTML1枚ツールとしてのメリット・デメリット
メリット
デメリット
用途を割り切れば、デメリットはそれほど気になりません。
まとめ
今回は、HTML1枚で完結するSimple WBSツールを紹介しました。
- シンプルだが実用的
- WBS・工数・ガントまで一通り対応
- 学習用途・検証用途にも最適
「とりあえずWBSを作りたい」
そんな場面で、ぜひ活用してみてください。
コメント