仕様駆動 × ハイブリッド AI 基盤 × 3分デプロイで実装するモバイルアプリ + AI Agent_modified

仕様駆動 × ハイブリッド AI 基盤 × 3分デプロイで実装する モバイルアプリ + AI Agent 鈴⽊ 章太郎 Executive Evangelist, FPT Data & AI Integration FPT Japan Holdings

鈴⽊ 章太郎 X (Twitter) : @shosuz https://www.docswell.com/user/shosuz FPT ジャパン FPT データ & AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼最⾼情報セキュリティアドバイザー 略歴︓ AI 駆動開発勉強会主催。 AI 駆動開発コンソーシアム副座⻑。 Microsoft エバンジェリスト時代から、Dell、Accenture、Elastic、 VMware を経て現職まで20年に渡り⼀貫して開発者向けに最新 技術啓発活動を実施。現在は NVIDIA GPU クラウド技術を訴求。 政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を 経て、現職を兼務。DX 推進、CISO 補佐、デジタル庁連携等。

• https://www.docswell.com/user/shosuz

アジェンダ • • • • • • • • • • • • • 今回開発する EC アプリの概要 Spec Kit で仕様ファイル⽣成 Specify → Plan → Task → 実装 Agent HQ MCP と Agent Skills の呼び出し Vector DB の構築 クラウド PaaS (Zeabur) への3分デプロイ セマンティック検索 + RAG 推薦の実装 Claude Code / GitHub Copilot の実⾏環境としての GPU クラウド AI Routing Engine の切替 モバイルアプリ実装（Swift） まとめ Appendix

今回開発する⽂房具 EC アプリのアーキテクチャ pgvector: セマンティック検索 AI 推論エンジン: Embedding ⽣成 + RAG 推薦 + チャットボット

今回開発する⽂房具 EC アプリの技術スタック ■ 技術スタック • バックエンド: Spring Boot 3.x + Java 17 • モバイル: Swift (iOS) / Kotlin (Android) • データベース: Azure PostgreSQL + pgvector • デプロイ: クラウド PaaS (Zeabur) ■ 主要機能 • 1,000件の⽂房具商品データ • セマンティック検索（pgvector によるベクトル検索） • AI による商品推薦（RAG） • ハイブリッド AI 基盤（FPT AI Factory ⇄ Azure OpenAI） ■ 開発⼿法 • 仕様駆動開発（Spec Kit） • Agent HQ（マルチモデル統合管理） - Claude Opus/Sonnet 4.6, GPT-5.2/5.3 Codex 等から選択 • GitHub Copilot × Agent Skills • MCP Server 連携

仕様駆動開発と spec-kit 活⽤ 仕様駆動開発とは 従来の開発との違い ■ ソースコードよりも"仕様ファイル"が開発の中⼼・スタート地点と ■ 従来の開発プロセス なる新しいシフトレフト型プロセス 事前に詳細な仕様（JSON / YAML / markdown 等） ■ を策定 ■ AI / エージェント・⾃動化ツールで⼀括実装 ■ リファクタリングまで⾃動化 "1つの仕様が全てのアウトプットを駆動する" → 速度・品質・ドキュメント整合性の劇的向上 1 要件定義 ■ マルチ AI 連携によるエージェント駆動 ■ GitHub Copilot + Agent Mode + MCP サーバー → コード開発 3 テスト・ ドキュメント ドキュメントが遅れ、テストと実装の乖離が発⽣しやすい ■ Spec-Driven 開発プロセス 実現のポイント ■ GitHub spec-kit（仕様中⼼開発の OSS） 2 → 仕様ファイル作成 C T D I コード テスト ドキュメント インフラ 全体を司る"仕様中⼼ループ"が⾃動で回る新時代のチーム開発プロセス https://github.com/github/spec-kit?tab=readme-ov-file#-what-is-spec-driven-development

• https://github.com/github/spec-kit?tab=readme-ov-file

