pigeonでネイティブ連携

FlutterKaigi mini #2 ＠Ishikawa でLTしたものです。

Transcript

1. pigeonで ネイティブ連携 FlutterKaigi mini #2 @Ishikawa @noboru-i
2. About me name: 石倉 昇 : noboru_i 所属: 株式会社モンスターラボ 勤務地: 富山県富山市 （2015年からリモート）
3. Flutterでアプリを開発してても、 platform-specific codeを実行した いことが、まれによくありますよ ね？ ※ platform-specific code = KotlinやSwiftのコード https://docs.flutter.dev/platform-integration/platform-channels
4. 例えば 過去にネイティブで作り込んだものを流用したい 広告系SDKの導入 機器の操作系（IoTデバイスSDKとかプリンターSDKとか） ニッチなライブラリを利用したい（MIDI再生とか）
5. そんなとき MethodChannelなどの実装をするが、手間が多い Dart側のinterfaceを作成 Kotlinでメッセージ受信して処理実行して結果をまとめて返却 Swiftで…（略） 複数の値を一度にやり取りしたい場合、それぞれのプラットフォームで data class的なものを作成しなければならない。
6. イメージ Flutter data class interface iOS data class interface implementation Android data class interface implementation 全部自分で実装
7. 例：バッテリー情報取得 上記の公式ドキュメントでは、パラメータ無しで実行、数値型が返ってく るだけ。 これだけなら、ある程度簡単そうだが、 現実的には複数の値の送受信が必 要となる。 今回は例として、電池残量（int）と、充電中かどうか（bool）を返す。 ref: https://docs.flutter.dev/platform-integration/platform-channels
8. Data class Flutter (Dart) Android (Kotlin) iOS (Swift) @JsonSerializable() class BatteryResult { BatteryResult({ required this.level, required this.isCharging, }); final int level; final bool isCharging; // fromJson, toJson の定義 } @Serializable data class BatteryResult ( val level: Int val isCharging: Boolean ) struct BatteryResult: Codable { var level: Int var isCharging: Bool }
9. Interface / Implementation (1/3) invokeMethodでネイティブコードを実行した結果を、JSON文字列で受 け取ってクラスに変換する。 Flutter (Dart) class BatteryApi { static const platform = MethodChannel('samples.flutter.dev/battery'); Future<BatteryResult> getBatteryLevel() async { // ex. {"level": 89, "isCharging": true} final resultJson = await platform.invokeMethod<String>('getBatteryLevel'); return BatteryResult.fromJson(jsonDecode(resultJson)); } }
10. Interface / Implementation (2/3) 同じchannel文字列で、同じmethod名であれば、処理して返す。 Android (Kotlin) private val CHANNEL = "samples.flutter.dev/battery" MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result -> if (call.method == "getBatteryLevel") { val batteryLevel = getBatteryLevel() val isCharging = getIsCharging() val json = Json.encodeToString(BatteryResult(batteryLevel, isCharging)) result.success(json) } }
11. Interface / Implementation (3/3) iOS (Swift) let batteryChannel = FlutterMethodChannel(name: "samples.flutter.dev/battery", binaryMessenger: controller.binaryMessenger) batteryChannel.setMethodCallHandler({ [weak self] (call: FlutterMethodCall, result: FlutterResult) -> Void in if call.method == "getBatteryLevel" { let batteryLevel = getBatteryLevel() let isCharging = getIsCharging() let batteryResult = BatteryResult(level: batteryLevel, isCharging: isCharging) let encoder = JSONEncoder() result(encoder.encode(batteryResult)) } })
12. 問題点 data classを3言語で定義しなければならない 追加・削除・更新したい場合に手間 typoする危険性 型を間違える危険性 チャンネル名と関数名がただの文字列 typoする危険性 リファクタリングしづらい
13. そこでpigeon Pigeon is a code generator tool to make communication between Flutter and the host platform type-safe, easier, and faster. Google翻訳 Pigeon は、Flutter とホスト プラットフォーム間の通信を タイプセーフ 、 簡単 、 高速 にするコード生成ツールです。 https://pub.dev/packages/pigeon
14. pigeon GitHubの flutter/packages で管理されている安心感 https://github.com/flutter/packages/tree/main/packages/pigeon video_player でも利用されている実績 コード自動生成なので、人間より間違いが少ないはず
15. pigeonを使う手順 1. インターフェースをDartで書く 2. dart run pigeon を実行（コードが自動生成される） 3. 出力されたinterfaceを、Kotlin/Swiftで実装 4. Flutter側から、出力されたDart interfaceを実行する つまり、定義部分を書くのはDartだけで、KotlinとSwiftは実装するだけ。
16. イメージ Flutter data class interface iOS data class interface implementation Android data class interface implementation これだけ不要になる。
17. Dart interface pigeonへの入力となるコード class BatteryResult { BatteryResult({ required this.level, required this.isCharging, }); final int level; final bool isCharging; } @HostApi() abstract class BatteryApi { BatteryResult getBatteryLevel(); }
18. dart run pigeon 実行 ファイルが出力される dart run pigeon \ --input pigeons/messages.dart \ --dart_out lib/gen/messages.dart \ --swift_out ios/Classes/messages.g.swift \ --kotlin_out android/app/src/main/kotlin/com/example/pigeon_plugin/Messages.g.kt \ --kotlin_package "com.example.pigeon_plugin"
19. 以降、Flutterアプリプロジェクトに 直接組み込む例 今回のサンプルコードはこちらにあります。 https://github.com/noboru-i/flutter_pigeon_sample （個人的には、 packages ディレクトリを作成して、利用するライブラ リごとなどにフォルダを作成し、plugin packageとすることが多いです。 ）
20. 実装するKotlinコード class MainActivity : FlutterActivity() { override fun configureFlutterEngine(flutterEngine: FlutterEngine) { super.configureFlutterEngine(flutterEngine) BatteryApi.setUp( flutterEngine.dartExecutor.binaryMessenger, BatteryApiImplementation(context) ) } } class BatteryApiImplementation(private val context: Context) : BatteryApi { override fun getBatteryLevel(): BatteryResult { val level: Int = ... val isCharging: Boolean = ... return BatteryResult(level, isCharging) } }
21. 実装するSwiftコード @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any ) -> Bool { GeneratedPluginRegistrant.register(with: self) let controller: FlutterViewController = window?.rootViewController as! FlutterView BatteryApiSetup.setUp(binaryMessenger: controller as! FlutterBinaryMessenger, api return super.application(application, didFinishLaunchingWithOptions: launchOptions } } class BatteryApiImplementation: BatteryApi { func getBatteryLevel() throws -> BatteryResult { let level = ... let isCharging = ... return BatteryResult(level: Int64(level), isCharging: isCharging)
22. こうなった Flutter data class interface iOS data class interface implementation Android data class interface implementation
23. pigeonによって 各言語で同じようなコードを書くという、面倒・ミスしやすい部分が、 1箇所書くだけで良くなった 今後更新・追加が必要な場合も、Dartでの定義だけ書き換えてコマン ド実行すると、必要なコードが手に入る （最悪、pigeonが廃れても、生成された結果コードは残っているの で、頑張れば修正できる）
24. pigeonを使って、 ラクできるところは ラクしましょう おわり