【ITニュース解説】Capturing On-Device UI Feedback & AI Code Suggestions: Why I Built SnappySnag for Flutter

アプリ開発において、ユーザーが直接触れる部分であるUI（ユーザーインターフェース）の品質は、アプリの成功を左右する重要な要素だ。Flutterのようなフレームワークでアプリを開発する際、開発者が最も良いアイデアを思いついたり、UIのわずかな違和感に気づいたりするのは、デスクのエミュレータよりも、実際に自分のスマートフォンでアプリを操作している時が多い。

ソファでくつろぎながらアプリを触っていると、「このボタンのパディングが少し狭いな」「ここにクイック検索バーがあればもっとスムーズに操作できるのに」「このラベルは初めて使う人にはわかりにくいかもしれない」といった具体的な改善点が次々と頭に浮かぶものだ。実際のデバイスのサイズ感や手で持った時の感触を通じて初めて気づく、数え切れないほどの改善点が存在する。

しかし、そうした「ひらめき」を開発タスクに落とし込むまでのプロセスには手間がかかる。多くの開発者は、まずスクリーンショットを撮り、次にメモアプリやチャットツールに切り替えて、改善点を言葉で説明しなければならない。「設定画面の一番下にあるあのボタンの隣で…」といった具合に、状況を詳しく説明しようとすると時間がかかる。あるいは、ざっくりとしたメモだけを残し、数日後に開発環境を開いて「あれ、これ何の話だったかな？」と途方に暮れることもある。このように、状況を言葉で説明するための精神的な負担は想像以上に大きい。その結果、良いアイデアが見過ごされたり、後で状況を思い出すために何時間も無駄になったりしてしまうのだ。

「もし、ライブで動いているアプリの画面に直接ペンで書き込んだり、メモを残したりできて、さらにAIがその場で具体的な修正コードを提案してくれたら、どれだけ開発が楽になるだろうか？」

こうした開発者の体験（DX：Developer Experience）を向上させたいというシンプルな問いから生まれたのが、Flutter向けのビジュアルフィードバック＆AIアシスタンスパッケージ「SnappySnag」だ。

アプリの成長には、現実世界でのユーザー体験（UX：User Experience）に対して素早く改善のサイクルを回す能力が非常に重要となる。ビジネスロジックや機能がどれだけ優れていても、視覚的な小さな問題、例えばごちゃごちゃしたレイアウトや不自然な間隔、使いにくいナビゲーションなどが放置されれば、ユーザーからの信頼は徐々に失われていく。しかし、こうした日々の小さな調整を行う従来のやり方には、多くの「摩擦」が存在した。

物理デバイスでのテストを中断し、ノートパソコンを開いて課題管理ツールにアクセスし、チケットを作成するといった「コンテキストスイッチング」に要するコスト。どの画面のどのウィジェットについて言及しているのかを何分もかけて説明する「説明コスト」。そして、メモを読んだ開発者が、どのファイルやコードを修正すればよいのかを見つけて作業を開始するまでの「タスク振り分けの遅延」だ。

アプリをスピーディーにリリースし続けるためには、アイデアを記録するのに一切の手間がかからず、すぐにコード修正に取りかかれるようなワークフローが求められる。SnappySnagが目指したのは、次のような理想的なフィードバックループだ。

まず、デバイスの画面に直接、ピンをドロップしたり、スケッチを描いたり、メモを残したりする「ワンアクションでの画面注釈」。次に、そのフィードバックが生まれた画面のルート（経路）、ウィジェットツリーのメタデータ（構成情報）、デバイスの仕様、OSの詳細といった「自動的なコンテキスト情報取得」。そして最後に、AIが具体的な修正案、例えば「この画面のコードをこのように更新すると、その変更が実現できます」といった「修正コードのAIによる自動生成」を行う。

SnappySnagは、単なる一般的な「バグトラッカー」とは一線を画す。これは、アプリを自社で試用する「ドッグフーディング」の最中に、思いつきのUI改善点やデザインの微調整、新機能のアイデアなどを手軽に捕捉するための、軽量な相棒として設計されている。

例えば、デバイス上で「ここにクイックアクションボタンを追加しよう」とエリアを丸で囲んでメモを残す。あるいは、パディングの微調整、フォントサイズ、色、配置といった細かなデザイン調整の指示。さらには、異なる画面サイズでのテキストの途切れやレイアウトのオーバーフローといった視覚的なバグやエッジケースを指摘する場合など、様々な場面で活用できる。

