| name | context-to-gantt |
| description | 議事録・要件定義・プロジェクト記述などあらゆるコンテキストからタスク・マイルストーン・期間を抽出し、Kibo UI スタイルのガントチャートを単一の自己完結型 HTML ファイルとして生成する。非構造化プロジェクトコンテキストをビジュアルタイムラインに変換したいとき、議事録からスケジュール図を生成したいとき、ビルド不要で共有できるガントチャートを作りたいときに使う。リアルタイム共同編集・DB 永続化が必要なタスク・ユーザー認証付きインタラクティブ PJ 管理ツールには使わない。 |
context-to-gantt
コンテキスト（議事録・要件定義・タスクリスト）から Kibo UI スタイルのガントチャートを
単一の自己完結型 HTML ファイルとして生成する。
前提
- 出力は 1ファイル の HTML。ビルド不要、ブラウザで直接開ける。
- デザインは Kibo UI Gantt の視覚スタイルに準拠
（shadcn/ui CSS 変数・カラーパレット・バーデザイン）。
- Tailwind CSS は CDN 経由（
cdn.tailwindcss.com）。React ビルドは不要。
- タイムラインは長い変化なし期間を斜線の「省略区間」として折りたたむ圧縮表示を標準とする。開始・終了・マイルストーン・短期イベントなどの変化点周辺だけを残し、長期継続タスクは省略区間をまたいで分割表示する。
Step 1 — コンテキストの解析
与えられたテキストから以下を抽出する。
| 抽出項目 | 説明 |
|---|
| プロジェクト名 | チャートタイトルに使用 |
| タスクグループ / フェーズ | サイドバーの階層（例: "設計", "開発", "テスト"） |
| タスク名 | 各バーのラベル |
| 開始日・終了日 | YYYY-MM-DD 形式。不明な場合は前後のタスクから推定する |
| 担当者 | バーのアバター（なければタスク名の頭文字を使用） |
| マイルストーン | 垂直マーカー（オプション） |
日付が明示されていない場合の推定ルール：
- テキストに「n週間」「n ヶ月」などの相対表現がある → 文脈から絶対日付を計算する。
- 相対情報しかない → 今日（
exportedAt）を基準に割り当てる。
- 順序関係（A → B → C）が分かる場合 → 前タスクの終了日に 1 日加算して開始日とする。
Step 2 — Gantt JSON の構築
抽出結果を以下の JSON スキーマに従って組み立てる。
詳細な型定義は references/gantt-data-schema.json を参照すること。
{
"title": "プロジェクト名",
"exportedAt": "YYYY-MM-DD",
"groups": [
{
"id": "group-1",
"name": "フェーズ名",
"tasks": [
{
"id": "task-1",
"name": "タスク名",
"startDate": "YYYY-MM-DD",
"endDate": "YYYY-MM-DD",
"assignee": "山田 太",
"color": "blue",
"status": "in-progress"
}
]
}
],
"markers": [
{ "date": "YYYY-MM-DD", "label": "リリース" }
]
}
color の選択基準：
| color | 用途 |
|---|
| blue | 開発・エンジニアリング系タスク |
| green | 完了・QA・テスト |
| orange | 設計・企画・マイルストーン系 |
| purple | ビジネス・マーケティング |
| red | ブロッカー・緊急 |
| gray | その他・保留 |
グループ内のタスクで色が指定されなければ、グループ単位で同じ色に統一する。
Step 3 — データのバリデーション
JSON を tmp/gantt-output.json として保存し、バリデーションスクリプトを実行する。
python3 skills/context-to-gantt/scripts/extract-tasks.py \
--input tmp/gantt-output.json
エラーが出た場合は stderr の内容を読んで修正し、再実行する。
SUCCESS: が表示されるまで繰り返す。
Step 4 — HTML の生成
assets/gantt-template.html を読み込み、以下の 2 箇所を置換して完成させる。
テンプレートには圧縮タイムラインの描画ロジックが含まれる。長い変化なし期間は自動で斜線の「省略区間」として折りたたまれるため、HTML 生成時に追加実装しない。長期間のタスクを短く見せるために日付を改変してはならない。実データの日付を保持し、表示側で省略する。
| プレースホルダー | 置換内容 |
|---|
{{TITLE}} | data.title の値 |
{{GANTT_JSON}} | Step 2 で作成した JSON 全体（JavaScript リテラルとして埋め込む） |
出力ファイル名は {プロジェクト名のスネークケース}-gantt.html とする。
例: web_redesign-gantt.html
置換例
const GANTT_DATA = {{GANTT_JSON}};
const GANTT_DATA = {
"title": "Web リニューアル",
"exportedAt": "2026-06-03",
"groups": [...]
};
Step 5 — 動作確認
生成した HTML ファイルのパスをユーザーに伝える。
ブラウザで開くとガントチャートが表示される。
動作確認では、生成 HTML に {{TITLE}} と {{GANTT_JSON}} が残っていないこと、timeline-gap と buildCompactSegments が含まれていることを確認する。必要なら JavaScript 部分を抽出して node --check で構文確認する。
✓ ガントチャートを生成しました: {出力ファイルパス}
- グループ数: N
- タスク数: M
- 期間: YYYY-MM-DD 〜 YYYY-MM-DD
ブラウザで開いてください。
エラーハンドリング
| エラー | 対処 |
|---|
| 日付が一切抽出できない | ユーザーに「開始日の目安を教えてください」と確認する |
endDate < startDate | extract-tasks.py の stderr を読み、日付を修正して再実行 |
| タスクが 0 件 | コンテキストを再解析し、Action Items / TODO / マイルストーンの表現を探す |
| HTML ファイルへの書き込み失敗 | tmp/ ディレクトリの存在を確認し、存在しなければ作成してから再試行 |
| ガントチャートが横に長過ぎる | データの日付を短縮せず、assets/gantt-template.html の圧縮表示ロジックが生成 HTML に入っているか確認する |
| 省略区間が不自然 | マイルストーンや短期イベントの日付が不足していないか確認し、変化点を markers または短期タスクとして追加する |
