Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flutterとプラットフォーム依存の処理の対応について

329 views

Published on

Flutterがどういうものかのざっくりとした説明と、FlutterのPlatformChannelsという仕組みを用いた、ネイティブコード(Android、iOS)とのやり取りについて。

2019/07/25 Mix Leap Study #47 - Android x Flutter 勉強会
https://yahoo-osaka.connpass.com/event/137244/

Published in: Software
  • Be the first to comment

  • Be the first to like this

Flutterとプラットフォーム依存の処理の対応について

  1. 1. 2019/07/25 Mix Leap Study #47 - Android x Flutter 勉強会 Flutterとプラットフォーム依存の処 理の対応について GDG神戸オーガナイザー 野田 悟志
  2. 2. 自己紹介
  3. 3. 自己紹介 GDG神戸オーガナイザー(Manager) (2015~) ● 仕事 コミュニケーションロボットSota(ソータ)の内部コンテンツ、クラウド周 り開発 ● 趣味:VR Oculus Rift DK2、Oculus Rift CV1、Cardboard、PSVR、 FOVE 0、Daydream、FirstVR(UnlimitedHandLite)、 Oculus Go、Oculus Quest ← New!!
  4. 4. 自己紹介 仕事:Sota連携API NTT東サービス「ロボコネクト」版のSotaを、 REST API(っぽいやつ)で操作できる仕組 み。 ソフトエンジニア向けで、モバイルアプリなど の自社サービスを、ロボットで身体性のある サービスに展開したい人向け(法人のみ)。
  5. 5. Flutter
  6. 6. Flutter Flutterとは Flutterは、単一のコードベースから高性能で高忠実度(OSバージョンに UIが影響されない)の、iOSおよびAndroid用のアプリケーションを構築 するためのモバイルアプリSDK。 開発者がさまざまなプラットフォームで自然に感じる高性能アプリケー ションを提供できるようにすることを目標としている。例えば、スクロール 動作、タイポグラフィ、アイコンなどの違いを解決する。 https://flutter.dev/docs/resources/technical-overview#what-is-flutter
  7. 7. Flutter なぜFlutterを使うのか ● 生産性が高い ○ 単一のコードベース(Dart)からiOSとAndroid用に開発できる ○ より少ないコードでより多くのことができる ○ プロトタイプを簡単に繰り返すことができる ■ アプリの実行中にコードを変更してリロードすることができ る(ホットリロード) ■ クラッシュを修正し、アプリが中断したところからデバッグ を続行することができる
  8. 8. Flutter なぜFlutterを使うのか ● カスタマイズされた美しいユーザーエクスペリエンスを作成すること ができる ○ Flutter独自のフレームワークを使用して構築された豊富な Material DesignおよびCupertino(iOSフレーバー)ウィジェット の恩恵を受けることができる ○ OEMウィジェットを使用せず(つまりOSバージョンにUIが影響さ れない)、カスタムで美しい、ブランド主導のデザインを実現でき る https://flutter.dev/docs/resources/technical-overview#why-use-flutter
  9. 9. Flutter なぜFlutterを使うのか https://flutter.dev/docs/resources/technical-overview#layer-cakes-are-delicious
  10. 10. Flutter 豊富なパッケージ 依存パッケージはpubspec.yamlに記載する。 dependencies: flutter: sdk: flutter firebase_analytics: ^1.0.3 shared_preferences: ^0.4.3 下記からパッケージを探せる。かなり多くのパッケージが存在しており、 だいたいがAndroid、iOSに対応している。 https://pub.dev/flutter
  11. 11. Flutter Flutterをはじめる Flutterをはじめる時は、コードラボをやるのがおススメ。 https://codelabs.developers.google.com/?cat=Flutter ● Intro to Dart for Java Developers ○ Dartの基本的な文法が学べる ● Write Your First Flutter App, part 1 ● Write Your First Flutter App, part 2 ○ Part1, 2を通して、Flutterの基本的な実装方法が学べる ● Firebase for Flutter ○ FlutterでFirebaseを使う場合が学べる
  12. 12. Flutter Flutterをはじめる Flutterがどういうもので、どこがいいのかは「What’s Revolutionary about Flutter」の日本語翻訳版も参考になる。 https://qiita.com/yasutaka_ono/items/21a5a55c1ff81740f9e4
  13. 13. Platform Channels
  14. 14. よし。だいたいわかった。とはいえ… Flutterが良さそうなのは分 かったけど、実際に開発す る時にネイティブコード触り たい時ってあるよね…
  15. 15. そんなあなたにおススメしたいのが Platform Channels
  16. 16. Platform Channels 概要 Flutterコード(Dart)と、AndroidまたはiOSのネイティブコード(Kotlin、 Swiftなど)との通信の仕組み。 Platform Channelsを介して、Flutter側からネイティブコード側にメッ セージを送信し、ネイティブコード側はメッセージを受信した後、ネイティ ブコードでの処理を実行し、そのレスポンスをFlutter側に返す、というこ とが出来る。 https://flutter.dev/docs/development/platform-integration/platform-ch annels
  17. 17. Platform Channels 実例:Flutter(Dart)側 // チャンネル名(任意のキー文字列 )を設定する static const platform = const MethodChannel('samples.flutter.dev/battery'); // 呼び出すメソッド名 (任意のキー文字列 )を指定する // (引数がある場合は、第二引数に Map<String, dynamic>で指定する) final int result = await platform.invokeMethod('getBatteryLevel');
  18. 18. Platform Channels 実例:Androidネイティブコード(Kotlin)側 private val CHANNEL = "samples.flutter.dev/battery" // 指定したチャンネル名の MethodCallHandlerを登録する MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> // ここの処理はメインスレッドで実行される // 呼び出したメソッド名によって処理を実行する。 (引数はObject型でcall.argumentsでとれる) if (call.method == "getBatteryLevel") { val batteryLevel = getBatteryLevel() // ここではバッテリー値取得メソッドを呼んでいる // 戻り値の設定 result.success(batteryLevel) } else { result.notImplemented() } }
  19. 19. Platform Channels 実例:Androidネイティブコード(Java)側 private static final String CHANNEL = "samples.flutter.dev/battery"; // 指定したチャンネル名の MethodCallHandlerを登録する new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(new MethodCallHandler() { @Override public void onMethodCall(MethodCall call, Result result) { // 呼び出したメソッド名によって処理を実行する。 (引数はObject型でcall.argumentsでとれる) if (call.method.equals("getBatteryLevel")) { int batteryLevel = getBatteryLevel(); // ここではバッテリー値取得メソッドを呼んでいる // 戻り値の設定 result.success(batteryLevel); } else { result.notImplemented(); } } });
  20. 20. これでネイティブコードが書ける! ※幸せ感には個人差があります
  21. 21. ところで… 逆に、ネイティブコードから Flutterコードを呼び出した い時ってあるよね?
  22. 22. Platform Channels ネイティブコードからメッセージ送信 Platform Channelsを介して、ネイティブコード側から、Flutter側にメッ セージを送信することもできる。 Flutter側で共通処理を実装し、それをネイティブコードから呼ぶといった 使い方ができる。
  23. 23. Platform Channels 実例:Androidネイティブコード(Kotlin)側 // チャンネル名(任意のキー文字列 ) private static final String CALLBACK_CHANNEL = "samples.flutter.dev/callback"; // 呼び出すメソッド名 (任意のキー文字列 )を指定する // (引数がある場合は、第二引数に指定する ) MethodChannel(flutterView, CALLBACK_CHANNEL).invokeMethod("callback", null)
  24. 24. Platform Channels 実例:Androidネイティブコード(Java)側 // チャンネル名(任意のキー文字列 ) private static final String CALLBACK_CHANNEL = "samples.flutter.dev/callback"; // 呼び出すメソッド名 (任意のキー文字列 )を指定する // (引数がある場合は、第二引数に指定する ) new MethodChannel(getFlutterView(), CALLBACK_CHANNEL).invokeMethod("callback", null);
  25. 25. Platform Channels 実例:Flutter(Dart)側 // 指定したチャンネル名の MethodChannelを生成する static const platformCallback = const MethodChannel('samples.flutter.dev/callback'); // 指定したチャンネル名の MethodCallHandlerを登録する platformCallback.setMethodCallHandler((MethodCall call) async { if (call.method == "callback") { // 処理を実行 // 引数はcall.argumentsでdynamic型でとれる } });
  26. 26. Platform Channels 注意点 Platform ChannelsはFlutterView(または FlutterViewController)の MethodChannelを使用している。 そのため、AndroidならActivityが生きている (フォアグラウンド、またはバックグラウンド)状 態でなければならない。
  27. 27. Platform Channels 注意点 もし、FlutterViewが存在しない場合、例外は発生しないが、 FlutterViewが存在しないというエラーメッセージが出力される。 音楽プレイヤーなど、AndroidでネイティブコードでServiceを実装し、 バッググラウンドで実行しているときに、Activityを破棄すると、Flutter 側にメッセージを送ること(受け取ること)はできない。
  28. 28. かくいう僕も…
  29. 29. 実は困らない…? AmazonMusicアプリは Activity破棄すると音楽再生 できない(止まる)から、Flutter で音楽プレイヤーを作る場合 は、問題にならないのかも? Android、iOSやってないので 分かりません。
  30. 30. ご清聴ありがとうございました

×