見出し画像

M5Stackを始める UIFlow1.0編

なななの自習室

このページを見てくれてありがとう！ここでは、M5Stack core2を箱から開けてまだ何もしていない状態から、Web上のUIFlow1.0でプログラムを作成するまでの手順についてまとめているよ。この手順ではWi-Fiの環境が必要になるよ。他にも知りたいことがあったらTwitterで教えてね→@nananauno

ここで説明する内容はM5StackさんのQuick startのページを参考にしているので、正確な情報を知りたい場合は、M5Stackさんのページを見てね。https://docs.m5stack.com/en/quick_start/core2/uiflow

もし、先生やお父さんお母さんのアドバイスに従って電子機器を扱う時は、指示された内容を守って、安全に十分配慮してね。ボクはここに書かれたことについて十分レビューしているけど、書かれた内容に従ったことで万が一何か事故が起こってもボクは責任が取れないので注意してね。大人は当然自己責任だよ。

ドライバーのインストール

M5Stack core2とPCが通信できるようにドライバーをインストールするよ。ここでインストールするドライバーはUSBの信号をUARTっていう通信方法に変換するためのICを動かすためのものだよ。ドライバーが無いとM5StackをPCに繋いでも何もできないよ。

Step.1 ドライバーのダウンロード

M5Stackさんのページから、インストールするドライバーをダウンロードするよ。https://docs.m5stack.com/en/quick_start/core2/uiflow

M5Stack core2は本体のバージョンによって2種類 (CP210XもしくはCH9102) のUSB-UART変換ICが使われているから、自分のM5StackにどのICが使われているのかを確認する必要があるよ。確認方法は本体裏面ラベル（下図参照）で確認できるよ。ボクのM5StackはCH9102というICが使われていたよ。👆のURLを開いて、Driver Installationのところから使っているPCの種類と本体裏面で確認したICの種類を見て、適切なドライバーをダウンロードしてね。

M5Stack core2のUSB-UART ICはここで確認してね

Step.2 ドライバーのインストール

ダウンロードしたファイルを解凍して、インストール用のパッケージを実行してドライバーのインストールを完了してね。

CH9102_VCP_SER_MacOS v1.7のドライバーをインストールした時、エラーが出る可能性があるけど、実際にはちゃんとインストールはできているよ。

ファームウェアの書き込み

UIFlowを使用してプログラミングができるようにM5Stackにファームウェアを書き込むよ。ここで書き込むファームウェアにはUIFlowで作成したプログラムを読み込んで実行する役割があるよ。ファームウェアを書き込まないとUIFlowで作成したプログラムをM5Stackで実行できないよ。

Step.1 M5Burnerのダウンロード

M5Stackさんのページから最新のM5Burnerというソフトをダウンロードするよ。https://docs.m5stack.com/en/quick_start/core2/uiflow

👆のURLを開いて、Burning tool から使用しているPC用のM5Burnerをダウンロードしてね。

Macの場合は以下の手順が必要だったよ。
1. ダウンロードしたM5BurnerをApplicationにコピーする必要があるよ。
2. Xcode開発者ツールがインストールされている必要があるよ。インストール方法は→このヒントの次の段落を見てね。
3. M5Burnerの初回起動時にMacのセキュリティ機能がアプリの起動をブロックするから、Controlキーを押しながらM5Burnerを起動してね。

（Macのみ）Xcode開発者ツールというソフトウェアが必要になるよ。ターミナルで以下のコマンドを実行して指示に従ってね。

xcode-select --install

Step.2 M5Burnerを開く

ダウンロードしたM5Burnerを開くとこんな画面が表示されるよ。

M5Bunerの画面だよ

Step.3 ファームウェアをダウンロード

UIFlowのファームウェアをダウンロードするよ。

M5Burnerの左のメニューからCORE2 & TOUGHを選択して、右のファームウェア一覧からUIFlow_Core2を探してDownloadをクリックしてね。ファームウェアのダウンロードが完了すると、Burnボタンが表示されるよ。

Step.4 接続

USB type-Cケーブルを使ってM5Stack Core2とPCを接続するよ。

Step.5 Wi-Fiとポートの設定

UIFlow_Core2のBurnボタンをクリックしてファームウェアをM5Stackに書き込むよ。

Wi-Fiの設定画面が表示されるので、接続したいWi-Fiの名前をWIFI SSIDに、パスワードをWIFI Passwordに入力してね。

次へ進むと、M5Stackが接続されたCOMポートを選択する画面になるよ。tty.usbserial-xxxxxxxxxxx(xは数字)が選択されていることを確認してね。

BurnするときはCOMポートが正しいか確認してね

Step.6 ファームウェアの書き込み

最後にStartボタンをクリックしてファームウェアの書き込みを完了するよ。

ここまでの設定に問題がなければ、書き込みが始まるよ。書き込みの進捗が100%になってBurn successfullyと表示されるまで待ってね。

