AIに視覚を与えモバイルアプリケーション開発をより円滑に行う

AIはコードを読めても「画面の状態」を自分で確認できません。本資料では、MCPサーバー経由でAIにシミュレーターを操作させ視覚を与えることで、iOSアプリのUIテストを自律化した実践を紹介します。iOS Simulator MCP・Xcode MCP・Maestro MCP・独自開発Snap Drive MCPの4つの手法と、プロンプト設計より環境設計が鍵になるという知見を紹介しています。

Transcript

1. © LY Corporation LINEヤフー株式会社 Masami Yamate AIに視覚を与え iOSアプリケーション開発を より円滑に行う
2. © LY Corporation Agenda 01 Vibe Codingが提唱されてから1年 02 人間ができることを見直す 03 AIと人間の目線を揃える 04 普段得られる情報を整理する 05 MCPサーバーを活用して、AIと目線を揃える 06 まとめ 2
3. © LY Corporation Masami Yamate (aikawa) • Yahoo!乗換案内・Yahoo!マップのiOSアプリケーション開 発を担当 • 生成AIを活用したモバイルアプリケーションの開発手法を公 私を通し、日々模索中 X(Twitter)：aikawa_japan 3 2016~2019 ジョルダン株式会社：iOS App, Amazon Alexa 2019-2022 株式会社LIFULL：iOS App 2023~ LINEヤフー株式会社 ：iOS App
4. © LY Corporation 皆さん、AIを活用していますか？ 4
5. © LY Corporation 5
6. © LY Corporation 皆さん、AIと協業できてますか？ 6
7. © LY Corporation 7
8. © LY Corporation 8 私たちは激動の1年を過ごしてきた Vibe Codingが提唱されてから1年 2025年2月 • Vibe CodingがAndrej Karpathy氏によって提唱 • Claude Code Research Preview Release 2025年4月 • Codex CLI Release 2025年5月 • Claude CodeがClaude Maxプランで定額利用可能に • Claude 4発表 2025年6月 • Claude CodeがClaude Proプランで定額利用可能に 2025年8月 • GPT-5発表、Codex CLIが定額利用可能に 2026年2月 • GPT-5.3-Codex発表 • Opus4.6発表 時は流れ…
9. © LY Corporation とても刺激的で、楽しい1年でもありました この1年間大変だった.. 9
10. © LY Corporation 10 「手を動かす」から「舵を握る」へ 人間ができることを見直す • AIと同じ土俵で戦うことはできない、人間はAIには勝てない • コーディングなどの作業スピードは、勝ち目がない • 現場レベルのことはAIに委譲し、人間は意思決定に専念する • コードは書かない、評価し判断することが求められる
11. © LY Corporation 11 AI主導によるコーディングによって、人間の判断の遅さがボトルネックになる 人間ができることを見直す
12. © LY Corporation 12 ボトルネックを軽減させる AIと人間の目線を揃える • 仕様書の事前共有 → 「MCP Atlassian」で、Confluenceの仕様書を事前に読み込ませる • デザイン案の事前共有 → 「Figma MCP」で、デザイン案を事前に読み込ませる • コーディング規約や開発ルールの事前共有 → CLAUDE.md・AGENTS.mdの改善 • プロンプトの改善 → 曖昧な依頼ではなく、何を求めているか明確に依頼する → ここまで出来て、70点から80点
13. © LY Corporation 13 AIに視覚を与え、残り20点の差分を埋める AIと人間の目線を揃える • AIは、画像を理解できるが、画像を得るための手段がない • 人間は、画像を得るための手段を持つため、細かな判断を即時に行える → だからこそ、AIと目線を揃えるためにAIに視覚を与える必要がある
14. © LY Corporation • iOS SimulatorやXcodeから得られる情報 • スクリーンショット • iOS Simulatorの画面 • Viewの階層情報 • アクセシビリティの情報 • 状態遷移 (操作し、どういう結果になるか) 14 普段得られる情報を整理する
15. © LY Corporation • 人間との壁打ちの目線を揃えるために使う • iOS Simulator MCP • Xcode MCP • テストの構築支援に使う • Maestro • Snapdrive 15 MCPサーバーを活用して、AIと目線を揃える
16. © LY Corporation • 人間が手動で、補足情報を与えなくても自分で取りに行ける様にする • 言葉だけでは伝えづらい意図も補完しやすくなる • iOS Simulator MCP • Simulatorのスクリーンショット撮影、取得を自動化 • Xcode MCP • Previewマクロが利用可能なコンポーネントの画像取得を自動化 16 人間との壁打ちの目線を揃えるために使う MCPサーバーを活用して、AIと目線を揃える
17. © LY Corporation 17 iOS Simulator MCP
18. © LY Corporation 18 テストの構築支援に使う MCPサーバーを活用して、AIと目線を揃える • 画面が見れるなら、人間同様にE2Eテストも自律的に組み立てられる • コードやスクリーンショットの情報を組み合わせ、遷移動線を理解できる • E2EテストやSnapshotテストの維持コストもAIに移譲できる • 地味に工数かかる部分を削減 • Maestro MCP • 自然言語ベースで、E2Eテストのフローを組み立てる • Snapdrive MCP • 自然言語ベースで、Snapshotテストのフローを組み立てる
19. © LY Corporation 19 Maestro MCP • 自然言語ベースで、E2Eテストのフローを組み立てる
20. © LY Corporation 20 Snapdrive MCP • 自然言語ベースで、Snapshot Testのフローを組み立てる
21. © LY Corporation • 仕様・デザイン・規約は事前共有が必須 • MCPサーバーを活用し、視覚情報を取得可能にする • テスト構築もAIに移譲できる • 人間は網羅性と妥当性の判断に集中する → プロンプトチューニングの一歩先、環境設計が鍵 21 AIとの協業設計 まとめ
22. © LY Corporation Thank you