概要
書籍の発売から一年が経過して、いろいろ状況が変わっているのでUIFlowのはじめかたの部分を説明しなおしたいと思います。
対象機種
| Coreシリーズ | Stickシリーズ | ATOMシリーズ | STAMPシリーズ | その他シリーズ | |
|---|---|---|---|---|---|
| ESP32 搭載ボード | BASIC GRAY FIRE M5GO CORE2 CORE2 FOR AWS | M5Stick M5StickC M5StickC PLUS M5StickT M5StickT2 | ATOM LITE ATOM MATRIX ATOM ECHO ATOM U | STAMP PICO | CORE.INK M5PAPER TOUGH STATION 485 STATION BAT |
| ESP32-C3 搭載ボード | STAMP C3 STAMP C3U | ||||
| ESP32-S3 搭載ボード | CORES3 | AtomS3 AtomS3 Lite | StampS3 |
上記がM5Stackのコントローラーと呼ばれるボード一覧です。赤い文字で書いてあるボードについてはUIFlowでサポートしていないので注意してください。青い文字はESP32-S3で新しいバージョンのUIFlow2.0でサポートされる予定ですが、まだ完成しておらずお試し版しかない状態です。
これ以外にもカメラ系のものやAI系、Raspberry PIのCM4を搭載したいしたCM4Stackなどもありますが、UIFlowではサポートされていません。
おすすめ機種も書籍の時からはあまり変わっておらず、M5StickC PLUSかCORE2 FOR AWSあたりがUIFlowで利用するのであれば使いやすいと思います。
UIFlowの導入方法
書籍ではM5Burnerのバージョン2で解説してありますが、現在はバージョン3が公開されています。2から3は自動バージョンアップの対象ではないので、新規に3を入れる必要があるので注意してください。
上記のページからダウンロードすることができます。
いろいろなファイルが置いてありますが、上記の「UIFLOW FIRMWARE BURNING TOOL」にあるものになります。Windows、MacOS、Linux用があるので環境に合わせてダウンロードします。
インストーラーなどはないので、解凍したファイルから実行する形となっています。
M5Burnerのログインについて
右上に人の形のアイコンがあり、クリックするとログインすることが可能です。アカウントはRegisterのボタンを押すと、M5Stackの掲示板であるフォーラムの登録ページにジャンプします。このログインは通常は不要ですが、自分で作成したプログラムをM5Burner上で公開したい場合や、UIFlow2.0のアルファ版を利用する場合には必要になります。
また、ログインして書き込んだ端末はアカウントと紐付けられるので、UIFlowのプログラム画面でもログインをする必要が出てきてしまいます。通常はログイン不要だと思いますが、UIFlow2.0のアルファ版を使う場合にのみログインが必須となります。
ドライバーのインストール
右上のアイコンで人の右側に三本線のアイコンがあり、その中にSerial Monitorがあります。
この画面を利用して、シリアルポートのドライバが必要かを確認することができます。まずボードを接続していない状態で選択できるシリアルポートを確認します。私の環境だとCOM256のみありました。Windowsの場合には何も表示されていないことが多いはずです。
「Found New Device」と表示されて、COM7が増えました。この増えたシリアルポートが接続したボードのものになるので覚えておいてください。
シリアルポートが増えなかった場合
なんどか試してシリアルポートが増えなかった場合にはシリアルポートのドライバが必要な可能性があります。
Windowsの場合には、Windows Updateを行ってから「オプションの更新プログラムを表示」を選択できる場合には、ドライバのインストールが可能な場合があります。
上記のように追加のドライバをインストールすることで接続するとシリアルポートが追加される状態になる場合があります。
だめだった場合やWindows以外の場合
上記からUSBドライバをインストールする必要があります。
上記のどれかなのですが、実際のところ非常に選ぶのが難しいです。自分の環境にあったものを上から入れていって、シリアルポートが認識するのかを確認するのがよいと思います。
ボードに対応したUIFlowのダウンロード
まずは一番左側にカテゴリ別のタブがありますので選択して、その後に該当するアプリケーションを縦スクロールから選択する手順になります。
| タブ | 名称 | 対応ボード |
|---|---|---|
| CORE | UIFlow | BASIC GRAY M5GO |
| CORE | UIFlow_Fire | FIRE |
| CORE2 & TOUGH | UIFlow_Core2 | CORE2 CORE2 FOR AWS |
| CORE2 & TOUGH | UIFlow_Tough | TOUGH |
| STICK | UIFlow_StickC | M5StickC |
| STICK | UIFlow_StickC_Plus | M5StickC PLUS |
| ATOM | UIFlow_Matrix | ATOM MATRIX |
| ATOM | UIFlow_Lite | ATOM LITE |
| ATOM | UIFlow_AtomU | ATOM U |
| ATOM | UIFlow_AtomDisplay | Atom Display |
| PAPER | UIFlow | M5PAPER |
| COREINK | UIFlow | CORE.INK |
| STAMP | UIFlow_PICO | STAMP PICO |
| STATION | UIFlow_Station | STATION 485 STATION BAT |
| ATOMS3 | UIFlow2.0 | AtomS3 AtomS3 Lite |
| STAMPS3 | UIFlow2.0 | StampS3 |
上記の対応になっています。M5GOが特殊なのですが、個別のUIFlow_M5GOがあるのですが中身が古くて、最新版はBASICなどと同じUIFlowに統合されています。
UIFlow2.0は現在アルファバージョンで、ログインしないと利用できないのにも注意してください。
ダウンロード
CORE2 FOR AWSにUIFlowを転送する例になります。左側のタブをCORE2を選択して、一番上にあるUIFlow_Core2を選択して、右下にあるDownloadボタンを押します。
ダウンロードが成功すると書き込むためのBurnボタンが表示されます。
Burnボタンを押すと、ボードが接続するWi-Fiアクセスポイントの情報を入力する画面がでます。注意点としてはM5Stackが利用しているESP32は2.4GHzのWi-Fiアクセスポイントにしか対応していません。5GHzのみのアクセスポイントには接続できないので注意しましょう。
次に転送するシリアルポートの選択画面になります。ここで先程接続して増えたシリアルポートを選択します。
Eraseボタンを押すとボードの中身を初期化してくれます。通常は問題ありませんが、なにかおかしいなと思った場合には一度Eraseで初期化してから転送すると環境がリセットされると思います。
Burnを押すと転送がはじまります。プログラムを転送することを焼くと表現することがあるのでBurnボタンになっているはずです。
転送が終わりました。これでUIFlowがボードに転送され、自動的に起動したはずです。
そのままボードを触ってもよいのですが、非常に重要なConfigurateボタンの使い方を紹介します。
Configurationボタンを押すと、シリアルポートの選択画面が表示されます。Loadで次に進みます。
UIFlowの内部の設定が表示されました。
| COM | 接続されているシリアルポート |
|---|---|
| MAC | ボードのMACアドレス |
| APIKEY | UIFlow接続用のAPIKEY |
| Start Mode | Internet / USB / Appモード |
| Boot Menu | Show / Hide |
| Boot Beep | On / Off |
| Server | flow.m5stack.com / sg.flow.m5stack.com |
| WIFI SSID | ボードが接続するSSID |
| WIFI Password | ボードが接続するKEY |
| COM.X | Flase / True |
上記の設定項目になっています。気をつけないと行けないのがAPIKEYです。このキーを使ってブラウザからボードに接続することになります。APIKEYは公開してはいけない情報なのですが、Eraseしてから転送し直すことで別のキーに更新が可能です。
Start Modeはかなりわかりにくく、そしてハマりがちな選択肢となります。
| モード | 備考 |
|---|---|
| Internet | ブラウザ経由でプログラムを行う標準的なモード |
| USB | USB接続で古いUIFlow Desktopアプリで接続するモード |
| App | 内部に保存したプログラムを実行するモード |
上記の3種類あるのですが、USBはすでにアプリの更新が止まっており利用できないと思ったほうがよいです。基本的にはInternetモードになっているのが標準的なのですが、ブラウザ上でUIFlowのプログラムダウンロードボタンを押してしまうとAppモードに変更されてしまいます。このモードになると保存したプログラムが立ち上がり、ブラウザから接続できない状態になるので注意してください。Boot MenuからInternetモードに変更するか、Configurationボタンから設定しなおしてください。
Boot Menuは最初に選択画面を表示するかの設定になります。ボードによるのですが、上記のように起動モードを選択する画面が表示されるかの選択です。基本的にはボードの画面上から設定するより、Configurationボタンから設定したほうがわかりやすいと思います。
Boot Beepは起動時の音になります。Core2系の場合にはピコーンと音がします。個人的にはOFFにしていますが、好みで設定してください。
Serverは中国国内サーバーとしてsg.flow.m5stack.comが提供されています。通常は変更する必要はありません。
WIFI SSIDは転送時と違うSSIDに接続する場合に上書き設定することが可能です。
COM.Xは通信モジュールを使っている場合Trueに変更しますが、日本国内だとあまり対応モジュールが販売されていないので通常は未使用のFlaseになるはずです。
Boot MenuからFlowを選択したあとの画面です。Wi-Fiアクセスポイントに接続をして成功すると上記のような画面になり、APIKEYが表示されます。Configurationボタンと同じキーが表示されていることを確認してください。
キーが表示されない場合 その1 Wi-Fi接続失敗
このキーが表示されない場合にはWi-Fiアクセスポイントへの接続が失敗している可能性が高いです。とくに2.4GHzのWi-Fiアクセスポイントにしか接続することができませんので、5GHzのアクセスポイントに接続しにいっていないのかを確認しなおしてSSIDとKEYの再設定をしてみてください。
キーが表示されない場合 その2 Firewall
大学などの環境の場合、UIFlowに必要なポートが許可されていない可能性があります。
上記にakita11先生が作成したネットワーク環境のチェックツールになります。UIFlowを利用するためにはflow.m5stack.comとの間でMQTT(TCP/1883)が利用できる必要があります。
ブラウザからUIFlowサイトにアクセス
上記のURLにアクセスを行います。
現状は既存のUIFlowと作成途中のUIFlow2.0アルファ版の2種類の画面があるので最初に選択を行います。
あとは書籍の通りなのですが、左下にあるAPIKEYをクリックして、上記の画面から接続するボードのAPIKEYを入力して、ボードを選択します。
くるくる回るマークをクリックして、接続済みになることを確認してください。
上記のように接続済みになればUIFlowが使える状態になりました！
ちなみにログインボタンもありますが、M5Burnerでログインをしていた場合にはこちらもログインする必要があります。UIFlow2.0のアルファ版を利用する場合にはログインが必須となります。通常私はログインをしない状態で利用しています。
書籍との違いについて
書籍が販売されてから、若干UIFlowの画面レイアウトが変わっていますので大きな変更点を紹介したいと思います。
実行ボタンの位置変更
上メニューにあった実行ボタンが右下のRunの場所に移動しています。その右にあるダウンロードボタンは現在のプログラムをボードに保存して、Appモードで起動するためのボタンです。まちがってダウンロードボタンを押してしまうとこのブラウザから接続することができなくなりますので、本体の操作かConfigurationボタンからInternet(Flow)モードに戻す必要があるので注意してください。
ターミナル
書籍ではM5Burnerのシリアルモニターを利用していたと思いますが、Chromeブラウザを利用している場合にはUIFlowの画面からも接続することができるようになりました。
上記のような黒い画面が表示されますので、Terminalと書いてあるタイトルの右側にあるリンクボタンを押します。
するとシリアルポートの選択画面が表示されますので接続することができます。
すると上記のようにボードがリセットして、UIFlowの起動画面が表示されました。
その他の変更
いろいろ細かいところは変わっていますが、書籍から大幅に変わっているところはありません。新規販売したユニットが追加されたり、細かい機能追加が主ですので書籍の情報のみでも使うことはできるとは思います。
まとめ
対応ボードがかなり増えて、導入のしかたも変わりましたがUIFlow自体のプログラムに関してはあまり変更がないと思っています。UIFlow2.0が正式版になったときには、現状と大幅に変更があると思いますので、また記事にまとめる予定です。
コメント
いつもありがとうございます！
これは誤字かも？『シリアルポートが増えたなった場合』
シリアルポートが増えなかった場合、ということでしょうか？
ありがとうございます！
修正しました
ブログと本を大変参考にさせていただいております。現在セットアップをしている中での質問なのですが、UIFLOW画面下部メニューバーのボードとの接続状況が「disconnected」のままで（右の再接続ボタンを押しても変わりません）変わらないのですが、何が原因と考えられるでしょうか。ちなみにM5StickC plusの画面は「Reconnect」と出ています。もし知見ございましたら、教えていただけないでしょうか。
M5StickC plusの画面にAPIキーが表示されていない場合には、Wi-Fi接続ができていません
5Ghz帯のWi-Fiには接続できないので2.4Ghz帯のWi-Fiアクセスポイントに接続する必要があります
M5Burnerから設定し直すか、クリアしてから転送しなおしてみてください
ただし、学校などの環境からですとファイアウォールとかで通信が禁止されている場合があります
あとはパソコンも端末と同じWi-Fiアクセスポイントに接続しないとだめな場合もあるようです
パソコンと端末を同じWi-Fiアクセスポイントに接続したところ接続できました！ご回答いただき大変ありがとうございました。