FlutterPluginの作り方

GDGDevFestTokyo 2018

Transcript

1. FlutterPluginの作り方 GDG DevFest Tokyo 2018 @kuwapp_dev
2. 自己紹介 • @kuwapp_dev / 畑祐輔(はたゆうすけ) • モイ株式会社 • Androidエンジニア • ツイキャス
3. このセッションのゴール
4. このセッションのゴール • このセッションを見た方が、FlutterPluginとはなにか理解す ること • このセッションを見た方が、FlutterPluginを実装できるように なること
5. Agenda
6. Agenda • FlutterPluginとは • MethodChannel • EventChannel • MethodCodec • TIPS • まとめ
7. Flutter Pluginとは
8. Flutter Pluginとは • iOS・Androidの実装とそれらを使用するためのDartの実装 を含むパッケージのこと。 • DartからAndroidやiOSの実装を呼び出すこともできるし、そ の逆もできる。 • Flutterでプラットフォーム固有の機能を使用したい場合に使 用する。
9. Flutter(Dart)からAndroid・iOSのAPIにアクセスが必要なときに 使用する。デバイス固有の機能を使用したいとき。 例えば • 位置情報を取得したい • 位置情報の変更を監視したい • アラームを設定したい • 音楽を再生したい • Bluetooth機能を使いたい どのような場合に使用するのか
10. 作り方をなぜ知っておく必要があるのか 1. アプリの要求に適したPluginが存在するとは限らない。 2. 既存のPlugin選定時に知っておきたい。
11. 1.アプリの要求に適したPluginが 存在するとは限らない • 既に提供されているプラグインだけでアプリの機能を実装で きるとは限らない。 • 自分で実装が必要な場合もある。 • 実装方法を知っておくことでどの程度工数がかかりそうなど イメージができる。
12. 2.既存のPluginの選定時に知っておきたい • 実際に使えるレベルのものであるのか。 • Pluginを書いた人がAndroid・iOSそれぞれに精通している とは限らないので品質が低い場合がある。
13. ざっくりとPluginの動作イメージ
14. Android iOS Pluginの動作イメージ Flutter
15. Android iOS Pluginの動作イメージ Flutter Android・iOSのAPIを呼び出す
16. Android iOS Pluginの動作イメージ Flutter 結果を返す
17. Android iOS Pluginの動作イメージ Flutter MethodChannel EventChannel
18. MethodChannelとEventChannel MethodChannelやEventChannelがDartと各プラットフォームの 橋渡しを行っている。 これらを使用してFlutterとAndroid・iOSでやりとりを行う。
19. MethodChannel
20. MethodChannel • Dartから各プラットフォームのAPIを呼び出し、Dart側へ値を 返却できる。 • 各プラットフォームからDartのAPI呼び出しができる。
21. MethodChannel Flutter invokeMethod invokeMethod success, error, notImplemented Android iOS
22. MethodChannel Flutter invokeMethod invokeMethod success, error, notImplemented Android iOS
23. MethodChannel Flutter invokeMethod invokeMethod success, error, notImplemented Android iOS
24. MethodChannel Flutter invokeMethod invokeMethod success, error, notImplemented Android iOS
25. Dartから各プラットフォームのAPIを 呼び出し結果を受け取る例
26. Pluginの仕様 端末のモデル名を取得できる • AndroidならNexus5など • iOSならiPhoneやiPadなど デバイス名を取得するPluginを作る
27. Pluginのプロジェクトを作る flutter create --org com.kuwapp --template=plugin -i swift -a kotlin device_plugin templateはPluginを指定
28. Pluginのプロジェクトを作る flutter create --org com.kuwapp --template=plugin -i swift -a kotlin device_plugin iOS・Androidの言語指定 デフォルトはObjCとJava
29. Pluginのプロジェクトを作る flutter create --org com.kuwapp --template=plugin -i swift -a kotlin device_plugin Plugin名の指定
30. デバイス名を取得するメソッド名を決める デバイス名を取得する機能を追加するので getDeviceModel とする これは後ほどDart、Android、iOSの実装で使用する。
31. 各プラットフォームの実装をDartから呼び出す • Dartから各プラットフォームの実装を呼び出すために MethodChannelを使用する。 • MethodChannelがDartと各プラットフォーム間の橋渡しを行 う。 • 生成されたdevice_plugin.dart を変更を加えていく。
32. device_plugin.dart class DevicePlugin { static const MethodChannel _channel = const MethodChannel('device_plugin'); static Future<String> get deviceModel async { final String deviceModel = await _channel.invokeMethod('getDeviceModel'); return deviceModel; } } MethodChannelの インスタンス生成
33. device_plugin.dart class DevicePlugin { static const MethodChannel _channel = const MethodChannel('device_plugin'); static Future<String> get deviceModel async { final String deviceModel = await _channel.invokeMethod('getDeviceModel'); return deviceModel; } } invokeMethodで各プラットフォー ムの実装が呼び出される
34. device_plugin.dart class DevicePlugin { static const MethodChannel _channel = const MethodChannel('device_plugin'); static Future<String> get deviceModel async { final String deviceModel = await _channel.invokeMethod('getDeviceModel'); return deviceModel; } } 呼び出すメソッドを引数に指定
35. Androidでハンドリングする • Dartから MethodChannel.invokeMethod が呼び出される とAndroidではMethodCallHandler.onMethodCallが呼び 出される • ここでDartで指定したメソッド名が取得できるのでメソッド名 に対応した処理を行い結果を返却する。
36. DevicePlugin.kt class DevicePlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "device_plugin") channel.setMethodCallHandler(DevicePlugin()) } } override fun onMethodCall(call: MethodCall, result: Result): Unit { when(call.method) { "getDeviceModel" -> result.success(Build.MODEL) else -> result.notImplemented() } } } DartのMethodChannel.invokeMethodで onMethodCallが呼び出される
37. DevicePlugin.kt class DevicePlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "device_plugin") channel.setMethodCallHandler(DevicePlugin()) } } override fun onMethodCall(call: MethodCall, result: Result): Unit { when(call.method) { "getDeviceModel" -> result.success(Build.MODEL) else -> result.notImplemented() } } } call.methodでDartで指定したメ ソッド名が取れる
38. DevicePlugin.kt class DevicePlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "device_plugin") channel.setMethodCallHandler(DevicePlugin()) } } override fun onMethodCall(call: MethodCall, result: Result): Unit { when(call.method) { "getDeviceModel" -> result.success(Build.MODEL) else -> result.notImplemented() } } } メソッド名によって処理を変える
39. DevicePlugin.kt class DevicePlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "device_plugin") channel.setMethodCallHandler(DevicePlugin()) } } override fun onMethodCall(call: MethodCall, result: Result): Unit { when(call.method) { "getDeviceModel" -> result.success(Build.MODEL) else -> result.notImplemented() } } } result.successの引数にDartに 返す値を指定する
40. DevicePlugin.kt class DevicePlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "device_plugin") channel.setMethodCallHandler(DevicePlugin()) } } override fun onMethodCall(call: MethodCall, result: Result): Unit { when(call.method) { "getDeviceModel" -> result.success(Build.MODEL) else -> result.notImplemented() } } } 未実装のメソッド名の場合は notImplementedを呼び出す
41. iOSでハンドリングする • Dartから MethodChannel.invokeMethod が呼び出される とiOSではFlutterPlugin.handleが呼び出される • ここでDartで指定したメソッド名が取得できるのでメソッド名 に対応した処理を行い結果を返却する。
42. SwiftDevicePlugin.swift public class SwiftDevicePlugin: NSObject, FlutterPlugin { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterMethodChannel(name: "device_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftDevicePlugin() registrar.addMethodCallDelegate(instance, channel: channel) } public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) { switch call.method { case "getDeviceModel": result(UIDevice.current.model) break default: result(FlutterMethodNotImplemented) } } } MethodChannel.invokeMethod でhandleが呼び出される
43. SwiftDevicePlugin.swift public class SwiftDevicePlugin: NSObject, FlutterPlugin { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterMethodChannel(name: "device_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftDevicePlugin() registrar.addMethodCallDelegate(instance, channel: channel) } public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) { switch call.method { case "getDeviceModel": result(UIDevice.current.model) break default: result(FlutterMethodNotImplemented) } } } FlutterMethodCall.methodで 指定したメソッド名がとれる
44. SwiftDevicePlugin.swift public class SwiftDevicePlugin: NSObject, FlutterPlugin { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterMethodChannel(name: "device_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftDevicePlugin() registrar.addMethodCallDelegate(instance, channel: channel) } public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) { switch call.method { case "getDeviceModel": result(UIDevice.current.model) break default: result(FlutterMethodNotImplemented) } } } getDeviceModelの場合に モデル名を取得してresultに渡す
45. SwiftDevicePlugin.swift public class SwiftDevicePlugin: NSObject, FlutterPlugin { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterMethodChannel(name: "device_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftDevicePlugin() registrar.addMethodCallDelegate(instance, channel: channel) } public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) { switch call.method { case "getDeviceModel": result(UIDevice.current.model) break default: result(FlutterMethodNotImplemented) } } } 未実装のメソッド名の場合は FlutterMethodNotImplementedを 返す
46. 実装したPluginを使う
47. device_plugin.dart(実装の再確認) class DevicePlugin { static const MethodChannel _channel = const MethodChannel('device_plugin'); static Future<String> get deviceModel async { final String deviceModel = await _channel.invokeMethod('getDeviceModel'); return deviceModel; } } DevicePlugin.deviceModelで デバイスモデルがとれる
48. main.dart class _MyAppState extends State<MyApp> { String _deviceModel = "undefined"; @override void initState() { super.initState(); DevicePlugin.deviceModel.then((deviceModel) { setState(() { _deviceModel = deviceModel; }); }); } //… } デバイスモデルを取得できたら setStateで反映
49. MethodChannelまとめ • DartからMethodChannel.invokeMethodで各プラットフォー ムの実装を呼び出す • MethodChannel.invokeMethodが呼び出されると ◦ AndroidではMethodCallHandler.onMethodCallが呼び 出される ◦ iOSではFlutterPlugin.handleが呼び出される • 各プラットフォームでメソッド名に対応した処理を行い結果を 返す
50. EventChannel
51. • Android・iOSで発生したイベントを継続的にDart側へ通知 できる。DartでAndroid・iOSのイベントを監視できる。 例えば • 位置情報の変更を監視したいとき • 音量の変更を監視したいとき • センサー情報の変更を監視したいとき EventChannel
52. EventChannel Flutter Android iOS receiveBroadcastStream success, error, endOfStream cancel
53. EventChannel Flutter Android iOS receiveBroadcastStream success, error, endOfStream cancel
54. EventChannel Flutter Android iOS receiveBroadcastStream success, error, endOfStream cancel
55. EventChannel Flutter Android iOS receiveBroadcastStream success, error, endOfStream cancel
56. 端末の音量変更時に 音量を通知するPluginを作る Pluginの仕様 • 各プラットフォームでは端末の音量を監視し、変更があればDart 側に通知する。 • Dart側では音量の変更を監視できる。
57. Pluginのプロジェクトを作る flutter create --org com.kuwapp --template=plugin -i swift -a kotlin volume_plugin
58. Dartで各プラットフォームで起きた変更を受け 取れるようにする • 各プラットフォームのイベントを継続的に受け取るために EventChannelを使用する。 • EventChannelから生成したStreamをlistenする。 • 自動生成されたvolume_plugin.dartに変更を加える。
59. volume_plugin.dart class VolumePlugin { //省略 シングルトンにしておく final EventChannel _channel = const EventChannel('volume_plugin'); Stream<int> _onVolumeChanged; Stream<int> get onVolumeChanged { if (_onVolumeChanged == null) { _onVolumeChanged = _channel .receiveBroadcastStream() .map((dynamic event) => event as int); } return _onVolumeChanged; } } EventChannelの インスタンス生成
60. volume_plugin.dart class VolumePlugin { //省略 シングルトンにしておく final EventChannel _channel = const EventChannel('volume_plugin_event'); Stream<int> _onVolumeChanged; Stream<int> get onVolumeChanged { if (_onVolumeChanged == null) { _onVolumeChanged = _channel .receiveBroadcastStream() .map((dynamic event) => event as int); } return _onVolumeChanged; } } 各プラットフォームの イベントを受け取る
61. volume_plugin.dart class VolumePlugin { //省略 シングルトンにしておく final EventChannel _channel = const EventChannel('volume_plugin_event'); Stream<int> _onVolumeChanged; Stream<int> get onVolumeChanged { if (_onVolumeChanged == null) { _onVolumeChanged = _channel .receiveBroadcastStream() .map((dynamic event) => event as int); } return _onVolumeChanged; } } Streamは保持する。 新たにStreamを生成すると以前 生成したStreamはCancelされ る。 シングルトンにするのはStreamを 複数生成させないため。
62. volume_plugin.dart class VolumePlugin { static VolumePlugin _instance; factory VolumePlugin() { if (_instance == null) { _instance = VolumePlugin._private(); } return _instance; } VolumePlugin._private(); 　//略… } シングルトンはこんな感じに
63. Androidでイベントを流す • PluginクラスにEventChannel.StreamHandlerのonListen とonCancelを実装する • onListenはDart側でStreamが購読された場合に呼び出さ れるのでイベントを流す処理を開始させる • onCancelはStreamがキャンセルされた場合に呼び出され るのでイベントの監視を停止する処理を入れる
64. VolumePlugin.kt class VolumePlugin(private val registrar: Registrar) : EventChannel.StreamHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = EventChannel(registrar.messenger(), "volume_plugin") channel.setStreamHandler(VolumePlugin(registrar)) } } //略… } EventChannelのインスタンス生成
65. VolumePlugin.kt class VolumePlugin(private val registrar: Registrar) : EventChannel.StreamHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = EventChannel(registrar.messenger(), "volume_plugin") channel.setStreamHandler(VolumePlugin(registrar)) } } //略… } PluginをsetStreamHandlerの引数にする
66. VolumePlugin.kt class VolumePlugin(private val registrar: Registrar) : EventChannel.StreamHandler { private var volumeChangeReceiver: BroadcastReceiver? = null override fun onListen(argument: Any?, eventSink: EventChannel.EventSink) { volumeChangeReceiver = object : BroadcastReceiver() { override fun onReceive(context: Context?, intent: Intent?) { eventSink.success(getVolume()) } } val filter = IntentFilter("android.media.VOLUME_CHANGED_ACTION") registrar.context().registerReceiver(volumeChangeReceiver, filter) } override fun onCancel(argument: Any?) { volumeChangeReceiver?.let { registrar.context().unregisterReceiver(it) } } } EventChannel.StreamHandler を実装する
67. VolumePlugin.kt class VolumePlugin(private val registrar: Registrar) : EventChannel.StreamHandler { private var volumeChangeReceiver: BroadcastReceiver? = null override fun onListen(argument: Any?, eventSink: EventChannel.EventSink) { volumeChangeReceiver = object : BroadcastReceiver() { override fun onReceive(context: Context?, intent: Intent?) { eventSink.success(getVolume()) } } val filter = IntentFilter("android.media.VOLUME_CHANGED_ACTION") registrar.context().registerReceiver(volumeChangeReceiver, filter) } override fun onCancel(argument: Any?) { volumeChangeReceiver?.let { registrar.context().unregisterReceiver(it) } } } dart側でlistenされると呼び出される
68. VolumePlugin.kt class VolumePlugin(private val registrar: Registrar) : EventChannel.StreamHandler { private var volumeChangeReceiver: BroadcastReceiver? = null override fun onListen(argument: Any?, eventSink: EventChannel.EventSink) { volumeChangeReceiver = object : BroadcastReceiver() { override fun onReceive(context: Context?, intent: Intent?) { eventSink.success(getVolume()) } } val filter = IntentFilter("android.media.VOLUME_CHANGED_ACTION") registrar.context().registerReceiver(volumeChangeReceiver, filter) } override fun onCancel(argument: Any?) { volumeChangeReceiver?.let { registrar.context().unregisterReceiver(it) } } } 音量ボタンの変更の監視を開始する
69. VolumePlugin.kt class VolumePlugin(private val registrar: Registrar) : EventChannel.StreamHandler { private var volumeChangeReceiver: BroadcastReceiver? = null override fun onListen(argument: Any?, eventSink: EventChannel.EventSink) { volumeChangeReceiver = object : BroadcastReceiver() { override fun onReceive(context: Context?, intent: Intent?) { eventSink.success(getVolume()) } } val filter = IntentFilter("android.media.VOLUME_CHANGED_ACTION") registrar.context().registerReceiver(volumeChangeReceiver, filter) } override fun onCancel(argument: Any?) { volumeChangeReceiver?.let { registrar.context().unregisterReceiver(it) } } } 音量変更時にEventSink.successを呼び出し Dartに通知
70. VolumePlugin.kt class VolumePlugin(private val registrar: Registrar) : EventChannel.StreamHandler { private var volumeChangeReceiver: BroadcastReceiver? = null override fun onListen(argument: Any?, eventSink: EventChannel.EventSink) { volumeChangeReceiver = object : BroadcastReceiver() { override fun onReceive(context: Context?, intent: Intent?) { eventSink.success(getVolume()) } } val filter = IntentFilter("android.media.VOLUME_CHANGED_ACTION") registrar.context().registerReceiver(volumeChangeReceiver, filter) } override fun onCancel(argument: Any?) { volumeChangeReceiver?.let { registrar.context().unregisterReceiver(it) } } } 音量の変更の監視を停止する
71. iOSでイベントを流す • PluginクラスにFlutterStreamHandlerのonListenと onCancelを実装する • onListenはDart側でStreamが購読された場合に呼び出さ れるのでイベントを流す処理を開始させる • onCancelはStreamがキャンセルされた場合に呼び出され るのでイベントの監視を停止する処理を入れる
72. SwiftVolumePlugin.swift public class SwiftVolumePlugin: NSObject, FlutterPlugin, FlutterStreamHandler { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterEventChannel(name: "volume_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftVolumePlugin() channel.setStreamHandler(instance) } public func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? { // 音量変更の監視をはじめる　 // 音量変更時に events(volume)を呼び出す return nil } public func onCancel(withArguments arguments: Any?) -> FlutterError? { // 音量変更の監視の停止 return nil } } FlutterEventChannelのインスタンスを生成
73. SwiftVolumePlugin.swift public class SwiftVolumePlugin: NSObject, FlutterPlugin, FlutterStreamHandler { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterEventChannel(name: "volume_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftVolumePlugin() channel.setStreamHandler(instance) } public func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? { // 音量変更の監視をはじめる　 // 音量変更時に events(volume)を呼び出す return nil } public func onCancel(withArguments arguments: Any?) -> FlutterError? { // 音量変更の監視の停止 return nil } } setStreamHandlerを呼び出す
74. SwiftVolumePlugin.swift public class SwiftVolumePlugin: NSObject, FlutterPlugin, FlutterStreamHandler { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterEventChannel(name: "volume_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftVolumePlugin() channel.setStreamHandler(instance) } public func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? { // 音量変更の監視をはじめる　 // 音量変更時に events(volume)を呼び出す return nil } public func onCancel(withArguments arguments: Any?) -> FlutterError? { // 音量変更の監視の停止 return nil } } onListen で音量変更時に現在の音量を流すよ うにする(省略)
75. SwiftVolumePlugin.swift public class SwiftVolumePlugin: NSObject, FlutterPlugin, FlutterStreamHandler { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterEventChannel(name: "volume_plugin", binaryMessenger: registrar.messenger()) let instance = SwiftVolumePlugin() channel.setStreamHandler(instance) } public func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? { // 音量変更の監視をはじめる　 // 音量変更時に events(volume)を呼び出す return nil } public func onCancel(withArguments arguments: Any?) -> FlutterError? { // 音量変更の監視の停止 return nil } } onCancel で音量の監視を停止する
76. 実装したPluginを使う
77. class _MyAppState extends State<MyApp> { int _volume = 0; StreamSubscription<int> _subscription; @override void initState() { super.initState(); _subscription = VolumePlugin().onVolumeChanged.listen((volume) { setState(() { _volume = volume; }); }); } @override void dispose() { _subscription.cancel(); super.dispose(); } } VolumePlugin.dart 音量の変更を購読する
78. class _MyAppState extends State<MyApp> { int _volume = 0; StreamSubscription<int> _subscription; @override void initState() { super.initState(); _subscription = VolumePlugin().onVolumeChanged.listen((volume) { setState(() { _volume = volume; }); }); } @override void dispose() { _subscription.cancel(); super.dispose(); } } VolumePlugin.dart StreamSubscriptionはCancelで きるように保持しておく
79. class _MyAppState extends State<MyApp> { int _volume = 0; StreamSubscription<int> _subscription; @override void initState() { super.initState(); _subscription = VolumePlugin().onVolumeChanged.listen((volume) { setState(() { _volume = volume; }); }); } @override void dispose() { _subscription.cancel(); super.dispose(); } } VolumePlugin.dart dispose時にcancel
80. EventChannelまとめ • EventChannelを使うことでAndroid・iOSで起きたイベントを Dartで継続的に監視できる • onListenでイベントを投げる処理を開始し、onCancelで停 止させる • AndroidではEventSink.success、iOSでは FlutterEventSinkを呼び出すことでDart側へ通知できる
81. Dartと各プラットフォームで 何をやりとりできるのか
82. MethodCodec
83. MethodCodec • Dartと各プラットフォーム間でやりとりする値のエンコード・ デコードを行うクラス。 • DartからAndroid・iOSへ受け渡す値をバイナリにエンコード して渡し、Android・iOSからの結果をデコードしてDartに返 している。 • StandardMethodCodecとJsonMethodCodecがある • MethodChannel or EventChannelのコンストラクタに指定 する
84. StandardMethodCodec
85. StandardMethodCodec • null、bool、String、int、List、Mapなどの型をやりとりすると きに使用する。 • デフォルトではこちらが使用される。 どの型を使用できるのかは次のスライドに。
86. StandardMethodCodec https://docs.flutter.io/flutter/services/StandardMessageCodec-class.html
87. StandardMethodCodecを使う
88. Dart実装
89. Dart実装 static const MethodChannel _channel = const MethodChannel('methodcodec_plugin', StandardMethodCodec()); static Future<String> toUpperCase(String str) async { final String result = await _channel.invokeMethod('toUpperCase', str); return result; } MethodChannelのコンストラクタに StandardMethodCodecを指定
90. Dart実装 static const MethodChannel _channel = const MethodChannel('methodcodec_plugin', StandardMethodCodec()); static Future<String> toUpperCase(String str) async { final String result = await _channel.invokeMethod('toUpperCase', str); return result; } invokeMethodに引数を指定
91. Android実装
92. Android class MethodcodecPlugin(): MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar): Unit { val channel = MethodChannel(registrar.messenger(), "methodcodec_plugin", StandardMethodCodec.INSTANCE) channel.setMethodCallHandler(MethodcodecPlugin()) } } override fun onMethodCall(call: MethodCall, result: Result): Unit { if (call.method == "toUpperCase") { result.success((call.arguments as String).toUpperCase()) } else { result.notImplemented() } } } StandardMethodCodecを指定
93. Android class MethodcodecPlugin(): MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar): Unit { val channel = MethodChannel(registrar.messenger(), "methodcodec_plugin", StandardMethodCodec.INSTANCE) channel.setMethodCallHandler(MethodcodecPlugin()) } } override fun onMethodCall(call: MethodCall, result: Result): Unit { if (call.method == "toUpperCase") { result.success((call.arguments as String).toUpperCase()) } else { result.notImplemented() } } } 引数を受け取る
94. iOSはほぼ変わらないので省略
95. JsonMethodCodec
96. JsonMethodCodec • Json形式でDartと各プラットフォーム間で値をやりとりする ときに使用する • Androidではorg.jsonパッケージのクラス(JSONObject、 JSONArray等)になり、iOSではNSJSONSerializationにな る 使える型等は次のスライド
97. JsonMethodCodec https://docs.flutter.io/flutter/services/JSONMessageCodec-class.html
98. JsonMethodCodecを使う
99. Dart実装
100. Dart実装 class JsonmethodcodecTestPlugin { static const MethodChannel _channel = const MethodChannel('jsonmethodcodec_test_plugin', JSONMethodCodec()); static void setUser() { _channel.invokeMethod("setUser", { "user": {"id": 14, "name": "Tom", "age": 35} }); } } JSONMethodCodecを指定する
101. Dart実装 class JsonmethodcodecTestPlugin { static const MethodChannel _channel = const MethodChannel('jsonmethodcodec_test_plugin', JSONMethodCodec()); static void setUser() { _channel.invokeMethod("setUser", { "user": {"id": 14, "name": "Tom", "age": 35} }); } } 引数にJsonライクなものを渡す 内部的に文字列に変換されている
102. Android実装
103. Android実装 class JsonmethodcodecTestPlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "jsonmethodcodec_test_plugin", JSONMethodCodec.INSTANCE) channel.setMethodCallHandler(JsonmethodcodecTestPlugin()) } } override fun onMethodCall(call: MethodCall, result: Result) { if (call.method == "setUser") { val json = call.arguments as JSONObject val user = json.getJSONObject("user") val id = user.getInt("id") val name = user.getString("name") val age = user.getInt("age") result.success(null) } JSONMethodCocdecを指定
104. Android実装 class JsonmethodcodecTestPlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "jsonmethodcodec_test_plugin", JSONMethodCodec.INSTANCE) channel.setMethodCallHandler(JsonmethodcodecTestPlugin()) } } override fun onMethodCall(call: MethodCall, result: Result) { if (call.method == "setUser") { val json = call.arguments as JSONObject val user = json.getJSONObject("user") val id = user.getInt("id") val name = user.getString("name") val age = user.getInt("age") result.success(null) } JSONObjectで取れる
105. Android実装 class JsonmethodcodecTestPlugin : MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "jsonmethodcodec_test_plugin", JSONMethodCodec.INSTANCE) channel.setMethodCallHandler(JsonmethodcodecTestPlugin()) } } override fun onMethodCall(call: MethodCall, result: Result) { if (call.method == "setUser") { val json = call.arguments as JSONObject val user = json.getJSONObject("user") val id = user.getInt("id") val name = user.getString("name") val age = user.getInt("age") result.success(null) } JSONObjectから Jsonの要素を取得 する
106. iOSはほぼ変わらないので省略
107. MethodCodecまとめ • MethodCodecでDartと各プラットフォーム間でやりとりする 値のエンコード・デコードを行う • StandardMethodCodecは基本的な型をやりとりする場合 に使用する。 • JsonMethodCodecはJsonでやりとりする場合に使用す る。 • デフォルトではStandardMethodCodecが使われる。
108. TIPS
109. PluginでAndroidの onActivityResultがとりたい
110. onActivityResultをハンドリングする class EventHandlingPlugin : MethodCallHandler, PluginRegistry.ActivityResultListener { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "event_handling") val plugin = EventHandlingPlugin() channel.setMethodCallHandler(plugin) registrar.addActivityResultListener(plugin) } } override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?): Boolean { // TODO return false } }
111. onActivityResultをハンドリングする class EventHandlingPlugin : MethodCallHandler, PluginRegistry.ActivityResultListener { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "event_handling") val plugin = EventHandlingPlugin() channel.setMethodCallHandler(plugin) registrar.addActivityResultListener(plugin) } } override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?): Boolean { // TODO return false } }
112. onActivityResultをハンドリングする class EventHandlingPlugin : MethodCallHandler, PluginRegistry.ActivityResultListener { companion object { @JvmStatic fun registerWith(registrar: Registrar) { val channel = MethodChannel(registrar.messenger(), "event_handling") val plugin = EventHandlingPlugin() channel.setMethodCallHandler(plugin) registrar.addActivityResultListener(plugin) } } override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?): Boolean { // TODO return false } }
113. 他にも • PluginRegistry.Registrar.addRequestPermissionsResultListener • PluginRegistry.Registrar.addNewIntentListener • PluginRegistry.Registrar.addUserLeaveHintListener
114. EventChannelを使わずに 各プラットフォームから Dartを呼び出す
115. MethodChannelでDartを呼び出す • Dartから各プラットフォームの実装を呼び出すには MethodChannel.invokeMethodを使用していたが、その逆 も可能。 • 各プラットフォーム側でMethodChannel.invokeMethodを 呼び出し、Dartでハンドリングする。 • 継続的に通知しないものはEventChannelではなくこちらを 使う方が良さそう。
116. Androidの実装 class MethodChannelTestPlugin(private val channel: MethodChannel): MethodCallHandler { companion object { @JvmStatic fun registerWith(registrar: Registrar): Unit { val channel = MethodChannel(registrar.messenger(), "method_channel_test") channel.setMethodCallHandler(MethodChannelTestPlugin(channel)) } } // 何かのトークン更新時に呼び出されるとする fun onTokenRefreshed(newToken: String) { channel.invokeMethod("onTokenRefreshed", newToken) }
117. Dartの実装 static MethodChannel _channel = MethodChannel('method_channel_test') ..setMethodCallHandler(_handle); static Future<Null> _handle(MethodCall methodCall) { if (methodCall.method == "onTokenRefreshed") { String newToken = methodCall.arguments; } return null; }
118. Dartの実装 static MethodChannel _channel = MethodChannel('method_channel_test') ..setMethodCallHandler(_handle); static Future<Null> _handle(MethodCall methodCall) { if (methodCall.method == "onTokenRefreshed") { String newToken = methodCall.arguments; } return null; }
119. Dartの実装 static MethodChannel _channel = MethodChannel('method_channel_test') ..setMethodCallHandler(_handle); static Future<Null> _handle(MethodCall methodCall) { if (methodCall.method == "onTokenRefreshed") { String newToken = methodCall.arguments; } return null; }
120. まとめ
121. まとめ • FlutterPluginとはiOS・Androidの実装とそれらを使用する ためのDartの実装を含むパッケージのこと。 • MethodChannelで各プラットフォームのAPIを呼び出し結果 を受け取ることができる。 • EventChannelで各プラットフォームのイベントを監視でき る。 • Dartと各プラットフォームでやりとりする値によって StandardMethodCodecとJsonMethodCodecを使い分け る。
122. ありがとうございました