はじめに
最近は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/
簡単30秒