Excelライクなガントチャート

English | 日本語

ブラウザだけで動く、インストール不要のガントチャートアプリです。Excelのような表操作と、マウスでの直感的なチャート編集ができます。

単に予定を並べるだけでなく、依存関係（「前のタスクの3日後に開始」など）を土日・祝日を避けて自動で再計算します。休日の定義も自由に変えられ、行ごとに休日回避のON/OFFも切り替えられます。数百〜1000行規模でも軽快に動くので、Excelでは重くて諦めた大きさの計画も扱えます。

自分で使いたくて作ったものですが、同じ悩みを持つ方の役に立てばと思い公開しています。

https://kloir-z.github.io/ganttapp-local/

（Chrome / Edge / Firefox で開いてください。詳しくは動作環境を参照）

プロジェクトデータは一切外部に送信されません。 アカウント登録もテレメトリもなく、データの保存先はあなた自身がダウンロードするファイル（ZIP / HTML）だけです。

これは「約束」ではなく検証できる事実です：

• 配信される HTML に埋め込まれた Content-Security-Policy に外部ドメインが一つも含まれず、外部へのデータ送信をブラウザ自身が遮断します
• DevTools の Network タブを開いたまま操作しても、ロード後の外部通信はゼロです
• 機内モード・オフライン（file://）でも全機能が動きます
• デプロイは GitHub Actions で行われ、「配信されているコード＝このリポジトリのコード」をビルドログで確認できます

検証手順の詳細・発生する通信の完全なリスト・脆弱性の報告窓口は SECURITY.md を参照してください。職場の規定が厳しい場合は、ソースから自前ビルド（npm run build:singlefile）して使うこともできます。

• 表を編集するとチャートが即座に反映
• チャートをドラッグすると表も自動更新
• ダブルクリックでチャート作成、ドラッグで移動・調整、右クリックで削除

• セル編集、行の挿入・削除・コピー
• ドラッグによる行移動
• 階層構造でタスクをグループ化

• after,-x,n: x行前の完了後、n日後に開始
  • 例: after,-1,3 → 1行前の3日後に開始日を設定
• sameas,-x: x行前と同時開始
  • 例: sameas,-1 → 1行前の開始日に合わせる
• 依存関係行のいずれかを変更するとリアルタイム連動

• 日付変更時に土日祝を自動回避（行単位で有効無効設定可能）
• カスタマイズ可能な休日設定（週末の曜日・色、祝日の色、独自休日）
• ※デフォルトで2022～2029年の日本の祝日が設定済み

• チャートの各日の幅を0.5px単位で調整可能 - 長期間プロジェクトの俯瞰表示に対応
• 最大1000行のタスクを軽快に表示

• メモ帳（ツリー型）: 階層構造で整理できるリッチテキスト（Quill）メモ
• 行メモ: ガントチャートの各行にメモを添付。行にカーソルを当てると現れる付箋アイコンから、その場のポップオーバーで編集（ドラッグ移動・リサイズ可）。メモ帳の「タスクメモ」一覧からも確認・編集できます

• 取り消し・やり直し: 最大30回の操作履歴を保持
• 多言語対応: 日本語・英語に対応
• 日付形式設定: yyyy/mm/dd、mm/dd/yyyy、dd/mm/yyyy形式から選択可能

1. 「ファイル」→「新規作成」でプロジェクトを開始
2. WBS表でタスクを追加・編集
3. 依存関係列でタスク間の関係を設定
4. ガントチャートで期間を調整

• 保存: 「ファイル」→「プロジェクトZIPファイルをダウンロード」でZIPファイルに保存（プロジェクト本体＋メモを含む）
• 読み込み: 「ファイル」→「プロジェクトZIPファイルをアップロード」で保存済みファイルを開く
• 再編集できる「本物の」保存形式はこのZIPだけです。下記のエクスポート（PDF / Excel / 単体HTML）は配布・閲覧用の出力で、PDF・Excelからアプリに読み戻すことはできません。

「ファイル」→「エクスポート」のサブメニューから、用途に応じて3つの形式で書き出せます。

