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

by Yuki Sakai

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

3 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに、AI SaaSとAI DXの事業を展開事業紹介バクラク事業企業活動のインフラとなる業務を効率化するクラウドサービス Fintech事業ソフトウェアを駆使したアセットマネジメント‧証券事業を合弁会社にて展開 AI‧LLM事業社内のナレッジやノウハウをデータベース化するAIプラットフォーム AI SaaSドメイン AI DXドメイン

Slide 4

Slide 4 text

© LayerX Inc.　 4 「バクラク」シリーズラインナップ ‧年会費無料で何枚でも発⾏可 ‧カード利⽤制限で統制を実現 ‧通常1%以上の還元法⼈カードの発⾏‧管理 ‧直感的UIで従業員の負担を軽減 ‧Slack連携で打刻や⾃動リマインド可能 ‧わかりやすい残業 / 休暇管理レポート勤怠管理 ‧帳票の⼀括作成も個別作成も⾃由⾃在 ‧帳票の作成‧稟議‧送付‧保存を⼀本化 ‧レイアウトや項⽬のカスタマイズも可能請求書発⾏ ‧スキャナ保存データも直接取込 ‧AI-OCRが⾃動読取＆データ化 ‧[取引先][取引⽇][取引⾦額]での検索帳票保存‧ストレージ ‧来春リリース予定/事前登録受付中 ‧給与計算の前後の業務も⼀気通貫で効率化 ‧⼿計算やExcel作業を限りなくゼロに給与稟議‧⽀払申請 ‧AIが請求書を５秒でデータ化 ‧仕訳 / 振込データを⾃動作成 ‧電帳法‧インボイス制度にも対応債務管理（⽀出管理） ‧AI活⽤の消込機能で⼊⾦消込をラクに ‧取引先リマインド/未⼊⾦督促を半⾃動化 ‧売上仕訳‧⼊⾦仕訳も柔軟に作成債権管理（⼊⾦管理） ‧AIが⾒積書‧請求書を５秒でデータ ‧スマホからも申請‧承認OK ‧柔軟な通知設定‧承認の催促機能 ‧AIが領収書を5秒でデータ化 ‧スマホアプリとSlack連携あり ‧領収書の重複申請などミス防⽌機能経費精算稟議‧⽀払申請

Slide 5

Slide 5 text

⽬次 Agenda ● AIによるモバイル⾃動操作 ● E2E整備への応⽤ ● つまりポイント ● DEMO ● 実現してみての課題

Slide 6

Slide 6 text

E2Eテストの実装⼤変じゃないですか？

Slide 7

Slide 7 text

7 © LayerX Inc. E2Eテストの実装がなぜ⼤変なのか E2Eテストの実装⼤変じゃないですか？ UIへの依存度が⾼い ● UIの変更に合わせて都度修正が必要となる ● 依存度を下げるにはValueKeyなど設定して、ウィジェット識別時のUI依存を下げる必要があるシナリオ設計‧実装が⼤変 ● ステップの粒度や操作順序など専⾨的な知識が求められる ● 網羅性を確保するために、多数のテストケースを⽤意する必要がある ● シナリオの数だけ実装が必要となる

Slide 8

Slide 8 text

8 © LayerX Inc. 注意 ● ⼩規模な個⼈プロジェクトでの検証を元にお話しします ● プロダクションレベルでの実⽤には⾄っていません ● AI周辺のテクノロジーは移り変わりがとても早いです。根底の考え⽅に着⽬していただけると幸いです AIによるデバイス⾃動操作で、 E2Eの実装を楽にする⽅法を提案します E2Eテストの実装⼤変じゃないですか？

Slide 9

Slide 9 text

AIによるモバイルアプリの⾃動操作

Slide 10

Slide 10 text

10 © LayerX Inc. ⼈はどのようにアプリを操作するか AIによる⾃動操作画⾯情報を取得画⾯操作画⾯状態を解釈アクションの決定画⾯情報の取得‧解釈、アクションの決定‧実⾏の繰り返し 👀 🧠 🧠

