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

1a8cb13b8b18932e06923eabfeeadc83?s=47 taikichi225
December 07, 2018

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

2018.12.06 Flutter Meetup Tokyo #6 @FiNC

1a8cb13b8b18932e06923eabfeeadc83?s=128

taikichi225

December 07, 2018
Tweet

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. おわり