DevTools extensions で独自の DevTool を開発する

DevTools extensions で独自の DevTool を開発する | FlutterKaigi 2024

by Koki Yoshida

Slide 1

Slide 1 text

DevTools extensions で独自の DevTool を開発する 2024/11/22 吉田航己 1

Slide 2

Slide 2 text

株式会社サイバーエージェントモバイルアプリエンジニア #Flutter #Neovim #野球 #バイク #SKKに最近入門しました吉田航己 @lllttt06 @koki8442 Yoshida Koki 2

Slide 3

Slide 3 text

DevTools extensions とは？ DevTools extensions の活用事例 DevTools extensions の作成方法 01 02 03 CONTENTS 3 04 DevTools extensions 開発の Tips

Slide 4

Slide 4 text

4 01 DevTools extensions とは？ 4

Slide 5

Slide 5 text

DevTools extensions とは？ Devtools extensions とは pub package の形で提供される開発者用のツール Devtools 内に自動で統合され、ブラウザや IDE から利用可能 01 5 開発の生産性向上

Slide 6

Slide 6 text

Slide 7

Slide 7 text

7 Devtools に新しく独自のタブが作成される！

Slide 8

Slide 8 text

8 8

Slide 9

Slide 9 text

DevTools extensions とは？ Devtools extensions の利点 ● Flutter Web で作成できる ● 既存 package への統合に加え、独立した package として公開可能 ● 既存の Devtools の仕組みを再利用できる ○ VM 接続 ○ UI コンポーネント ○ その他ユーティリティ 01 9

Slide 10

Slide 10 text

10 02 DevTools extensions の活用事例 10

Slide 11

Slide 11 text

DevTools extensions の活用事例弊チームでは... ・GraphQL Cache Inspector ・Loading State Toggle ・Dio Logger Toggle 02 11

Slide 12

Slide 12 text

DevTools extensions の活用事例 02 12 https://github.com/lllttt06/ﬂutter_devtools_extension_sample Demo

Slide 13

Slide 13 text

DevTools extensions の活用事例 02 13

Slide 14

Slide 14 text

14 DevTools extensions の活用事例 GraphQL Cache Inspector graphql_ﬂutter ではどんなデータがキャッシュされているのか確認しづらい・GraphQLClient のキャッシュを可視化・正規化された Tree 構造を出力・React の Apollo Client を参考 https://www.apollographql.com/docs/react/devel opment-testing/developer-tooling 02 14

Slide 15

Slide 15 text

15 DevTools extensions の活用事例 Loading State Toggle すぐに状態が切り替わる Loading 中の UI が確認しづらい・Loading 状態の UI を切り替え・Skeleton などの確認に利用・React の Suspense を参考 https://react-devtools-tutorial.vercel.app/toggl ing-suspense-fallbacks 02 15 isLoading == true isLoading == false

Slide 16

Slide 16 text

16 DevTools extensions の活用事例 Dio Logger Toggle GraphQL 通信の結果をPrettyDioLogger を用いて出力しているが、ログが増えることで他のログが追いづらい Http 通信のログ出力を on/oﬀ 02 16

Slide 17

Slide 17 text

17 03 DevTools extensions の作成方法 17

Slide 18

Slide 18 text

18 DevTools extensions の作成方法 Loading State Toggle を実際に作成しながら説明 03 18 isLoading == true isLoading == false

Slide 19

Slide 19 text

19 DevTools extensions の作成方法 Loading State Toggle の全体像 03 19

Slide 20

Slide 20 text

20 DevTools extensions の作成方法 Loading State Toggle の全体像 03 20

Slide 21

Slide 21 text

21 DevTools extensions の作成方法 | app/main.dart debugLoadingState 03 21

Slide 22

Slide 22 text

22 DevTools extensions の作成方法 Loading State Toggle の全体像  03 22

Slide 23

Slide 23 text

23 DevTools extensions の作成方法 GraphQLQueryContainer ● result.data によって Widget を出し分け ● debugLoadingState == true 強制的に Loading 用の Widget 03 23

