はじめに

最近はClaude Code Actionが出てそっちとの組み合わせでも触ろうと思いますが、Docker Desktop MCP toolkitを触ってみたいなと思い設定してみました。

あと体感としてDocker Desktopを経由したGitHubMCPとの接続のやり方が見当たらなかった（経由しないのとほぼ変わらんですが）

ゴールとしては、バイブコーディングやエージェント支援ではなく自律的に開発を進めてもらいGitHub運用してもらうことです。

Docker Desktop MCP Toolkitとは（簡単に）

MCP サーバーをローカルで扱う際には、ツールごとに環境を用意する必要があるかつ、ローカル環境が煩雑になり汚れる懸念があるなか、コンテナでの実行で環境に左右されることを減らします。
また、ホスト上で動かさずに済むのでセキュリティ的にも助かります。

設定手順

GitHubの設定

GitHubのAPIが利用できるように、下記のURLからPATを生成
https://github.com/settings/tokens

Generate new tokenを押下します（動作確認をさっさとしたいのでClassic選択です）

scopeはrepo権限を全てつけてます。

これでPATを発行してコピペしてどこかに保存しておきます。

Docker Desktop Toolkitの設定

Docker Desktopを開き、左のExtentionsタブを選択します。
Browseタブから「Docker MCP Toolkit」を検索しinstallします。（結構長いです）

インストール完了後に左タブにMCP Toolkitタブが出現するので選択
MCP Serversタブで「GitHub Officials」を検索して選択

 

Configurationタブで先ほど発行したGitHubのPATを入れます。
その後にGitHub OfficialsのトグルボタンをONにします。

MCPClientsタブにてCursorのConnectを押下

 

Cursorの設定

上部のシステムバーからCursor→基本設定→CursorSettings→MCPタブ で移動します（Macの場合）
Add new global MCP serverをクリックします。

mcp.jsonが開くため、下記の設定を追加する。（公式のREADMEから確認できる）

{
"mcpServers": {
"github-official": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GITHUB_PERSONAL_ACCESS_TOKEN",
"mcp/github-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "GitHubにて発行したPATに置き換える"
}
}
}
}

下記のように「github」の左に緑のアイコンがついていれば、問題ないです。

動作確認として適当にGitHubへアクセスさせる指示を送り、エージェントがMCPツールを利用していることを確認できました。

以上でMCPの設定は完了です。

いざ開発してもらう

めんどくさいので一旦DBなどは考えずフロントのみでアプリケーションを作成してもらいます。
モデルはGemini2.5proです。

とりあえずCursorでAuto Applyを有効にして、プロジェクトルールを簡易的な内容で設定しました。

description: 開発におけるルール
### リポジトリ
リポジトリはcursor-gitmcp-testというリポジトリを利用します。
該当リポジトリがない場合は、作成してください

### ブランチ
main（本番）develop（開発）のブランチを最初に作成してください
開発はdevelopブランチからfeature/機能名 で作業ブランチを切ってください
作業ブランチは1ブランチに1機能です
機能実装後に/docs/specificationsに機能仕様書をマークダウンで追記してください
実装完了後にdevelop向けのPRを作成してください
そちらのPRの内容を確認し、問題なければdevelopブランチにマージしてください
最後にdevelopブランチからmainにPRを出してマージしてください
機能ごとに上記をそれを繰り返します。