GitHub spec-kit による6段階ワークフローと 対応 AI エージェント Claude Opus 4.6 / GPT-5.2 or 5.3-Codex 等を選択可能 1 2 仕様（spec） ファイル作成 3 コード/インフラ/ ドキュメント⾃動⽣成 仕様査読・承認 仕様中⼼ループの ワークフロー 6 5 仕様と実装・ ドキュメントの整合性 検証＆変更追従 PullRequest ＆ レビューワークフローへの ⾃動投⼊ ■ 仕様駆動開発の⾰新︓ ソースコードよりも“仕様ファイル”が開発の中⼼・スタート地点となる 新しいシフトレフト型プロセス ■ 各⼯程に対応する AI Agent/エンジン︓ 4 • 仕様解析/⽣成︓GPT 5.2 or 5.3-Codex, Claude 4.6 等 • Code/E2E ⽣成︓Copilot Agent (Agent Mode) × MCP サーバー群 エンド to エンド テスト⾃動⽣成 ■ 仕様ファイル例︓ OpenAPI / AsyncAPI / YAML / Markdown ■ MCP サーバー連携例︓ GitHub MCP、Figma MCP、Playwright MCP ■ "1つの仕様が全てのアウトプットを駆動する" → 速度・品質・ドキュメント整合性の劇的向上

Constitution.md - プロジェクト憲章 【最初に読むべきガードレール】 📋 Constitution.md とは︖ • プロジェクトの基本原則・価値観・制約を明⽂化した ガードレール • ゼロトラスト原則の規範化 → 「機密情報を外部に 送らない」 • AI ツールの⼀貫性を担保 → セキュアな設計を提案 させる 📝 記載内容 • 仕様書駆動開発の原則 （Spec-Driven Development） • セキュリティファースト（SQL インジェクション、XSS 対策） • 技術スタック制約 （Spring Boot 3.x, PostgreSQL 15, React 18…） • ✨ NEW: GitHub Copilot Agent HQ では .copilot/ フォルダに統合 └ .claude-code/ → .copilot/ へ移⾏ • コーディング規約・禁⽌事項（⽣ SQL の使⽤禁⽌など） 🤖 GitHub Copilot での使い⽅ "@workspace /spec .github/spec/Constitution. md このプロジェクトの設計原則と セキュリティポリシーを教えて"

スペック駆動開発の全体フロー specify（要件定義） plan（設計） task（タスク分解） 実装 テスト

スペック駆動開発の全体フロー 📋 ✅ Constitution.md requirements.txt 🏗 Specify Plan Task 要件⼊⼒ 要件定義 設計 タスク分解 📝 💻 GitHub Copilot 等で実装 従来の開発プロセスを⼤幅に効率化

Task - 実装可能なタスクに分解
📊 Task 1: データベース設計

Ready

ALTER TABLE products
ADD COLUMN embedding vector(1536);

Send to GitHub Copilot

🎨 Task 3: UI コンポーネント

Ready

struct RecommendedProductsView: View {
// 推薦商品表⽰
}

Send to GitHub Copilot

💻 Task 2: API 実装

Ready

@PostMapping("/api/products/recommend")
public List<Product> recommendProducts(
@RequestBody RecommendRequest request) {
// 実装
}
Send to GitHub Copilot

✅ Task 4: テスト実装

Ready

単体テスト / 統合テスト
E2E テスト / パフォーマンステスト

Send to GitHub Copilot

データベース: PostgreSQL + pgvector ✅
バックエンド: Spring Boot 3.x + Java 17 ✅
モバイル: Swift (iOS) ✅
テスト: 網羅的 ✅

✅ タスク分解完了 →
GitHub Copilot へ送信準備完了

Agent HQ - 複数 AI を統合管理

