Spec Workflow MCP

# インターフェースガイド このガイドは、Spec Workflow MCPの2つの主要インターフェースについて説明します：WebダッシュボードとVSCode拡張機能。 ## 概要 Spec Workflow MCPは2つのインターフェースを提供します： 1. **Webダッシュボード** - CLIユーザー向けのブラウザベースインターフェース 2. **VSCode拡張機能** - VSCodeユーザー向けの統合IDE体験 両方のインターフェースは、プラットフォーム固有の最適化を備えた同じコア機能を提供します。 ## Webダッシュボード ### 概要 Webダッシュボードは、仕様、タスク、承認ワークフローへのビジュアルアクセスを提供するリアルタイムWebアプリケーションです。 ### ダッシュボードの起動 #### スタンドアロンダッシュボード ```bash # エフェメラルポートを使用 npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --dashboard # カスタムポート npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --dashboard --port 3000 ``` #### MCPサーバーと一緒に ```bash # MCPと自動起動 npx -y @pimzino/spec-workflow-mcp@latest /path/to/project --AutoStartDashboard ``` ### ダッシュボード機能 #### メインビュー ダッシュボードホームには以下が表示されます： - **プロジェクト概要** - アクティブな仕様数 - 合計タスク数 - 完了率 - 最近のアクティビティ - **仕様カード** - 仕様名とステータス - 進捗バー - ドキュメントインジケーター - クイックアクション #### 仕様詳細ビュー 仕様をクリックすると表示されます： - **ドキュメントタブ** - 要件 - 設計 - タスク - **ドキュメントコンテンツ** - レンダリングされたMarkdown - シンタックスハイライト - 目次 - **承認アクション** - 承認ボタン - 変更をリクエスト - 却下オプション - コメントフィールド #### タスク管理 タスクビューは以下を提供します： - **階層的タスクリスト** - 番号付きタスク（1.0、1.1、1.1.1） - ステータスインジケーター - 進捗追跡 - **タスクアクション** - プロンプトをコピーボタン - 完了をマーク - メモを追加 - 依存関係を表示 - **進捗の可視化** - 全体の進捗バー - セクション進捗 - 時間見積もり #### ステアリングドキュメント プロジェクトガイダンスにアクセス： - **プロダクトステアリング** - ビジョンと目標 - ユーザーペルソナ - 成功メトリクス - **技術ステアリング** - アーキテクチャ決定 - 技術選択 - パフォーマンス目標 - **構造ステアリング** - ファイル構成 - 命名規則 - モジュール境界 ### ダッシュボードナビゲーション #### キーボードショートカット | ショートカット | アクション | |----------|--------| | `Alt + S` | 仕様リストにフォーカス | | `Alt + T` | タスクを表示 | | `Alt + R` | 要件を表示 | | `Alt + D` | 設計を表示 | | `Alt + A` | 承認ダイアログを開く | | `Esc` | ダイアログを閉じる | #### URL構造 特定のビューへの直接リンク： - `/` - ホームダッシュボード - `/spec/{name}` - 特定の仕様 - `/spec/{name}/requirements` - 要件ドキュメント - `/spec/{name}/design` - 設計ドキュメント - `/spec/{name}/tasks` - タスクリスト - `/steering/{type}` - ステアリングドキュメント ### リアルタイム更新 ダッシュボードはライブ更新にWebSocketを使用します： - **自動リフレッシュ** - 新しい仕様が即座に表示 - タスクステータス更新 - 進捗変更 - 承認通知 - **接続ステータス** - 緑：接続済み - 黄：再接続中 - 赤：切断 - **通知システム** - 承認リクエスト - タスク完了 - エラーアラート - 成功メッセージ ### ダッシュボードカスタマイズ #### テーマ設定 ライトモードとダークモードを切り替え： - ヘッダーのテーマアイコンをクリック - セッション間で保持 - システム設定を尊重 #### 言語選択 インターフェース言語を変更： 1. 設定アイコンをクリック 2. ドロップダウンから言語を選択 3. インターフェースが即座に更新 サポートされている言語： - English（en） - Japanese（ja） - Chinese（zh） - Spanish（es） - Portuguese（pt） - German（de） - French（fr） - Russian（ru） - Italian（it） - Korean（ko） - Arabic（ar） #### 表示オプション ビュー設定をカスタマイズ： - コンパクト/展開された仕様カード - 完了したタスクを表示/非表示 - ドキュメントフォントサイズ - コード構文テーマ ## VSCode拡張機能 ### インストール VSCode Marketplaceからインストール： 1. VSCode拡張機能を開く（Ctrl+Shift+X） 2. 「Spec Workflow MCP」を検索 3. インストールをクリック 4. VSCodeをリロード またはコマンドライン経由で： ```bash code --install-extension Pimzino.spec-workflow-mcp ``` ### 拡張機能の機能 #### サイドバーパネル アクティビティバーアイコン経由でアクセス： - **仕様エクスプローラー** - すべての仕様のツリービュー - 展開してドキュメントを表示 - ステータスインジケーター - コンテキストメニューアクション - **タスクリスト** - フィルタ可能なタスクビュー - 進捗追跡 - クイックアクション - 検索機能 - **アーカイブビュー** - 完了した仕様 - 履歴データ - 復元オプション - 一括操作 #### ドキュメントビューアー エディタでドキュメントを開く： - **シンタックスハイライト** - Markdownレンダリング - コードブロック - タスクチェックボックス - リンクと参照 - **ドキュメントアクション** - その場で編集 - プレビューモード - 分割ビュー - エクスポートオプション #### 統合承認 以下のためのネイティブVSCodeダイアログ： - **承認リクエスト** - ポップアップ通知 - インラインコメント - 迅速な承認/却下 - 詳細なフィードバック - **改訂ワークフロー** - 変更を追跡 - コメントスレッド - バージョン比較 - 承認履歴 #### コンテキストメニューアクション エディタでの右クリックアクション： - **仕様ファイルで** - ドキュメントを承認 - 変更をリクエスト - ダッシュボードで表示 - 仕様パスをコピー - **タスクアイテムで** - 完了をマーク - プロンプトをコピー - サブタスクを追加 - 詳細を表示 ### 拡張機能設定 VSCode設定で設定： ```json { "specWorkflow.language": "en", "specWorkflow.notifications.enabled": true, "specWorkflow.notifications.sound": true, "specWorkflow.notifications.volume": 0.5, "specWorkflow.archive.showInExplorer": true, "specWorkflow.tasks.autoRefresh": true, "specWorkflow.tasks.refreshInterval": 5000, "specWorkflow.theme.followVSCode": true } ``` #### 設定の説明 | 設定 | 説明 | デフォルト | |---------|-------------|---------| | `language` | インターフェース言語 | "en" | | `notifications.enabled` | 通知を表示 | true | | `notifications.sound` | サウンドアラートを再生 | true | | `notifications.volume` | サウンドボリューム（0-1） | 0.5 | | `archive.showInExplorer` | アーカイブされた仕様を表示 | true | | `tasks.autoRefresh` | タスクを自動リフレッシュ | true | | `tasks.refreshInterval` | リフレッシュ間隔（ms） | 5000 | | `theme.followVSCode` | VSCodeテーマに合わせる | true | ### 拡張機能コマンド コマンドパレットで利用可能（Ctrl+Shift+P）： | コマンド | 説明 | |---------|-------------| | `Spec Workflow: Create Spec` | 新しい仕様を開始 | | `Spec Workflow: List Specs` | すべての仕様を表示 | | `Spec Workflow: View Dashboard` | Webダッシュボードを開く | | `Spec Workflow: Archive Spec` | アーカイブに移動 | | `Spec Workflow: Restore Spec` | アーカイブから復元 | | `Spec Workflow: Refresh` | 仕様データをリロード | | `Spec Workflow: Show Steering` | ステアリングドキュメントを表示 | | `Spec Workflow: Export Spec` | Markdownにエクスポート | ### サウンド通知 拡張機能には以下のオーディオアラートが含まれています： - **承認リクエスト** - 穏やかなチャイム - **タスク完了** - 成功サウンド - **エラー** - アラートトーン - **更新** - ソフト通知 設定で設定： ```json { "specWorkflow.notifications.sound": true, "specWorkflow.notifications.volume": 0.3 } ``` ## 機能比較 | 機能 | Webダッシュボード | VSCode拡張機能 | |---------|--------------|------------------| | 仕様を表示 | ✅ | ✅ | | タスクを管理 | ✅ | ✅ | | 承認 | ✅ | ✅ | | リアルタイム更新 | ✅ | ✅ | | アーカイブシステム | ❌ | ✅ | | サウンド通知 | ❌ | ✅ | | エディタ統合 | ❌ | ✅ | | コンテキストメニュー | ❌ | ✅ | | キーボードショートカット | 限定的 | 完全 | | マルチプロジェクト | 手動 | 自動 | | オフラインアクセス | ❌ | ✅ | | エクスポートオプション | 基本 | 高度 | ## 適切なインターフェースの選択 ### Webダッシュボードを使用する場合： - CLIベースのAIツールを使用 - 複数のIDEで作業 - ブラウザベースのアクセスが必要 - チームメンバーと共有 - プロジェクトの迅速な概要が必要 ### VSCode拡張機能を使用する場合： - 主なIDEがVSCode - 統合された体験が必要 - エディタ機能が必要 - ネイティブダイアログを好む - サウンド通知が必要 ## インターフェースの同期 両方のインターフェースは同じデータを共有します： - **リアルタイム同期** - 一方の変更がもう一方に反映 - 共有承認状態 - 一貫したタスクステータス - 統一された進捗追跡 - **データストレージ** - 単一の真実のソース - ファイルベースのストレージ - 同期不要 - 即座の更新 ## モバイルとタブレットアクセス ### モバイルでのWebダッシュボード ダッシュボードはレスポンシブです： - **電話ビュー** - スタックされた仕様カード - 折りたたみ可能なナビゲーション - タッチ最適化ボタン - スワイプジェスチャー - **タブレットビュー** - 並列レイアウト - タッチインタラクション - 最適化されたスペーシング - 横向きサポート ### モバイルでの制限 - VSCode拡張機能なし - 限定されたキーボードショートカット - 制限されたマルチタスキング - 簡素化されたインタラクション ## アクセシビリティ機能 ### Webダッシュボード - **キーボードナビゲーション** - タブで要素を移動 - Enterでアクティベート - Escapeでキャンセル - リスト用の矢印キー - **スクリーンリーダーサポート** - ARIAラベル - ロール属性 - ステータスアナウンス - フォーカス管理 - **ビジュアルアクセシビリティ** - ハイコントラストモード - 調整可能なフォントサイズ - 色覚異常に配慮 - フォーカスインジケーター ### VSCode拡張機能 VSCodeアクセシビリティを継承： - スクリーンリーダーサポート - キーボードナビゲーション - ハイコントラストテーマ - ズーム機能 ## パフォーマンス最適化 ### ダッシュボードパフォーマンス - **遅延読み込み** - オンデマンドでドキュメントを読み込み - 長いリストのページネーション - プログレッシブレンダリング - 画像最適化 - **キャッシング戦略** - ブラウザキャッシング - Service Worker - オフラインサポート（限定的） - 迅速なナビゲーション ### 拡張機能パフォーマンス - **リソース管理** - 最小限のメモリ使用 - 効率的なファイル監視 - デバウンスされた更新 - バックグラウンド処理 ## インターフェース問題のトラブルシューティング ### ダッシュボードの問題 | 問題 | 解決策 | |-------|----------| | 読み込まない | サーバーが実行中か確認、URLを検証 | | 更新なし | WebSocket接続を確認、ページを更新 | | 承認が機能しない | ダッシュボードとMCPが接続されていることを確認 | | スタイルが壊れている | ブラウザキャッシュをクリア、コンソールを確認 | ### 拡張機能の問題 | 問題 | 解決策 | |-------|----------| | 仕様が表示されない | プロジェクトに.spec-workflowディレクトリがあるか確認 | | コマンドが機能しない | VSCodeウィンドウをリロード | | 通知なし | 拡張機能設定を確認 | | アーカイブが表示されない | 設定で有効化 | ## 高度な使用方法 ### カスタムダッシュボードURL 複数のターミナルで設定： ```bash # ターミナル1：MCPサーバー npx -y @pimzino/spec-workflow-mcp@latest /project # ターミナル2：ダッシュボード npx -y @pimzino/spec-workflow-mcp@latest /project --dashboard --port 3000 ``` ### 拡張機能マルチルートワークスペース 拡張機能はVSCodeマルチルートワークスペースをサポートします： 1. 複数のプロジェクトフォルダーを追加 2. 各フォルダーが個別の仕様を表示 3. プロジェクト間を切り替え 4. 独立した設定 ## 関連ドキュメント - [設定ガイド](CONFIGURATION.ja.md) - セットアップと設定 - [ユーザーガイド](USER-GUIDE.ja.md) - インターフェースの使用 - [ワークフロープロセス](WORKFLOW.ja.md) - 開発ワークフロー - [トラブルシューティング](TROUBLESHOOTING.ja.md) - 一般的な問題