Slide 11

Slide 11 text

11 © LayerX Inc. ⼈はどのようにアプリを操作するか AIによる⾃動操作画⾯情報を取得画⾯操作画⾯状態を解釈アクションの決定画⾯情報の取得‧解釈、アクションの決定‧実⾏の繰り返しこれAIでできそうじゃない？ AI = LLMエージェント（Claude Code, Cursor …） 👀 🧠 🧠

Slide 12

Slide 12 text

12 © LayerX Inc. なぜAIで実現できると考えたか AIによる⾃動操作画⾯情報を取得画⾯操作画⾯状態を解釈アクションの決定 Dart VM Serviceで取得可能 AIがテキスト‧スクショを解釈可能 AIが画⾯状態に基づき、アクションを推論可能 Flutter Driverで実⾏可能 👀 🧠 🧠

Slide 13

Slide 13 text

13 © LayerX Inc. なぜAIで実現できると考えたか AIによる⾃動操作画⾯情報を取得画⾯操作画⾯状態を解釈アクションの決定 Dart VM Serviceで取得可能 AIがテキスト‧スクショを解釈可能 AIが画⾯状態に基づき、アクションを推論可能 Flutter Driverで実⾏可能 Dart and Flutter MCP Serverを使うことで実現可能 Dart MCP Serverについては後ほど詳しく触れます 👀 🧠 🧠

Slide 14

Slide 14 text

14 © LayerX Inc. Dart MCP Serverでどう⾃動操作するか AIによる⾃動操作画⾯情報を取得画⾯操作画⾯状態を解釈アクションの決定 Dart MCP Serverでウィジェットツリー、スクショを取得 AIがウィジェットツリー‧スクショを解釈 AIが画⾯状態に基づき、アクションを推論 Dart MCP Server経由でFlutter Driverで実⾏

Slide 15

Slide 15 text

15 © LayerX Inc. しかし、これだけでは上⼿く⾃動操作させられませんこれも理由は後ほど AIによる⾃動操作

Slide 16

Slide 16 text

Dart and Flutter MCP server

Slide 17

Slide 17 text

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_ﬁx ● dart_format ● ﬂutter_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

Slide 18

Slide 18 text

18 © LayerX Inc. Dart and Flutter MCP server 引⽤: https://x.com/FlutterDev/status/1950239900336365634?s=20

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

20 © LayerX Inc. 画⾯情報の取得‧操作にはFlutter Driverを利⽤ Flutter DriverとはUIテストを⾃動化するためのライブラリ ● Patrol, Maestro, ﬂutter_integration_test以前のE2Eツールとして利⽤されていた ● 各種ツリーの取得や画⾯操作を担う ● テキストやValueKey、Semantic Labelでウィジェットを特定することが可能 Dart and Flutter MCP server

Slide 21

Slide 21 text

⾃動操作のE2Eテスト作成への応⽤

Slide 22

Slide 22 text

22 © LayerX Inc. そもそもE2Eテストとは E2Eテスト作成への応⽤ユーザー視点でEnd-to-Endでシステムが正しく動くか検証するテスト ● ユーザーと同じインターフェースで検証する ● ユーザーストーリーに基づいてテストするいつ作成するか ● テストシナリオは実装前 ○ シナリオはユーザーストーリーに依存し、実装に依存しない ● テストコードは実装後 ○ コードは実装に依存するため、実装後にしか着⼿できない

Slide 23

Slide 23 text

23 © LayerX Inc. どこで⾃動操作を使うかシナリオを⾃然⾔語で書いて、実⾏をAIに任せる？ E2Eテスト作成への応⽤

Slide 24

Slide 24 text

24 © LayerX Inc. どこで⾃動操作を使うかシナリオを⾃然⾔語で書いて、実⾏をAIに任せる？ E2Eテスト作成への応⽤