GitHub Copilot における Agent Skills 標準装備 インフラ IaC、VectorDB デプロイ、API 実装、モバイルアプリ実装、全てに使える 3段階の読み込みプロセス Agent Skills とは Coding Agent に「実際の作業⼿順」を把握させる機能 特定のタスクを実⾏するための「⼿順書」のような役割を果たします。 name / description から存在を認識 3つの構成要素 指⽰ Instructions 1. Skill 発⾒ スクリプト リソース Scripts Resources 2. 指⽰の読み込み SKILL.md の内容をロード 最低限、ディレクトリに SKILL.md があれば Skill として機能します。 GitHub Copilot in VS Code での使い⽅ • 配置場所: .github/skills/ 配下 に Skill ごとのディレクトリを作成 .github/skills/<skill-name>/ └── SKILL.md • 必須ファイル: SKILL.md を作成 --name: deployment-helper Point: Copilot は description を ⾒て、その Skill を読み込むか判断 ✨ GitHub Copilot Agent HQ で利⽤可能 description: Helps with deployment tasks --- 3. リソースアクセス スクリプトやドキュメントを参照 使い分けの原則 ⼿順通り動いてほしい "定型ワークフロー" は Skills で定義する テスト⼿順 Claude Opus / Sonnet 4.6、GPT-5.2 / 5.3-Codex 等を選択可能 デプロイフロー デバッグルール

MCP vs Skills の使い分け MCP と Skills の関係 組み合わせのメリット 明確な発⾒ (Discovery) MCP 接続性 (Connectivity) ツールやデータへの 「アクセス」を提供する Skills 専⾨知識 (Expertise) ツールをどう使うか 「⼿順」を教える ハードウェアストアの例え 「棚にある道具」と「詳しい店員」の関係 MCP Claude 等 がどこを⾒るべきか、推測ではなく、特定の情報源を 的確に参照する。 信頼性の⾼い実⾏ (Orchestration) マルチステップのワークフローを、定義された⼿順通りに実⾏する。 ⼀貫したパフォーマンス 出⼒フォーマットや品質が基準を満たし、⼿直しを減らす。 使い分けの原則 : 商品棚や通路へのアクセス （道具はあるが、どれをどう使うかは分からない） Skills : 知識豊富な店員 （⽬的に合った道具を選び、正しい使い⽅を教えてくれる） ✨ GitHub Copilot Agent HQ で統合管理 ← ├ .copilot/ フォルダで SKILLS.md と mcpServers.json を管理 https://claude.com/blog/extending-claudecapabilities-with-skills-mcp-servers 「どうやって (How)」を説明する場合 Skills ⼿順、ワークフローの定義 標準、フォーマット、⽅法論 「私の頭の中にある知識」の明⽂化 「アクセス (Access)」が必要な場合 MCP リアルタイムデータの取得 外部システムでのアクション実⾏ API との連携機能

• https://claude.com/blog/extending-claude-capabilities-with-skills-mcp-servers

Agent Skills のセキュリティ設計 ❌ 間違った設計 • Agent Skills に実⾏権限を ✅ 正しい設計 実装例 • Agent Skills = 思考のフレームワーク 1. Identity 確認（MCP） • 実⾏権限は MCP Server が保持 2. Security 判定（MCP） • Security/Identity/Observability 3. AI Routing Engine 呼び出し 付与 • Admin に近い処理を実⾏ • プロンプトインジェクション 統合 4. Observability ログ（MCP） • 危険な操作の実⾏ • プロンプトインジェクション防御 考え⽅︓Agent Skills = 「考える」 / MCP Server = 「実⾏する」

Agent Skill Ninja によるスキル管理 ❌ 従来の課題 • スキルの配置が⾯倒 → .github/skills/ に⼿動配置 • AGENTS.md の⼿動更新 → スキルパスを毎回コピペ • どこにスキルがあるか分からない → GitHub を⼿動で探す byやまぱん！(@aktsmm) ✅ Agent Skill Ninja で解決 • 100+ スキルをワンクリックインストール → キーワード検索で即座に発⾒ • AGENTS.md / copilot-instructions.md を ⾃動更新 → スキル追加時に⾃動で反映 • Official / Curated / Community の信頼度 バッジ → 安⼼してスキルを選べる • MCP ツール連携で Agent Mode から利⽤可能 → Copilot Chat から直接操作 https://github.com/aktsmm/vscode-agent-skill-ninja