• PDF: チャート全体を画像としてラスタライズしてPDF化します（仮想化を無効にして全行・全期間を1枚に収めます）。印刷や、編集不可の共有資料に向いています。
• Excel（表示専用）: 画面の見た目を .xlsx として再現します。アプリと同等の機能があるわけではなく、Excel上で「表示するだけ」のものです。具体的には:
  • 左側にWBS表（表示中の列）、右側に1日＝1列のチャートを並べます。画面の No 列は出力せず（Excelの行番号で代用）、代わりに 1 / 1-1 / 1-1-1 のような機械的な階層WBS番号の列を常に先頭に出力します。タスク名はWBSの階層の深さに応じてインデント表示されます。
  • 計画／実績バー、土日祝の塗り、セパレータ行の帯、日々の薄い縦罫線・月初の濃い罫線などの「見た目」を再現します。
  • ただし依存関係の自動計算・休日回避・ドラッグ編集といった動的な機能は一切ありません。セルの色は静的に焼き込まれており、日付を動かしてもバーは動きません。あくまで「Excelで開いて眺める／印刷する」ためのスナップショットです。
• 単体HTML: アプリ本体と現在のデータを1ファイルに埋め込んだHTMLを書き出します。
  • 良い点: 受け取った人がダブルクリックで開くだけで、完成したガントチャートがそのまま表示されます。サーバー不要で、スクロール・編集・メモ閲覧まで動く（＝PDF/Excelと違い動的機能が生きている）のが特長です。社内の人に「アプリをインストールさせずに触ってもらう」用途に向いています。
  • 注意点:
    • 開いた先で編集してもファイル自身には保存されません。変更を残すには、改めてZIPまたは単体HTMLとして書き出してください。
    • データがHTML内に平文（JSON）で埋め込まれるため、配布時は中身が読めることに注意してください。
  • 補足（開発者向け）: お試しページや単一HTMLビルド（build:singlefile）から書き出したファイルはそのまま file:// で開けます。唯一、開発サーバー npm run dev から書き出したファイルだけは、JSを外部モジュール（type="module"）として読み込む都合上 file:// では動きません。通常の利用では気にする必要はありません。

• メモ帳（ツリー型）:
  1. 「メモ」ボタンでメモ画面を開く
  2. 左側のツリーで項目を選択
  3. 右側のエディターでメモを記録
• 行メモ:
  1. ガントチャートの行にカーソルを当てると左側に付箋アイコンが表示される
  2. クリックするとポップオーバーが開き、その行のメモをリッチテキストで記録（ヘッダーをドラッグで移動、右下でリサイズ）
  3. メモ帳の「タスクメモ」一覧からも、行番号・タスク名つきで一覧・編集できる

Excelで条件付き書式と数式を組み合わせてガントチャートを作成していましたが、少し行数が増える（300行以上など）と更新が煩雑で、「間違ったExcelの使い方」の代表例のような感じがしてもやもやしていました。動作も重く、俯瞰性も悪い。

2023年にChatGPTが登場し、コード生成能力の高さを知って「ガントチャートアプリを作れるのでは？」と思ったのがきっかけで制作を始めました。

PCのモダンブラウザ（Chrome / Edge / Firefox）で動作します。

• Safari では未確認です
• スマホなどモバイル端末では使えません（対応予定なし）

前提条件:

• Node.js 16以上
• npm または yarn

# リポジトリをクローン
git clone https://github.com/kloir-z/ganttapp-local.git
cd ganttapp-local

# 依存関係をインストール
npm install

# 開発サーバーを起動（http://localhost:5173）
npm run dev

npm run build      # 本番用ビルド (dist/フォルダに出力)

npm run build:singlefile   # 全アセットを1ファイルに埋め込み (dist-single/index.html)

• JS / CSS / 祝日データまで dist-single/index.html に全てインライン化されます
• この1ファイルだけを配布すれば、サーバー不要で ダブルクリック（file://） で開けます
• ルーティングは HashRouter、祝日はバンドル埋め込みで動作します
• 制限: サンプルプロジェクトは file:// では ZIP を読み込めないためウェルカム画面に表示されません（手動でのインポート／エクスポートは可能）

• フロントエンド: React 18 + TypeScript
• 状態管理: Redux Toolkit
• ビルドツール: Vite
• UIライブラリ: Material-UI, Ant Design
• リッチテキスト: Quill Editor
• ファイル処理: JSZip
• エクスポート: ExcelJS（Excel）、jsPDF + html2canvas（PDF）、自前のDOMスナップショット（単体HTML）
• テスト: Jest + React Testing Library

MIT License - 詳細は LICENSE ファイルを参照