Dendron Task Kanban

VSCode拡張機能 + Chrome拡張機能 - Dendronノートとタスク管理の統合システム

Dendronノートのタスクをカンバンボードで可視化し、Slack/Google Docsから直接タスクを取り込める統合タスク管理システムです。

クイックスタート

インストール（.vsixファイル配布版）

1. 配布された dendron-task-kanban-0.1.0.vsix ファイルを取得

2. コマンドラインでインストール（推奨）

   code --install-extension dendron-task-kanban-0.1.0.vsix
   

3. または、VS Code GUIでインストール

   • VS Codeの拡張機能パネル（Cmd+Shift+X または Ctrl+Shift+X）を開く
   • 右上の「...」メニュー → 「VSIXからのインストール...」を選択
   • .vsixファイルを選択

4. VS Code を再起動

詳細なインストール手順は INSTALL.md をご覧ください。

概要

このプロジェクトは2つの拡張機能で構成されています：

1. VSCode拡張機能: カンバンボード、タスク管理、プロファイル管理
2. Chrome拡張機能（オプション）: Slack/Google Docsからタスク取り込み
3. Integration Server（Chrome拡張使用時のみ）: 両拡張機能をシームレスに統合（ポート3100）

---

主要機能

VSCode拡張機能

カンバンボード

• .kanbanファイルで同名の.mdファイルをカンバンボード表示
• 3カラム: 未着手 / 進行中 / 完了
• ドラッグ&ドロップ: タスクをカラム間で移動してステータス変更
• 双方向同期: カンバンでの変更がMarkdownファイルに自動反映
• タスクリンク: [[tasks/task.種別.タスク名]]形式でタスクファイルにリンク、クリックでファイルを開く
• タスクファイル作成: リンクがないタスクからその場でタスクファイルを作成可能
• Claude Code統合: タスクカードから直接Claude CLIを実行可能

アイテムボックス（サイドバー）

• タスク一覧: カンバンファイル（tasks.kanbanなど）へのクイックアクセス
• プロファイル管理:
  • 人物（profile.person.*.md）
  • プロジェクト（profile.project.*.md）
• アクション管理: Claude Codeの.claude/commands/配下のスラッシュコマンドを一覧表示・実行
• ドキュメント管理: documents/docs.*.mdファイルをカード形式で管理
• コンテキスト管理: context/context.*.md（議事録・メッセージ）をカード形式で管理
• 検索機能: 全アイテムをリアルタイムでフィルタリング検索（Cmd+F/Ctrl+F）
• ターミナル統合: ファイルパスやコマンド名をターミナルに挿入

クイックタスク作成

• コマンドパレットから簡単にタスク作成
• 自動的にtasks.mdに追加
• タスクファイル（task.未定.<タスク名>.md）も同時生成

拡張機能

• Gemini AI図表生成: Markdownから図表を自動生成
• Google Docs連携: docs.*mdファイルをGoogle Docsにアップロード
• Integration Server: Chrome拡張機能と連携するバックエンドサーバー

Chrome拡張機能

Slack連携機能

• Slackの「後で」（Saved items）ページから期日付きメッセージを自動抽出
• メッセージ本文、送信者名、チャンネル名、メッセージリンクを含むタスクを生成
• タスク化ボタン: Slackメッセージにホバー時に表示される「タスク化」ボタンで、前3つのメッセージをコンテキストとしてタスク化
• Gemini APIによるタスク名自動生成
• tasks.mdの「# タスク」セクションに自動追加

Google Docs連携機能

• Google DocsのURLを入力してMarkdown形式でインポート
• タブ機能に対応（複数タブのドキュメントから特定タブのみ抽出可能）
• HTML→Markdown変換により、見出し・リスト・リンク・テーブルなどを保持
• Dendronノートとして自動保存（docs.output.[タイトル].md形式）

テキスト選択タスク化機能

• 全ページでテキストを選択すると「タスクに追加」ボタンが表示
• 選択したテキストをタスクとして登録可能

---

インストール（開発者向け）

ソースコードからビルドする場合

必要環境

• Node.js（v16以上推奨）
• npm
• Visual Studio Code

インストール手順

# リポジトリをクローン
git clone <repository-url>
cd dendron-task-kanban

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

# ビルド（Extension + Webview）
npm run build