• https://github.com/aktsmm/vscode-agent-skill-ninja

GitHub Codespaces 上での Copilot への指⽰

Agent Skills + AI IaC による Azure SQL Database for Postgres デプロイ

データベース設計（pgvector 統合）

データベース設計コード -- PostgreSQL + pgvector 拡張 CREATE EXTENSION IF NOT EXISTS vector; -- 商品テーブル CREATE TABLE products ( id bigserial PRIMARY KEY, name varchar(255) NOT NULL, description text, price decimal(10,2), category varchar(100), stock integer, embedding vector(1536) -- セマンティック検索⽤ ); -- ベクトル検索⽤インデックス CREATE INDEX idx_product_embedding ON products USING ivfflat (embedding vector_cosine_ops) WITH (lists = 100);

SQL Azure Database for PostgreSQL + pgvector

Zeabur 3分デプロイ

Zeabur デプロイ設定 ✅ 設定ファイル不要 • GitHub リポジトリ接続 └ stationery-api を選択 • Zeabur が⾃動検出 ✓ Java 17 ✓ Spring Boot 3.3.0 ✓ Maven • 環境変数を設定 ✓ DATABASE_URL ✓ AZURE_OPENAI_* • Codespacecs を開いて git push → ⾃動デプロイ └ 3分以内に完了

セマンティック検索実装シーケンス図 1 Level 1パターン（公開情報 → Azure OpenAI）

セマンティック検索実装シーケンス図 2 Level 2パターン（購買履歴参照 → FPT AI Factory）

セマンティック検索実装（Spring Boot）
// ProductRepository.java
@Query(value = """
SELECT *,
1 - (embedding <=> CAST(:embedding AS vector)) as similarity
FROM products
WHERE 1 - (embedding <=> CAST(:embedding AS vector)) > :threshold
ORDER BY embedding <=> CAST(:embedding AS vector)
LIMIT :limit
""", nativeQuery = true)
List<Product> searchByVector(
@Param("embedding") float[] embedding,
@Param("threshold") double threshold,
@Param("limit") int limit
);
// ProductController.java
@GetMapping("/search")
public ResponseEntity<SearchResponse> semanticSearch(
@RequestParam String query) {
float[] embedding = openAIService.createEmbedding(query);
List<Product> results = productRepository
.searchByVector(embedding, 0.6, 10);
return ResponseEntity.ok(new SearchResponse(results));
}

商品推薦 AI Agent の役割 ■ Agent の⾃律的な動作 ユーザー⼊⼒: 「冬に暖かい靴が欲しい」 ↓ 【Agent が⾃動実⾏】 1. セマンティック検索（pgvector）で関連商品を取得 2. ユーザーの購買履歴（user_preferences）を参照 3. RAG で推薦理由を⽣成 ↓ 結果: 「この商品は防⽔性があり、過去に似た商品を購⼊されています」 ■ ハイブリッド AI 基盤の活⽤ • Embedding ⽣成: FPT AI Factory（オンプレ） • RAG 推薦⽂⽣成: Azure OpenAI GPT-4.1他（クラウド） • データ主権を守りながら⾼度な AI 活⽤を実現 GPT 4.1 ~

Agent 実装の流れ（Spec-Driven開発）
■ Spring Boot 実装例

■ Constitution.md で Agent のルール
を定義

@Service

• セキュリティポリシー:

public RecommendationResponse recommend(String userQuery, Long
userId)

個⼈情報は外部に送信しない