ファームウェアの書き込みでエラーになる場合は？
正しいドライバーをインストールしたかどうか、（Macの場合）Xcode開発者ツールをインストールしたかどうかを確認してみてね。また、一番最初の書き込み時やM5Stackのファームウェアが正しく動作していない時は、一度Eraseボタンをクリックしてフラッシュメモリーの中身を綺麗にしてから、再度試してみてね。

プログラミングを始めよう！

いよいよUIFlowを使って最初のプログラミングを始めるよ。UIFlowを使うと、ブラウザを使用してオンラインでプログラムの作成ができるよ。また、作成したプログラムをM5Stack上で実行したり、M5Stackへプログラムをダウンロードしたりできるよ。

UIFlowは👇ここからアクセスできるよ

Step.1 APIキーの確認

UIFlowでプログラミングを始める前にM5Stackの画面にAPI KEYが表示されていることを確認してね。APIキーはUIFlowがM5Stackの個体を識別するためのキーだよ。APIキーをUIFlowに教えてあげることで、UIFlowがネットを介してM5Stackに接続してプログラムのダウンロードや実行ができるようになるよ。これが何を意味しているかというと、M5Stackが例え地球の裏側にあっても、宇宙空間にあっても、M5Stackがネットに繋がっていてAPIキーを知っていればプログラムの実行ができるってことだよ。

M5StackとPCをUSBケーブルで接続するとM5Stackが自動的に起動して、👇のような画面になっていることを確認してね。

APIキーはUIFlowがM5Stackに接続するために必要になるよ

M5Stackの画面にAPI KEYが表示されていなくても安心してね。
M5Stackのリセットボタンを押して、UIFlowが起動した直後にしばらく3つのアイコンが表示されるから、真ん中のFlowというボタンを押してね。それでもAPI KEYが表示されない時はWi-Fiの設定が間違っている可能性があるよ。M5BurnのConfigureでWi-Fiの設定が正しいか確認してみてね。

Step.2 APIキーの設定

UIFlowにアクセスしてUIFlowのバージョン、API KEYとデバイスを設定するよ。UIFlowは👇ここからアクセスできるよ。

UIFlowを最初に開いたときは、API KEYとDeviceの設定が表示されるよ。これは2回目以降は不要だよ。M5Stack core2の場合は、UIFlow1.0を選んでね。API KEYはStep.1で確認したようにM5Stackの画面に表示されている文字列だよ。DeviceではM5Stack core2と同じ見た目の画像を選択すればOKだよ。

Step.3 ラベルの追加

試しにM5Stackの画面にHello M5と表示するプログラムを作ってみるよ。M5Stackの画面に文字を表示するためにラベルを追加するよ。

UIFlowの一番左の列にあるLabelをM5Stackの画面上にドラッグすると、ラベルが追加できるよ。ラベルの設定画面が表示されるけど、今は特に変更しなくて大丈夫だよ。

Step.4 表示する文字を設定

ラベルにHello M5と表示するようにプログラムを作成するよ。

UIFlowの真ん中より少し左にあるリストでUI→Labelと選択すると、ラベルに対して実行できる命令の一覧が表示されるよ。ここでは一番上のshowを使うよ。showの上でマウスの左ボタンを押したままにすると命令一覧が自動的に消えるから、そのままSetupというブロックにshowを繋げるよ。

👇SetupブロックとLabelのshowブロックが繋がっていればOKだよ。

Step.5 プログラムの実行

作成したプログラムをM5Stackで実行するよ。

UIFlowの画面の下にあるRunボタンをクリックすると、M5Stackでプログラムが実行されるよ。M5Stackの画面にHello M5と表示されたかな？

色々な命令のブロックを配置→Run、正しく実行されたかどうか確認→ブロックを修正→Run・・・を自分の期待通りに動作するまで繰り返すよ。これがUIFlowを使ったプログラミングとプログラムの実行の流れになるよ。

Step.6 プログラムのダウンロード

作成したプログラムをM5Stackにダウンロードするよ。

UIFlowのRunは主に作成したプログラムの動作確認のために使用するよ。自分の思い通りのプログラムができたら、ずっとそのプログラムをM5Stack上で動かしたいよね？そのためにはUIFlowのDownloadボタンをクリックすることで、作成したプログラムをM5Stackにダウンロードすることができるよ。ダウンロードしたプログラムはM5Stackのフラッシュメモリーに記憶されて、M5Stackの電源を入れた時に自動的にプログラムが実行されるようになるよ。

UIFlowを使って新しいプログラムを作成したい時は？
電源を入れた後にUIFlowの3つのアイコンが表示されるので、真ん中のFlowボタンを押すとAPI KEYの画面になるので、この状態でまたUIFlowを使ってプログラムの実行、ダウンロードができるよ。

これで、M5StackとUIFlowを使った最初のプログラミングができたね！

ここから先はUIFlowを使って自由にプログラミングして色々面白いものを作ってみてね。面白いプログラムができたらTwitterで世界中のみんなに見せてあげてね。ついでに、ボク→@nananaunoにも教えてくれると嬉しいな。


この記事が気に入ったらサポートをしてみませんか？