Slide 24

Slide 24 text

24 DevTools extensions の作成方法 GraphQLQueryContainer ● result.data によって Widget を出し分け ● debugLoadingState == true 強制的に Loading 用の Widget 03 24

Slide 25

Slide 25 text

25 DevTools extensions の作成方法 GraphQLQueryContainer ● result.data によって Widget を出し分け ● debugLoadingState == true 強制的に Loading 用の Widget 03 25

Slide 26

Slide 26 text

26 DevTools extensions の作成方法既存 package に追加する場合 1. conﬁg.yaml の作成 2. Devtools extensions のパッケージを作成 3. Flutter web で build 参考 : https://pub.dev/packages/devtools_extensions 03 26

Slide 27

Slide 27 text

27 DevTools extensions の作成方法 1. conﬁg.yaml の作成 03 27 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true

Slide 28

Slide 28 text

28 DevTools extensions の作成方法 1. conﬁg.yaml の作成 03 28 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true 表示名

Slide 29

Slide 29 text

29 DevTools extensions の作成方法 1. conﬁg.yaml の作成 03 29 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true Report an issue で遷移する URL

Slide 30

Slide 30 text

30 DevTools extensions の作成方法 1. conﬁg.yaml の作成 03 30 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true Devtools extensions のバージョン

Slide 31

Slide 31 text

31 DevTools extensions の作成方法 1. conﬁg.yaml の作成 03 31 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true 表示名の左側のアイコン material/icons.dart

Slide 32

Slide 32 text

32 DevTools extensions の作成方法 1. conﬁg.yaml の作成 03 32 flutter_kaigi/ └── packages/ └── app/ ├── extension/ │ └── devtools/ │ ├── build/ │ └── config.yaml └── lib/ # config.yaml name: flutterkaigi issueTracker: 'https://github.com/lllttt06/flutter_kaigi_2024/issues' version: 0.0.1 materialIconCodePoint: '0xe0b1' requiresConnection: true dart or Flutter アプリとのコネクトが必要か

Slide 33

Slide 33 text

33 DevTools extensions の作成方法既存 package に追加する場合 1. conﬁg.yaml の作成 2. Devtools extensions のパッケージを作成 3. Flutter web で build 参考 : https://pub.dev/packages/devtools_extensions 03 33

Slide 34

Slide 34 text

34 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 34 flutter_kaigi/ └── packages/ ├── app/ │ ├── extension/ │ │ └── devtools/ │ │ ├── build/ │ │ └── config.yaml │ └── lib/ └── devtools_ext/ └── lib/ $ flutter create --template app --platforms web devtools_ext $ flutter pub add devtools_extensions devtools_ext という名前の web 向けの Flutter アプリとして作成 devtools_ext の作成

Slide 35

Slide 35 text

35 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 35 flutter_kaigi/ └── packages/ ├── app/ │ ├── extension/ │ │ └── devtools/ │ │ ├── build/ │ │ └── config.yaml │ └── lib/ └── devtools_ext/ └── lib/ $ flutter create --template app --platforms web devtools_ext $ flutter pub add devtools_extensions devtools_extensions を追加 devtools_ext の作成

Slide 36

Slide 36 text

36 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 36 DevtoolsExtension Widget の使用

Slide 37

Slide 37 text

37 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 37 DevtoolsExtension Widget の使用・Devtools 用の Theme 設定・Devtools extensions で使用可能な globals の初期化・extensionManager ・serviceManager ・dtdManager

Slide 38

Slide 38 text

38 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 38 作成した Devtools extensions を run してみる

Slide 39

Slide 39 text

39 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 39

Slide 40

Slide 40 text

Slide 41

Slide 41 text

41 実行中のアプリと接続するには VM の URI が必要

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

44 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 44 DevtoolsExtension Widget の使用 Text を置き換える

Slide 45

Slide 45 text