public class ProductRecommendationAgent {

{

• AI Routing ルール:

// 1. AI Routing Engine で判定

データ機密性に応じて切替

AIProvider provider = aiRoutingEngine.route(userQuery, userId);
// 2. Embedding ⽣成（FPT AI Factory）

• 推薦ロジック:

float[] embedding = fptAIService.createEmbedding(userQuery);

セマンティック検索 + RAG

// 3. セマンティック検索（pgvector）
List<Product> products = productRepo.searchByVector(embedding);

■ GitHub Copilot Agent Mode で
⾃動⽣成

// 4. RAG 推薦⽂⽣成（Azure OpenAI）
String reason = azureOpenAI.generateRecommendation(products,

"@workspace /agent 商品推薦 Agent を
Constitution.md のルールに従って実装して"

userPrefs);
return new RecommendationResponse(products, reason);
}
}

FPT AI Factory と Azure OpenAI の例 項⽬ FPT AI Factory（オンプレ） Azure OpenAI（クラウド） データ主権 ✅ オンプレミス・完全管理 ❌ クラウド・外部管理 レイテンシー ✅ 超低遅延（社内NW） ✅ インターネット経由だが低遅延 コスト ✅ 従量課⾦(下り課⾦なし） 💰 従量課⾦ スケール ⭕ H200 x 8台 マネージドクラスターや Bare Metal、IaaS 等、数千ノードが データセンターに配置 ✅ 事実上無制限 モデル Gemma、Nemotron、Qwen、Llama、 GPT-4.1、4o、5.x、Claude 4.x gpt-oss-120b、他 他

⼩さいモデルと同等の速度で、8倍⼤きいモデルが動く / ネットワーク越しでも実⽤的な速度 / 閉域網で機密データ保護

AI ルーティング判定フロー 決定論的なものなのでロジックは AI に実装させない

AI Routing Engine 切替詳細(例) // AI Routing Engineの切替コード let aiEngine = AIRoutingEngine.shared // FPT AI Factory（オンプレ）を使⽤ aiEngine.setProvider(.fptAIFactory) let result1 = await aiEngine.recommend(query: "おすすめ商品") // Azure OpenAI（クラウド）に切替 aiEngine.setProvider(.azureOpenAI) let result2 = await aiEngine.recommend(query: "おすすめ商品") • FPT AI Factory → Azure OpenAI への切替をコード1⾏で実現 • 同じインターフェースで複数の AI 推論エンジンを利⽤可能

AI Routing Engine の判定基準 ■ データの機密性レベルで⾃動判定 Level 3（⾼機密）: 信⽤情報、医療情報、⾦融取引 → FPT AI Factory（オンプレミス） Level 2（機微情報） : 個⼈識別情報、購買履歴 → FPT AI Factory（オンプレミス） Level 1（公開情報）: 商品説明、⼀般的なクエリ → Azure OpenAI（クラウド） ■ その他の判定要素 • レイテンシ要件: <100ms → オンプレ優先 • モデル性能要件: ⾼度な推論 → Azure OpenAI GPT-5.x • コスト最適化: ⼤量トークン → オンプレでコスト削減 【判定ロジックの実装】 • Constitution.md で判定ルールを定義 • タスク種別 ・データ属性、レイテンシ等で⾃動判定 - 個⼈情報を含む → Level 2 - 購買履歴を参照 → Level 2 - 商品説明のみ → Level 1 • 実装︓ Constitution.md で判定ロジックを定義 Spring Boot + ルールエンジンで実⾏もあり

モバイルアプリ 画⾯案を AI ツールで⽣成

⽣成された画像から Swift Code ⽣成 // ProductSearchView.swift struct ProductSearchView: View { @State private var searchQuery = "" @State private var aiProvider: AIProvider = .fptAIFactory @StateObject private var viewModel = ProductSearchViewModel() var body: some View { VStack { // AI切替トグル Picker("AI Engine", selection: $aiProvider) { Text("🔵 FPT") .tag(AIProvider.fptAIFactory) Text("🟢 Azure") .tag(AIProvider.azureOpenAI) } // 検索バー TextField("商品を検索", text: $searchQuery) .onSubmit { viewModel.search( query: searchQuery, provider: aiProvider) } // 結果リスト List(viewModel.products) { product in ProductRow(product: product) } } } }

まとめ - 今回ご紹介した内容 • • • • • • • • • • • • • 今回開発する EC アプリの概要 Spec Kit で仕様ファイル⽣成 Specify → Plan → Task → 実装 Agent HQ MCP と Agent Skills の呼び出し Vector DB の構築 クラウド PaaS (Zeabur) への3分デプロイ セマンティック検索 + RAG 推薦の実装 Claude Code / GitHub Copilot の実⾏環境としての GPU クラウド AI Routing Engine の切替 モバイルアプリ実装（Swift） まとめ Appendix

参考資料 📚 参考URL⼀覧（リソーススライド⽤） Agent HQ 関連 https://github.blog/news-insights/company-news/welcome-home-agents/ https://github.blog/news-insights/company-news/pick-your-agent-use-claude-and-codex-on-agent-hq/ https://docs.github.com/en/copilot/how-tos/use-ai-models/change-the-chat-model https://code.visualstudio.com/blogs/2025/11/03/unified-agent-experience https://code.visualstudio.com/docs/copilot/agents/overview GitHub Copilot https://github.com/features/copilot https://github.com/features/copilot/agents https://docs.github.com/en/copilot Spec-Driven Development https://github.com/github/spec-kit Agent Skills & MCP https://github.com/aktsmm/vscode-agent-skill-ninja https://marketplace.visualstudio.com/items?itemName=yamapan.agent-skill-ninja https://claude.com/blog/extending-claude-capabilities-with-skills-mcp-servers Claude https://www.anthropic.com/claude https://www.anthropic.com/news/claude-opus-4-6 https://x.com/bcherny/status/2023801162634572082?s=46&t=x8ThQ5xz1EucrC3ss1gHig Zeabur https://zeabur.com/ FPT AI Factory https://factory.fpt.ai/ja/

• https://github.blog/news-insights/company-news/welcome-home-agents/
• https://github.blog/news-insights/company-news/pick-your-agent-use-claude-and-codex-on-agent-hq/
• https://docs.github.com/en/copilot/how-tos/use-ai-models/change-the-chat-model
• https://code.visualstudio.com/blogs/2025/11/03/unified-agent-experience
• https://code.visualstudio.com/docs/copilot/agents/overview
• https://github.com/features/copilot
• https://github.com/features/copilot/agents
• https://docs.github.com/en/copilot
• https://github.com/github/spec-kit
• https://github.com/aktsmm/vscode-agent-skill-ninja
• https://marketplace.visualstudio.com/items?itemName=yamapan.agent-skill-ninja
• https://claude.com/blog/extending-claude-capabilities-with-skills-mcp-servers
• https://www.anthropic.com/claude
• https://www.anthropic.com/news/claude-opus-4-6
• https://x.com/bcherny/status/2023801162634572082?s=46&amp;t=x8ThQ5xz1EucrC3ss1gHig
• https://zeabur.com/
• https://factory.fpt.ai/ja/

Thank you!

Agent HQ での Issue 管理と並⾏開発 ① 並⾏開発（Parallel Coding）の実現

Agent HQ での Issue 管理と並⾏開発 ② Issue を直接エージェントに割り当て

Agent HQ での Issue 管理と並⾏開発 ③ Claude Code × GitHub CLI 連携

Agent HQ での Issue 管理と並⾏開発 ④ どこからでもエージェント管理

Figma 公式 Skills の実例︓精度向上の実証 📋 Figma 公式 Skills 6段階ワークフロー 1. 変換対象のフレーム ID を取得 2. レイアウト、タイポ、カラー、コンポー ネント構造を取得 3. Figma デザインのスクリーンショット を取得 4. 既存のデザインシステムと整合性を とる 5. 画像とコードを⽐較 6. 最終調整 💡 Skills = 「MCP をどう使うか」の⼿順書 / MCP = 「何ができるか」のツール