Spaces & MCP

Copilot Spacesによるコンテキスト集約、Model Context Protocol（MCP）連携、Extensions、Memory機能など、GitHub Copilotのエコシステムを拡張する機能群を解説します。

Copilot Spacesとは

Copilot Spacesは、プロジェクトに関連するコンテキストを1つの場所に集約・整理するための機能です。リポジトリ、コード、Pull Request、Issue、メモ、画像、ファイルなどを1つのSpaceにまとめ、Copilotに効率的にコンテキストを提供できます。

• コンテキストの集約 — 複数のリポジトリやドキュメントを1つのSpaceにまとめて管理
• 自動更新 — GitHubソース（リポジトリ、Issue、PR）は変更に応じて自動的に最新状態に同期
• 全プラン利用可能 — FreeプランからEnterpriseまで、全てのCopilotプランで利用可能
• チーム共有 — Spaceをチームメンバーと共有し、同じコンテキストでAI支援を受けられる

Spacesの使い方

Spaceの作成

1. 新規Space作成
   GitHub.comのCopilotメニューから「Spaces」を選択し、「New Space」をクリックします。
2. ソースの追加
   リポジトリ、特定のファイル/フォルダ、Issue、Pull Request、またはフリーテキストのメモを追加します。
3. コンテキストの整理
   追加したソースにラベルや説明を付けて、Copilotがコンテキストを理解しやすいように整理します。

共有と権限

Spaceは3つの権限レベルで共有できます。

IDE連携

VS CodeからSpacesを利用するには、GitHub MCP Serverを経由して接続します。これにより、エディタ内のCopilot ChatやAgent ModeからSpaceのコンテキストを参照できます。

MCP連携

Model Context Protocol（MCP）は、AIモデルに外部ツールやデータソースを接続するためのオープンプロトコルです。GitHub CopilotはMCPに対応しており、VS Code設定またはCLIから外部ツール、データベース、APIをCopilotに接続できます。

VS Codeでの設定

CLIでの設定

主なMCPサーバー

• GitHub MCP Server — GitHub API（Issue、PR、リポジトリ検索）にアクセス
• Playwright MCP Server — ブラウザ操作・テスト自動化
• Database MCP Server — PostgreSQL、MySQL等のデータベースに接続
• Slack MCP Server — Slackチャンネルの情報をコンテキストとして利用

MCP接続の最小権限の原則

MCPサーバーをCopilotに接続する際は、必要最小限の権限のみを付与してください。

実践ルール:

1. 読み取り専用から始める — 最初は読み取り権限のみ付与し、書き込みが必要になったら追加
2. 環境変数でトークンを管理 — ハードコードしない。.env は .gitignore で管理し、Content Exclusion設定で保護
3. スコープを限定 — GitHubトークンは repo:read のみ、DB接続は SELECT のみ等
4. 本番環境のMCP接続は原則禁止 — 開発/ステージング環境のみ接続

mcp.json設定例（最小権限）:

.vscode/mcp.json による設定

VS Codeプロジェクトごとのmcp.json設定です。リポジトリにコミットしてチーム共有できます。

MCP詳細設定ガイド

MCPサーバーの追加方法は3通りあります。用途に応じて使い分けてください。

方法A: コマンドパレットでGUI追加（最速）

1. Ctrl + Shift + P → 「MCP: Add Server」
2. Workspace（プロジェクト用）か Global（全プロジェクト共通）を選択
3. サーバー種別を選択:
   • STDIO（Local） — npx などでローカル起動（Playwright等）
   • HTTP（Remote） — リモートURL（GitHub公式MCP、context7等）
4. 名前・コマンド・env変数を入力 → 保存
5. 信頼確認ダイアログで「Trust」→ 即起動

方法B: mcp.json直接編集（チーム共有推奨）

.vscode/mcp.json をプロジェクトルートに配置し、GitHubにコミットしてチーム全員で共有できます。

方法C: Copilot CLI設定

ターミナルからCopilot CLIを使う場合は、~/.copilot/mcp-config.json に設定します。

