その不具合、どのWidgetですか？ ― アプリ内で“直せるバグ報告”を作る

FlutterKaigi2026で登壇したLTの記事です
https://2026.flutterkaigi.jp/#timetable:~:text=%E6%97%A5%E6%9C%AC%E8%AA%9E-,%E3%81%9D%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88%E3%80%81%E3%81%A9%E3%81%AEWidget%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F%20%E2%80%95%20%E3%82%A2%E3%83%97%E3%83%AA%E5%86%85%E3%81%A7%E2%80%9C%E7%9B%B4%E3%81%9B%E3%82%8B%E3%83%90%E3%82%B0%E5%A0%B1%E5%91%8A%E2%80%9D%E3%82%92%E4%BD%9C%E3%82%8B,-Day%201%2010.29

Transcript

1. FlutterKaigi 2026 スライド 1 / 27
2. みなさん 2 / 27
3. エンジニアの人？ 3 / 27
4. バグチケットの対応を したことある人？ 4 / 27
5. QA テストをしたことある人？ 5 / 27
6. バグチケットの対応は 場合によっては大変なことが多い 6 / 27
7. 環境情報がない 再現手順が不明確 OS ・デバイス・ビルド番号 エンジニア 画像や動画がない 画面のどこかわからない もちろん､ バグチケットの起票も大変です 7 / 27
8. できる限り省力化して チケットを起票する方法の一例を お話しします 8 / 27
9. その不具合､ どの Widget ですか？ ― アプリ内で “直せるバグ報告” を作る 2026/10/29 FlutterKaigi 2026 Sugiy/ すぎー 9 / 27
10. README すぎー /Sugiy 1. DeNA の iOS/Flutter エンジニア 2. FlutterKaigi は 2024 の前夜祭 LT 以来 2 回目 3. 去年末まで Flutter アプリ､ 今は iPadOS アプリのプロジェクト 4. 2025 年のベルリンでの Fluttercon ではパフォーマンスについて… 5. iPhone Duo を買ってしまったので､ お金が... 10 / 27
11. バグ起票の流れ: いま と アプリ内バグ起票 いまの一般的な流れ バグや改善点を検知 動画やスクショの用意 手動で情報を入力して起票 自分で撮る 再現手順や環境情報の記載､ ファイルの添付 アプリ内バグ起票 (iPadOS アプリで運用中) バグや改善点を検知 動画の用意 起票 Actions で下調べ・振り分け アプリが自動で記録 環境情報などは自動入力 起票後は自動 11 / 27
12. 今日話すこと 1. 画面上の Widget をタップして､ 対象の Widget を選ぶ 2. 静止画リングバッファ + デバイスで動画化して､ 不具合の 動画を作る 3. Widget 階層・ログ・環境情報を一緒にチケットに添付する 12 / 27
13. 1 画面上の Widget をタップして選ぶ 2 静止画リングバッファ + デバイスで動画化 3 Widget 階層・ログ・環境情報を添付する 13 / 27
14. ｢画面のどこ｣ が明確だと直しやすい 1. 曖昧だと不具合箇所を探すところから始まる 2. AI に修正を頼むときも､ どの Widget かが正確に直させる 材料になる 3. 報告する人は画面上で対象の Widget をタップするだけにし たい 14 / 27
15. タップした Widget が枠で囲まれる 1. ｢要素を選ぶ｣ で選択モードへ 2. 報告したい Widget をタップ 3. 入れ子は一番小さい要素が選ばれる 4. ｢この要素にする｣ で確定して起票画 面へ反映 Flutter デモ 発表時はここに実際の画面が表示され ます 15 / 27
16. 仕組みの肝 1. Element ツリーをたどり､ RenderObject の位置を取る 2. RenderBox.localToGlobal で画面座標に変換する 3. 目印は Semantics(identifier:) / ValueKey｡ a11y 対応がデバ ッグ資産に 4. タップ位置を含む候補のうち､ 面積が最小の要素を選ぶ 16 / 27
17. 1 画面上の Widget をタップして選ぶ 2 静止画リングバッファ + デバイスで動画化 3 Widget 階層・ログ・環境情報を添付する 17 / 27
18. 事象が起きてから動画を撮るのは手間 1. 起きたあとに撮り直すのは手間｡ 2. 再現が難しいと､ 再現させるのに時間がかかる (そもそも再 現しないことも) 3. 現在の iPadOS のプロジェクトのアプリ: 裏で静止画を撮り 続けて直近 60 秒をリングバッファに → 起票時に動画化 4. Flutter でも作れる？ 3 段階に分けて検証 18 / 27
19. 3 段階に分けて考える ① フレーム取得 △ Flutter だけだと不十分 toImage では PlatformView が黒い → ネイティブで View 階層ごと撮る ② リングバッファ ◎ Flutter だけで可 tmp に PNG を書き続けて､ 古い分を削除 ③ 動画エンコード × 標準の Dart 自体にはエンコーダがない ネイティブのエンコーダを MethodChannel で呼ぶ 19 / 27
20. 作ってみてわかった注意点 1. 秒数・解像度・ fps はプロジェクトに合わせて調整 2. フレームはファイルに溜め､ 古い順に消す 3. 負荷が重い処理は､ 実行時に OFF にできるようにする 20 / 27
21. 1 画面上の Widget をタップして選ぶ 2 静止画リングバッファ + デバイスで動画化 3 Widget 階層・ログ・環境情報を添付する 21 / 27
22. Issue に載せる情報 報告する人が選ぶ (任意・スキップ可) 選択した UI 要素 報告とコードを結ぶアンカー スクリーンショット 見た目の証拠 直近の動画 起きるまでの流れ 機械が自動で集める Widget 階層 その瞬間の画面構造 ログ 直前に何が起きていたか スタックトレース どの経路で来たか 環境情報 端末・ OS ・バージョン依存の切り分け 22 / 27
23. 最大の差分: ログは自分で溜める 1. Flutter には iOS の OSLogStore 相当の API がない 2. mein() で debugPrint / print / onError をフックして 流し込む 3. 起動時からアプリ内リングバッファに直近 1000 行を保持 し､ 起票時に添付 23 / 27
24. なぜ作ったのか (課題意識) 1. コミュニケーションコストの削減｡ 情報不足による確認のや りとりを無くしたい 2. AI で増えるエンジニアのアウトプットに対して､ QA の負荷 を減らしたい 3. AI に修正させるための正確なコンテキストとして､ そのま ま渡せるチケットにしたい 24 / 27
25. QA チームに聞いてみた よかった点 ・ 不具合の箇所をエンジニアに明確に伝えられる ・ 動画を撮り直さなくていいのが楽 ・ 環境情報などの入力漏れ・間違いがなくなった 大変だった点と工夫 ・ iPad での長文入力は大変 音声入力で書く・大枠だけ起票して PC で整える 25 / 27
26. まとめ 1. AI は機能開発だけでなく､ 効率化や QA の負荷削減にも 2. AI でツールを作るコストとハードルは大きく下がった 3. まずは自分で QA をして､ 課題意識を QA チームと共有 26 / 27
27. 終わり SlidysFlutter を試す PDF スライドを見る TestFlight / Flutter デモ入り Speaker Deck testflight.apple.com/join/tKHf1Uq2 speakerdeck.com/u503 27 / 27