Flutterを スマートウォッチで動かしてみた

2018.12.06 Flutter Meetup Tokyo #6 @FiNC

Transcript

1. Flutterを スマートウォッチで動かしてみた ウルシステムズ株式会社 河野 大紀
2. 私はだれ？ 河野 大紀（こうの たいき） Twitter: @taikichi225 ウルシステムズ株式会社 強化学習やらOpenStackやら色んなものを触っています。最 近は、Kaggleのコンペを通じて出会ったPUBGというゲーム にはまってしまいました。助けてください。 Flutter歴：約6ヶ月
3. とある平日 （こーの）今度、Flutter MeetupでLTやるけど、なに話そうかしら？ （上司）なんかネットに転がっていない話がよいのでは？例えば、 Flutterって、スマートウォッチで動くん？ （こーの）わからんとです。ちゃんとアドバイスください。 （こーの）（なにそれ、誰もやってなさそうで面白そう。）
4. 質問 Flutterを スマートウォッチで動かした事のある方
5. そんなこと思ったことある方 いないですよね
6. ...いないですよね？
7. ということで
8. 今日のテーマ Flutterを スマートウォッチで動かしてみた
9. バージョン Flutter：v0.11.10 スマートウォッチ：Tickwatch E スペック OS Wear OS by Google 2.1 メモリ 512MB ストレージ 4GB
10. Wear OS by Googleとは ➢ Androidをベースにしたスマートウォッチ専用OS ➢ 2018年3月にAndroid Wearという名前からリブランド ➢ BluetoothやWi-Fiでペアリングしたスマートフォン端末から 通知を受け取ったり、アプリをインストールしたりできる
11. とにかく試してみる
12. とにかく試してみる PCからWi-Fi経由でデバッグする ➢ Flutterプロジェクトの作成 a. いつもの手順なので詳細は割愛！ b. Flutterのインストール ▪ https://flutter.io/get-started/install/ c. IDE・エディターの設定 ▪ https://flutter.io/get-started/editor/#androidstudio d. プロジェクトの生成・アプリの起動・ホットリロードの確認 ▪ https://flutter.io/get-started/test-drive/#androidstudio
13. とにかく試してみる PCからWi-Fi経由でデバッグする ➢ スマートウォッチのデバッグ設定 a. 自分のスマートフォンとスマートウォッチがbluetoothでペアリングできているか確認する。 b. 設定⇒システム⇒端末情報⇒ビルド情報を7回タップ⇒設定画面に開発者向けオプションの項 目が表示される。 c. 設定⇒接続⇒Wi-Fi⇒接続するWi-Fiを選択する。 d. 設定⇒開発者向けオプション⇒Wi-Fi経由でデバッグをオン。 e. Wi-Fiが正しく接続されていれば、IPアドレスが表示される。このIPアドレスをメモする。 【参考】 https://developer.android.com/training/wearables/apps/debugging
14. ➢ PCからの接続設定 a. スマートウォッチと同一ネットワークにPCが接続しているか確認する。 b. 任意のディレクトリで以下のコマンドを実行する。 ▪ adb connect 【メモしたスマートウォッチのIPアドレス】 ▪ 接続できたら以下が表示される。 ▪ connected to :5555 c. 今度はVSCodeでスマートウォッチが接続されているか確認する。 d. デバッグを開始する e. スマートウォッチにapkがインストールされるので確認する。 【参考】 https://developer.android.com/training/wearables/apps/debugging とにかく試してみる PCからWi-Fi経由でデバッグする
15. とにかく試してみる
16. う、動いた...！
17. とにかく試してみる エミュレータだとこんなかんじ
18. プラグインは使える？
19. プラグインを使ってみる Sensors：https://pub.dartlang.org/packages/sensors 加速度センサーとジャイロセンサーにアクセスするプラグイン StreamでAccelerometerEventまたはGyroscopeEventを取得できる。 AccelerometerEvent：X・Y・Z軸それぞれの加速度 GyroscopeEvent：X・Y・Z軸それぞれの角速度 検証：加速度検出して値を表示してみる。
20. Streamで取れるなら、 とりあえずStreamBuilderで表示してみましょ AccelerometerEventのStream x・y・zプロパティでアクセス可能
21. その結果...
22. 止まると...
23. プラグインも使える！
24. 気になったこと
25. 気になったこと ①アプリサイズ 他のスマートウォッチアプリと比べて、Flutterアプリのサイズは大きめです。 限られたリソースしか持たないスマートウォッチでは、Flutterはあまり向か ないかもしれません。 アプリ名 アプリサイズ Wear OS 26.33MB Google Playストア 17.65MB Google Play Music 10MB Google MAP 1.74MB Flutterアプリ（カウントアップ） 25.75MB
26. 気になったこと ②意図しない挙動
27. 気になったこと ②意図しない挙動 キーボードが画面上部に張り付いてしまっている... 意図しない挙動を起こすことがある。
28. 興味本位でFlutterをスマートウォッチでうごか してみた所感 ➢ スマートウォッチ用アプリ開発にはFlutterは向かないかも。 ➢ アプリサイズが大きいし、たまに不思議な挙動をする。 誤解されないように言っておきますが、Flutterが悪いわけではないです。 少なくても私が知る限り、Flutterがスマートウォッチに対応していると聞いたことが ないです。それなのに動かそうとしたら、何か無理はでますよね。 Flutterは用法用量を守って使っていきましょ。 バージョン1.0もでたことですし、Flutter書くのがもっと楽しくなりますね。
29. Qiita書きました https://qiita.com/taikichi/items/b24a2ee3d1996f6c9a89
30. おわり