現時点の情報です。最新情報はM5StickC非公式日本語リファレンスを確認してみてください。
概要
M5StickCでUIFlowを使った入門向け情報をまとめていきたいと思います。
M5StickCの開発環境
Arduino IDE
一番標準的な開発環境です。C++言語をベースにしたArduino開発環境で開発を行います。文字でのプログラムになりますので、従来の開発環境になれた人には使いやすいですが、プログラミング初学者には敷居が若干高いです。
UIFlow
M5Stack社が開発した、ブロックタイプの開発環境です。ブロックを組み合わせることでプログラミングが可能です。内部的にはMicroPythonが動いています。
学校教育などでプログラミングを行う場合にはUIFlowが適していると思います。
ESP-IDF
ESP32の開発元であるEspressif社標準の開発環境です。C++言語で開発が行なえますが、自由度が高い反面難易度が高いので個人ではあまり利用されていません。
UIFlowの原理
UIFlowはあらかじめ、UIFlowのファームウエア（プログラム）をM5StickCに転送しておきます。電源を入れるとUIFlowが起動して、プログラミングができる環境になります。
Arduino IDEなどではファームウエア（プログラム）全体を転送しなおしていますが、UIFlowはブロックの情報(MicroPythonのスクリプトなど)をファイルとして保存して、そのファイルを読み込むことでいろいろなプログラムを実行することができます。
転送する量が少ないので、気軽にプログラムを書き換えることが可能になっています。また、本体に複数のスクリプトファイルを保存しておき、好きなプログラムを読み出して実行する機能もあります。
UIFlowの開発環境
開発環境として、ブラウザ経由で行う場合と、Desktop版の2種類があります。環境により使いやすい方を選択してください。
ブラウザベース
ブラウザ上でプログラミングと、無線での転送が可能です。Wi-Fi環境が必須のため学校などの特殊な環境や、大人数がいる混雑した環境などでは使いにくいです。
反面一度設定をしてしまえば、パソコン以外からのブラウザでもプログラミングは可能なかもしれません。
ケーブルが必要ないので非常に楽なのですが、バッテリーの充電を考えるとある程度USBケーブルに接続しておいたほうがいいと思います。
UIFlow-Desktop-IDE
専用アプリと、USBケーブルで接続してプログラミングを行います。Wi-Fi環境が必要ないのでどんな環境でも利用可能です。
反面、若干バージョンアップが遅いので、最新バージョンを使うのは少し遅くなります。自動的にバージョンアップしないので、バージョンを固定して使う用途にも適しています。
比較表
| – | ブラウザベース | UIFlow-Desktop-IDE |
| Wi-Fi環境 | 必須 | 不要 |
| 転送方法 | Wi-Fi経由 | USB経由 |
| バージョン | 最新が利用可能 | 若干古い |
| Windows対応 | ○ | ○ |
| MacOS対応 | ○ | ○ |
| Linux対応 | ○ | ○ |
| その他ブラウザ | ○ | × |
一般的にはブラウザ環境で使うことが多いと思いますが、私はDesktop版を愛用しています。
事前準備
UIFlowを利用する前に、UIFlowのファームウエア（プログラム）をM5StickCに転送しておく必要があります。
この作業は一度行えば、以後電源を入れるたびにUIFlowが起動します。Arduino IDEなど他の環境で使いたい場合には、そのままArduino IDEでプログラムを書き込むことで上書きができます。
再度UIFlowを利用した場合には、もう一度UIFlowのファームウエア（プログラム）をM5StickCに転送し直す必要があります。
ただし、他のファームウエアで上書きした場合には、中に保存した設定やファイルは消えてしまうので注意してください。
ブラウザ版の場合
ブラウザ版の場合には、ファームウエア転送は直接できませんので転送用のアプリをダウンロードする必要があります。
上記サイトにあるM5Burnerをダウンロードして実行します。
上記が起動した直後の画面ですが、左側に転送するファームウエアの一覧があります。今回はUIFlowを転送するので、一番下にある新しいものの上にマウスカーソルを置くと、下矢印が現れるので、クリックしてファームウエアをダウンロードしてください。
ダウンロードが完了すると、該当ファームウエアの色が白くなります。M5StickCを接続していない状態で、COMを選択してみてください。
このパソコンではCOM1が最初からありました。環境によって違うので、もとからあるCOMの名前を覚えておいてください。
M5StickCを接続したところ、私のパソコンではCOM3が増えました。環境により名前は違いますが、正しく認識した場合には増えるはずです。
ただしく増えない場合には、上記のページを参考にしてみてください。おそらくは充電されていないか、USBシリアルドライバのインストールがされていないか、USBケーブルが怪しいです。
実際に転送する場合には、左側でファームウエアを選択し、右側の画面でM5StickCのCOMを選択。SeriesをStickCを選択。Wi-FiのSSIDとPasswordを入力してから、右上のBurnを押すとUIFlowのファームウエアが転送できます。
ただしく転送が終わると「Hard resetting via RTS pin…」と表示されて、M5StickCがリセットされて、UIFlowの画面が表示されます。
上記のように下に青いマークがでて、上にAPIKEYが表示されていれば正常に起動しています。
Wi-Fiに接続できたが、インターネット接続できない場合には赤いマークが表示されます。赤いマークの場合には他のアクセスポイントに接続してみるか、あきらめてDesktop版を利用してみてください。
Connect Failと表示される場合にはWi-Fiアクセスポイントへの接続が失敗しています。SSIDとPasswordの設定を確認しなおしてください。
確認しても接続できない場合には、あきらめてDesktop版を利用してみてください。
その後はブラウザでUIFlowのページを開きます。
上記ページを開くと、以下の画面が現れます。
このページからでもM5Burnerのダウンロードリンクがあります。（何故かLinux版はないですね）
下にスクロールするとマニュアルなどのリンクが表示されています。
Api keyはM5StickCの画面に表示されている8桁の英数文字、Languageは日本語、DeviceはStick-Cを選択してください。
上記の設定をしたあとにOKボタンを押すとプログラムの画面に進みます。
上記が接続した画面になります。左下に接続済みと出ていることを確認してください。これにて、環境構築が完了しました。
Desktop版の場合
Desktop版の場合には、上記ダウンロードページより、UIFlow-Desktop-IDEをダウンロードしてください。
オールインパッケージで、これだけダウンロードすれば動かすことができます。
起動すると上記の画面が毎回でてきます。USBシリアルドライバをインストールしていない場合には、Install Nowでインストールしてください。
私のパソコンではインストール済みでも起動時に毎回上記画面が出てきますので、2度目以降はSkipを押して起動させます。
起動直後の画面になります。一度キャンセルを押して画面を表示させます。
左上に書いてあるバージョン番号を確認します。このバージョンのファームウエアをM5StickCに転送する必要があります。
上のメニューから「FirmwareBurner」を選択します。
上記が起動直後の画面です。左メニューからDesktopで動いていたUIFlowのバージョンを探して、マウスを乗せると下矢印が表示されるのでクリックしてダウンロードします。
上記の画面の場合ブラウザ版では最新バージョンの1.4.5が使えますが、Desktop版は1.4.4までしか使うことができません。
ダウンロードが終わった画面です。左側の該当バージョンの色が白くなりました。M5StickCを接続していない状態でCOMを選択してみてください。接続前の状態で選択できるCOMを覚えておいてください。
その後にM5StickCを接続します。
COM3が増えました。増えるCOMは環境によって違いますので注意してください。COMが増えない場合にはM5StickCが認識されていません。
上記ページを参考にして解決してみてください。おそらくはUSBケーブルに起因する問題か、充電がされていないかだと思います。
準備ができたら、左から転送するファームウエアを選択し、右側からM5StickCのCOMとSericesからStickCを選んで、Burnボタンを押して転送をします。
最後に「Hard resetting via RTS pin…」と表示されて、M5StickCが再起動されれば転送成功です。
M5StickCはそのまま起動するとブラウザ版のモードで起動します。上記はWi-Fiアクセスポイントの設定がない場合に、スマホなどから上記SSIDに接続して192.168.1.4のページを開き、Wi-Fiアクセスポイントの設定をするための画面です。
起動するモードを変更するので、M5StickCの左側にある電源ボタンをおして再起動します。
UIFlowが起動している場合には、一度押すと再起動が動くはずです。再起動したときにM5と書かれたホームボタンを押していると、設定モードになります。
この画面に入れなかった場合には、再度ホームボタンを押しながら電源ボタンを押して再起動してください。ProgramはUIFlowのプログラムファイル転送を受け付けるモードです。
右側のボタンを押すと、次のページになります。APP.Listは中に保存してあるプログラムファイルを選択して読み込んで起動するモードです。
Setupまで右ボタンで移動したら、ホームボタンを押して選択します。
Setupモードの中で、さらに右ボタンを押したカーソルを移動して、USB Modeを選択してからホームボタンを押します。
上記の画面になればM5StickC本体の設定は完了です。一番上に書いてあるバージョンがDesktopのバージョンと同じかを確認してください。
ブラウザ版は下に丸いマークがありましたが、USB Modeの場合にはUSBケーブルに変わっています。
M5Burnerを右上の×ボタンで閉じます。その後にDesktopアプリのRefreshボタンを押して、初期画面にもどります。
COMを接続したM5StickCが認識しているものに変更し、DeviceもStick-Cを選んでからOKボタンを押します。
左上のバージョン番号と、左下のバージョン番号が同じことを確認してください。
また、接続済みになっていることも確認してください。
これで、Desktop版の環境構築が完了しました。
まとめ
環境構築はちょっと面倒です。一度設定してしまえば楽なのですが、ちょっと敷居が高いですね。
モード変更の方法は保存したプログラムを実行するモードと、プログラミングのファイルを受信するモードの変更で行き来するので覚えておいてください。
次回からは実際のプログラミングを説明していきたいと思います。
続編
続編は環境に合わせて記事を分けました。基本的な内容は同じです。
コメント