こんにちは、クマベです。
この記事では、UIFlowの環境構築をおこない、M5Stackの開発準備について説明します。
「UIFlow」は、M5Stack社が開発した「M5Stackシリーズ」のための開発環境です。
「ビジュアルプログラミング」が特徴で、ブロックを組み合わせてプログラムを作成できます。
ブラウザベースでの開発とDesktop版で開発との2種類があり、内部的にはMicroPythonで動作しています。
小さなお子様でも直感的にプログラミングすることができ、学校教育などにもオススメです。
ドライバのインストール
下記のリンクからM5Stack公式ページに移動し、「CP2104 Driver」を選択します。
※USBドライバはUSBケーブルで接続して通信するのに必要なツールです。
※初めてM5Stackを開発される際は必要になります。すでにダウンロード済みであれば必要ありません。
Windows
Mac
ダウンロードしたファイルを開き、ソフトをダブルクリックして実行する。
Windows
zipファイルを解凍し「CP210x」アプリケーションを開く
Mac
「SiLabsUSBDriver.pkg」を開く
インストール画面の手順に従って、「次へ」を押してきます。
Windows
Mac
以下の画面が表示されれば、ドライバのインストールができています。
Windows
Mac
M5Burnerのインストール
下記リンクより「M5Burner」（ファームウェアの書き込みツール）をダウンロードします。
Windows
Mac
Windows
「M5Burner」のzipファイルを解凍します。
「M5Burner」を選択します。
Mac
「M5Burner」を選択します。
もし下記のような画面が出たら、
一度キャンセルし、先程のアイコンを「Controlキー」を押しながらクリックして「開く」を選択します。
無事にM5Burnerが開くと、下記のような画面になります。
ファームウェアの書き込み（APIキーの設定）
ご自身の「M5Stack」シリーズのファームウェアを検索し、「Download」を選択します。
※今回は「UIFlow_Fire」の例で紹介します（M5GOの場合は、UIFlowを選択してください）
「Configuration」を選択し、ファームウェアの設定をします。
ApiKeyは後ほど利用するので保存しておきます。
「Start Mode」はマイコンボード本体の通信モードが確認できます。
今回はブラウザ版での動作確認を行うため、「Internet Mode」を選択します。
※ダウンロード版を使用する方は、「USB Mode」を選択します。
開発環境で利用するWiFiの「SSID」と「Password」を入力します。
完了したら「Save」を選択し設定を保存します。
パソコンと「M5Stack シリーズ」を接続し、通信ポートを選択します。
複数「COM：」が表示される場合は、一度M5Stackを抜いた状態で「COM：」を選択してみると、先程から1つ減った状態で表示されるため、その番号がM5Stackとの通信ポートということが確認できます。
「Baudrate」は通信速度で、数字が大きいほどプログラムを書き込む速度が上がります。
※今回は「512000」で設定
上記の設定が正しく完了していれば、書き込みを開始できます。
右下の「Burn」を選択し、ファームウェアを書き込んでいきます。
問題なく書き込みが完了すると、最後の行に「Burn Successfully」と表示されます。
これでUIFlowのファームウェアの書き込みが完了しました。
書き込みが完了すると、M5Stack側の画面がこのように切り替わり、「API KEY」が表示されます。
m1 macで上記作業を行うと、
A JavaScript error occurred in the main process
というエラーが発生してしまいました。
解決策としてはこちらなんかが参考になりそうです（ただし筆者は確認できておりませんのでご了承ください）
今回は、Windowsで進めていきます。
UIFlowの開発環境でプログラムを実行
下記のリンクから「UIFlow」を起動します。
※「Google Chrome」を推奨します（現時点ではSafariでは対応していませんでした）
①Api key：保存していた「Api key」を入力します（8桁の英数字）
②Language：「日本語」
③Device：使用しているM5Stackシリーズを選択します（下記はM5Stack Fireを選択）
ブロックを組み合わせてプログラムを作成していきます。
例として「①UI」のなかの「②画面」を選択します。
「③画面の背景色を○色に設定する」をドラッグアンドドロップし、「Setup」ブロックと組み合わせます。
この状態で「④Run」を選択すると、インターネット経由で組み合わせたブロックのプログラムを書き込むことができます。
上記のプログラムを書き込むとM5Stackの画面が「黄色」になりました。
このように、任意のブロックを組み合わせることで簡単にプログラムの作成・実行を試すことが可能です。
おわりに
以上で終了となります。お疲れさまでした！
ブロックで視覚的にプログラムを作成できるので、だれでも直感的にプログラミングを試してみることができます。
是非、いろんなブロックを使ってオリジナルのプログラム作成を試してみてください！
本記事では「UIFlow」で「M5Stack」シリーズにソフトを書き込む方法を紹介しました。
この手順を踏めば、あとは自由にプログラムを作成し、M5Stackで試せることができます！
次回は拡張モジュールを使った電子工作などをご紹介していきます。