はじめに
突然ですが、客先常駐でこんな経験はありませんか？
- 新しいツールを使いたい
- でも勝手にインストールできない
- SaaSを使いたい
- でも業務データを外部サービスに置けない
- Dockerを使いたい
- でもそもそも入っていない
- Node.jsを使いたい
- でも環境構築の申請から始まる
- 仕方がないのでExcelでタスク管理する
- そしてExcelがどんどん巨大化する
私はあります。
そこで、
「だったら、インストールしなくても動くPMツールを作ればいいのでは？」
と思い、作り始めたのが TaskFlowZero です。
コンセプトは非常に単純です。
HTMLファイル1つで動く、サーバーレスのプロジェクト管理ツール
この記事では、なぜそんなものを作ったのか、どういう設計にしたのか、そして実際にどんなツールになったのかを書いてみます。
1. 客先常駐では「便利なツールを使う」が難しい
プロジェクト管理ツール自体は、世の中にたくさんあります。
Jira、Backlog、Redmine、Notion、Trelloなど、選択肢には困りません。
ところが、客先常駐の現場になると話が変わります。
例えば、
「このツール便利そうだから使おう！」
↓
「インストールしていいですか？」
↓
「申請してください」
↓
「このツールは社外サービスなので……」
↓
「業務データを外部に保存するのはNGです」
↓
終了
となります。
もちろん、これは現場のセキュリティを守るために必要なことです。
特に客先のネットワークでは、自社PCのように自由にソフトウェアを追加できないことがあります。
そのため、
「技術的に使えるか」ではなく「その環境で許可されているか」
が重要になります。
2. じゃあExcelでいいのか？
もちろんExcelでもタスク管理はできます。
ただ、プロジェクトが少し大きくなってくると、
- タスク一覧
- 担当者
- ステータス
- 期限
- ガントチャート
- コメント
- 工数
- 進捗
- Wiki
- ファイル
などを一つのExcelで管理するのがだんだん辛くなってきます。
そして最終的には、
案件管理.xlsx
案件管理_最新版.xlsx
案件管理_最新版2.xlsx
案件管理_最新版_修正版.xlsx
案件管理_最新版_修正版_本当の最新版.xlsx
みたいなことが起きます。
……少なくとも私は嫌でした。
3. そこで「制約」を逆にしてみた
普通のWebアプリなら、
ブラウザ
↓
Webサーバー
↓
API
↓
データベース
という構成になります。
でも、今回欲しかったのは、
「環境構築なしで、その場で使えること」
です。
そこで発想を逆にしました。
つまり、
サーバーをなくしました。
データベースもなくしました。
バックエンドもありません。
そして最終的には、
HTMLファイル1つ
にしました。
4. TaskFlowZeroという名前にしました
こうして作り始めたのがTaskFlowZeroです。
名前の由来は、
Task Flow + Zero
です。
「セットアップをゼロに近づける」
という意味を込めており、
Single-file project management tool. No server. No installation.
をコンセプトとして掲げています。
現在のTaskFlowZeroは単一HTMLを中心に動作し、サーバーやインストールを必要としない構成になっています。
5. 「HTMLを開くだけ」にした
基本的な使い方はかなり単純です。
taskflowzero.html
をブラウザで開きます。
そしてデータを保存するフォルダを選択します。
すると、
任意のフォルダ/
│
├─ project_P1.json
│
├─ project_P2.json
│
└─ files/
という構成になります。
プロジェクトごとにJSONファイルを分けています。
そのため、データベースサーバーを立てる必要はありません。
6. 「チームで使える」ようにした
ここで一つ問題が出てきました。
「個人で使えるだけなら簡単だけど、PMツールならチームで使いたいね」
という問題です。
そこで、
共有フォルダにJSONを置けばいいのでは？
と考えました。
例えば、
\\server\project\
│
├─ project_P1.json
├─ project_P2.json
└─ files/
という構成です。
OneDrive、NAS、ファイルサーバーなど、ブラウザからアクセスできる共有フォルダを利用できます。
ただし、ここで新たな問題が発生します。
7. 「同時編集」
例えば、
Aさん → P1を編集
Bさん → P1を編集
したらどうなるでしょう？
普通にファイルを上書きすると、
Aさんの変更
↓
Bさんが上書き
↓
Aさんの変更が消える
という問題が起きます。
そこでTaskFlowZeroでは、
3-way merge
を実装しました。
簡単に言えば、
共通の元データ
/ \
/ \
Aの変更 Bの変更
\ /
\ /
マージ
という形で変更を比較します。
競合しない変更は自動的に統合し、競合する部分については選択できるようにしています。
この辺りは、単一HTMLアプリを作っていて個人的にかなり面白かった部分です。
8. PMツールなので、ちゃんとPM機能も入れた
「JSONを編集するだけではPMツールとは言えない」
ということで、機能も増えていきました。
現在は、
- タスク管理
- リスト表示
- カンバン
- ガントチャート
- バーンダウンチャート
- Wiki
- コメント
- @メンション
- 工数入力
- ファイル・画像添付
- 優先度
- マイタスク
- JSONエクスポート / インポート
- プラグイン
などを実装しています。
最初は「ちょっとしたタスク管理ツール」のつもりでした。
ところが、
タスク管理
↓
コメントが欲しい
↓
メンションが欲しい
↓
Wikiが欲しい
↓
ガントチャートが欲しい
↓
工数も欲しい
↓
バーンダウンも欲しい
と、気がついたら普通のPMツールになっていました。
9. 個人的に気に入っているのが「Wiki」
プロジェクト管理をしていると、
「この仕様どこだっけ？」
が頻繁に発生します。
そこでWikiも入れました。
Markdownで、
# システム概要
## API仕様
### GET /users
ユーザー一覧を取得する。
のように書けます。
さらに、Wikiの見出しへのリンクをタスクやコメントに貼れるようにしました。
例えば、
仕様については
Wikiの「API仕様」を参照してください。
という形で、タスクと仕様書をつなげられます。
10. 「工数入力」も入れました
PMツールを使っていると、
「このタスク、結局何時間かかったの？」
という問題もあります。
そこでコメントを書くときに、
予定工数：4h
実績工数：3h
のように記録できるようにしました。
コメント履歴と一緒に工数が残るので、
9/1
設計開始
予定 4h / 実績 3h
9/2
レビュー対応
予定 2h / 実績 2h
という形で後から追跡できます。
11. 「マイタスク」を作った
チームで使っていると、
「自分は何をやるんだっけ？」
という問題が出てきます。
そこで、
マイタスク
を作りました。
全プロジェクトを横断して、
- 自分に割り当てられたタスク
- @メンション
- アクティビティ
を確認できます。
ただ、この機能については現在も改善中です。
特に、
「ユーザー自身が自分を正しく設定していないと、誰がコメントしたのか分かりにくくなる」
という問題が実際にありました。
この経験から、
「機能を作る」だけではなく、
「ユーザーが最初に何を設定すべきか」
というUXの重要性をかなり感じました。
12. 「ログイン機能がない」ですが？
TaskFlowZeroには、一般的なWebサービスのようなログイン機能がありません。
これは手抜きではありません。
むしろ、
ログイン機能を作らないこと自体を設計にした
という考え方です。
クラウドサービスなら、
ユーザー
↓
ID / Password
↓
Webサービス
↓
DB
という構成が必要です。
しかしTaskFlowZeroでは、
ユーザー
↓
共有フォルダ
↓
JSON
です。
ファイルへのアクセス権限は、
- Windows
- NAS
- ファイルサーバー
- OneDrive
- 社内ネットワーク
など、既存の仕組みに任せます。
13. 技術スタック
技術スタックもかなり割り切っています。
HTML
CSS
Vanilla JavaScript
File System Access API
IndexedDB
JSON
です。
ReactもVueも使っていません。
Node.jsもありません。
サーバーもありません。
データベースもありません。
「今どきVanilla JSかよ」
と思われるかもしれません。
私も途中で何度もそう思いました。
しかし今回の目的では、
依存関係を減らすことそのものが価値
でした。
14. 完全オフラインにも対応
さらに、
「そもそもインターネットに接続できない現場では？」
という問題があります。
そこで外部CDNへの依存を減らし、
taskflowzero.html
marked.min.js
chart.min.js
を同じフォルダに置くことで、完全オフラインでも動作できる構成にしています。
「ネットワークがないから使えない」
ではなく、
ネットワークがないことを前提にする
という発想です。
15. ここまで作って分かったこと
TaskFlowZeroを作っていて一番面白かったのは、
「制約が設計を決める」
ということでした。
普通なら、
便利な技術を使う
↓
Webアプリを作る
↓
サーバーを立てる
↓
DBを作る
となります。
TaskFlowZeroは逆です。
サーバーを置けない
↓
サーバーをなくす
DBを置けない
↓
JSONにする
インストールできない
↓
HTMLだけにする
外部サービスが使えない
↓
ローカルに保存する
インターネットが使えない
↓
オフライン対応する
つまり、
「できないこと」を一つずつ消していったら、今のアーキテクチャになった
という感じです。
16. もちろん弱点もあります
大規模チームには向かない
数百人規模で使うようなシステムでは、クラウド型PMツールのほうが適しています。
認証・権限管理がない
TaskFlowZero自身にはログイン機能がありません。
そのため、誰でも見られる共有フォルダに置けば、当然誰でも編集できます。
ファイルベースなので限界がある
大量のデータを扱う場合、データベースを使ったシステムのほうが適しています。
ブラウザ依存
File System Access APIを利用するため、対応ブラウザが必要です。現在はChrome / Edgeを対象としています。
つまり、
「普通のPMツールより優れている」のではなく、「普通のPMツールが使えない環境で使える」
ことがTaskFlowZeroの価値だと思っています。
17. どんな人に使ってほしいか
TaskFlowZeroは、特にこんな人を想定しています。
- 客先常駐エンジニア
- SES / SIer
- 社内ネットワーク限定の環境
- インターネット接続が制限された環境
- 外部SaaSへのデータ保存が禁止されている環境
- Excelでタスク管理しているチーム
- 小規模チームでPMツールを使いたい人
18. 今も作っています
TaskFlowZeroは、最初から大きな計画を立てて作ったプロダクトではありません。
最初は、
「現場で使える簡単なタスク管理ツールが欲しい」
というところから始まりました。
そこから、
タスク
↓
コメント
↓
メンション
↓
Wiki
↓
ガント
↓
バーンダウン
↓
工数
↓
ファイル添付
↓
チーム共有
↓
3-way merge
↓
インポート / エクスポート
↓
プラグイン
と、少しずつ増えていきました。
現在も改善を続けています。
19. 最後に
世の中には、非常に高機能で便利なプロジェクト管理ツールがたくさんあります。
だから、
「またPMツールを作るの？」
と思われるかもしれません。
私自身も最初はそう思っていました。
でも、実際の現場では、
「便利なツールが存在すること」と「そのツールを使えること」は別問題
です。
インストールできない。
クラウドにデータを置けない。
インターネットにつながらない。
そんな環境でも、
「それでも、もう少しちゃんとプロジェクト管理したい」
という人はいると思います。
そんな人のために、
HTMLファイル1つから始められるPMツール
を作ってみました。
もし同じような環境で働いている方がいたら、ぜひ一度触ってみてください。
TaskFlowZero
おわりに
TaskFlowZeroの開発は、基本的にClaudeとのペアプログラミングで進めています。やり方はだいたい決まっていて、毎回同じサイクルを回しています。
実装の細部まで毎回自分の頭で組み立てなくて済む分、機能追加や不具合修正のサイクルは体感でかなり速くなりました。
同じように「便利なツールを入れたくても入れられない現場」で消耗している人の助けに、少しでもなれば幸いです。
最後まで読んでいただき、ありがとうございました。