CLIでのインタラクティブ追加:

Office連携MCPサーバー（Excel / PowerPoint）

MCPを使えば、CopilotがExcel・PowerPointファイルを直接作成・編集できます。Agent Modeで自然言語指示するだけで、手作業ゼロでOfficeファイルが完成します。

Excel MCPサーバー

PowerPoint MCPサーバー

インストール手順

使い方例（Agent Mode）

Agent Skills（再利用可能ワークフロー）

Agent Skillsは、専門タスク専用の再利用可能ワークフローです。フォルダ単位でSKILL.md（指示書）＋スクリプト・リソースをバンドルし、Agent Modeで自動ロードされます。

配置場所

Skill作成手順

1. フォルダ作成: .github/skills/ppt-excel-generator/
2. SKILL.md に指示を記述（下記テンプレート参照）
3. 必要ならスクリプト・テンプレートを同梱
4. Agent Mode起動時に自動検出される

Agent Plugins（Skills + MCP + Hooks統合パッケージ）

PluginはSkills + MCP + Hooksを1パッケージにまとめた拡張単位です。インストール1回で複数機能が有効になります。

公式リソース:

• github/copilot-plugins — MCPサーバー・Skill・Plugin一括カタログ
• awesome-copilot — コミュニティ厳選リスト

🖼️ 画像編集プラグイン & スキル（ImageMagick / fal AI）

GitHub Copilot の Agent Mode から自然言語で画像を編集・変換・AI加工するための Plugin & Skills 設定ガイドです。Excel/PPT作成（Office MCP）と並ぶ「非コード系作業」の代表例で、デザイナー・マーケター・開発者すべての生産性を底上げします。

前提設定（1回だけ）

VS Code の settings.json で Agent Skills を有効化します。

{
  "chat.useAgentSkills": true
}

インストール方法

GitHub Copilot の Skills は .github/skills/<skill-name>/SKILL.md を配置するだけで有効になります。Marketplace からコピーするか、下記テンプレートをそのまま貼り付けてください。

目標のディレクトリ構造：

.github/skills/
├── image-manipulation-image-magick/   ← ImageMagickでリサイズ・変換・バッチ処理
│   └── SKILL.md
└── fal-image-edit/                    ← AIでスタイル変換・オブジェクト除去・背景変更
    └── SKILL.md

SKILL.md テンプレート（そのままコピペ可）

独自スキルを作る場合は .github/skills/<skill-name>/SKILL.md を作成します。

---
name: image-manipulation-image-magick
description: ImageMagickを使って画像をリサイズ・変換・合成・バッチ処理する
tools:
  - name: run_shell
    description: ImageMagickコマンドを実行
---

# Image Manipulation Skill

## 使い方
- 画像を添付、またはパスを指定
- 「この画像を正方形にクロップして」「WebPに変換して」など自然言語で指示

## 対応コマンド（例 / ImageMagick 7+ は magick を使用）
- `magick input.png -resize 512x512 output.png`
- `magick input.jpg -quality 80 output.webp`
- `magick input.png -background none -gravity center -extent 1024x1024 padded.png`

## 前提
- ImageMagick 7+（`magick` コマンド）がPATHに通っていること
- ImageMagick 6系を使う環境では `convert` に読み替え可（非推奨）

2つのスキルの使い分け

使用例（Agent Mode）

よくある問題と対策

📝 実践ワークフロー: スクリーンショット → 要件定義モックアップ

目的: 既存Webサイト（特に予約システムなどの業務画面）のスクリーンショットをベースに、Copilot + カスタムスキルで新機能のモックアップを生成し、要件定義資料にそのまま使える画像を効率的に作る。Figma や Photoshop なしで「Before → [New]注釈入りAfter」が1プロンプトで完成します。

全体の流れ（全8ステップ）

ステップ1: 準備

1. VS Code に GitHub Copilot Business を導入
2. .vscode/settings.json に以下を追加：

   {
     "chat.useAgentSkills": true
   }

