「M5Stackシリーズ」（M5Stack CORE2、Stick-C、ATOM LITE等）でビジュアルプログラミングを行うための開発環境「UIFlow」の使い方について詳しく紹介します。
代表的なビジュアルプログラミングとしては「Scratch（スクラッチ）」や「micro:bit」等も有名ですが、これらを極めたとして、そこから実際のプログラミングにどう移行したらよいのか迷われる方が多いのではと思います。
ビジュアルプログラミングから実際のプログラミング言語への移行方法についても以下のリンクで詳しく紹介しています。
それでは、ビジュアルプログラミングを体験してみましょう！
１．ビジュアルプログラミングとは
２．M5Stackシリーズとは
３．UIFlowとは
４．準備
・M5Burnerのダウンロードと使用方法
・コンフィグ設定「Apikey」の確認
・コンフィグ設定「Start Mode」の変更方法
・USBドライバのインストール
・MacでJavaScriptエラーが出る場合の対処法
５．ブラウザ版 UIFlowの使い方
・UIFlowの起動と画面紹介
・初期設定
・主なプログラミングコマンドの紹介
・プログラムの作成方法
・プログラムの実行と動作確認
６．インストール版 UIFlowの使い方
・ダウンロードと起動
・初期設定
７．まとめ
１．ビジュアルプログラミングとは
「ビジュアルプログラミング」とは「ブロックプログラミング」とも呼ばれ、ブロックを組み合わせるようにプログラムを作成することができるプログラミング方法です。
一般的なプログラミング言語は「英語ベース」のコマンドが使用されるため、初心者には理解が困難なものですが、ビジュアルプログラミングは「日本語の説明が表示されたブロック」があらかじめ用意されており、それらを組み合わせてプログラムを作成できるため、初心者でも感覚的にプログラミングを体験することができます。
実際のプログラミング作成画面は下画像のようになります。
このプログラムの動作について、特に解説も必要ないように思いますが、一応解説をすると
「もし、ボタンAが押されて（pressed）いれば、LEDの色を赤に設定し、そうでなければLEDの色を青色に設定します。」これを「ずっと」繰り返し続けます。
そのままですね・・・。
ビジュアルプログラミングはこのように感覚的にプログラミングを作成することができます。
２．M5Stackシリーズとは
「M5Stackシリーズ」とは、M5Stackテクノロジー社製マイコンボードです。
マイコンボードには他にも「Arduino」や「Raspberry Pi」「micro:bit」等がありますが、いずれも基板剥き出しで電源ON中に金属に触れないように等、扱いには少し注意が必要です。
「M5Stackシリーズ」はケースに入ったものがほとんどで安心して使用でき、液晶表示付きの物もあります。
また、「Arduino」には無いWiFi、Bluetooth等の通信機能や9軸センサを搭載したものもあり、これ単体でいろいろなアイデアを試すことができます。
プログラムに関しては「ビジュアルプログラミング」の他にも「Arduino」と同じ「C言語」ベースのコマンドと開発環境が使えるので、学習のための情報も多く初心者の方のプログラミング学習に最適です。
「M5Stack CORE2」や「M5StickC Plus」「ATOM LITE」「ATOM MATRIX」については以下のリンクで詳しく紹介しています。
３．UIFlowとは
「UIFlow」とは「M5Stackシリーズ」のための「ビジュアルプログラミング」の開発環境で、「ブラウザ版」と「インストール版」があり、どちらも無償で使用することができます。
「ブラウザ版」はプログラムの実行、書込みをWiFi通信経由で行います。
このためWiFi環境のある場所で使用する必要がありますが、開発環境は常に最新版を使用することができます。
「インストール版」はプログラムの実行、書き込みをUSBケーブル経由で行います。
このためWiFi環境の無い場所でも使用できますが、開発環境は「ブラウザ版」より更新が遅く「ブラウザ版」で使える機能が使えなかったりするので「ブラウザ版」の使用をおすすめします。
どちらも使用するためには専用のソフト「M5Burner」を使用して本体に「ファームウェア」を書き込む必要があります。
この「ファームウェア」を書き込むことでパソコン上のプログラムを実行し本体で動作確認できるようになるため、毎回プログラムの全てを書き込む必要がなくなります。
最終的に完成したプログラムを単体で動作させたい時に書き込み（ダウンロードという）を行います。
４．準備
「UIFlow」を使用するためには専用のソフト「M5Burner」を使用して、マイコンボード本体に「ファームウェア」を書き込む必要があります。
また「M5Stackシリーズ」を初めて使用する場合は専用のUSBドライバ「CP210x_VCP」をインストールする必要があります。（既にインストール済の方は不要です。）
・M5Burnerのダウンロードと使用方法
専用の「ファームウェア」書込みソフト「M5Burner」のダウンロードから使用方法まで紹介します。
まずはこちらのページ →「Dounload｜M5Stack-Store」にアクセスしてください。
下画像のようなページが表示されるので「SOFTWARE」の中の「M5Burner」の「Download」からお使いのOSに合わせて選択します。
今回は「Win10 x64」をクリックします。
ファイルのダウンロードが始まるので終わるまで待ちます。
ダウンロードが終わったらファイルを開いて圧縮ファイルの展開を行います。
お使いのOSによってファイルの開き方は異なります。
「Google chrome」と「Microsoft Edge」の場合はそれぞれ下画像のようになります。
・Google Chromeの場合
Chromeの場合は左下でダウンロードの状況が確認できます。
ダウンロードが完了したら下画像のように「開く」をクリックしてください。
・Microsoft Edgeの場合
Edgeの場合は右上辺りでダウンロードの状況が確認できます。
ダウンロードが完了したら下画像のように「ファイルを開く」をクリックしてください。
ファイルは圧縮されているので開くと以下のように展開が始まります。
ダウンロードフォルダに下画像のように「M5Burner.exe」ファイルがあるのでクリックして実行します。
「M5Burner.exe」を実行すると以下のような画面が表示されます。
これが「M5Burner」の設定画面です。
上画像のように画面の左端に使用できるマイコンボードの一覧があり、上下にスクロールさせて使用するマイコンボードを選択できます。
使用できるマイコンボードは下表のようになります。
| 表示名 | 対応マイコンボード |
|---|---|
| CORE | M5Stack BASIC /GRAY /M5GO |
| CORE2＆TOUGH | M5Stack TOUGH /CORE2 |
| STICKC | M5Stick C /C PLUS |
| ATOM | ATOM LITE /MATRIX |
| STICKV＆UNITV | M5StickV /UNIT-V |
| TIMERCAM | Timer Camera |
| COREINK | CORE INK |
| PAPER | M5PAPER |
| STAMP | STAMP PICO |
今回は使用するマイコンボードとして「ATOM LITE」を例に設定方法を紹介します。
他のマイコンボードでも手順は同じです。
「ATOM LITE」は液晶画面はないけど、サイズが縦24mm、横24mm、高さ10mmと小型なのに本体にボタンが1つとフルカラーLEDがついていて、シリアル通信はもちろんWiFiもBluetoothも搭載してます。価格も安くてお試しに最適です。
画面左のリストから「ATOM」をクリックすると下画像のように「UIFlow（LITE）」が表示されます。
次に通信ポートの設定を行います。
通信ポート確認のため、パソコンとマイコンボードを接続していない状態にしてください。（接続している場合は抜く）
この状態で下画像のように「COM：」右の検索窓をクリックしてください。
現在パソコンが使用している通信ポートのリストが表示されます。
ここでマイコンボードを接続してください。
マイコンボードを接続して再度「COM：」部をクリックすると、「COM」が一つ増えていると思います。
増えた「COM」がマイコンボードとの通信ポートなのでこれを選択します。
次に下画像のように「UIFlow（LITE）」欄の「Download」をクリックしてください。
「Download」をクリックすると上画像のようにダウンロードが始まるので終わるまで待ちます。
ダウンロードが終了すると上画像のような表示になります。
「Burn」というボタンが現れるのでこれをクリックします。
「Burn」をクリックすると下画像のようなウインドウが表示されます。
ここでお使いのWiFi環境の「SSID（接続先名）」と「Password（接続パスワード）」を入力して「Start」をクリックします。
「Start」をクリックすると下画像のようなウインドウが表示され「ファームウェア」の書き込みが始まります。
「Start Burn」の表示で書込みが始まり「Burn Successfully」が表示されたら書込み終了です。
右下の「Close」をクリックしてウインドウを閉じてください。
・コンフィグ設定「Apikey」の確認
次に使用するマイコンボード本体のコンフィグ設定をしていきます。
「ApiKey」とはマイコンボードごとに割り当てられる識別番号で「UIFlow」では「ApiKey」でマイコンボードを特定します。
固定ではなく「ファームウェア」を書き込むごとに自動で生成されて割り当てられます。
他にも通信モード「Start Mode」の選択を行います。
「Start Mode」は「UIFlow」の「ブラウザ版」と「インストール版」で以下のように設定が異なります。
・ブラウザ版：Internet Mode
・インストール版：USB Mode
それでは設定をしていきます。下画像のように「Configuration」ボタンをクリックしてください。
「Configuration」をクリックすると下画像のようなウインドウが表示されます。
このウインドウが表示されたらまず「ApiKey」をメモしましょう。
「コピーマーク」をクリックしてコピーすることもできます。
「Start Mode」の欄でマイコンボード本体の通信モードが確認できます。
まずはブラウザ版での動作確認を行いますので「Internet Mode」になっているのを確認してください。
その他の設定は変更せずに「Save」をクリックしてください。
「Save」をクリックすると書き込みが始まり、以下のように「Tips」が表示されるのでちょっと待つと「Success」が表示されて完了です。「OK」をクリックするとウインドウが閉じます。
・コンフィグ設定「Start Mode」の変更方法
「UIFlow」で「ブラウザ版」を使うか「インストール版」を使うかで「Start Mode」の設定を変更します。
まずは「M5Burner」で「Configuration」ボタンをクリックます。
コンフィグ設定ウインドウが表示されるので「Start Mode」の設定を以下のように設定します。
ブラウザ版の設定
「ブラウザ版」を使う場合は「Internet Mode」を選択してください。
「Internet Mode」になっているのを確認して「Save」をクリックします。
インストール版の設定
「インストール版」を使う場合は「USB Mode」を選択してください。
「USB Mode」になっているのを確認して「Save」をクリックします。
・USBドライバのインストール
「M5Stackシリーズ」を初めて使用する場合はUSBドライバのインストールが必要です。
既にインストール済の方は不要です。
USBドライバ「CP210x_VCP」のインストール方法は以下のリンクを参照してください。
・MacでJavaScriptエラーが出る場合の対処法
Macで「M5Burner」を使用してファームウェアの書き込みを行った場合に以下のようなJavaScriptのエラーが発生する場合があります。
私のMacでもこのエラーが発生していましたが、以下の手順で「ターミナル」から起動すると正常に書き込みが行えます。
- ターミナルアプリを起動します。
「python3」がインストールされていない場合はインストールするために以下のリンク先を参照して、ターミナルから「Homebrew」をインストールしてください。
https://brew.sh/ - ターミナルで以下のコマンドを実行して「python3」をインストールしてください。
$ brew install python3 - ターミナルで以下のコマンドを実行してシンボリックリンクを張ります。
$ sudo ln -s /usr/local/bin/python3 /usr/local/bin/python - ターミナルで以下のコマンドを実行して「M5Burner」を起動します。
$ /Applications/M5Burner.app/Contents/MacOS/electron-m5burner-v2-eletron
以上で書き込みができると思います。
５．ブラウザ版 UIFlowの使い方
・UIFlowの起動と画面紹介
ブラウザ版の「UIFlow」を起動するためにはこちら →「https://flow.m5stack.com」へアクセスしてください。
下画像のような画面がブラウザで表示されます。
これが「UIFlow」のプログラム作成画面です。
・初期設定
「UIFlow」が起動したらマイコンボードとの接続設定を行います。
画面右上の設定ボタンをクリックすると下画像のように「バージョン」の切換や「アップデート情報」のメニューが表示されるので、一番下の「設定」をクリックしてください。
「設定」をクリックすると下画像のようなウインドウが表示されます。
ここで「Apikey」の欄に「M5Burner」で確認した「Apikey」を入力してください。
次に使用するマイコンボードを選択します。
今回は「ATOM LITE」を例に紹介しますので、下画像のように「ATOM LITE」の画像をクリックして「OK」をクリックしてください。
「OK」をクリックすると下画像のように画面左に選択したマイコンボード、今回は「ATOM LITE」が表示されます。
画面右上に「接続済み」と表示されれば初期設定は完了です。
画面左下にも「接続済み」と表示され、入力した「Apikey」が表示されます。
・主なプログラミングコマンドの紹介
ほんの一部ですがプログラミングコマンドについて紹介します。
画面中央付近の「プログラミングコマンドエリア」の各項目をクリックすると下画像のようにプログラムコマンドの一覧が表示されます。
・イベント
ここにはほぼ毎回使用する「ずっと」というコマンドがあります。
この「ずっと」は電源ON中に常に実行させておきたいプログラムを書く時に使用します。
他にも「ボタン」を押した時に実行させたいプログラムを書くためのコマンド等があります。
・RGBカラー
ここでは本体に内蔵しているLEDを制御するプログラムがあります。
本体に対象のLEDが無い場合は実行しても無効です。
・論理
ここでは条件分岐等を行うためのコマンドがあります。
「C言語」等の「if文」はここにあります。
・プログラムの作成方法
プログラムの作成方法について紹介します。
プログラムは下画像のようにコマンドのブロックを組み合わせるように作成します。
「Setup」の下に突起があります。
ここに「ずっと」というコマンドの凹部をマウスの左ボタンを押したまま近づけると、背景の一部が黒くなります。
この状態でマウスのボタンを離すと「Setup」に「ずっと」のコマンドが吸い付きます。
「ずっと」コマンドのように、間にスキマのあるコマンドの場合
他のコマンドをスキマに近づけると、スキマが広くなります。
この状態でマウスのボタンを離すと、その隙間にぴったりはまります。
簡単な「Lチカ（LEDを点灯させる）」プログラムを組んでみましょう。
コマンドエリアから、下画像のようにコマンドのブロックをプログラム作成画面に置いてください。
準備したブロックを上画像のように組み合わせてみましょう。
ボタンを押した時にLEDの色を変えたいので、上画像のように片方の「赤色」の部分をクリックして「青色」に変更しましょう。
これで「Lチカ」プログラムが完成です。
このプログラムは以下のように動作します。
「もし、ボタンAが押されて（pressed）いれば、LEDが赤色に点灯し、ボタンAが押されてなければLEDを青色に点灯します。」これを「ずっと」繰り返し続けます。
・プログラムの実行と動作確認
作成したプログラムを実行してみましょう。
プログラムを実行するには、下画像のように「RUN」をクリックしてください。
本体に書き込んだ「ファームウェア」によって、本体で動作を確認することができます。
ここではまだ本体には書き込まれていないため、電源を落とした場合は再度「RUN」をクリックする必要があります。
本体に書き込むには、隣の「ダウンロード」ボタンを押します。
しかし「ダウンロード」を押すと本体の「Start Mode」が「App Mode」に切替わるため、その後続けて動作確認や書込みができなくなります。
再びプログラムを修正して動作確認するには「M5Burner」で「Start Mode」を「Internet Mode」に変更してから「UIFlow」で「RUN」をクリックする必要がありますので、プログラムが完成するまで「ダウンロード」は押さない方が良いです。
「M5Burner」での「Start Mode」の変更方法はこちら →「上ページへ移動」
「ATOM LITE」本体では下画像のようにボタンを押すことによってLEDの色が変化することが確認できると思います。
６．インストール版 UIFlowの使い方
「UIFlow」にはWiFiの無い環境でも使用できるように「インストール版」の「UIFlow-Desktop-IDE」があります。
「ブラウザ版」は「Apikey」で本体を特定してWiFi通信でデータの転送を行いますが「インストール版」ではUSB接続でデータの転送を行います。
・ダウンロードと起動
まずはこちらのページ →「Dounload｜M5Stack-Store」にアクセスしてください。
下画像のようなページが表示されるので「SOFTWARE」の中の「UIFlow-Desktop-IDE」の「Download」からお使いのOSに合わせて選択します。
今回は「Win10 x64」をクリックします。
ファイルのダウンロードが始まるので終わるまで待ちます。
ダウンロードが終わったらファイルを開いて圧縮ファイルを展開していきます。
お使いのOSによってファイルの開き方は異なります。
「Google chrome」と「Microsoft Edge」の場合はそれぞれ下画像のようになります。
・Google Chromeの場合
・Microsoft Edgeの場合
「開く」をクリックするとファイルの展開が始まるのでしばらく待ちます。
ファイルの展開が終了すると「ダウンロード」フォルダに「UIFlow-Desktop-IDE」フォルダができているので開くと下画像のように「UIFlow-Desktop-IDE.exe」があるのでクリックして開きます。
開くとまず「設定」ウインドウが開いてくるので初期設定を行います。
・初期設定
パソコンとマイコンボードを接続しているUSBポートを「COM」に設定します。
（「M5Burner」で設定したCOM番号と同じです。）
次に使用する「Device（マイコンボード）」を選んで「OK」をクリックします。
初期設定が完了すると下画像のような画面が表示されます。
「ブラウザ版」とほぼ同じですが「RUN（実行）」ボタンは画面右上にあります。
プログラムの作成方法は「ブラウザ版」と同じです。
７．まとめ
「M5Stackシリーズ」でビジュアルプログラミングを行うための「UIFlow」の使い方について紹介しました。
「UIFlow」では専用のファームウェア書込みソフト「M5Burner」を使用してマイコンボードの設定を行いパソコン経由でマイコンボードのプログラミング実行や書き込みを行います。
「ブラウザ版」と「インストール版」があり、「ブラウザ版」では「Apikey」で本体を特定してWiFi通信でデータの転送を行い「インストール版」ではUSB接続でデータの転送を行います。
「インストール版」は更新が遅く「ブラウザ版」にあるコマンドが無かったりするので、WiFi環境がある場合は「ブラウザ版」の使用をおすすめします。
プログラムの作成はブロックを組み合わせるように作成できるため感覚的に組み合わせてどんな動きになるかいろいろ試してみましょう。
とは言え、実際に動作するプログラムにするにはある程度のルールがあり、これは「C言語」や「python」等のプログラム言語とほぼ同じです。
ビジュアルプログラミングを体験することで、今後本格的にプログラミング言語を学ぼうとした時に理解しやすくなると思います。
「まずは動かす！そして興味がもてたら本格的なプログラミングにも挑戦してみましょう♪」
当ブログでは「C言語」をメインにプログラミング言語の初歩的なところを紹介しています。
「C言語」の学習にも今回使用した「ATOM LITE」等のマイコンボードは動かしながら学べるためプログラミング学習に最適なツールと思います。
以下のリンクで「C言語」を使用した「マイコンボード」の開発環境やプログラミング方法も紹介していますので確認してみてください。
コメント
とても丁寧で、とても分かりやすかった。
ありがとうございました。多謝(=^・^=)
コメントありがとうございます。大変励みになります♪
自分も理解しながら書いてますので、ついつい長くなりがちなのですが(^^;)
少しでもお役に立てたのであれば幸いです。