Slide 25

Slide 25 text

25 © LayerX Inc. なぜE2Eの実⾏を任せるのが良くないのか E2Eテストに求められること ● 再現性 ● 実⾏速度ではAIによる⾃動操作は？ ● 確率的なので再現性がない ● 推論に時間がかかるため、実⾏速度も遅い E2Eテスト作成への応⽤

Slide 26

Slide 26 text

26 © LayerX Inc. 改めてE2Eテスト作成の流れを整理するユーザーストーリーテストシナリオテストコード ● ユーザーストーリーに基づいてテストシナリオを作成する ● テストシナリオに基づいてテストコードを作成する ● 各⼯程はAIで⾃動化できそうテストコードはどうやって作られるか E2Eテスト作成への応⽤

Slide 27

Slide 27 text

27 © LayerX Inc. 本当にこれでいいんだっけ？ ● AIは完璧ではない ● AIに⽣成させたシナリオが破綻している可能性がある AIは確率的に振る舞うので、理想のアウトプットは⼀発で⽣成されないアウトプットの精度をあげるには、良質なコンテキストが必要 ● 精度⾼くコードを⽣成するには、前段のコンテキストとなるシナリオの精度が⾼い必要がある ● シナリオをレビューすることで、コードの精度も向上する E2Eテスト作成への応⽤

Slide 28

Slide 28 text

28 © LayerX Inc. ⼯程をさらに細分化するシナリオ作成テストコード実⾏シナリオ検証テストコード作成シナリオの作成‧検証を別⼯程としてみる E2Eテスト作成への応⽤

Slide 29

Slide 29 text

29 © LayerX Inc. ⾃動操作をどこで使うかシナリオ検証に使えそうでは？ ● テストシナリオは⾃然⾔語で書かれる ● シナリオはタップ‧スクロール等のアトミックな操作の集合であり、⾃動操作に必要な情報が揃っている ● テストコード実装着⼿前にシナリオの破綻に気づくことができる E2Eテスト作成への応⽤シナリオ作成テストコード実⾏シナリオ検証テストコード作成

Slide 30

Slide 30 text

シナリオの構造化

Slide 31

Slide 31 text

31 © LayerX Inc. テストシナリオに必要な要件テストシナリオを何に使うか ● AIの⾃動操作によるシナリオ検証 ● テストコードの⾃動⽣成ではどうあるべきか ● オブジェクト操作のレベルの細かさで定義されるべき ● 操作とその前後の状態が定義されているべき ○ 前提条件、操作、結果、追加操作 ● 構造化されているべき ○ AIが解釈しやすい形であることが重要シナリオをどう作るか

Slide 32

Slide 32 text

32 © LayerX Inc. Gherkin ソフトウェアの振る舞いを⾃然⾔語で定義するための記法 ● ⾃然⾔語シナリオをテストコードとして実⾏するCucumberで提唱された記法 ● システムが実際にどのように動作するかを⽂書化したもの特徴 ● シナリオは連続したステップで構成 ● ステップはGiven, When, Thenなどのキーワードで構造化 ● 各ステップは⾃然⾔語で定義参考: https://cucumber.io/docs/gherkin/reference シナリオをどう作るか

Slide 33

Slide 33 text

33 © LayerX Inc. Gherkinの例 Scenario: ボタンをタップするとテキストが表示される Given: 「タップしてね」ボタンがある When: 「タップしてね」ボタンをタップする Then: 「タップしてね」ボタンの下に「タップしました」というテキストが表示されるシナリオをどう作るか

Slide 34

Slide 34 text

AIによるシナリオの作成

Slide 35

Slide 35 text

35 © LayerX Inc. Claude Code AIにテストシナリオをどう作らせるかエージェンティックコーディングツールの⼀つ ● Anthropic社が開発‧提供 ● 類似ツールはCursor, Codex, Devinなどなどエージェンティックコーディングツールとは ● ⼈間の指⽰に基づき、AIが⾃律的にコーディング作業を⾏うツール ● IDE統合型、CLI型、⾃律型など様々な形式が存在 ● 指⽰の出し⽅次第でコーディング以外のタスクの実⾏も可能本発表ではClaude Codeを利⽤します