具体的な操作の流れはこうだ。まず、フローティングボタンをタップするか、デバイスを振ることで、いつでもSnappySnagのオーバーレイ画面を呼び出す。すると、現在の画面の静止画像が表示されるので、その上にピンをドロップしたり、ペンで自由にスケッチしたり、短いメモを入力したりできる。フィードバックを送信すると、AIエージェントがそのフィードバックと画面のコンテキスト情報を分析し、実行可能なコードの提案や修正案を作成してくれる。長文でバグを説明するのではなく、UIの特定の部分を直接指し示すことに重点を置いている。

例えば、アプリを操作中に、テスターは「メニュー行でオーバーフローが発生している…」や「ここにスペースを追加して」といった簡単なメモと共に、問題のウィジェットにピンをドロップして送信する。すると、開発者側のウェブダッシュボードには、そのレポートがデバイスの詳細情報（例：Pixel 8、Android 14）と共にリアルタイムで同期される。そして、AIがその場で自動的にコードの提案を生成するのだ。例えば、「オーバーフローしているウィジェットを、ExpandedやRow内のSingleChildScrollViewでラップして修正できます」といった具体的なコードのヒントが提供される。ダッシュボードを開く頃には、フィードバックは既に、具体的なコードのたたき台が付いた、すぐに取り掛かれるタスクへと変換されているわけだ。

SnappySnagをFlutterアプリ内でシームレスに機能させるためには、いくつかの技術的な工夫が凝らされている。

一つ目は「非侵入型オーバーレイアーキテクチャ」だ。SnappySnagのSDKが、アプリ本来のレイアウトや状態を邪魔しないように設計されている。Flutterには「Overlay」という機能があり、これを使うことでアプリの通常のUIの上に別のUI要素を重ねて表示できる。「RepaintBoundary」機能と組み合わせることで、SnappySnagの注釈キャンバスや画面キャプチャの仕組みを、アプリのウィジェット階層（画面の部品がどのように配置されているかという構造）を改変することなく、スムーズに重ね合わせることが可能となる。これにより、SnappySnag自体がアプリの動作に悪影響を与えることを防いでいる。

二つ目は「コンテキストメタデータ抽出」だ。ただスクリーンショットの画像を大規模言語モデル（LLM：Large Language Model）のようなAIに渡すだけでは、あいまいな回答しか得られないことが多い。そこでSnappySnagは、スクリーンショットに加えて、現在アクティブな画面の名前、画面の寸法、デバイスの種類といったメトリクス、そして関連するウィジェットのコンテキスト（画面上のどの部分のどの種類の部品かという情報）といった、実行時にしか得られないメタデータを抽出する。これにより、AIはより正確な詳細情報に基づいて推論し、具体的なコード提案を生成できるようになる。

三つ目は「実行可能な差分（diffs）のためのプロンプティング」だ。「これを広くして」「下にボタンを追加して」といった短い人間のメモを、適切で機能するFlutterのコードに変換する必要がある。AIモデルは、具体的にどのウィジェットが影響を受けるのかを特定するように指示され、ファイル全体を書き直すのではなく、クリーンで的を絞った「差分」（変更前と変更後のコードの差分だけを示すもの）を出力する。このアプローチにより、AIが誤ったコードを生成してしまう「幻覚」（hallucinations）を大幅に減らすことができるのだ。

開発者自身がSnappySnagを自身の開発中のFlutterプロジェクトに組み込んでみたところ、すぐに顕著な変化が現れた。以前は、些細なUIの粗さを見つけても「後で直そう」と心の中で約束し、結局は忘れ去られていたようなアイデアが、今では思いついたその瞬間に数秒で記録されるようになった。しかも、AIが生成したコードのたたき台が添えられている。この「未来の自分にメモを渡す」際の摩擦軽減は、開発の勢いを維持する上で大きな効果をもたらす。

現在の初期リリースでは、メモをキャプチャしてAIのコード提案を得る機能が既に動作しているが、さらにスムーズなワークフローが視野に入っている。それは、デバイスからメモを送信すると、提案された変更がすでに適用されたプレビューデプロイのURLが自動的に生成され、ワンタップでそれをマージできるというものだ。ソファでUI要素を微調整し、スマートフォンで更新されたプレビューリンクを確認し、ターミナルを開くことなくマージできる状況を想像してみてほしい。すべての変更にこのような自動化が必要なわけではないが、UIの調整や文章の編集といった作業において、このような効率化されたループがあれば、反復作業はほとんど手間いらずに感じられるだろう。SnappySnagは、この核となる基盤が成熟するにつれて、この方向性をさらに探求していく計画だ。

SnappySnagはこの目標に向けて最初の大きな一歩を踏み出したばかりだが、実際のデバイス上で直接アプリを作り上げることを愛するすべての開発者に、このツールが響くことを願っている。