45 DevTools extensions の作成方法 Loading State Toggle の全体像 03 45

Slide 46

Slide 46 text

46 DevTools extensions の作成方法 Loading State Toggle の全体像 03 46

Slide 47

Slide 47 text

47 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成実行中のアプリと Devtools extensions の通信 03 47 app : registerExtension で ExtensionHandler を登録 devtools_ext : serviceManager.callServiceExtensionOnMainIsolate で登録した ExtensionHandler を呼び出す

Slide 48

Slide 48 text

48 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成実行中のアプリと Devtools extensions の通信 03 48 app : registerExtension で ExtensionHandler を登録 devtools_ext : serviceManager.callServiceExtensionOnMainIsolate で登録した ExtensionHandler を呼び出す

Slide 49

Slide 49 text

49 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成実行中のアプリと Devtools extensions の通信 03 49

Slide 50

Slide 50 text

50 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成実行中のアプリと Devtools extensions の通信 03 50 app : registerExtension で ExtensionHandler を登録 devtools_ext : serviceManager.callServiceExtensionOnMainIsolate で登録した ExtensionHandler を呼び出す

Slide 51

Slide 51 text

51 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成実行中のアプリと Devtools extensions の通信 03 51

Slide 52

Slide 52 text

52 DevTools extensions の作成方法 2. Devtools extensions のパッケージを作成 03 52

Slide 53

Slide 53 text

53 DevTools extensions の作成方法既存 package に追加する場合 1. conﬁg.yaml の作成 2. Devtools extensions のパッケージを作成 3. Flutter web で build 参考 : https://pub.dev/packages/devtools_extensions 03 53

Slide 54

Slide 54 text

54 DevTools extensions の作成方法 Flutter web で build 03 54

Slide 55

Slide 55 text

55 Devtools に新しく独自のタブが作成される！

Slide 56

Slide 56 text

56 56

Slide 57

Slide 57 text

57 DevTools extensions の作成方法 03 57

Slide 58

Slide 58 text

58 04 DevTools extensions 開発の Tips 58

Slide 59

Slide 59 text

59 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 ● ExtensionManager ● ServiceManager ● DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 59

Slide 60

Slide 60 text

60 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 ● ExtensionManager ● ServiceManager ● DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 60 DevTools にバナーやスナックバーで通知

Slide 61

Slide 61 text

61 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 ● ExtensionManager ● ServiceManager ● DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 61 VM Service との連携

Slide 62

Slide 62 text

62 DevTools extensions 開発の Tips DevToolsExtension で初期化した globals の活用 ● ExtensionManager ● ServiceManager ● DTDManager 参考 : https://pub.dev/packages/devtools_extensions 04 62 ファイルシステムとの連携が可能

Slide 63

Slide 63 text

63 DevTools extensions 開発の Tips 04 63

Slide 64

Slide 64 text

64 DevTools extensions 開発の Tips 既存パッケージを参考にする https://pub.dev/packages/devtools_extensions 04 64

Slide 65

Slide 65 text

65 まとめ ● Devtools Extensions で独自の開発機能を作成可能 ● 作り方は簡単 3 ステップ ○ conﬁg.yaml の作成 ○ Devtools extensions のパッケージを作成 ○ Flutter web で build ● React など Web 界隈のツールを参考にするのもオススメ 65

Slide 66

Slide 66 text

66 ご清聴ありがとうございました Thank you! 66

Slide 67

Slide 67 text

67 参考文献 https://docs.ﬂutter.dev/tools/devtools/extensions https://medium.com/@lennarddeurman/exploring-ﬂuters-new-c ustom-devtools-extensions-f0e42567d5ae https://www.youtube.com/watch?v=gOrSc4s4RWY https://www.youtube.com/live/Ah3mNZKkCmk?si=GNuNfANV_ ogs4rFy https://www.apollographql.com/docs/react/development-testi ng/developer-tooling https://react-devtools-tutorial.vercel.app/toggling-suspense-f allbacks 67