Excelのセル入力の速さと、Webツールの手軽さを両立したガントチャートアプリ「Ganttline」を個人開発しました。登録・インストール不要、データはブラウザ内(IndexedDB)に保存するのでサーバー要らずです。
🌐 ganttline.csri16001.workers.dev
この記事では、実装のポイント(Excel風グリッド操作・遅れの自動検知・Excelセル塗りつぶしでの出力)を中心に、技術スタックと構成を紹介します。
この記事のポイント
- Excel風のキーボード操作(矢印キー/Tab/Enter/F2/Undo)をWebグリッドで再現する実装
- 「今日までに進んでいるべき進捗 > 実際の進捗」で遅延タスクを自動検知するロジック
- グラフ画像ではなく、Excelのセル塗りつぶしでガントチャートを再現する出力方式
- サーバーレス構成(React + IndexedDB + Cloudflare Workers)で運用コストをほぼゼロにする設計
技術スタック
| 用途 | 技術 |
|---|---|
| UI | React + TypeScript + Vite |
| 状態管理 | Zustand |
| 保存 | Dexie (IndexedDB) |
| Excel出力 | ExcelJS |
| 日付処理 | date-fns |
| テスト | Vitest + Testing Library |
| ホスティング | Cloudflare Workers（静的アセット） |
設計の軸は「サーバーレスでブラウザ内に完結させる」ことです。アカウント管理やDBサーバーを持たないため運用コストはほぼゼロで、ガントチャートのデータ量ならIndexedDBで十分収まります。保存はDexieでIndexedDBをラップし、編集のたびに自動保存する構成にしています。
実装ポイント1: Excel風グリッド入力
左側のグリッドはExcelと同じ操作感を目指しました。
- 矢印キー / Tab / Enter でセル移動
- 文字を入力するとそのまま編集開始、F2で編集、Escでキャンセル
- Delete / Backspace でセルクリア
- Ctrl+Z / Ctrl+Shift+Z でUndo / Redo
日付セルは編集モードに入るとカレンダー入力に切り替わり、キーボード入力・カレンダーピッカーのどちらでも入力できます。
行の右クリックメニューから、行の挿入・削除・子タスク化・階層上げができます。「子タスクにする」で親子構造にすると(深さ制限なし)、親タスクの期間・進捗は子タスクから自動集計されるため、親の日付を手動で直す必要がありません。
実装ポイント2: 遅れの自動検知
ガントチャート側は、バーのドラッグで期間移動、両端ドラッグで開始日・終了日の変更ができます。進捗%はバー内の濃色帯で表示します。
中心的な機能が遅れの自動検知です。判定ロジックはシンプルで、
今日までに進んでいるべき割合 = (今日 - 開始日) / (終了日 - 開始日)
遅延タスク = 今日までに進んでいるべき割合 > 実際の進捗
を満たすタスクを自動で赤色表示します。進捗の手入力とスケジュールを見比べなくても、チャートを一目見るだけで遅れているタスクが分かります。今日線の表示・土日のグレー表示も合わせて実装しました。
実装ポイント3: Excelのセル塗りつぶしで出力する
Excel出力はExcelJSで実装しています。グラフ描画ライブラリでガントチャートを画像化して貼り付けるのではなく、Excelのセルを塗りつぶしてバーを再現する方式にしました。この方式のメリットは、出力後のExcel上でも列幅・色をそのまま編集できることです。遅れタスクの赤表示・土日のグレー表示・ウィンドウ枠固定も出力に含めています。「Excelで提出してほしい」と言われても対応できます。
このほか、全データをJSONで書き出し・復元できるバックアップ機能や、複数プロジェクトの作成・切替にも対応しています。
データの保存場所について
データはアプリを開いたブラウザの中(IndexedDB)に保存します。サーバーもアカウントも不要な反面、別のブラウザ・別のPCとはデータが共有されず、ブラウザのサイトデータ削除で消えます。永続化したいデータはバックアップ機能でJSONに書き出しておく必要があります。
Cloudflare Workersでの公開
ビルド成果物が静的ファイルのみなので、Cloudflare Workersの静的アセット配信でホスティングしています。
- 無料枠で運用できる
-
wrangler.jsoncを置いて、mainブランチへのpushで自動デプロイ -
*.workers.devのサブドメインがそのまま使えるため、ドメイン取得も不要
個人開発の無料公開先として、ほぼ設定なしで済むのは楽でした。
作った経緯(補足)
もともとExcelマクロ製のガントチャートツールを使っていましたが、Excel環境が必須なことや、マクロ有効ブックゆえの配布・セキュリティポリシーの壁がありました。かといって既存のWebガントツールは、アカウント登録必須・無料プランの機能制限・マウス操作中心の入力(Excelほど速く打てない)といったハードルがあり、「Excelの入力速度」と「Webの手軽さ」を両立したものが見つかりませんでした。それなら作ろう、というのが開発の経緯です。
おわりに
登録不要・無料で使えるので、ぜひ触ってみてください。
🌐 ganttline.csri16001.workers.dev
フィードバックや「こんな機能が欲しい」があれば、この記事のコメントやX(@nekomaru_kakeru)で教えてください。