この記事を5年ぶりに更新しました。大きく変わっており、詳細まで確認できてない部分もありますがあしからず。
UIFlow（ここではUIFlow2を使います）はブロックを組み合わせるようにしてプログラムを作る、グラフィカルな M5Stack の開発環境です。内部では MicroPython が動いています。この記事の内容は M5Stack Core2 for AWS で確認したものです。パソコン は M1 Mac を使いましたので Windows については未確認の部分があります。
ドキュメント
初めての人には必要ありませんが、公式ドキュメントを紹介しておきます。困ったらここを見てください。日本語ページは説明が一部省略されているので、英語ページを見たほうが結果的には速いかもしれません。
アカウントを登録する
UIFlow2 を使うにはアカウント登録が必要です。ツールのインストール後にツールの中から登録ページに飛ぶこともできるのですが、画面遷移が紛らわしく間違えやすいので、事前に登録しておくことを強くおすすめします。加えて、登録メールアドレスへの認証メールが飛んでこなかったり、筆者はここでハマりました。
アカウント登録は M5Stack のユーザーフォーラムのページから行います。
右上の方に [登録] と表示されていますのでクリックすると次のようになります。
「ツイッター云々…」と書いてありますがユーザー名には「@」は不要です。[今すぐ登録する] をクリックします。
次のページでメールアドレスを入力します。個人情報に関するチェックボックスが２ヶ所あるのでクリックすることを忘れないでください。このチェックボックスの表示が薄くて見えにくいので注意です。[保存する] のボタンで登録され、確認メールが届くので認証手続きを行ってください。
M5Burnerをダウンロードして起動する
UIFlow2 を使用するためのツールをダウンロードしてインストールします。次のページにアクセスしてください。
このページは MStackの公式ページ から [SOFTWARE] > [Device Driver] > [Device USB Driver] と進むのが正式な手順ですが、操作によっては違うページに飛ばされたりするのでおすすめしません。先程のアカウント登録の画面といい、ユーザーフレンドリにはできていません。
ページの中程に UIFlow Firmware Burning Tool というタイトルがあります。パソコン環境にあったものをダウンロードしてインストールしてください。
Windows でのインストール方法は未確認です。Windows の場合はインストーラーは無く、解凍したファイルから実行すると書いてある解説記事もありました。
インストールが終わったらツールを起動するのですが、Mac（OSはSequoia）では “Macに損害を与えたり、プライバシーを侵害する可能性のある…” という警告メッセージが出ました。Mac の [設定] > [プライバシーとセキュリティ] の中に 「お使いのMacを保護するために “m5burner.app” がブロックされました。」というメーッセージがあるはずなので、[このまま開く] のボタンをクリックすれば起動できます。
COMポートの確認
M5Stack をパソコンに接続するとシリアルポート（COMポート）経由でパソコン側に認識されます。その接続状態を確認します。M5Burner を起動して右上の三本線のメニューから Serial Monitor を開いてください。
COM と表示された横に “Select a COM” と表示されるか、または既存のシリアルポートが何か表示されるかもしれません。
この状態で M5Stack をパソコンにUSB接続すると新しいCOMポートが現れます。下向きの▽アイコンでプルダウンリストを開いてよく確認してください。M5Stack を抜くと消えて、接続するとまた現れます。このポートが M5Stack が接続されているCOMポートなので、その名前をよく覚えておいてください。接続するUSBポートを変えるとCOMポートの名前も変わりますので混乱しないように。
COMポートが確認できなかったら次の手順が必要かもしれません。
（状況に応じて）シリアルポートドライバのインストール
上の「COMポートの確認」で M5Stack を接続したポートが現れなかったら、シリアルポートドライバのインストールが必要です。筆者の経験では、Windows でそのような状況になることが多いです。Mac ではこのような状況になることは少ないはずです。うまくCOMポートを認識できていればこの手順は飛ばして先に進んでください。
M5Burner をダウンロードしたのと 同じページ に USB Driver & Open Source Library というカテゴリーがあるので、その中の適切なものをダウンロードしてインストールすればシリアルポートを認識するようになります。しかしながら、筆者の環境ではこの作業は不要でしたのでどれを使うべきかは未確認です。
UIFlow2のダウンロード
UIFlow2.0 はベータ版の扱いになっており、使用するにはログインが必要です。M5Burner 画面の右上の人形型のアイコンをクリックしてログインしてください。アカウント登録したメールアドレスとパスワードを使います。
M5Burner のメイン画面に戻り、M5Stack をパソコンに接続しておきます。画面の左側から使用するデバイス（M5Stackのモデル名）を選んで、右側で必要なツールを選択します。筆者の場合は M5Stack Core2 for AWS を使用しますので、左側では [CORE2 & TOUGH] を選択し（M5Stack Basic や Gray なら “CORE” を選択します）、右側から [UIFlow2.0] を選択しました。プルダウンリストからバージョン指定できますが、最新版がデフォルト表示されるようなのでそのままで問題ないでしょう。
Download ボタンを押すと新たに３つのボタンが表示されるので [Burn] をクリックします。
もしログインしていなかったらこの手順の途中で ERROR You must log in before using this firmware. と表示されるのでログインしてやり直してください。
この前後の手順で、アカウントとデバイスをバインドするか？ と尋ねられた場合はデフォルトのまま [Next] で進んで [Start] をクリックします。
[Burn] ボタンをクリックすると次のような画面になるので、COMポートには M5Stack が接続されたポートを選択するのを忘れないようにしてください。通信速度の設定 BaudRate はデフォルトで試してみて、もしエラーが発生するようなら変更してください。[Start] ボタンをクリックします。
次の画面は下のようになります。WiFi 接続が必要なので接続情報を入れます。タイムゾーンは GMT+9（日本のタイムゾーン）を選択しておくとよいでしょう。他にNTPの設定などありますがデフォルトで問題ありません。[Next] ボタンをクリックします。
“Burning” と表示されるので、しばらく待ってください。100%になってもさらに少し待ちます。M5Stack が再起動したら準備完了です。
画面上のメニューを見ていくと、WiFi設定など変更が可能です。APP LIST の中に helloworld.py があるので試してください。
Burn するときの Boot Option で “Show startup menu and network setup” または “Run main.py directly” を選択するかで、M5Stack を起動した時にこのメニュー画面と開発中のプログラム（M5Stackに書き込まれたmain.py）のどちらを動作させるか設定できるはずなのですが、実際に試したところ、main.py が書き込まれていれば常にそちらが優先されるようです。UIFlow2のバグなのかもしれません。
メニュー画面に表示されているQRコードは次のリンクです。パソコンでこのページを開いてください。
ここから先は 別の記事 で説明します。
UIFlow2 から Arduino IDE にファームウエアを戻す方法
以上の手順でUIFlow2が使えるようになりましたが、Arduino IDE を使っている人は元のファームウエアに戻したいと思うこともあるはずです。そのときは M5Burner を起動すると元のファームウエアがありますのでこれを書き込めば戻ります。手順は UIFlow2 のファームウエアを書き込んだときと同じです。筆者の場合は M5Stack Core2 for AWS なので “Core2_For_AWS” を使いました。普通の Core2 なら “Core2FactoryTest” です。Coreシリーズ（Core2になる前のシリーズ。Basic や Gray など）も各メニュー内に元のファームウエアがあります。
5年前に M5Stack のファームウエアを戻したときには 「信州MAKERS<作業場で失礼します>」 様のページを参考にしました。今は上記のように簡単に戻せるようになりました。
コメント