Slide 36

Slide 36 text

36 © LayerX Inc. Model Context Protocol (MCP) AIと外部システムの安全な通信‧連携を実現する規格 ● Claude Codeに限らない標準規格 ● MCPを通じて外部データソースにアクセス ● 利点 ○ 外部コンテキストの参照 ○ 外部ツールの実⾏参考: https://modelcontextprotocol.io/docs/getting-started/intro Claude Codeと周辺の⽤語

Slide 37

Slide 37 text

37 © LayerX Inc. Slash Commands 定型作業を⾃動化するショートカット機能 ● 標準搭載のコマンドとカスタムコマンドの2種類が存在 ● カスタムコマンドではユーザー⾃⾝が独⾃のコマンドを定義可能 ● 明⽰的な呼び出し制御が可能 ● 呼び出し元プロセスのコンテキストを利⽤ --- description: コードレビューコマンド --- このコードを以下の点でレビューしてください： - セキュリティ脆弱性 - パフォーマンス問題 - コードスタイル違反参考: https://docs.claude.com/ja/docs/claude-code/slash-commands Claude Codeと周辺の⽤語

Slide 38

Slide 38 text

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と周辺の⽤語

Slide 39

Slide 39 text

39 © LayerX Inc. Slash Commands VS Subagents Slash Commands Subagents 起動⽅法ユーザーによる明示的な呼び出し親エージェントからの自律的デリゲートコンテキスト共有 (メインスレッドと同一) 独立 (タスク毎に隔離・スコープ化) 主なユースケースワークフローの自動化・定型化関心の分離・タスクの専門化 Claude Codeと周辺の⽤語

Slide 40

Slide 40 text

40 © LayerX Inc. Slash Commands VS Subagents 今回はコンテキストの独⽴性に着⽬ Claude Codeと周辺の⽤語 Slash Commands Subagents 起動⽅法ユーザーによる明示的な呼び出し親エージェントからの自律的デリゲートコンテキスト共有 (メインスレッドと同一) 独立 (タスク毎に隔離・スコープ化) 主なユースケースワークフローの自動化・定型化関心の分離・タスクの専門化

Slide 41

Slide 41 text

41 © LayerX Inc. シナリオ検証‧作成をどのように実現するか Scenario Decomposer シナリオの作成 Scenario Executor シナリオの検証ユーザーストーリーオブジェクトレベルシナリオシナリオの作成‧検証⽤の Slash Commands を作成 ● それぞれ独⽴した定型作業である ● 独⽴したSlash Commandsとすることで、コンテキストも独⽴させることができる ● SubagentからSubagentを呼び出すことができないため、Subagentとして定義するとタスクの細分化ができなくなる AIにテストシナリオをどう作らせるか

Slide 42

Slide 42 text

42 © LayerX Inc. シナリオ検証の⼀部をSubagentsに委任 Scenario Decomposer シナリオの作成 Scenario Executor シナリオの検証ユーザーストーリーオブジェクトレベルシナリオ scenario-step executor scenario-step executor 各ステップの検証をSubagentsに委任 ● Gherkinシナリオの定義により、各ステップは直列性のある独⽴タスクとして実⾏可能 ● Subagentに委任することで、コンテキストウィンドウの圧迫‧汚染を防ぐ AIにテストシナリオをどう作らせるか

Slide 43

Slide 43 text

43 © LayerX Inc. シナリオの検証を深ぼる AIにテストシナリオをどう作らせるか Scenario Executor Scenario Step Executor 役割シナリオ検証の統括シナリオの各ステップの検証実現⼿段 Slash Commands Subagents 実⾏内容シナリオの解釈ステップ検証の委任 Dart VM との接続ステップごとのシナリオの検証画⾯情報の取得画⾯操作 MCP Tools connect_dart_tooling_daemon get_widget_tree ﬂutter_driver 役割が異なるので、実現⼿段‧利⽤MCP Toolsも異なる

