でぃするだいありー?

そんな気はないんだれど、でぃすっちゃってる。 でぃすでれ?

はじめてのFlutter

 

Flutter版


ふるった? ふらった?

たぶんどこかの技術系サイトでその名を目にしたことが知るきっかけとなった。
随分と前にJavaでやったきりになってしまっているAndroidアプリ作成を再勉強しようかなと漠然と思っていたところだったので、食指が動いた。

使用した環境はWindows10 + VS Code
導入なんかは以下のようなサイトをいくつか参考に行った。

webbibouroku.com

 

作成したのは、家庭内Webサーバにアクセスするアプリである。
PCとスマホから使用可能なHTML版が実装済みであり、それで事足りているのだが、比較できるものを実装してみるのも一興ということで挑戦してみた。

JavaGUIは遥か昔に触れたきりで、PaneとかいうガイネンがありそれがGUIの要素だということはなんとなく知っている。HTMLと同じく直感的ではなく、職人的な慣れが必要だという印象がある。

Flutterでこれに相当するガイネンはWidgetである。まずはこれに慣れる必要があるが、やはり直感的ではない。数日間のトライではきっと忘れてしまうだろう。
やたらとカッコが多いコードになり、縦に長くなってしまうが、分かりやすいといえば分かりやすい。VS Codeが優秀なせいかもしれない。

初心者ゆえ、いろいろハマる要素はあったが、最大のハマり要素は実機へのデプロイで、実機デバッグ中には発生しない現象が発生するというものだ。色々調べて、HttpClientのgetUrlでコケてることがわかった。awaitのエラーハンドリングもやってみたが引っかからず、確かな証拠は獲得できなかったが、ネットワークが使えてないことを直感した。
今回作成したものはスマホから家庭内Webサーバにアクセスする。すなわち、「AndroidManifest.xml」に『<uses-permission android:name="android.permission.INTERNET"/>』を書けばいいのだが、これを自動的にサポートする機能はVS CodeDartまたはFlutterの拡張機能には含まれていないようだ。ネットワーク使うライブラリを実装に含めているんだから自動設定しろよと思わなくもないが、解決したのでまあいい。JavaでのAndroidアプリ作成経験によって助けられたことになる。
 

f:id:CharlieXX:20190307161336p:plain
f:id:CharlieXX:20190312110720p:plain
Web版(左)とFlutter版(右)

HTMLは書いているうちに面倒になってきてしまうタイプのスタンド使い。これも初挑戦したBootstrap3で書いたものをBootstrap4に書き直したところで力尽き妥協したものである。それに似せて作ったので、Flutter版もまあ私的用途だし?なカンジではある。
なにをするものかといえば、室内のエアコン冷暖房をON/OFFし、照明をON/OFFし、Webサーバに接続しているセンサから取得できる室内の気温、湿度、気圧と、WebサーバのCPU温度を表示する。Webサーバはラズパイ。

Flutterの雑感としては、イコール「VS Code拡張機能の強力さ」に尽きるかもしれない。時々おかしな動作をするが、ホットリロードがとても素晴らしい。そして軽い。
かつてAndroid Studioで試したときは「Java重い」しか感じず、プロジェクトをロードしている最中にやる気を失うことが多かったことを思いだす。
独学には向いた開発環境かもしれない。

チュートリアルをいくつか眺めてとりあえず実装完了するまで七日くらい。