3. ImageMagick をインストール（Windows: 公式サイト / macOS: brew install imagemagick）
4. プロジェクト内に以下のフォルダを作成：

   screenshots/              # 元画像保存用
   deliverables/requirements/ # 完成モックアップ保存用
   .github/skills/brand-image-processor/

ステップ2: スクリーンショットの撮影

1. Chrome で対象サイトを開く
2. F12 → Ctrl + Shift + P → Capture full size screenshot で撮影
3. 画像を screenshots/ に保存（例: 20260423_dashboard.png）

ステップ3: ブランドスキルの作成

.github/skills/brand-image-processor/SKILL.md を作成します。まずは以下の シンプル版（推奨ベースライン） をそのまま貼り付け、必要に応じて色・フォント・枠スタイルをプロジェクトのブランドガイドに合わせて調整してください。

---
name: brand-image-processor
description: スクリーンショットに新機能モックアップ注釈を付けるブランド準拠スキル
tools:
  - name: run_shell
    description: ImageMagick (magick) でのみ画像加工を行う（Python/Pillow禁止）
---

# Brand Image Processor (シンプル版ベースライン)

## ルール
- 新機能部分は **青い破線 (#0A66C2)** で囲む (stroke-width: 3, stroke-dasharray: 8 6)
- 枠の左上に **[New]** ラベル（白文字・青背景・角丸4px）
- **赤い矢印 + 日本語注釈** で変更内容を説明（font: 環境にある日本語フォント。未インストールなら -font オプションを外して既定フォント）
- 画像加工は **ImageMagick 7+（magick）のみ**。Python/Pillow の使用は禁止
- 出力先は常に `deliverables/requirements/<YYYYMMDD>_<機能名>_<画面名>.png`

## コマンド例
magick input.png \
  -fill none -stroke "#0A66C2" -strokewidth 3 -strokedasharray 8 6 \
  -draw "rectangle 120,200 540,340" \
  -fill "#0A66C2" -draw "roundRectangle 120,180 180,204 4,4" \
  -fill white -pointsize 14 -annotate +132+198 "[New]" \
  -fill "#E02424" -strokewidth 2 -draw "line 560,260 680,260" \
  -fill "#111827" -pointsize 16 -annotate +690+265 "その他患者 3名を追加" \
  deliverables/requirements/20260423_reservation_dashboard.png

ステップ4: Agent Mode で編集

VS Code の Agent Mode を開き、画像を添付してプロンプトを実行します。

@skill brand-image-processor
この画像の「07:00 - 07:30」の枠を「その他患者 3名」に変更してください。
青い破線と [New] ラベル、赤い矢印注釈を美しく配置してください。

ステップ5: 出力と管理

• 生成画像は自動で deliverables/requirements/ に保存
• ファイル名規約: YYYYMMDD_機能名_画面名.png（例: 20260423_reservation_dashboard.png）

ステップ6: 要件定義資料への活用

• 生成画像を Notion / Confluence / Markdown に貼付
• Before/After 比較 や注釈付きで使用（2枚並べて掲載）
• Jira / Linear のチケット添付資料にもそのまま使える

ステップ7: スキルの改善（バージョン運用の教訓）

実際に運用してみて得られた「やってはいけない／やるべき」は SKILL.md の版として残しておくと、社内展開時にも再利用しやすくなります。

ステップ8: 限界を知って賢く使う

今すぐ試すプロンプト

@skill brand-image-processor
この画像の「07:00 - 07:30」の枠を「その他患者 3名」に変更してください。
青い破線で囲み、[New] ラベルと赤い矢印注釈を美しく配置してください。
全体の見た目が資料にそのまま使えるレベルにしてください。

MCP検証 & トラブルシューティング

接続確認（5ステップ）

1. Ctrl + Shift + P → MCP: List Servers で全サーバー一覧を確認
2. Copilot Chat → 「Configure Tools」ボタンで各ツールのON/OFFを切替
3. Outputパネル → 「MCP Servers」でログを確認
4. 初回接続時は「Trust」承認が必須（後から MCP: Reset Trust でリセット可能）
5. Agent Mode（チャットドロップダウンで「Agent」選択）が必須 — Ask / Editモードではツールが無効

よくある問題と対策

MCP / Skills / Plugin 最新動向（2026年4月 X調査）

X（旧Twitter）のLatestモード検索およびGitHub Copilot CLI公式changelog bot、日本語ユーザー投稿から確認された最新情報です。

設定ファイルの変更: .mcp.json

2026年4月時点で、MCPの設定ファイル名が .vscode/mcp.json から .mcp.json（プロジェクトルート直下）に統一される流れがあります。グローバル設定として推奨されつつあります。

Copilot CLI: MCPセッション管理コマンド

注目のPlugin: Copilot-Cockpit

Copilot-Cockpit はVS Code拡張として提供されるプラグインで、Agent Modeのワークフローを段階的に自律化します。

• 計画フェーズ — タスクを分解し実行計画を提示
• 承認フェーズ — 人間がレビュー・修正・承認
• 実行フェーズ — 承認された計画をAgent Modeで自動実行
• レビューフェーズ — 結果を自動検証し、問題があれば修正提案

Claude Code環境との連携

Claude CodeもMCPクライアントに対応しているため、同じMCPサーバーをCopilotとClaude Codeで共有できます。

Copilot Extensions

Copilot Extensionsは、サードパーティが提供するエージェントやツールをGitHub Copilotに統合する仕組みです。GitHub Marketplaceから導入でき、Copilot Chatで @extension-name のメンション形式で呼び出せます。

導入方法

1. Marketplaceで検索
   GitHub Marketplace のCopilot Extensionsカテゴリから目的のExtensionを探します。
2. インストール
   「Install」をクリックし、対象のOrganizationまたは個人アカウントにインストールします。
3. 利用開始
   Copilot Chatで @extension-name と入力して呼び出します。例: @docker コンテナの最適化方法を教えて

主なExtensions

• @docker — Dockerfileの最適化、コンテナ設定の支援
• @sentry — エラートラッキングとデバッグ情報の統合
• @datadog — モニタリングデータの参照と分析
• @mermaid — 図表の生成とコードへの統合

Copilot Memory

Copilot Memoryは、リポジトリ固有のコーディング慣習やパターンをセッション間で記憶する機能です。Copilot Memoryはパブリックプレビューとして提供されています。利用可能なプランや条件は変わる可能性があるため、最新の情報は公式Docsを確認してください。記憶データは一定期間後に自動削除されます。

仕組み

• 自動学習 — Copilotがコードベースの慣習（命名規則、パターン、設計方針）を徐々に学習
• セッション持続 — 学習した内容はセッションをまたいで保持され、次回起動時にも反映
• 明示的な記録 — Copilot Chatで「これを覚えて」と指示することで、特定のルールを明示的に記憶させることも可能

管理と制御

記憶された内容はGitHub.comの設定画面で確認・削除できます。プライバシーやセキュリティ上の懸念がある場合は、個別のMemoryエントリを削除できます。

その他の機能

Code Review

Pull Requestに対するAI自動レビュー機能です。PRを作成するとCopilotが自動でコードを分析し、バグリスク、セキュリティ懸念、改善提案をレビューコメントとして投稿します。カスタム指示でレビュー基準をカスタマイズ可能です。

PR Summaries

PRの説明文を自動生成する機能です。変更内容を分析し、変更の要約、影響範囲、テスト観点を含む説明文をMarkdownで生成します。PRテンプレートと組み合わせることで、一貫した品質のPR説明文を維持できます。

GitHub Desktop連携

GitHub DesktopアプリでCopilotによるコミットメッセージの自動生成が利用できます。ステージされた変更内容を分析し、Conventional Commits形式のメッセージを提案します。

GitHub Spark

自然言語でフルスタックWebアプリケーションを構築できる実験的な機能です。プロンプトを入力するだけで、フロントエンド・バックエンド・データベースを含むアプリケーションが自動生成されます。プロトタイピングや社内ツールの構築に活用できます。