Dart and Flutter MCP serverで実現する AI駆動E2Eテスト整備と自動操作

Transcript

1. © LayerX Inc. Dart and Flutter MCP serverで実現する AI駆動E2Eテスト整備と⾃動操作 2025/11/13 FlutterKaigi 2025 さかい @株式会社LayerX X: @yu12k25i
2. © LayerX Inc. 2 所属 株式会社LayerX バクラク事業部 申請‧経費精算チーム 酒井佑旗（@yu12k25i） ⾃⼰紹介 経歴 電気通信⼤学‧⼤学院 CS修⼠卒 2025年4⽉ LayerXに新卒⼊社 趣味 体を動かすこと（野球, バスケ, ゴルフ, ⼭登り...）
3. 3 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに、AI SaaSとAI DXの事業を展開 事業紹介 バクラク事業 企業活動のインフラとなる業務を 効率化するクラウドサービス Fintech事業 ソフトウェアを駆使したアセットマネジ メント‧証券事業を合弁会社にて展開 AI‧LLM事業 社内のナレッジやノウハウをデータ ベース化するAIプラットフォーム AI SaaSドメイン AI DXドメイン
4. © LayerX Inc.　 4 「バクラク」シリーズラインナップ ‧年会費無料で何枚でも発⾏可 ‧カード利⽤制限で統制を実現 ‧通常1%以上の還元 法⼈カードの発⾏‧管理 ‧直感的UIで従業員の負担を軽減 ‧Slack連携で打刻や⾃動リマインド可能 ‧わかりやすい残業 / 休暇管理レポート 勤怠管理 ‧帳票の⼀括作成も個別作成も⾃由⾃在 ‧帳票の作成‧稟議‧送付‧保存を⼀本化 ‧レイアウトや項⽬のカスタマイズも可能 請求書発⾏ ‧スキャナ保存データも直接取込  ‧AI-OCRが⾃動読取＆データ化 ‧[取引先][取引⽇][取引⾦額]での検索 帳票保存‧ストレージ ‧来春リリース予定/事前登録受付中 ‧給与計算の前後の業務も⼀気通貫で  効率化 ‧⼿計算やExcel作業を限りなくゼロに 給与 稟議‧⽀払申請 ‧AIが請求書を５秒でデータ化 ‧仕訳 / 振込データを⾃動作成 ‧電帳法‧インボイス制度にも対応 債務管理（⽀出管理） ‧AI活⽤の消込機能で⼊⾦消込をラクに ‧取引先リマインド/未⼊⾦督促を半⾃動化 ‧売上仕訳‧⼊⾦仕訳も柔軟に作成 債権管理（⼊⾦管理） ‧AIが⾒積書‧請求書を５秒でデータ ‧スマホからも申請‧承認OK ‧柔軟な通知設定‧承認の催促機能 ‧AIが領収書を5秒でデータ化 ‧スマホアプリとSlack連携あり ‧領収書の重複申請などミス防⽌機能 経費精算 稟議‧⽀払申請
5. ⽬次 Agenda • AIによるモバイル⾃動操作 • E2E整備への応⽤ • つまりポイント • DEMO • 実現してみての課題
6. E2Eテストの実装⼤変じゃないですか？
7. 7 © LayerX Inc. E2Eテストの実装がなぜ⼤変なのか E2Eテストの実装⼤変じゃないですか？ UIへの依存度が⾼い • UIの変更に合わせて都度修正が必要となる • 依存度を下げるにはValueKeyなど設定して、ウィジェット識別時のUI依存を下げる必要がある シナリオ設計‧実装が⼤変 • ステップの粒度や操作順序など専⾨的な知識が求められる • 網羅性を確保するために、多数のテストケースを⽤意する必要がある • シナリオの数だけ実装が必要となる
8. 8 © LayerX Inc. 注意 • ⼩規模な個⼈プロジェクトでの検証を元にお話しします • プロダクションレベルでの実⽤には⾄っていません • AI周辺のテクノロジーは移り変わりがとても早いです。根底の考え⽅に着⽬していただけると幸いです AIによるデバイス⾃動操作で、 E2Eの実装を楽にする⽅法を提案します E2Eテストの実装⼤変じゃないですか？
9. AIによるモバイルアプリの⾃動操作
10. 10 © LayerX Inc. ⼈はどのようにアプリを操作するか AIによる⾃動操作 画⾯情報を 取得 画⾯操作 画⾯状態を 解釈 アクションの 決定 画⾯情報の取得‧解釈、アクションの決定‧実⾏の繰り返し 👀 🧠 🧠
11. 11 © LayerX Inc. ⼈はどのようにアプリを操作するか AIによる⾃動操作 画⾯情報を 取得 画⾯操作 画⾯状態を 解釈 アクションの 決定 画⾯情報の取得‧解釈、アクションの決定‧実⾏の繰り返し これAIでできそうじゃない？ AI = LLMエージェント（Claude Code, Cursor …） 👀 🧠 🧠
12. 12 © LayerX Inc. なぜAIで実現できると考えたか AIによる⾃動操作 画⾯情報を 取得 画⾯操作 画⾯状態を 解釈 アクションの 決定 Dart VM Serviceで取得可能 AIがテキスト‧スクショを解釈可能 AIが画⾯状態に基づき、アクションを推論可能 Flutter Driverで実⾏可能 👀 🧠 🧠
13. 13 © LayerX Inc. なぜAIで実現できると考えたか AIによる⾃動操作 画⾯情報を 取得 画⾯操作 画⾯状態を 解釈 アクションの 決定 Dart VM Serviceで取得可能 AIがテキスト‧スクショを解釈可能 AIが画⾯状態に基づき、アクションを推論可能 Flutter Driverで実⾏可能 Dart and Flutter MCP Serverを使うことで実現可能 Dart MCP Serverについては後ほど詳しく触れます 👀 🧠 🧠
14. 14 © LayerX Inc. Dart MCP Serverでどう⾃動操作するか AIによる⾃動操作 画⾯情報を 取得 画⾯操作 画⾯状態を 解釈 アクションの 決定 Dart MCP Serverでウィジェットツリー、スクショを取得 AIがウィジェットツリー‧スクショを解釈 AIが画⾯状態に基づき、アクションを推論 Dart MCP Server経由でFlutter Driverで実⾏
15. 15 © LayerX Inc. しかし、これだけでは上⼿く⾃動操作させられません これも理由は後ほど AIによる⾃動操作
16. Dart and Flutter MCP server
17. 17 © LayerX Inc. Dart and Flutter MCP Server (Dart MCP Server) Dart and Flutter MCP server DartおよびFlutterの開発ツールを提供するMCP Server • Model Context Protocol（MCP）とは、AIが外部ツールやデータと連携するための規格 • Dart MCP ServerはDart, Flutterの開発ツールに特化 • Dart 3.9でリリース ◦ それ以降も様々なツールが追加されている • 本発表では3.10以降の変更も含めてお話しします Tools • dart_fix • dart_format • flutter_driver • get_runtime_errors • get_widget_tree • hot_reload • hot_restart • pub_dev_search • run_tests • launch_app • list_devices • などなど 参考: https://github.com/dart-lang/ai/blob/main/pkgs/dart_mcp_server
18. 18 © LayerX Inc. Dart and Flutter MCP server 引⽤: https://x.com/FlutterDev/status/1950239900336365634?s=20
19. 19 © LayerX Inc. Dart VM Service 中⾝はどうなってる？ Dart関連のサービスと通信し、結果を返す • Dart Analysis Server、pub.dev、Dart VM Service等と通信 • DartでMCPを作るためのパケージであるDart MCPを利⽤してMCP Server化 • Dart VM Serviceとは、Dart Tooling Daemon(DTD)を介して通信 ◦ Dart VM Service, DTDはDart/Flutterアプリケーションと通信するための仕組み AIツール Dart MCP Server Dart Analysis Server pub.dev Dart and Flutter MCP server
20. 20 © LayerX Inc. 画⾯情報の取得‧操作にはFlutter Driverを利⽤ Flutter DriverとはUIテストを⾃動化するためのライブラリ • Patrol, Maestro, flutter_integration_test以前のE2Eツールとして利⽤されていた • 各種ツリーの取得や画⾯操作を担う • テキストやValueKey、Semantic Labelでウィジェットを特定することが可能 Dart and Flutter MCP server
21. ⾃動操作のE2Eテスト作成への応⽤
22. 22 © LayerX Inc. そもそもE2Eテストとは E2Eテスト作成への応⽤ ユーザー視点でEnd-to-Endでシステムが正しく動くか検証するテスト • ユーザーと同じインターフェースで検証する • ユーザーストーリーに基づいてテストする いつ作成するか • テストシナリオは実装前 ◦ シナリオはユーザーストーリーに依存し、実装に依存しない • テストコードは実装後 ◦ コードは実装に依存するため、実装後にしか着⼿できない
23. 23 © LayerX Inc. どこで⾃動操作を使うか シナリオを⾃然⾔語で書いて、実⾏をAIに任せる？ E2Eテスト作成への応⽤
24. 24 © LayerX Inc. どこで⾃動操作を使うか シナリオを⾃然⾔語で書いて、実⾏をAIに任せる？ E2Eテスト作成への応⽤
25. 25 © LayerX Inc. なぜE2Eの実⾏を任せるのが良くないのか E2Eテストに求められること • 再現性 • 実⾏速度 ではAIによる⾃動操作は？ • 確率的なので再現性がない • 推論に時間がかかるため、実⾏速度も遅い E2Eテスト作成への応⽤
26. 26 © LayerX Inc. 改めてE2Eテスト作成の流れを整理する ユーザー ストーリー テスト シナリオ テスト コード • ユーザーストーリーに基づいてテストシナリオを作成する • テストシナリオに基づいてテストコードを作成する • 各⼯程はAIで⾃動化できそう テストコードはどうやって作られるか E2Eテスト作成への応⽤
27. 27 © LayerX Inc. 本当にこれでいいんだっけ？ • AIは完璧ではない • AIに⽣成させたシナリオが破綻している可能性がある AIは確率的に振る舞うので、理想のアウトプットは⼀発で⽣成されない アウトプットの精度をあげるには、良質なコンテキストが必要 • 精度⾼くコードを⽣成するには、前段のコンテキストとなるシナリオの精度が⾼い必要がある • シナリオをレビューすることで、コードの精度も向上する E2Eテスト作成への応⽤
28. 28 © LayerX Inc. ⼯程をさらに細分化する シナリオ 作成 テストコード 実⾏ シナリオ 検証 テストコード 作成 シナリオの作成‧検証を別⼯程としてみる E2Eテスト作成への応⽤
29. 29 © LayerX Inc. ⾃動操作をどこで使うか シナリオ検証に使えそうでは？ • テストシナリオは⾃然⾔語で書かれる • シナリオはタップ‧スクロール等のアトミックな操作の集合であり、 ⾃動操作に必要な情報が揃っている • テストコード実装着⼿前にシナリオの破綻に気づくことができる E2Eテスト作成への応⽤ シナリオ 作成 テストコード 実⾏ シナリオ 検証 テストコード 作成
30. シナリオの構造化
31. 31 © LayerX Inc. テストシナリオに必要な要件 テストシナリオを何に使うか • AIの⾃動操作によるシナリオ検証 • テストコードの⾃動⽣成 ではどうあるべきか • オブジェクト操作のレベルの細かさで定義されるべき • 操作とその前後の状態が定義されているべき ◦ 前提条件、操作、結果、追加操作 • 構造化されているべき ◦ AIが解釈しやすい形であることが重要 シナリオをどう作るか
32. 32 © LayerX Inc. Gherkin ソフトウェアの振る舞いを⾃然⾔語で定義するための記法 • ⾃然⾔語シナリオをテストコードとして実⾏するCucumberで提唱された記法 • システムが実際にどのように動作するかを⽂書化したもの 特徴 • シナリオは連続したステップで構成 • ステップはGiven, When, Thenなどのキーワードで構造化 • 各ステップは⾃然⾔語で定義 参考: https://cucumber.io/docs/gherkin/reference シナリオをどう作るか
33. 33 © LayerX Inc. Gherkinの例 Scenario: ボタンをタップするとテキストが表示される Given: 「タップしてね」ボタンがある When: 「タップしてね」ボタンをタップする Then: 「タップしてね」ボタンの下に「タップしました」というテキストが表示される シナリオをどう作るか
34. AIによる シナリオの作成
35. 35 © LayerX Inc. Claude Code AIにテストシナリオをどう作らせるか エージェンティックコーディングツールの⼀つ • Anthropic社が開発‧提供 • 類似ツールはCursor, Codex, Devinなどなど エージェンティックコーディングツールとは • ⼈間の指⽰に基づき、AIが⾃律的にコーディング作業を⾏うツール • IDE統合型、CLI型、⾃律型など様々な形式が存在 • 指⽰の出し⽅次第でコーディング以外のタスクの実⾏も可能 本発表ではClaude Codeを利⽤します
36. 36 © LayerX Inc. Model Context Protocol (MCP) AIと外部システムの安全な通信‧連携を実現する規格 • Claude Codeに限らない標準規格 • MCPを通じて外部データソースにアクセス • 利点 ◦ 外部コンテキストの参照 ◦ 外部ツールの実⾏ 参考: https://modelcontextprotocol.io/docs/getting-started/intro Claude Codeと周辺の⽤語
37. 37 © LayerX Inc. Slash Commands 定型作業を⾃動化するショートカット機能 • 標準搭載のコマンドとカスタムコマンドの2種類が存在 • カスタムコマンドではユーザー⾃⾝が独⾃のコマンドを 定義可能 • 明⽰的な呼び出し制御が可能 • 呼び出し元プロセスのコンテキストを利⽤ --- description: コードレビューコマンド --- このコードを以下の点でレビューしてください： - セキュリティ脆弱性 - パフォーマンス問題 - コードスタイル違反 参考: https://docs.claude.com/ja/docs/claude-code/slash-commands Claude Codeと周辺の⽤語
38. 38 © LayerX Inc. Subagents 特定タスクに特化したAgentを作成 • 各エージェントは独⽴したコンテキストウィンドウを持つ ◦ メインエージェントのコンテキスト圧迫を防ぐ • メインエージェントが最適なSubagentへタスクを委任 • 「関⼼の分離」によりコンテキスト汚染を防ぎ、⾼品質な アウトプットを実現 • Claude Codeの制約により、SubagentからSubagentを呼 び出すことはできない --- name: test-writer description: コードのテストを⾃動で書く専⾨家です。 tools: Read, Edit, Bash --- あなたはテストコードを書く名⼈です。 仕事の流れ: 1. 指定されたコードを読む 2. そのコードが正しく動くか確認するテストを書く 3. ⼤事な機能がチェックできるようにする バグを⾒つけられる、シンプルで分かりやすいテストを 作ってください。 参考: https://docs.claude.com/en/docs/claude-code/sub-agents Claude Codeと周辺の⽤語
39. 39 © LayerX Inc. Slash Commands VS Subagents Slash Commands Subagents 起動⽅法 ユーザーによる明示的な呼び出し 親エージェントからの自律的デリゲート コンテキスト 共有 (メインスレッドと同一) 独立 (タスク毎に隔離・スコープ化) 主なユースケース ワークフローの自動化・定型化 関心の分離・タスクの専門化 Claude Codeと周辺の⽤語
40. 40 © LayerX Inc. Slash Commands VS Subagents 今回はコンテキストの独⽴性に着⽬ Claude Codeと周辺の⽤語 Slash Commands Subagents 起動⽅法 ユーザーによる明示的な呼び出し 親エージェントからの自律的デリゲート コンテキスト 共有 (メインスレッドと同一) 独立 (タスク毎に隔離・スコープ化) 主なユースケース ワークフローの自動化・定型化 関心の分離・タスクの専門化
41. 41 © LayerX Inc. シナリオ検証‧作成をどのように実現するか Scenario Decomposer シナリオの作成 Scenario Executor シナリオの検証 ユーザー ストーリー オブジェクトレベル シナリオ シナリオの作成‧検証⽤の Slash Commands を作成 • それぞれ独⽴した定型作業である • 独⽴したSlash Commandsとすることで、コンテキストも独⽴させることができる • SubagentからSubagentを呼び出すことができないため、Subagentとして定義する とタスクの細分化ができなくなる AIにテストシナリオをどう作らせるか
42. 42 © LayerX Inc. シナリオ検証の⼀部をSubagentsに委任 Scenario Decomposer シナリオの作成 Scenario Executor シナリオの検証 ユーザー ストーリー オブジェクトレベル シナリオ scenario-step executor scenario-step executor 各ステップの検証をSubagentsに委任 • Gherkinシナリオの定義により、各ステップは直列性のある独⽴タスクとして実⾏可能 • Subagentに委任することで、コンテキストウィンドウの圧迫‧汚染を防ぐ AIにテストシナリオをどう作らせるか
43. 43 © LayerX Inc. シナリオの検証を深ぼる AIにテストシナリオをどう作らせるか Scenario Executor Scenario Step Executor 役割 シナリオ検証の統括 シナリオの各ステップの検証 実現⼿段 Slash Commands Subagents 実⾏内容 シナリオの解釈 ステップ検証の委任 Dart VM との接続 ステップごとのシナリオの検証 画⾯情報の取得 画⾯操作 MCP Tools connect_dart_tooling_daemon get_widget_tree flutter_driver 役割が異なるので、実現⼿段‧利⽤MCP Toolsも異なる
44. 44 © LayerX Inc. シナリオ作成‧検証の全体像が⾒えてきました AIにテストシナリオをどう作らせるか
45. 45 © LayerX Inc. シナリオ作成‧検証の全体像が⾒えてきました しかしこれだけでは上⼿くいきません AIにテストシナリオをどう作らせるか
46. エッジケース 1 スクショが万能ではない問題
47. 47 © LayerX Inc. スクショが万能ではない問題 なぜスクショを使わないのか • AIが画⾯状態を解釈する上で、スクショを使う⼿法が最も単純に思える • 画⾯の概況を把握するには有⽤だが、⾃動操作のサイクルを回すには不⼗分 どんな問題？ • 操作種別によっては座標やウィジェットが持つKeyが必要 • しかし、AIにとってスクショから座標を正確に求めることは難しい • 操作が種別が限定されてしまうので、⾃動操作のサイクルを回すことが難しい なぜか 今回は検証できていないが、 OCRでテキストの座標を特定できたらできるかも
48. エッジケース 2 get_widget_treeを使えない問題
49. 49 © LayerX Inc. get_widget_treeを使えない問題 エッジケース 1: get_widget_treeを使えない問題 なぜ？ • Dart MCP Serverには画⾯情報を取得する get_widget_tree が存在 • ウィジェットツリーには⾃動操作には不要な情報も含まれる ◦ ⽣のウィジェットツリーではコンテキストウィンドウを圧迫 • シンプルなアプリで取得できたとしても、コンテキストウィンドウを圧迫するので、精度の低下 に繋がる
50. 50 © LayerX Inc. なぜ get_widget_tree を使いたいのか 画⾯情報を取得したい • ⾃動操作におけるアクションを決定するには画⾯状況の把握が必須 • AIが解釈しやすいように、構造化されている必要がある ⾃動操作にはどのような情報が必要か • ラベル • ヒントテキスト • ツールチップテキスト • キー エッジケース 1: get_widget_treeを使えない問題
51. 51 © LayerX Inc. どのように代替するか セマンティック情報を返すMCPを作る • Semantic Treeをベースとした情報を返す Dart VM Service extensionを作成 • AIツールからアクセスするために、MCP Serverを中継 エッジケース 1: get_widget_treeを使えない問題
52. 52 © LayerX Inc. レスポンスイメージ エッジケース 1: get_widget_treeを使えない問題 { "result": [ { "label": "ニックネーム ", "value": "Yuki Sakai", "hint": "", "tooltip": "", "actions": [ "tap" ] }, { "label": "所属会社", "value": "", "hint": "", "tooltip": "", "actions": [ "tap" ] }, ... ], "type": "_extensionType", "method": "ext.flutter.dumpScreenSemanticInfo" }
53. 53 © LayerX Inc. なぜSemantic Treeをベースとするか • UIが持つ「意味 (セマンティクス)」を表現するためのツリー構造 • Semantics Nodeから構成される • ユーザーの操作に必要な情報が含まれる • Label, Value, Hint, Tooltip, Actions エッジケース 1: get_widget_treeを使えない問題
54. 54 © LayerX Inc. Dart VM Service extensionの作り⽅ Dart VM Serviceとは • 実⾏中のDart VMの機能を拡張するための仕組み • VMが公開する「VM Service」というWebSocketサーバーに対して、 開発者が独⾃のカスタム機能を追加できる 参考: https://garden.pacia.tech/dart-vm-service-extensions-part1.html 作成と呼び出し • アプリ側で拡張機能の⼀意な名前と呼び出された際の処理を登録 • VM ServiceのWebSocketアドレスに接続し、登録した拡張機能の名前と対象のIsolate ID を指定してリクエストを送信する エッジケース 1: get_widget_treeを使えない問題
55. 55 © LayerX Inc. MCP Serverの作り⽅ Dart MCPを使う • DartでMCPサーバを作るためのパッケージが公式で公開 • Dart and Flutter MCP Serverも利⽤している • MCPServerクラスを拡張するだけで作成可能 • MCPサーバ⾃体は複雑なものではないので、実装も⽐較的簡単 参考: https://github.com/dart-lang/ai/tree/main/pkgs/dart_mcp エッジケース 1: get_widget_treeを使えない問題
56. エッジケース 3 ウィジェット識別問題
57. 57 © LayerX Inc. • ウィジェット操作にはflutter_driverのfinderを利⽤する • 従ってfinderでウィジェットを⼀意に識別できる必要がある • 以下のようなケースでウィジェットを特定することが難しい ◦ 同じラベルを持つウィジェットが複数ある ◦ ウィジェットがラベルを持たない（IconButton, TextField） • ウィジェットを識別するKeyを取得したいが、コンテキストウィン ドウは圧迫したくない ウィジェット識別問題 どんな問題？ エッジケース 2: ウィジェット識別問題
58. 58 © LayerX Inc. • flutter_driverにはbyValueKeyという、ValueKeyを利⽤する finderが存在 • AIにValueKeyを渡すことで、操作対象のウィジェットを特定する ことが可能となる • コンテキストウィンドウを圧迫しないために、ラベルとValueKey のペアを返す どのように解決するか ラベルとValueKeyのペアを返す MCP Tools を作成 エッジケース 2: ウィジェット識別問題 { "result": [ { "valueKey": "register_button", "label": "ユーザー登録" }, ... ], "type": "_extensionType", "method": "ext.flutter.findAllValueKeys" }
59. エッジケース 4 標準ウィジェットがKeyを持たない問題
60. 60 © LayerX Inc. • エッジケース3で紹介したように、IconButtonの特定には ValueKeyが必要 • しかし標準ウィジェットにはValueKeyを持たないものが存在する • 例えば CalenderDatePicker の「前⽉」「翌⽉」ボタンは、 ValueKeyを持たない 標準ウィジェットがKeyを持たない問題 どんな問題？ エッジケース 3: 標準ウィジェットがKeyを持たない問題
61. 61 © LayerX Inc. • tooltipを持つ場合はある • flutter_driverのfinderにはbyTooltipが存在 • SemanticsNodeがtooltipを返す どのようにアイコンボタンを識別するか Tooltipを使う Semantics TreeベースのMCP ToolでTooltipも返せば良い エッジケース 3: 標準ウィジェットがKeyを持たない問題
62. エッジケース 5 ネイティブ操作問題
63. 63 © LayerX Inc. • Dart MCP Server が利⽤するFlutterDriverは、Flutterアプリを操作するためのツール • 権限ダイアログやWebViewを操作することができない ネイティブ操作問題 どんな問題？ エッジケース 4: ネイティブ操作問題
64. 64 © LayerX Inc. • Mobile MCPはXCUITest, ADBをラップしたMCP Server • ネイティブUIを対象として、UIの取得‧操作が可能 • 逆にFlutterアプリの操作は不可 どのように解決する？ Mobile MCPを使う https://github.com/dart-lang/ai/blob/main/pkgs/dart_mcp_server 参考: https://github.com/mobile-next/mobile-mcp?tab=readme-ov-file エッジケース 4: ネイティブ操作問題
65. 最終系
66. 66 © LayerX Inc. 最終系 ユーザー ストーリー オブジェクトレベル シナリオ scenario-step executor scenario-step executor Subagents Dart MCP Server Dump Semantic Tree Get ValueKeys MCP Servers Scenario Decomposer シナリオの作成 Slash Commands Scenario Executor シナリオの検証 Slash Commands Dart VM Service Dart VM Dart VM Service extension
67. 67 © LayerX Inc. 最終系 ユーザー ストーリー オブジェクトレベル シナリオ scenario-step executor scenario-step executor Subagents Dart MCP Server Dump Semantic Tree Get ValueKeys MCP Servers Scenario Decomposer シナリオの作成 Slash Commands Scenario Executor シナリオの検証 Slash Commands Dart VM Service Dart VM Dart VM Service extension
68. 68 © LayerX Inc. 最終系 ユーザー ストーリー オブジェクトレベル シナリオ scenario-step executor scenario-step executor Subagents Dart MCP Server Dump Semantic Tree Get ValueKeys MCP Servers Scenario Decomposer シナリオの作成 Slash Commands Scenario Executor シナリオの検証 Slash Commands Dart VM Service Dart VM Dart VM Service extension
69. 69 © LayerX Inc. 最終系 ユーザー ストーリー オブジェクトレベル シナリオ scenario-step executor scenario-step executor Subagents Dart MCP Server Dump Semantic Tree Get ValueKeys MCP Servers Scenario Decomposer シナリオの作成 Slash Commands Scenario Executor シナリオの検証 Slash Commands Dart VM Service Dart VM Dart VM Service extension
70. 70 © LayerX Inc. 最終系 ユーザー ストーリー オブジェクトレベル シナリオ scenario-step executor scenario-step executor Subagents Dart MCP Server Dump Semantic Tree Get ValueKeys MCP Servers Scenario Decomposer シナリオの作成 Slash Commands Scenario Executor シナリオの検証 Slash Commands Dart VM Service Dart VM Dart VM Service extension
71. Demo
72. 72 © LayerX Inc. シナリオ
73. 73 © LayerX Inc.
74. 実現してみての課題
75. 75 © LayerX Inc. 課題 • Demoの実⾏に6分弱かかっている • 実⾏速度が課題となることは⾒えていたため、限定的に⾃動操作を利⽤した • しかし、想像を超える遅さとなってしまっている 実⾏時間がとにかく遅い • ⾃動操作エージェントの役割はオブジェクトレベルのシナリオの検証である • エージェントにシナリオ実⾏と失敗時の報告という境界が曖昧なタスクを任せている • 実⾏に失敗しているような場合にも、⼿法を変えながらシナリオ完遂に繰り返し取り組んでしまう 実現してみての課題 終了条件の定義が難しい
76. 76 © LayerX Inc. 課題 • バクラクアプリを対象として検証したが、実運⽤に載せられるレベル の安定性を出すことができなかった • 安定しないことは以下のような理由が考えられる ◦ 申請‧経費精算というドメインの複雑さ ◦ 類似UIコンポーネントの多さ プロダクションレベルのアプリで実⾏が不安定 実現してみての課題 実⾏速度以外の課題は、 プロジェクトに合わせたカスタマイズで改善が⾒込まれる
77. まとめ
78. 78 © LayerX Inc. まとめ Dart MCP Serverを利⽤して、AIによるFlutterアプリの⾃動操作を実現 E2E整備のうち、テストシナリオ検証で⾃動操作を利⽤ プロダクションレベルでの活⽤には様々な課題が存在
79. 79 © LayerX Inc. まとめ 今後のモデル改善、AIエコシステムの発展が楽しみですね Dart MCP Serverを利⽤して、AIによるFlutterアプリの⾃動操作を実現 プロダクションレベルでの活⽤には様々な課題が存在 E2E整備のうち、テストシナリオ検証で⾃動操作を利⽤