633 Views
July 12, 25
スライド概要
GitHub Copilot Meetup Tokyo (2025/07/11)
https://aiau.connpass.com/event/357272/
FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で C#、.NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動を担当後、Dell、Accenture、Elastic、VMware を経て現職まで一貫して同様の活動を継続。現職では NVIDIA AI GPU クラウドサービス、各パブリッククラウドとの AI 関連での協業、マーケティングを担当。政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。
GitHub Copilot for Xcode: 最新 AI 機能で Swift 開発を⾰新する Agent Mode Copilot Vision NEW Swift/iOS アプリ開発のための AI ペアプログラミングツール 最新機能で開発効率を向上させる実践的なテクニック 2025年7⽉最新情報: Copilot Vision 機能で画像からのコード⽣成が可能に︕ 鈴⽊ 章太郎 Executive Evangelist, FPT Japan Holdings
鈴⽊ 章太郎 X (Twitter) ︓ @shosuz https︓//www.docswell.com/user/shosuz FPT ジャパン FPT データ& AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼最⾼情報セキュリティアドバイザー 略歴︓ AI 駆動開発勉強会主催。Microsoft エバンジェリスト時代から現職 まで⼀貫して開発者向けに最新技術を啓発。GPU クラウド技術訴求、 AI 駆動開発推進。政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。 最近の関⼼事︓ Claude Code + n8n で API 公開していない AI インフラを コントロールする︕
セッションのゴール GitHub Copilot for Xcode の最新機能を活⽤し Swift 開発を⾰新的に効率化する ⾃然⾔語指⽰からの⾃動コード⽣成 Copilot Vision による画像からのコード⽣成 Agent Mode で複雑なコード修正を⾃動化
Agenda 基本ガイド 1. はじめに 9. Agent Mode による⾃動編集 2. Copilot for Xcode 概要 10. 複数 AI モデルの切り替え 3. 必要な準備‧環境 11. MCP サーバーとは 4. インストール⼿順 12. MCP サーバーの設定例と実践 5. 初回セットアップ 13. サンプルアプリ紹介‧ まとめ 6. 基本機能︓コード補完 14. ご清聴ありがとうございました︕ 7. Copilot チャットの活⽤ 8. Agent Mode とは 最新情報セクション NEW 15. Copilot Vision 最新リリース 16. Copilot Vision デモ 17. Fetch/Memory MCP サーバー構成⽅法 18. MCP サーバーによる EC アプリ実装例 19. 参考リンク‧資料集
はじめに • GitHub Copilot for Xcode は.Swift 開発の⽣産性を⼤幅に向上させる AI アシスタント • Agent Mode や MCP サーバー対応で複雑なタスクも⾃動化可能 • 本スライドでは導⼊から⾼度な活⽤法までを解説 AI 開発アシスタント • コード補完‧チャット機能 外部ツール連携 •MCP サーバー技術 • ⾃動コード編集 • データベース連携 • 複数ファイル管理 •API 活⽤ • テスト⽣成 効率的な開発を実現 • 様々なツールとの統合 ⾃然⾔語での対話やコード⽣成により、Swift/iOS 開発のワークフローを効率化 デザインから実装、テストまで AI がサポート 2025年7⽉最新情報
Copilot for Xcode 概要 • Swift/iOS 開発のために特化設計された公式 AI アシスタント • ローカルマシン上で Xcode と連携し、開発効率を⼤幅に向上 主要機能 コード補完 Swift ⾔語や Xcode API に特化した インテリジェントな補完 Copilot チャット コードの質問、説明、改善提案をリアルタイム で対応 Agent Mode AI が複数ファイルを横断して編集、 テスト⽣成も⾃動実⾏ MCP 対応 Model Context Protocol による 外部ツールとの連携機能 Xcode 専⽤設計 ⼆重構成アーキテクチャ 本体アプリと Xcode 拡張の連携による⾼度 な機能を実現 サイドバイサイドアプリケーション Xcode と同期して動作し、最適なコード提案 を⾏う エディタ内コード補完 別ウィンドウでの⾼度な対話を両⽴
必要な準備 ・ 環境 Mac & Xcode 最新版 Homebrew 推奨 macOS 最新版推奨、Xcode 14 以降で 動作確認済み 簡単なインストールのために brew install コマンドが 使⽤可能 GitHub アカウント インターネット接続 GitHub Copilot 契約(個⼈‧チーム‧エンター プライズ)が必須 AI モデルへのアクセスと認証に安定したネット接続が 必要 • エンタープライズ環境では、プロキシやファイアウォールの設定が必要な場合あり • 詳細は設定画⾯の Advanced タブを確認
インストール⼿順 GitHub リポジトリから 1.github.com/github/copilotforxcode にアクセス 2. Releases セクションから最新版を選択 3. Assets から .dmg ファイルをダウンロード 4. ダウンロードしたファイルを実⾏し、アプリケーションフォルダにドラッグ Homebrew 経由(推奨) Homebrew がインストールされている環境では、以下のコマンドで簡単にインストール可能︓ brew install --cask copilot-for-xcode インストール完了後、アプリケーションフォルダから起動 重要なポイント︓ • 初回起動時にアクセシビリティ権限の許可が必要 • Xcode とは別プロセスで動作するため、バックグラウンド実⾏アイテムとして登録される
初回セットアップ GitHub アカウント認証 その他の設定オプション デバイスコードを使⽤した認証フロー ⾃動アップデート確認 プロキシ設定 拡張機能の有効化 エンタープライズ URL 設定 Xcode ソースエディタ拡張をオンに設定 MCP (Model Context Protocol) 設定 アクセシビリティ権限 システム環境設定で拡張機能アクセスを許可 ※ 権限がないとコード編集機能が動作しません Copilot 有効な GitHub アカウントが必要 • 無料または有料 Copilot プランがアカウントに紐付いている 必要あり • 設定画⾯からトグルで有効化できる セットアップ時のポイント: 問題が発⽣した場合、Xcode 本体と GitHub Copilot for Xcode の両⽅を再起動すると解決することが多い 設定画⾯は拡張メニューからいつでも開くことができる
基本機能︓コード補完 ContentView.swift import SwiftUI インライン補完 struct ContentView: View { var body: some View { Button(action: { // ボタン押下時の処理 print("ボタンが押されました") }) { ⼊⼒中に GitHub Copilot のコード予測が薄いテキスト で表⽰ Label( "アクション実⾏", systemImage: "play.circle" ) Option ⻑押し .font(.headline) .padding() .background(.blue) .foregroundColor(.white) 詳細な提案や代替案を表⽰(コメント付き) .cornerRadius(10) } } } リアルタイム予測 ⼊⼒に応じて候補が瞬時に更新 代替案 1/3 • • コード補完を受け⼊れるには Tab キーを押すだけ 複雑なコードブロック、アルゴリズム、UI コンポーネントなど様々な コンテキストで⾼精度な提案を受け取る // ラベル付きのスタイリングされたボタン Label( "アクション実⾏", systemImage: "play.circle" ) .font(.headline) .padding() .background(.blue) .foregroundColor(.white) .cornerRadius(10) Option キー⻑押し
Copilot チャットの活⽤ Ask mode の特⻑ Copilot チャットウィンドウ 質問例: リストを使ってモンキーギャラリーを実装するには︖ Copilotの回答: Swift でリストを使ったモンキーギャラリーを実装する⽅法を紹介します︓ // モンキーのデータモデル コードを⾃動で編集せずに安全な提案 struct Monkey: Identifiable { let id = UUID() let name: String let image: String 複数AI モデルの切り替え(GPT- 4、Claude 等) } // リストビュー List(monkeys) { monkey in HStack { Image(monkey.image) Text(monkey.name) コードのコピーやカーソル位置への挿⼊ } } コードをコピー カーソル位置に挿⼊ プロジェクト構造の理解と説明 コードベースの全体像を把握 関連ファイル間の依存関係を解説 コード実装の提案 SwiftUI コンポーネントの設計例 アルゴリズムやロジックのサンプル アーキテクチャパターンの提案 エラー解決と最適化のヒント
Agent Mode とは • AI による⾃動コード編集機能 • 従来のチャットモードを超えた開発⽀援を実現 ⾃動プラン提案 ファイル作成‧テスト AI が実装計画を⽴て、ステップごとに 何をするか解説 複数ファイルの作成‧編集やテストコード の⽣成も⾃動化 リアルタイムコード編集 エラー検知‧⾃動修正 AI がファイルを直接編集‧コード追加‧ 修正‧リファクタリングを実⾏ 予期せぬ問題に対しても⾃⼰修正を⾏う Agent Mode の使い⽅ チャット⼊⼒欄の上部でAgent Mode を有効化し、⾃然⾔語で実装したい機能を詳細に説明するだけ
Agent Mode による⾃動編集 Agent Mode のワークフロー 1 指⽰を⼊⼒ 「ギャラリー UI を作成して」 などの⾃然⾔語で指⽰ 2 AI が計画作成 ファイル構造‧コード変更の計画を⽴案 3 4 実⽤例 UI 設計と実装の⾃動化 「レスポンシブな商品⼀覧画⾯を作成」と指⽰するだけで UI 実装 データモデル連携 API 仕様から⾃動的にモデル定義とデータ連携コードを⽣成 ⾃動コード編集 エラー修正と最適化 複数ファイルにわたる変更を⾃動実⾏ 「このエラーを修正して」と指⽰するだけでデバッグを⾃動化 結果確認 ‧ 反復 シンプルな指⽰から 複雑な機能実装 結果を確認し追加指⽰で調整‧改善 「画像認識機能を追加」などの指⽰から複数ファイル実装 Agent Mode とは • AI による⾃動コード編集機能で、従来のチャットモードを超えた開発⽀援を実現 • AI が実際のコード修正やファイル⽣成まで⾃動で⾏い、複数ファイルにまたがる編集も⼀貫して処理
複数 AI モデルの切り替え • GitHub Copilot for Xcode では複数の AI モデルから⽤途に応じて最適なものを選択できる • 1つのチャット内でもモデルを切り替え可能 GPT-4 Claude Sonic デフォルトモデル - バランスの良い応答 幅広いタスクに対応 UI/UX 設計に強み クリエイティブな⽣成能⼒ 精度重視のコード⽣成に最適 詳細な UI コンポーネント⽣成 実践例 : モデル切り替えの活⽤法 複雑な UI 設計時は GPT-4 で基本構造を設計し、Claude Sonic へ切り替えてデザイン⾯を洗練させる ドロップダウンから簡単にモデル切り替え可能 GPT-4 Claude Sonic
MCP サーバーとは Model Context Protocol (MCP)︓ AI が外部 API ‧ ツールと安全かつ柔軟に連携するための標準プロトコル AI モデルへの追加コンテキスト提供 ⾃然⾔語指⽰から適切なツール呼び出しを⾃動化し、 AI のコンテキスト理解を強化 認証付きバックエンド API への安全なアクセス 社内システムや認証が必要な API にも安全に接続可能 Docker や API サーバーとして実装可能 • • 連携可能なツール例 Figma データベース GitHub Playwright 社内システム カスタムツール 開発者が⾃然⾔語でツールを操作し、AI がローカル ・ リモート問わず様々なサービスと連携 プライベートなデータや API にも安全にアクセスできるため、実際の開発環境での実⽤性が⼤幅に向上
MCP サーバーの設定例と実践
MCP JSON ファイル設定
プロジェクトに追加するだけで⾃動認識
Docker、アプリケーション、リモートサーバー形式に対応
⾃動的に MCP 対応ツールとして登録
実践活⽤例
認証付き API 連携
社内 API への安全なアクセス。認証情報は環境変数や Secrets 管理
スキーマ⾃動⽣成
「スキーマ取得→コード⽣成」を⾃動化。型安全なモデル作成
複合クエリ実⾏
「⼈気商品 Top5 と詳細を⼀覧表⽰」など複雑な操作も⼀度に
"name": "products-mcp", "version": "1.0.0", "type": "docker",
"config": {"image": "monkeydb:latest", "port": 3000 },
"env": { "DB_HOST": "localhost", "API_KEY": "..." }
⾃然⾔語での DB 操作例
ユーザープロンプト
「商品のリストを取得して」
処理 :
• ⾃然⾔語を分析
• MCP 関数 getProducts を特定
•
•
⾃動的に API 呼び出し実⾏
結果を JSON からわかりやすく整形
サンプルアプリ紹介‧まとめ Copilot for Xcodeの主なポイント 実例︓モンキーギャラリーアプリ インストールは簡単 Homebrew 経由または GitHub リリースからダウンロード Agent Mode + MCP 接続で実装した実例 コード補完と対話型チャット AI による UI、データ構造、API の⾃動⽣成 オプションキーで詳細表⽰、直感的なコード提案 リアルタイムコード修正と迅速な開発 Agent Mode プロセス複数のファイルと UI 要素を⾃動コーディング 変更前 空プロジェクト ⽣成結果 完全な UI とデータ連携 AI が⾃動的にファイル編集、コンパイル、テスト実⾏ 複数 AI モデル切替 タスクに最適なモデルを選択可能 MCP サーバー連携 データベース、API、外部ツールとの連携で開発効率化 AI 活⽤で Swift/Xcode 開発の⽣産性を劇的に向上させよう︕
git clone https://github.com/jamesmontemagno/ MyMonkeyApp-Swift.git MyMonkeyAppSwift-Fresh
(Agent Mode : prompt) このMonkey Galleryアプリを段階的に文房具 ECサイトに変更してください。 Phase 1: データモデルの変更 - まずはProductモデルを作成 - サンプルデータを追加 - 動作確認 Phase 2: UI変更 - タイトル変更 - 商品表示への変更 - 動作確認 Phase 3: 機能追加 - SF Symbolsアイコン - 価格表示 - カテゴリフィルター 各段階で動作確認しながら進めてください。
(Agent Mode : prompt) 次に、 MCPサーバーを使用して、この文房具ECサイ トをギターショップに変換してください。 MCP設定: • Music Instruments MCP Serverを使用 • ギターデータの取得・表示機能 • 楽器カテゴリ管理システム 変更内容: • Product → Guitarモデル • ブランド、タイプ、価格、仕様を表示 • 音楽ジャンル別フィルタリング • 楽器のSF Symbolsアイコン使用 サンプルデータ: • Fender Stratocaster (エレキ) 150,000円 • Martin D-28 (アコースティック) 250,000円 • Gibson Les Paul (エレキ) 180,000円 • Yamaha FG830 (アコースティック) 45,000 円 楽器アイコン: • エレキギター:guitars • アコースティックギター:guitars.fill • ベース:waveform • アンプ:speaker.wave.3
ご清聴ありがとうございました︕
Copilot Vision 最新リリース(2025年6⽉29⽇) 画像アップロード/スクリーンショット 解析機能を追加 NEW カスタムインストラクションやロケール 対応も強化 エラー画⾯や設計図を直接 AI に 解析させ、コード⽣成 ⾃分好みの出⼒スタイルや⽇本語での対話 が可能に Swift/Objective-C 対応、 コード補完/⾃動デバッグを 強⼒⽀援 Xcode 上で利⽤可能 Xcode エディタ内で画像から Swift/Objective-C コードを⽣成 Vision AI 技術を活⽤ 画像からエラーを検知し、修正コードを提案 画像内の UI コンポーネント、テキスト、エラーメッセージを⾼精度で認識し、最適なコード解決策を⽣成 NEW
Copilot Vision 実演デモ 1 Xcode 拡張(Copilot for Xcode)を起動 メニューから Editor > GitHub Copilot を選択して拡張機能にアクセス 2 Copilot Chat の画⾯でスクリーンショットをアップロード アップロードボタンをクリック、またはドラッグ&ドロップで画像を追加 3 AI による⾃動解析とコード⽣成 エラーメッセージや画⾯構造を分析し、問題解決策や実装⽅法を提⽰ 4 実際にアプリケーションへコードを反映 Insert at Cursor ボタンで提案コードをプロジェクトに直接追加 使⽤例 ︓UI デザインのスクリーンショットから SwiftUI コードを⽣成、エラー画⾯から解決策を提⽰
Fetch/Memory MCP サーバー構成⽅法
Fetch MCP サーバー
任意の Web API からデータを取得し、
LLM ⽤に最適化
• 外部 REST API への安全なアクセス
• データフォーマット⾃動変換
• レスポンスサイズの最適化
Memory MCP サーバー
取得データの⼀時‧永続保存と再利⽤
•
•
•
ナレッジグラフベースの記憶
システムセッション間でのデータ保持
コンテキスト管理と検索
セットアップ⼿順
1 公式リポジトリからクローン︓github.com/modelcontextprotocol/servers
2
Docker Composeで起動︓docker-compose up -d
3
Xcode の Agent Modeで接続(mcp.json)
{
"servers": [
{
"name": "fetch",
"url": "http://localhost:3000",
"tools": ["fetch"]
},
{
"name": "memory",
"url": "http://localhost:3001",
"tools": ["store", "retrieve", "forget"]
}
]
}
Fetch + Memory MCP サーバーの組み合わせ
• 外部データを取得‧保存
• より⾼度なアプリケーション開発が可能に
MCP サーバーによる EC アプリデモ実装例 Agent Mode プロンプト例 「DummyJSON API https://dummyjson.com/products) から商品データを取得して、商品⼀覧と詳細画⾯の SwiftUI アプリを 作成して」 Fetch MCP サーバーは外部 API を安全に呼び出し、 SwiftUI ⽤のモデル変換も⾃動実⾏ // Agent Modeが⽣成する Product モデル struct Product: Identifiable, Decodable { let id: Int let title: String let price: Double let description: String let thumbnail: String let category: String } MCP サーバー接続フロー Xcode Agent DummyJSON Mode API Fetch MCP サーバー 実装のポイント Fetch MCP は Xcode 拡張内で構成可能 JSON データを⾃動的に Swift モデルに変換 AsyncImage でサムネイル画像も⾃動表⽰ 詳細実装コードと⼿順は : github.com/modelcontextprotocol/servers/blob/main/examples/ecommerce-swift で公開
参考リンク‧資料集 GitHub Copilot for Xcode 動画‧チュートリアル 公式リポジトリ - github.com/github/CopilotForXcode James Montemagno: GitHub Copilot for Xcode インストールとセットアップ、最新リリース情報 Agent Mode + MCP サーバーのセットアップガイド Copilot Vision リリース(2025年6⽉29⽇) GitHub: Copilot Agent Mode in Xcode 画像アップロード機能とカスタムインストラクション対応 公式デモ – MCP サポート機能のショートビデオ 環境設定ドキュメント Agent Mode と MCP サーバーの設定ガイド MCP サーバー 公式サイト - modelcontextprotocol.io MCP 標準仕様と開発者ドキュメント Fetch MCP サーバー データソース・API DummyJSON Products API EC サイト開発⽤のダミー商品データ API Fake Store API 別の EC サイトテスト⽤ API(代替オプション) Web API データ取得⽤の MCP サーバー実装 サンプルコード・デモ Memory MCP サーバー MCP 公式サンプルコード集 ナレッジグラフベースの永続的メモリシステム 様々な MCP サーバー活⽤パターンの実装例 本資料の情報は2025年7⽉11⽇時点。リンク先の最新情報を必ずご確認ください。
ゆる Vibe Coding ハッカソン (7/12) https://findy.connpass.com/event/360376/ • 「VibeCoding でプロダクトを作ってみたいけど機会がない」「VibeCoding でどこまで作れるのか気になる」といった⽅ に向けて VibeCoding でアプリケーションを作り上げるハッカソン • AI に関⼼のあるエンジニアの⽅を集め、オフラインで交流しながら VibeCoding を試すゆるハッカソン︕ • ⽣成 AI に関⼼のあるエンジニアの⽅にとって、VibeCoding の知⾒や他のエンジニアの⽅とリアルで交流する機会を 得られる場となることを⽬指します︕
Azure OpenAI Service Dev Day 2025 by Azure AI Developers Community (JP) AI駆 動 登壇 開発 もあ 勉強 りま 会か す! らの !
Azure OpenAI Dev Day (7/18) https://aoai-devday.com/ 協⼒︓AI 駆動開発勉強会 Microsoft Corporation の⽜尾剛さん(元 Microsoft エバ チーム同僚、現在は Azure Functions チームの SDE)と⼀緒 に、ギターセッションを演ります @ Vibe Coding Corner︕w https://aoai-devday.com/#breakout-track-3
Developers Summit 2025 Summer (7/17-18) https://event.shoeisha.jp/devsumi/20250717/session/5925 ハイブリッド AI 開発プラットフォーム︓FPT AI Factory - Claude Code ・ Gemini CLI とテキスト・画像・動画・⾳声を 統合する次世代アプリ開発戦略 –
VIBE CODING CATFE TOKYO by RevenueCat 世界中で注⽬の AI 駆動開発スタイル「バイブコーディング」の最前線を東京で体感 六本⽊ヒルズカフェを7⽉29⽇(⽕)〜 8⽉1⽇(⾦)で貸切︕︕ 有識者セッション ✖ AI 駆動開発メンバー討論 ✖ 毎晩 DJ / JAZZ ライブ等々 VIBE CODING CATFE TOKYO 有識者セッション 7⽉31⽇の夜には 「AI 駆動開発の未来」を 熱く語るパネルディスカッション も開催します︕︕
Google Cloud Next Tokyo 2025(8/5-6) https://www.googlecloudevents.com/next-tokyo/sessions?session_id=3123576
AI 駆動開発 Conference Autumn 準備中︕ 8⽉参加登録開始 予定︕
Thank you for your attention!