DeNA TechCon2024 Flutter Thursday

1. © DeNA Co., Ltd. 1
Flutter.Thursday@DeNA TechCon2024
うちのアプリのデバッグ機能
杉山 優悟
技術統括部プロダクト開発部モバイルグループ
株式会社ディー・エヌ・エー

2. © DeNA Co., Ltd. 2
杉山 優悟 / すぎー
1. 2023年7月からDeNA入社
2. iOSエンジニア
a. try! Swift楽しみ！
3. 現在はFlutter製の新規ライブ配信アプリを開発中
4. 年末からプレイ中の桃鉄100年があと20年で終わる
技術統括部プロダクト開発部モバイルグループ
@u5-03
@u5_03
https://ulog.sugiy.com
© DeNA Co., Ltd.
自己紹介

3. © DeNA Co., Ltd. 3
みなさん、アプリの開発中の
デバッグ機能はどうしてますか？

4. © DeNA Co., Ltd. 4
1
1. Flutter標準の機能、開発ツールのもの、3rd Partyのもの、自作のものなど色々ある
a. Flutter標準
i. Hot reloadやDevTools、Widget Inspectorなど
b. VSCodeの場合
i. VSCode自体の設定、Flutter-Auto-Importなどの拡張機能
c. 3rd Partyのもの
i. ChatGPT, Copilot?
d. 自作
i. 文字通り自作したもの
デバッグ機能は開発を補助・効率的にするためのツールや機能

5. © DeNA Co., Ltd. 5
2
1. 実装している機能
a. デバッグ情報
b. 指定ページを開く
c. アプリ内ステータス変更
d. デバッグステータス変更
e. Mockタイプ切り替え
f. アプリ強制クラッシュ
g. キャッシュクリア系
h. アプリ内の機能動画確認
2. 端末をShakeすることで、どこからでも表示できる
弊アプリで自作している効率化のためのDebugMenu

6. © DeNA Co., Ltd. 6
3
1. デバイスやアプリ情報などをまとめた画面
2. 画面上で確認できない情報を表示
a. Shared Preference
b. Remote Config
c. アプリ内のフラグ
d. ユーザーIDなど
3. 全ての値はタップでコピーできる
4. iOSの配布用アプリのビルド番号は日時に設定
a. Ref: https://ulog.sugiy.com/change-build-number/
DebugMenu - デバッグ情報

7. © DeNA Co., Ltd. 7
4
1. 開発中の画面や特定の画面を開くための機能(一部の画面は導線が遠かったりする)
2. 複数の状態を持つ画面をパターンごとに出し分ける
3. freeScreen→ちょっとした動作確認に使用
4. designAsset→Design系の仕様を確認しやすいようにまとめ(兼デザイナーの確認用)
DebugMenu - 指定ページを開く

8. © DeNA Co., Ltd. 8
5
1. 特定の画面でその画面で使っている変数・フラグをOverlayに表示する
a. watchしているのでリアルタイムで更新される
b. 特にライブ配信はフラグが多いので、管理が大変
c. 自分でDebugする時もバグがあった時に原因を特定しやすい
i. 開発中のBugFixにかなり役立っている
d. DebugMenuから表示/非表示を切り替えられる
2. タップすると、このフラグ情報とDebugInfoの情報をコピーする
a. チーム内のバグ報告やQA起票時に添付してもらう運用にしている
画面のステータスを表示するOverlay Widget

9. © DeNA Co., Ltd. 9
6
1. MaterialAppのフラグ
a. showPerformanceOverlay(→画面上部に表示, QAでも利用)
b. debugShowMaterialGrid⚙
i. レイアウト確認用のgridを表示する
2. Globalに定義されているフラグ(flutter/rendering.dartに定義)
a. debugPaintSizeEnabled⚙(→Widgetの表示領域を表示)
b. debugPaintBaselinesEnabled⚙
i. TextなどのBaselineを表示
c. debugRepaintRainbowEnabled⚙
i. 再描画されると、bounding boxの色が変わる
3. VSCodeのWidget Inspectorからも変更可能→
Flutter標準のDebug機能のフラグ(⚙: DebugMode only)

10. © DeNA Co., Ltd. 10
7 まとめ
1. Debug機能を充実させると、開発やテストがはかどる！
a. 実装するなら、早めの方が複利的に効果が出る！
i. 実際今の機能の恩恵はとても大きい
b. 開発が始まって7ヶ月のアプリにしてはだいぶ充実していると思う
2. メインの機能開発に影響が出ない範囲でやる！
3. Flutterは標準のDebug用機能が充実していて、その辺はありがたい！
a. iOSエンジニア的にはXcodeにHotReload入らないかなーと切望
b. それかPreviewがもう少し安定してくれると!

11. © DeNA Co., Ltd. 11
うちではこんな実装をしている！
という方は教えてください！！🙋

12. © DeNA Co., Ltd. 12