M5Stack UIFlow の Custom Function を試す

 数日前に Twitter で M5Stack の UIFlow で Custom Function というのがリリースされたのを見たので、今回は試しに触ってみました。Custom Function というのは内容を自由に設定してブロックを作ることができる機能です。

UIFlow 用のファームウェアを Mac で Flash する

 UIFllow を使うには M5Stack に UIFlow 用のファームウェアを Flash しておく必要があります。以前は Mac からファームウェアを Flash するにはターミナルからコマンドで操作する必要がありましたが、最近では Windows と同じように Flash 用のツールが提供されているのでそれを使ってみます。ツールは UIFlow の設定画面からダウンロードすることができますので、 UIFlow にアクセスして設定画面を開きます。

f:id:akanuma-hiroaki:20190202214739p:plain

 設定画面に M5Burner-Flow-For-MacOS というリンクがありますので、これをクリックするとファイルのダウンロードダイアログが開きます。

f:id:akanuma-hiroaki:20190202214801p:plain

 デフォルトでは M5Burner_MacOS.zip というファイル名で保存されますので、これを解凍すると M5Burner_MacOS.app というアプリケーションになります。これを実行するとツールが起動するのですが、起動時に下記のようなダイアログが表示されて、ツールが起動できないことがあります。

f:id:akanuma-hiroaki:20190202214828p:plain

 これは MacOS のセキュリティ設定によるもので、製造者が信頼できない場合は実行することができなくなっています。以前の MacOS ではセキュリティ設定で、全てのアプリケーションを実行可能にすることもできたのですが、最近の MacOS ではその選択肢がなくなっています。

f:id:akanuma-hiroaki:20190202214947p:plain

 これを変更するには、ターミナルから下記のようにコマンドを実行し、全てのアプリケーションの実行を許可します。

$ sudo spctl --master-disable

 するとセキュリティ設定画面にもそれが反映されて、項目が追加で表示されます。

f:id:akanuma-hiroaki:20190202215039p:plain

 ちなみにずっとこのままの設定にしておくのは良くないので、ツールの実行が終わったら下記のようにコマンドを実行するか、セキュリティ設定画面から設定を戻しておくのが良いかと思います。

$ sudo spctl --master-enable

 ツールが起動すると下記のようなフォームが表示されます。執筆時の UIFlow の最新のバージョンは 1.1.2 なので、ファームウェアのバージョンも同じバージョンを選択して、 Flash ボタンをクリックします。しばらく待つとファームウェアが M5Stack に Flash されます。

f:id:akanuma-hiroaki:20190202215147p:plain

 これ以降の操作は以前と同様です。下記記事でも手順を書いていますので、よろしければご参照ください。

blog.akanumahiroaki.com

Custom Function を試す

 それでは Custom Function を試してみます。 UIFlow の 1.1.2 では下記のようにメニューに Custom (Beta) という項目が追加になっています。内容としては Create *.m5b fileOpen *.m5b file という2つがあります。まずは Create *.m5b file をクリックします。

f:id:akanuma-hiroaki:20190202215529p:plain

 すると UIFlow Block Maker というサイトに遷移します。

f:id:akanuma-hiroaki:20190202215627p:plain

 この UIFlow Block Maker で Custom Function の内容を指定し、ブロックを作成するわけです。今回はとりあえず画面に「Hello World!」のような文字列を表示する Function を実装してみます。「World」の部分は引数として指定できるようにします。設定項目は下記のようにしました。

  • Namespace: greeting

  • Block Color: 青

  • Name: hello

  • Type: Executable

  • Parameter: name (String)

 Block Code は実際に実行されるソースコードを設定しておくところで、今回は下記のようにしています。 UIFlow でラベルを指定した時に実行されるコードと同じものです。

label0 = M5TextBox(51, 39, "Hello ${name}!!", lcd.FONT_Default, 0xFFFFFF)

 画面左側の内容を変更していくと、右側のソースコードにリアルタイムに反映されていきます。今回のケースでは最終的には下記のような設定になります。設定が終わったら Download ボタンをクリックします。

f:id:akanuma-hiroaki:20190202220013p:plain

 するとファイルのダウンロード用のダイアログが開きます。今回は greeting.m5b というファイル名で保存しておきます。

 ファイルを保存したら、今度は Custom (Beta) の項目から Open *.m5b lib を選択します。するとファイルのアップロード用のダイアログが開きますので、先ほど保存した greeting.m5b を選択します。

f:id:akanuma-hiroaki:20190202220140p:plain

 m5b ファイルがアップロードされると、下記のように Custom (Beta) の項目に先ほど UIFlow Block Maker で作成した Custom Function のブロックが追加されます。

f:id:akanuma-hiroaki:20190202220307p:plain

 今回作成した Custom Function では表示する名前を引数として取ることにしていますので、その内容と共にブロックを設定して、実行ボタンをクリックします。

f:id:akanuma-hiroaki:20190202220508p:plain

 すると M5Stack で下記のように文字列が表示されます。

f:id:akanuma-hiroaki:20190202220609j:plain

まとめ

 手順として一度 .m5b ファイルをローカルに保存してそれをアップロードするという手順が直感的ではない気はしましたが、 UIFlow 自体にはまだファイルを保存しておくことができない中で、複数のアプリで汎用的に使用するコードをまとめておけるようになったのは便利かと思います。まだ Beta ということで、ブロックに表示されるのがパラメータの変数名だったりとまだわかりづらいところはありますが、今後使いやすくなっていくのではないかと思います。