# パッケージ化してVSCodeにインストール
npx vsce package --allow-missing-repository
code --install-extension dendron-task-kanban-0.1.0.vsix

.vsixファイルから直接インストールする場合

詳細は INSTALL.md をご覧ください。

初期セットアップ

1. Dendronワークスペースを開く

2. tasks.mdファイルを作成

   # タスク
   
   - [ ] タスク1
   - [ ] タスク2
   

3. tasks.kanbanファイルを作成

   {
     "tasks": [],
     "inProgressTaskIds": []
   }
   

4. .kanbanファイルを開く

   • 自動的にカンバンボードが表示されます

オプション設定

• Gemini APIキー: 図表生成機能を使用する場合
  • VSCode設定（Settings）→ Gemini API Key を入力
• Google OAuth認証情報: Google Docs連携を使用する場合
  • Client IDとSecretを設定

2. Chrome拡張機能のインストール

インストール手順

1. VSCodeでIntegration Serverを起動

   • サイドバーの「BizAgent カンバン」ビューを開く
   • 上部の「Integration Serverを起動」ボタン（再生アイコン）をクリック
   • または、コマンドパレット（Cmd+Shift+P）で「BizAgent: Integration Serverを起動」を実行
   • ポート3100でサーバーが起動します

2. Chrome拡張機能を読み込む

   • Chromeを開く
   • アドレスバーに chrome://extensions/ と入力
   • 右上の「デベロッパーモード」を有効化
   • 「パッケージ化されていない拡張機能を読み込む」をクリック
   • chrome-extension/ ディレクトリを選択

---

使い方

カンバンボードの使い方

1. .kanbanファイルを開く

   • 同名の.mdファイルからタスクを自動読み込み

2. タスクを移動

   • ドラッグ&ドロップでカラム間を移動
   • 未着手 → 完了: .mdファイルのチェックボックスが[x]に変更
   • 完了 → 未着手: .mdファイルのチェックボックスが[ ]に変更
   • 進行中: .kanbanファイルのinProgressTaskIdsに保存

3. タスクファイルを開く

   • [[tasks/task.種別.タスク名]]形式のリンクがあるタスクをクリック
   • 対応するタスクファイルが開きます

4. タスクファイルを作成

   • リンクがないタスクカードの「Create Task File」ボタンをクリック
   • その場でタスクファイルを作成できます

Slackからタスクを追加

1. VSCodeでIntegration Serverを起動

2. Slackの「後で」ページを開く

3. Chrome拡張機能のアイコンをクリック

4. 「Slack」タブを選択

5. 「メッセージを抽出」ボタンをクリック

   • 期日付きメッセージが一覧表示される

6. 不要なタスクのチェックを外す

7. 「Dendronに送信」ボタンをクリック

   • tasks.mdに自動追加される

Slackメッセージをタスク化（Gemini使用）

1. Slackのメッセージにホバー

2. 「タスク化」ボタンをクリック

   • 前3つのメッセージがコンテキストとして送信される

3. Gemini APIでタスク名が生成される

   • task.slack.[生成されたタスク名].mdが作成される
   • tasks.mdに- [ ] [[tasks/task.slack.[名前]]]として追加される

Google Docsからインポート

1. Chrome拡張機能のアイコンをクリック

2. 「Google Docs」タブを選択

3. Google DocsのURLを貼り付け

4. 「Markdownとしてインポート」ボタンをクリック

   • docs.output.[ドキュメント名].mdとして保存される

テキスト選択してタスク化

1. 任意のWebページでテキストを選択

2. 「タスクに追加」ボタンが表示される

3. クリック

   • task.web.[テキスト].mdとして保存される

---

ファイル構成

基本構成

project/
├── tasks.md      # タスク本体（Markdown）
└── tasks.kanban  # カンバン状態（JSON）

.kanbanファイル形式

{
  "tasks": [],
  "inProgressTaskIds": ["task-id-1", "task-id-2"]
}

• inProgressTaskIds: 進行中のタスクID配列

.mdファイル形式

# タスク

- [ ] [[tasks/task.思考.技術選定]]
- [x] [[tasks/task.連絡.松本さんご連絡]]
- [ ] 通常のタスク

タスクファイル規約

タスクファイルは以下の命名規則に従います：

task.[種別].[タスク名].md

種別:

