M5StickC で UIFlow やってみた (ブラウザ版)

前回 M5StickCでUIFlowをやってみました。

「ブラウザ版」UIFlowをやってみよう

前回「デスクトップ版」USBモード接続はできたので、今度は、「ブラウザ版」インターネットモード接続でやってみます。

USBモードのM5StickCの表示はこんな感じ

M5Burnerを起動して、M5StickCUIFlow(M5StickC) の「Configuration」をクリックします。

で、UIFlow Configの設定を以下のようにします。

ApiKey: ******** 8桁の英数字
Start Mode: Internet Mode
Boot Menu: True
Server: frow.m5stack.com
Wifi: 利用可能なSSIDとPASSWORDを設定してください

ApiKeyはあとでつかうので控えておきます。コピペボタンついてますね。
[Save]

すると、M5StickCの表示はこんな感じに！

「ブラウザ版」のUIFlowは以下サイトから操作します。

https://flow.m5stack.com/

先ほど控えたApi key: を入力します。

[OK]

おおっ！つながったみたい！！

そして、「デスクトップ版」で課題だったバージョンは、すべてV1.8.5で統一されています！やった！

早速テスト、テスト。

超テスト的ですが、画面表示を「赤」にしてみました。
右上「▶」で実行。

すると。。

おおっ！いけた！他の色に変えたりも簡単でした！

で、完成したプログラムをリリースする場合は、M5SticCに書き込みます。
書きこむには、下の黄色枠にある「↓」ボタン

または右上の黄色枠にある「↓」ボタン

これで、App Modeに自動的になりますので、M5StickC単体でプログラムの実行が可能になります。

再び他のモードにする場合は、M5Burnerの「Configuration」から可能です。またM5StickC本体から操作する方法もあるようです。@nagase様、情報ありがとうございます。

[M5StickC] USBモードへの切替方法（How to switch to USB mode）※2021.08.25 Update - Qiita

Arduino IDE

ではArduino IDEに戻すにはどうするかというと、単にArduinio IDEからスケッチを書きこめばOKみたい。

おおっもどった！

まとめ

Arduino IDEが都度全書き換えになるのに対して、UIFlowはプログラム部分のみテストして完成したら書き込みになるので、デバッグなどの開発効率はUIFlowのほうがいいですね。

あと、M5StickCでUIFlowをするには、色んなモードや方法があって、選択肢が多いというメリットがある反面、導入時にわかりにくいというという面があるかとおもいます。用語もいろいろでちょっと迷いますね。

今回で一応、M5StickCを使ったUIFlowでの
「デスクトップ版」USBモード接続
「ブラウザ版」インターネットモード接続
それと、いままでやってた
Arduino IDE
で動かすことができるようになったので、よかったです。

開発環境のアイコン並べてみました（背景青でわかりにくい^^;）。

このnote記事を書こうと思ったキッカケは。。。
先日M5StackでUIFlowに初挑戦されたアイコさんが、早速実用アプリを作成されたのです。すごいっ！

M5Stack Gray × kintone で ペットのごはん管理アプリ

で、そのなかでいくつか質問があったので、何かのヒントになればと思って、ばばばっとnote記事作成してみました。何かあれば加筆修正します。

私自身まだまだ学習中なのですが、参考になれば嬉しいです。^^