### 実装における要件定義書
- /docs/*の要件定義書を確認して実装してください

あとは要件定義も作成してもらいます。
とりあえず猫を飼っているので、猫のクイズアプリでも作ってもらいます。
「猫のクイズアプリの要件定義書を作ってくれ」と言ってできたものが下記になります。

# 猫クイズアプリ 要件定義書
## 1. 概要
本アプリケーションは、猫に関する様々な知識を問うクイズアプリです。ユーザーはクイズを楽しみながら、猫の種類、生態、歴史、文化などについて学ぶことができます。

### 1.1. 目的
ユーザーに猫に関する知識を楽しく提供する。
猫への興味・関心を深めるきっかけを作る。
手軽に遊べるエンターテイメントを提供する。

### 1.2. 対象ユーザー
猫が好きなすべての人。
猫についてもっと知りたいと思っている人。
スキマ時間に手軽に遊べるゲームを探している人。

## 2. 機能要件
### 2.1. クイズ機能
**F001: クイズの開始**
ユーザーは「クイズスタート」ボタンなどをタップすることでクイズを開始できる。
開始時に問題のカテゴリや難易度を選択できる機能も検討する（v1ではランダム出題でも可）。
**F002: 問題の表示**
画面に猫に関するクイズの問題文と、複数の選択肢（例：3択または4択）を表示する。
問題には関連する画像が表示される場合もある。

**F003: 回答の受付**
ユーザーはいずれかの選択肢をタップすることで回答する。

**F004: 正誤判定と結果表示**
ユーザーの回答後、即座に正解／不正解を判定し、結果を画面に表示する。
正解の場合は「正解！」などのメッセージと、簡単な解説を表示する。
不正解の場合は「残念！」などのメッセージと、正解の選択肢および簡単な解説を表示する。
**F005: 次の問題へ**

ユーザーが「次の問題へ」ボタンなどをタップする、または一定時間経過後に自動で次の問題へ進む。

**F006: クイズの終了とスコア表示**

規定の問題数（例：10問）が終了すると、最終的なスコア（正解数／問題数、正解率など）を表示する。

### 2.2. 設定機能（任意）
**F007: 効果音のON/OFF** (v2以降検討)
クイズ中の効果音（正解音、不正解音など）のON/OFFを設定できる。

**F008: BGMのON/OFF** (v2以降検討)
アプリ内のBGMのON/OFFを設定できる。

## 3. 非機能要件
### 3.1. ユーザビリティ
直感的でわかりやすいユーザーインターフェースを提供する。
誰でも簡単に操作できるように、シンプルな画面構成と操作方法にする。
文字の大きさや配色など、視認性に配慮する。

### 3.2. パフォーマンス
アプリの起動や画面遷移、クイズの表示などがスムーズに行われること。
ストレスなく快適にプレイできること。

### 3.3. デザイン
猫好きのユーザーが好むような、可愛らしく親しみやすいデザインを採用する。
問題に関連する猫の画像やイラストを効果的に使用し、視覚的にも楽しめるようにする。

### 3.4. データ管理
クイズの問題文、選択肢、正解、解説、関連画像などのデータはアプリ内に保持する。データベースは使用しない。
将来的に問題を追加・更新しやすいようなデータ構造を検討する（例：JSONファイルなど）。

## 4. その他
### 4.1. 開発環境・使用技術（案）
プラットフォーム: iOS, Android (クロスプラットフォーム開発フレームワークの利用も検討：React Native, Flutterなど) あるいは Webブラウザ (HTML, CSS, JavaScript)
開発言語: (プラットフォームに応じて Swift, Kotlin, Dart, JavaScriptなど)
画像素材: フリー素材、またはオリジナルで作成。

### 4.2. 将来的な拡張機能案
問題カテゴリの追加（例：「猫の歴史」「世界の猫種」「猫の行動学」など）
難易度設定機能（初級、中級、上級など）
タイムアタックモード
全国ランキング機能 (オンライン機能が必要になるためDBレスの制約と要相談)
ユーザーによる問題投稿機能 (同上)
達成度に応じたバッジや称号の獲得機能

ルールに記載したように基本的にこの要件定義を見てエージェントには実装してもらいます。

ちゃんとリポジトリを作成してdevelopから作業ブランチを切って作業してくれてますね。

ちゃんとdevelopに向けてPRを作成してくれたようで、ルールが効いてます。

作成してくれたPRとしては下記でした。なんかリンクも作ってくれてますね。

機能仕様書としては、下記でした。
簡易的なアプリなのでいいんじゃないですかね。

# 猫クイズ機能 機能仕様書
## 1. 機能概要
ユーザーが猫に関するクイズを解き、知識を深めることができる機能。
スタート画面、クイズ画面、結果画面で構成される。

## 2. 機能詳細
### 2.1. スタート画面 (`#start-screen`)
**表示内容**:
アプリタイトル「猫クイズアプリ」
キャッチコピー「猫博士を目指そう！」
「クイズスタート！」ボタン
**動作**:
「クイズスタート！」ボタンクリックでクイズ画面へ遷移し、クイズを開始する。

### 2.2. クイズ画面 (`#quiz-screen`)
**表示内容**:
現在の問題番号 (例: 第1問)
問題文
選択肢ボタン (複数)
フィードバックエリア (回答後に表示)
正誤結果テキスト (例: 「正解！」「残念！不正解...」)
解説文
「次の問題へ」ボタン (回答後に表示)
**動作**:
クイズデータ (`quiz_data.js`) からランダムに問題を選択して表示する。
選択肢ボタンをクリックすると、正誤判定が行われる。
正解の場合:
スコアを加算する。
フィードバックエリアに「正解！」と表示し、背景色を変更する。
選択したボタンのスタイルを正解用に変更する。
不正解の場合:
フィードバックエリアに「残念！不正解...」と表示し、背景色を変更する。
選択したボタンのスタイルを不正解用に変更する。
正解の選択肢のスタイルを正解用に変更する。
いずれの場合も解説文を表示する。
回答後は全ての選択肢ボタンを無効化する。
「次の問題へ」ボタンが表示され、クリックすると次の問題へ進む。
全ての問題が終了すると結果画面へ遷移する。

### 2.3. 結果画面 (`#result-screen`)
**表示内容**:
タイトル「クイズ結果」
労いのメッセージ「お疲れ様でした！」
最終スコア (例: 「あなたのスコアは: 5問中3問正解です！」)
スコアに応じたメッセージ (例: 「素晴らしい！全問正解です！あなたは猫博士！」)
「もう一度挑戦する」ボタン
**動作**:
「もう一度挑戦する」ボタンクリックでスタート画面へ遷移する。

## 3. 使用ファイル
`index.html`: アプリ全体のHTML構造
`css/style.css`: アプリ全体のスタイリング
`js/app.js`: アプリケーション全体の制御、画面遷移
`js/quiz.js`: クイズのロジック（問題表示、正誤判定、スコア計算など）
`js/data/quiz_data.js`: クイズの問題、選択肢、正解、解説データ

## 4. データ構造 (quiz_data.js)
クイズデータは以下の形式のオブジェクト配列として `quizData` 変数に格納される。
```javascript
const quizData = [
{
question: "問題文 (String)",
image: null, // 画像は現在使用しない (null固定)
choices: ["選択肢1 (String)", "選択肢2 (String)", ...],
correctAnswerIndex: 正解の選択肢のインデックス (Number, 0から始まる),
explanation: "正解の解説文 (String)"
},
// ...他の問題データ
];

 

## 5. 主な処理の流れ
`index.html` が読み込まれる。
`app.js` が初期化され、スタート画面が表示される。
ユーザーが「クイズスタート！」ボタンをクリック。
`app.js` が `quiz.js` の `initializeQuiz()` を呼び出す。
`quiz.js` がクイズデータをシャッフルし、最初の問題を表示 (`displayQuestion()`)。
ユーザーが選択肢をクリック。
`quiz.js` が `handleAnswer()` を実行し、正誤判定とフィードバック表示。
ユーザーが「次の問題へ」ボタンをクリック。
`quiz.js` が `goToNextQuestion()` を実行し、次の問題を表示。
全問題が終了すると `quiz.js` から `app.js` の `showResultScreen()` が呼び出される。
`app.js` が結果画面を表示。
ユーザーが「もう一度挑戦する」ボタンをクリックすると、スタート画面に戻る。

このあとそのままマージの指示をしてできた画面が下記でした。

簡素すぎるアプリですが、普通に動いてくれました！

まとめ

実は完全自律稼働にはできず、初手でリポジトリ作成していいですか？って聞かれたのでPRレビュー以外聞いくれるな！と言って自律稼働させました。その辺りはルールに記載でどうとにでもなる気はしてます。
また、ローカルブランチの作成を伝えていなかったので、ローカルでファイル生成が見えないかつ、ブランチを確認しようにもローカルでチェックアウトできなかったので、その辺りもルールに記載が必要そうです。

PRテンプレートなんかもちゃんと作れば、しっかり則ってPR作成してくれそうです。

ただ、初手のものとPR確認以外は全てエージェント側作業（マージも）でやってくれたので、本当に待ってるだけでした。

Cursorだと自分で手を加えたい時は、瞬時に切り替えられるのでそれも良いですね。

コンフルに設計書を記載して、コンフルのMCP経由で読み取って開発なんかもやってみたいです。

参照元

https://github.com/docker/labs-ai-tools-for-devs/blob/main/prompts/mcp/readmes/github-official.md
https://docs.docker.com/ai/mcp-catalog-and-toolkit/toolkit/