はじめに
過去の記事にて、PCよりUnit-Roller485を、RS485通信を使用してコマンドを送信し、動作させた。
現状PCから制御している状態だが、M5Stackからの制御へ換装したいと思い、M5Stack上でPythonベースで動作するものを調査していると「MicroPython」というものを発見した。
VSCodeにも拡張機能が存在するとのことであったため、汎用性を考慮し、VSCode上でMicroPython環境構築を実施したところ、躓いた部分も多少あったため2025年6月時点での環境構築手順を本記事に記そうと考えた。
目的
本記事では、VSCode + MicroPython環境の構築手順を説明する。
準備物
○ハードウェア系
- PC(Windows10)
- M5Stack
→本記事ではM5Stack Grayを使用した。 - USB Type-Cケーブル(PC-M5Stack接続用)
○ソフトウェア系
- VSCode
→追加でvscode-m5stack-mpyという拡張機能をインストールする。 - USBドライバ(環境に応じてインストール)
-
M5Burner(ファームウェアインストール用ソフト)
→本記事ではファームウェアとしてUIFlowを使用した。
USBドライバのインストール
PCとM5StackをUSB接続後、デバイスマネージャーより「Silicon Labs CP210x(or CP2104) USB to UART Bridge(COM～)」と表示されているかを確認する。(COM～情報も必要になるため、ここで確認しておくと良い。)
もし上記表示のような状態でなければ、上記の「準備物」内USBドライバ(下線付) or ここからM5Stack周辺ソフトウェアのダウンロードサイトにアクセスする。その後、「USB Driver & Open source Library」の下部にある、「CP210x～」を環境に合わせてダウンロード・インストールする(下図参考、本記事ではWindows向けを使用)。
M5Burnerのインストール
M5Stackへのファームウェア書き込み用ソフトとして、本記事では「M5Burner」を使用した。
※ファームウェア書き込み方法についてはいくつかあるが、本記事ではM5Burnerのみ記載する。
USBドライバをダウンロード先と同じサイト内、「UIFlow Firmware Burning Tool」の下部にある、「M5Burner～」を環境に合わせてダウンロード・インストールする(下図参考、本記事ではWindows向けを使用)。
UIflowの書き込み(PC側)
前述のM5Burnerを使用して、実際にM5Stackにファームウェアを書き込む。
書き込み手順を以下に示す。
※本記事ではver. 1.14.4を使用する。
- USBケーブルを使用してPCとM5Stackを接続する。
- M5Burnerを起動する。
- All or 使用するM5Stackに対応する機器のページを左側のタブから選択する。
→M5Stack Grayは「CORE」を選択する。 - 上部の検索欄に「UIFlow」を入力する。
- 使用するM5Stackに対応するファームウェアをダウンロードする。
※本記事では「UIFlow2」ではなく「UIFlow」を使用するため注意。 - 「Burn」より、ファームウェアの書き込みを実施する。
→COMポートはデバイスマネージャーにて確認する。
書き込み条件を設定し、「Next」をクリックする。
- 「WiFi Configuration」については入力せず、「Next」をクリックする。
- ファームウェア書き込みが終わるまで待機する。
- 正常終了後、「Burn Successfully, click here to return」をクリックする。
上記にて、M5Stackへのファームウェア書き込みが終了となる。
次にM5Stack側での操作手順を記載する。
UIflowの書き込み(M5Stack側)
ファームウェア書き込みが終了したM5Stackは以下の画面遷移をする。
起動時画面
一定期間経過後
初期状態では「Wi-Fiモード」となっている。これはWi-Fi経由でPython実行ファイルを書き込むモードとなる。本記事ではUSBからの書き込みを行うため「USBモード」に変更する。
USBモードへの変更手順を以下に示す。
- M5Stack左側にある再起動スイッチ(赤色のスイッチ)を押下する。
- 起動後直ぐに、M5Stack正面 右側のスイッチを押下する(レンチアイコン、「Setup」文字の下のスイッチ)。
- 押下出来ていた場合、「Setup」ページへ画面が遷移する。
※上の画面が表示されていない場合は、再度1.から実施する。 - 「Switch mode」より、初期設定の「Internet Mode」を「USB Mode」に変更する。
変更前
変更後
- Setupメニュー最下部にある「Reboot >>」より再起動を実施する。
- 変更出来ていた場合、以下のような画面が現れる。
上記により、M5Stack側のセットアップが完了となる。
VSCode拡張機能のMicroPythonのセットアップ
VSCodeの拡張機能に「vscode-m5stack-mpy」という、UIFlowを搭載したM5StackとUSB経由にて読み書きを可能にするものがある。
拡張機能タブより、検索欄に「M5Stack」「MicroPython」等入力すると、前述の拡張機能が表示されるため、それをインストールする。
※本記事ではver. 1.1.10を使用する。
インストール完了後、VSCode内 左下に「Add M5Stack」表示されるのを確認する。
※M5StackとPCを未接続の場合はUSBケーブルにて接続し、接続先ポートを確認しておく。
インストール完了後に「Add M5Stack」が表示されない場合
VSCode 拡張機能Q&Aページにもコメントあるように、「Add M5Stack」が表示されないケースがある(筆者もそうであった)。
効果があった対応を以下に示す。(詳細：vscode-m5stack-mpy Github Issueページ)
※Node.jsのコマンドを使用するため、インストールの必要有。
VSCodeのターミナルを開き、
cd .vscode/extensions/curdeveryday.vscode-m5stack-mpy-1.1.10
# 1.1.10の部分は拡張機能のバージョン、拡張機能が存在するディレクトリはようかくｎ
npm rebuild @serialport/bindings
を実行する。上記が正常に実行できない場合は、以下のどちらか or どちらも実行し、再度上記を実施することで解決すると考えられる。
・実行ポリシーがないため、コマンドが実行できない場合
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
# 「RemoteSigned」がリターンされれば、正常に実行ポリシーは付与されている。
・パッケージがないため、コマンドが実行できない場合
npm install -g prebuild-install
npm install node-addon-api
筆者環境では上記2つを対応後にコマンドを実行し、「Add M5Stack」が表示された。
参考：【m5go】VScodeの左下に Add M5Stackが出ない時
M5StackをPCと接続した状態でをAdd M5Stackをクリックすると、VSCode内 上部検索欄にポート選択用のチェックボックスが現れるため、デバイスマネージャーにて確認したM5Stackとのポートを選択する。
チェックボックスの表示
接続しているM5Stackと対応するポートを選択して「OK」をクリック
正常に接続が完了した場合、下図のように「M5STACK DEVICE」下と「Add M5Stack」の右側にそれぞれ接続したポートが表示される。
「M5STACK DEVICE」内では実際にM5Stack内のディレクトリを見ることができる。
上記にて、VSCodeとmicropythonを搭載したM5Stackの環境構築が完了した。
動作確認
動作確認として、デフォルトで生成されるmain.pyスクリプトを実行する(LCD上に文字列を表示する処理)。
from m5stack import lcd
lcd.font(lcd.FONT_DejaVu18)
lcd.setTextColor(lcd.GREEN)
lcd.text(0, 60, "This is the default program. For online programming on UIFlow, click the reset button and hold the middle button during startup until it enters the online programming mode.")
スクリプトの実行は、実行したいスクリプトを選択した状態で、VSCode内 右上にある実行ボタンより可能である。
実際の動作を以下に示す。
上記にて、VSCodeからM5Stack内のスクリプトを実行可能なことが確認できた。
まとめ
上記にてVSCode + MicroPython環境を構築できた。
本環境ベースでUnit-Roller485をM5Stackから動作させることを次の目標として実装していこうと考えている。