Slide 44

Slide 44 text

44 © LayerX Inc. シナリオ作成‧検証の全体像が⾒えてきました AIにテストシナリオをどう作らせるか

Slide 45

Slide 45 text

45 © LayerX Inc. シナリオ作成‧検証の全体像が⾒えてきましたしかしこれだけでは上⼿くいきません AIにテストシナリオをどう作らせるか

Slide 46

Slide 46 text

エッジケース 1 スクショが万能ではない問題

Slide 47

Slide 47 text

47 © LayerX Inc. スクショが万能ではない問題なぜスクショを使わないのか ● AIが画⾯状態を解釈する上で、スクショを使う⼿法が最も単純に思える ● 画⾯の概況を把握するには有⽤だが、⾃動操作のサイクルを回すには不⼗分どんな問題？ ● 操作種別によっては座標やウィジェットが持つKeyが必要 ● しかし、AIにとってスクショから座標を正確に求めることは難しい ● 操作が種別が限定されてしまうので、⾃動操作のサイクルを回すことが難しいなぜか今回は検証できていないが、 OCRでテキストの座標を特定できたらできるかも

Slide 48

Slide 48 text

エッジケース 2 get_widget_treeを使えない問題

Slide 49

Slide 49 text

49 © LayerX Inc. get_widget_treeを使えない問題エッジケース 1: get_widget_treeを使えない問題なぜ？ ● Dart MCP Serverには画⾯情報を取得する get_widget_tree が存在 ● ウィジェットツリーには⾃動操作には不要な情報も含まれる ○ ⽣のウィジェットツリーではコンテキストウィンドウを圧迫 ● シンプルなアプリで取得できたとしても、コンテキストウィンドウを圧迫するので、精度の低下に繋がる

Slide 50

Slide 50 text

50 © LayerX Inc. なぜ get_widget_tree を使いたいのか画⾯情報を取得したい ● ⾃動操作におけるアクションを決定するには画⾯状況の把握が必須 ● AIが解釈しやすいように、構造化されている必要がある⾃動操作にはどのような情報が必要か ● ラベル ● ヒントテキスト ● ツールチップテキスト ● キーエッジケース 1: get_widget_treeを使えない問題

Slide 51

Slide 51 text

51 © LayerX Inc. どのように代替するかセマンティック情報を返すMCPを作る ● Semantic Treeをベースとした情報を返す Dart VM Service extensionを作成 ● AIツールからアクセスするために、MCP Serverを中継エッジケース 1: get_widget_treeを使えない問題

Slide 52

Slide 52 text

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" }

Slide 53

Slide 53 text

53 © LayerX Inc. なぜSemantic Treeをベースとするか ● UIが持つ「意味 (セマンティクス)」を表現するためのツリー構造 ● Semantics Nodeから構成される ● ユーザーの操作に必要な情報が含まれる ● Label, Value, Hint, Tooltip, Actions エッジケース 1: get_widget_treeを使えない問題

Slide 54

Slide 54 text

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を使えない問題

Slide 55

Slide 55 text

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を使えない問題

Slide 56

Slide 56 text

エッジケース 3 ウィジェット識別問題

Slide 57

Slide 57 text

57 © LayerX Inc. ● ウィジェット操作にはflutter_driverのfinderを利⽤する ● 従ってfinderでウィジェットを⼀意に識別できる必要がある ● 以下のようなケースでウィジェットを特定することが難しい ○ 同じラベルを持つウィジェットが複数ある ○ ウィジェットがラベルを持たない（IconButton, TextField） ● ウィジェットを識別するKeyを取得したいが、コンテキストウィンドウは圧迫したくないウィジェット識別問題どんな問題？エッジケース 2: ウィジェット識別問題

