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

by taikichi225

Slide 1

Slide 1 text

Flutterをスマートウォッチで動かしてみたウルシステムズ株式会社河野大紀

Slide 2

Slide 2 text

私はだれ？河野大紀（こうのたいき） Twitter: @taikichi225 ウルシステムズ株式会社強化学習やらOpenStackやら色んなものを触っています。最近は、Kaggleのコンペを通じて出会ったPUBGというゲームにはまってしまいました。助けてください。 Flutter歴：約6ヶ月

Slide 3

Slide 3 text

とある平日（こーの）今度、Flutter MeetupでLTやるけど、なに話そうかしら？（上司）なんかネットに転がっていない話がよいのでは？例えば、 Flutterって、スマートウォッチで動くん？（こーの）わからんとです。ちゃんとアドバイスください。（こーの）（なにそれ、誰もやってなさそうで面白そう。）

Slide 4

Slide 4 text

質問 Flutterをスマートウォッチで動かした事のある方

Slide 5

Slide 5 text

そんなこと思ったことある方いないですよね

Slide 6

Slide 6 text

...いないですよね？

Slide 7

Slide 7 text

ということで

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

バージョン Flutter：v0.11.10 スマートウォッチ：Tickwatch E スペック OS Wear OS by Google 2.1 メモリ 512MB ストレージ 4GB

Slide 10

Slide 10 text

Wear OS by Googleとは ➢ Androidをベースにしたスマートウォッチ専用OS ➢ 2018年3月にAndroid Wearという名前からリブランド ➢ BluetoothやWi-Fiでペアリングしたスマートフォン端末から通知を受け取ったり、アプリをインストールしたりできる

Slide 11

Slide 11 text

とにかく試してみる

Slide 12

Slide 12 text

とにかく試してみる 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

Slide 13

Slide 13 text

とにかく試してみる 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

Slide 14

Slide 14 text

➢ 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経由でデバッグする

Slide 15

Slide 15 text

とにかく試してみる

Slide 16

Slide 16 text

う、動いた...！

Slide 17

Slide 17 text

とにかく試してみるエミュレータだとこんなかんじ

Slide 18

Slide 18 text

プラグインは使える？

Slide 19

Slide 19 text

プラグインを使ってみる Sensors：https://pub.dartlang.org/packages/sensors 加速度センサーとジャイロセンサーにアクセスするプラグイン StreamでAccelerometerEventまたはGyroscopeEventを取得できる。 AccelerometerEvent：X・Y・Z軸それぞれの加速度 GyroscopeEvent：X・Y・Z軸それぞれの角速度検証：加速度検出して値を表示してみる。

Slide 20

Slide 20 text

Streamで取れるなら、とりあえずStreamBuilderで表示してみましょ AccelerometerEventのStream x・y・zプロパティでアクセス可能

Slide 21

Slide 21 text

その結果...

Slide 22

Slide 22 text

止まると...

Slide 23

Slide 23 text

プラグインも使える！

Slide 24

Slide 24 text

気になったこと

Slide 25

Slide 25 text

気になったこと ①アプリサイズ他のスマートウォッチアプリと比べて、Flutterアプリのサイズは大きめです。限られたリソースしか持たないスマートウォッチでは、Flutterはあまり向かないかもしれません。アプリ名アプリサイズ Wear OS 26.33MB Google Playストア 17.65MB Google Play Music 10MB Google MAP 1.74MB Flutterアプリ（カウントアップ） 25.75MB

Slide 26

Slide 26 text

気になったこと ②意図しない挙動

Slide 27

Slide 27 text

気になったこと ②意図しない挙動キーボードが画面上部に張り付いてしまっている... 意図しない挙動を起こすことがある。

Slide 28

Slide 28 text

興味本位でFlutterをスマートウォッチでうごかしてみた所感 ➢ スマートウォッチ用アプリ開発にはFlutterは向かないかも。 ➢ アプリサイズが大きいし、たまに不思議な挙動をする。誤解されないように言っておきますが、Flutterが悪いわけではないです。少なくても私が知る限り、Flutterがスマートウォッチに対応していると聞いたことがないです。それなのに動かそうとしたら、何か無理はでますよね。 Flutterは用法用量を守って使っていきましょ。バージョン1.0もでたことですし、Flutter書くのがもっと楽しくなりますね。