自己紹介

Kota Hayashi

• K9i a.k.a. たこさん
• 所属: ゆめみ
• Flutter歴: 業務だと5年くらい
• X: https://x.com/K9i_apps

最近やっていること

CC Pocket

• Codex や Claude をスマホから操作するためのアプリ
• AI駆動開発の検証も兼ねた個人開発プロジェクト
• Flutterで iOS / Android / macOS に対応
• コードはすべてエージェントに書かせている

GitHub repository

アプリ画面

CC Pocketの反応

• 完全にエージェントにコードを書かせてもユーザーが満足する品質にできる
• 重要だったのは AI自身に検証させる仕組み

CC Pocketでの開発プロセス

AI駆動開発で一番効いたこと

フィードバックループを作る

AIに「実装」だけでなく、確認して直すところまで任せる

Flutterでのフィードバックループ

• lint, unit testはこれまでの開発の延長。実装完了後にpassさせるようにメモリ（AGENTS.md等）で指示。強制するならhooks
• セルフレビュー
  • サブエージェントでクリアなコンテキストウィンドウを使わせたり、別のモデルを使ってコードレビューさせる
  • PRレビューでやってたことをローカルで行う
• UI検証
  • 実際にシミュレーターでUIを操作させる
  • Marionette MCP
    • 他にも選択肢があるが個人的におすすめ

Marionette MCP

LeanCode が開発している Flutter 特化のMCP

https://pub.dev/packages/marionette_mcp

どちらか一方ではなく、併用するツール

Marionette MCPでできること

Flutter向けの「AIに目と手を渡す」道具
Webで有名なPlaywright MCPのポジション

Marionette MCPの使い所

• UIが絡む既存機能改修
  • 計画段階でUI操作しての検証まで提案させる
• 人手でのチェックフェーズでバグが見つかったとき
  • バグがe2eで直ることが確認できることをゴールにする

付きっきりで見守る場合より時間はかかるが、AIにかなりお任せできるようになる

推し機能 call_custom_extension ツール

アプリ側にAI専用の操作口を用意できる

VM Service Extension を MCP 経由で公開する仕組み

Marionette MCP本体のツールセットを小さく保ちつつ、
アプリ固有の操作を後から足せる「エスケープハッチ」

call_custom_extension できること

• アプリの設定値（言語・テーマなどなど）を extensionから無理やり変更
  • 正規のルートだと設定画面に行ったりが必要で、検証の前段で時間がかかる
• 特定画面に直遷移する extension を利用
  • 階層が深い画面に効率的に遷移

Flutter側の実装イメージ

registerMarionetteExtension(
  name: 'myApp.goToPage',
  description: 'Navigate to a specific page by name.',
  callback: (params) async {
    final page = params['page'];
    if (page == null) {
      return MarionetteExtensionResult.invalidParams('Missing: page');
    }

    navigateTo(page);
    return MarionetteExtensionResult.success({
      'page': page,
      'status': 'navigated',
    });
  },
);

name / description / callback がAI向けのインターフェイスになる

戻り値でAIに結果を伝える

AIが次の行動を決めやすいように、
エラーも人間向けではなく 機械が読める結果 として返す

初期化

void main() {
  if (kDebugMode && !kIsWeb) {
    MarionetteBinding.ensureInitialized();
    registerMyExtensions();
  } else {
    WidgetsFlutterBinding.ensureInitialized();
  }

  runApp(const App());
}

kDebugMode でガードするので、リリースビルドには影響しない

CC Pocketで登録している操作

「AIが迷いやすい導線」をアプリ側からショートカットする

自動化フロー

1. ccpocket.setTheme でライトテーマに設定
2. ccpocket.setLocale で言語を設定
3. ccpocket.navigateToStoreScenario でシナリオに遷移
4. 描画完了を待つ
5. xcrun simctl io booted screenshot で撮影
6. ccpocket.popToRoot でホームに戻す
7. 3-6 を全シナリオ分繰り返す

手動で各画面へ遷移して撮っていた Store 画像を、
今はコマンド一発で全シナリオ分生成している

AIに渡すプロンプト例

/mobile-automation を使ってUI確認してください。

対象: [確認したい画面・機能]

モックで確認できる場合は Mock UI テストを優先し、
必要なら Marionette MCP の custom extension で対象画面へ移動してください。

文字切れ・はみ出し・タップできない要素・ログエラーを確認してください。
問題があれば修正して、同じ確認を再実行してください。

詳しい手順は .claude/skills/mobile-automation/SKILL.md 側に寄せる

使いやすくするコツ

• .claude/skills/ に検証手順を置く
  • 例: /mobile-automation, /update-store, /self-review
• スキル内で MCP / CLI の使い分けを明記する
• call_custom_extension の使い所をスキルに書く
  • 例: ccpocket.navigateToStoreScenario, ccpocket.setTheme
• Widget Key やモックシナリオ名もスキルに集約する
• プロンプトでは「どのスキルで、何を確認するか」だけ渡す

毎回プロンプトで説明せず、プロジェクト固有の手順をスキル化する

まとめ

• AI駆動開発で重要なのは、実装よりも 検証のフィードバックループ
• FlutterのUI検証には Marionette MCP が便利
• call_custom_extension でAIが迷う操作をショートカットできる
• AI向けの操作口を用意すると、品質と速度の両方が上がる

ありがとうございました

Marionette MCP、ぜひ試してみてください

https://pub.dev/packages/marionette_mcp