Slide 58

Slide 58 text

58 © LayerX Inc. ● ﬂutter_driverにはbyValueKeyという、ValueKeyを利⽤する ﬁnderが存在 ● AIにValueKeyを渡すことで、操作対象のウィジェットを特定することが可能となる ● コンテキストウィンドウを圧迫しないために、ラベルとValueKey のペアを返すどのように解決するかラベルとValueKeyのペアを返す MCP Tools を作成エッジケース 2: ウィジェット識別問題 { "result": [ { "valueKey": "register_button", "label": "ユーザー登録" }, ... ], "type": "_extensionType", "method": "ext.flutter.findAllValueKeys" }

Slide 59

Slide 59 text

エッジケース 4 標準ウィジェットがKeyを持たない問題

Slide 60

Slide 60 text

60 © LayerX Inc. ● エッジケース3で紹介したように、IconButtonの特定には ValueKeyが必要 ● しかし標準ウィジェットにはValueKeyを持たないものが存在する ● 例えば CalenderDatePicker の「前⽉」「翌⽉」ボタンは、 ValueKeyを持たない標準ウィジェットがKeyを持たない問題どんな問題？エッジケース 3: 標準ウィジェットがKeyを持たない問題

Slide 61

Slide 61 text

61 © LayerX Inc. ● tooltipを持つ場合はある ● ﬂutter_driverのﬁnderにはbyTooltipが存在 ● SemanticsNodeがtooltipを返すどのようにアイコンボタンを識別するか Tooltipを使う Semantics TreeベースのMCP ToolでTooltipも返せば良いエッジケース 3: 標準ウィジェットがKeyを持たない問題

Slide 62

Slide 62 text

エッジケース 5 ネイティブ操作問題

Slide 63

Slide 63 text

63 © LayerX Inc. ● Dart MCP Server が利⽤するFlutterDriverは、Flutterアプリを操作するためのツール ● 権限ダイアログやWebViewを操作することができないネイティブ操作問題どんな問題？エッジケース 4: ネイティブ操作問題

Slide 64

Slide 64 text

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: ネイティブ操作問題

Slide 65

Slide 65 text

最終系

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Demo

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Slide 74

Slide 74 text

実現してみての課題

Slide 75

Slide 75 text

75 © LayerX Inc. 課題 ● Demoの実⾏に6分弱かかっている ● 実⾏速度が課題となることは⾒えていたため、限定的に⾃動操作を利⽤した ● しかし、想像を超える遅さとなってしまっている実⾏時間がとにかく遅い ● ⾃動操作エージェントの役割はオブジェクトレベルのシナリオの検証である ● エージェントにシナリオ実⾏と失敗時の報告という境界が曖昧なタスクを任せている ● 実⾏に失敗しているような場合にも、⼿法を変えながらシナリオ完遂に繰り返し取り組んでしまう実現してみての課題終了条件の定義が難しい

Slide 76

Slide 76 text

76 © LayerX Inc. 課題 ● バクラクアプリを対象として検証したが、実運⽤に載せられるレベルの安定性を出すことができなかった ● 安定しないことは以下のような理由が考えられる ○ 申請‧経費精算というドメインの複雑さ ○ 類似UIコンポーネントの多さプロダクションレベルのアプリで実⾏が不安定実現してみての課題実⾏速度以外の課題は、プロジェクトに合わせたカスタマイズで改善が⾒込まれる

Slide 77

Slide 77 text

まとめ

Slide 78

Slide 78 text

Slide 79

Slide 79 text

79 © LayerX Inc. まとめ今後のモデル改善、AIエコシステムの発展が楽しみですね Dart MCP Serverを利⽤して、AIによるFlutterアプリの⾃動操作を実現プロダクションレベルでの活⽤には様々な課題が存在 E2E整備のうち、テストシナリオ検証で⾃動操作を利⽤