• 連絡: 連絡、時間調整、日程調整
• 調査: ヒアリング、調査、アンケート
• 思考: 選定、整理、戦略、検討
• 実装: 作成、開発、プロト、構築
• 相談: 相談、可否、判断、レビュー

例:

• task.思考.技術選定.md
• task.連絡.松本さんご連絡.md
• task.調査.read.aiユーザーヒアリング.md

プロファイルファイル規約

profile.person.[人名].md
profile.project.[プロジェクト名].md

---

開発者向け情報

技術スタック

VSCode拡張機能

• Extension側（Node.js環境）:

  • 言語: TypeScript
  • ビルドツール: esbuild
  • 出力形式: CommonJS
  • 主要フレームワーク: VSCode Extension API

• Webview側（ブラウザ環境）:

  • 言語: TypeScript, React (TSX)
  • ビルドツール: Vite
  • 出力形式: ESM
  • UIライブラリ: React 18
  • ドラッグ&ドロップ: @dnd-kit/core

• 主要ライブラリ:

  • gray-matter: フロントマター解析
  • googleapis: Google APIs連携
  • @google/generative-ai: Gemini AI統合
  • express, cors: Integration Server
  • turndown: HTMLからMarkdownへの変換

Chrome拡張機能

• Manifest V3（最新のChrome Extension仕様）
• Content Scripts（Slack、Google Docs、全ページ）
• Service Worker（background.js）

Integration Server

• Express.js（HTTP サーバー）
• CORS（クロスオリジン通信）
• Gemini API（タスク名生成）
• Google Docs API（ドキュメント取得）
• Turndown（HTML→Markdown変換）

ビルドシステム

二重ビルド構成: Extension（esbuild）とWebview（Vite）を別々にビルド

# 全体のビルド（Extension + Webview）
npm run build

# Extension部分のみ（esbuild、CommonJS）
npm run build:extension

# Webview部分のみ（Vite、ESM）
npm run build:webview

# 開発モード（watch）
npm run watch

デバッグ方法

VSCode拡張機能

1. VSCodeでF5キーを押す
2. 新しいExtension Development Hostウィンドウが開く
3. .kanbanファイルを開いてテスト

Chrome拡張機能

1. chrome://extensions/を開く
2. デベロッパーモードを有効化
3. 拡張機能を読み込む
4. DevToolsでコンソールを確認

パッケージ化とインストール

# パッケージ化してVSCodeにインストール
npx vsce package --allow-missing-repository && code --install-extension dendron-task-kanban-0.1.0.vsix

プロジェクト構成

dendron-task-kanban/
├── src/
│   ├── extension/          # Extension側（Node.js）
│   │   ├── KanbanEditorProvider.ts
│   │   ├── KanbanTreeProvider.ts
│   │   ├── ProfileCardProvider.ts
│   │   ├── quickTaskCreator.ts
│   │   └── integrationServer.ts
│   └── webview/           # Webview側（ブラウザ）
│       ├── components/
│       │   └── Card.tsx
│       ├── styles/
│       └── main.tsx
├── chrome-extension/ # Chrome拡張機能（Biz Agent Importer）
│   ├── manifest.json
│   ├── background.js
│   ├── content.js
│   ├── google-docs-content.js
│   ├── text-selection.js
│   ├── popup.html
│   └── popup.js
├── .claude/               # Claude Code設定
│   ├── CLAUDE.md
│   └── commands/
├── tasks.md
├── tasks.kanban
└── package.json

---

Integration Serverについて

Integration Serverは、VSCode拡張機能とChrome拡張機能を統合するHTTPサーバー（ポート3100）です。

主要なエンドポイント

• POST /add-tasks: Slackタスクをtasks.mdに追加
• POST /create-task: Slackメッセージからタスクを作成（Gemini APIでタスク名生成）
• POST /import-google-docs: Google DocsをMarkdown形式でインポート
• GET /oauth2callback: Google OAuth認証コールバック
• GET /start-auth: Google認証フローを開始
• GET /health: ヘルスチェック

連携フロー

Chrome拡張機能
    ↓ HTTP POST
Integration Server（VSCode拡張機能内、ポート3100）
    ↓
1. tasks.mdへタスク追加
2. 個別タスクノート作成（task.[種別].[タスク名].md）
3. Google Docs連携（OAuth認証、Markdown変換）
4. Gemini APIでタスク名生成

---

ライセンス

ISC

作者

Dendron Task Management Team