今更UIFlowに入門しました

こんにちは、 id:numanuma08 です。私はときどきM5 StackやM5 StickCを使ってちょっとした電子工作の入り口のようなことをやっているのですが、その中で今更UIFlowを使ってみたら結構いい感じだったので紹介します。

UIFlowとは

M5StackやM5 StickC用のアプリケーションを開発する開発環境です。利用可能な言語にビジュアルプログラミング言語のBlocklyとPythonを組み込み用に小さくしたMicroPythonがあります。また、開発用マシンにインストールするUIFlowのアプリケーションもありますが、Webページ上で動作するバージョンもあります。こちらなら、M5StackをWi-fiでインターネットに接続してAPIキーを入力すればPCとM5Stackの接続が不要なので、開発環境の構築や移動が不要です。

なぜUIFlowなのか

私がM5Stackで何かを作るとき、だいたいPlatform IOとVSCodeを使うことが多いです。

blog.covelline.com

ArduinoはC++11が使えるため、イテレーターやテンプレートやラムダ式が利用可能です。しかし、よくも悪くもC++なのでメモリに気を配ったり、意図しない参照に気をつける必要があります。

UIFlowで使えるBlocklyやMicroPythonならそのような心配は不要です。ビジュアルプログラミングは正直私は苦手だったのですが、普通にコードを書ける人なら特に苦もなく利用可能で、学習コストも低そうです。また、Pythonが使えるためPython経験者ならPythonアプリケーションを作る感覚で開発が可能です。

他に良いなと思った部分が画面表示に関する部分です。C++のライブラリからM5Stackの画面に文字や画像を表示するには、いい感じの座標を考えて表示し、前の画面表示の上に被さらないよう工夫する必要がありました。しかし、UIFlowでは開発画面上からM5Stackの画面上にラベルや画像などをレイアウトして、コードからラベルや画像の内容を変更できます。雰囲気としてはスマホ向けアプリを作るときの感覚に近くて、画面に表示する物があると少ない手間で実装可能です。

UIFlowの辛いところ

UIFlowを推しましたが辛いところもありました。コードのバージョン管理ができないためチーム開発や、息の長い開発に向いていないように感じます。WebのUIFlowでもスタンドアロンアプリケーションのUIFlowでもローカルにファイルを保存できますがBlocklyのレイアウトを記述したファイルなのでファイルの中を読むのは難しく、管理ができません。特にコンフリクトが起きたときに解消はほぼ不可能だと思います。

Pythonのコードを出力して保存できれば解決すると思いますが...

また、アプリケーションに付属するドキュメントが古いケースがあります。私はファームウェアを焼くためのM5-burnerの説明がUIFlowの付属ドキュメントに含まれていなくてちょっとハマりました。UIFlowで開発する前に手持ちのPCからM5-burnerでファームウェアをインストールする必要があります。

docs.m5stack.com

まとめ

M5StackやM5StickCで開発するときに使えるUIFlowを紹介しました。