「M5Stackシリーズ」（M5Stack CORE2、StickC Plus、ATOM LITE等）でビジュアルプログラミングを行うための開発環境「UIFlow」の使い方について詳しく紹介します。
代表的なビジュアルプログラミングとしては「Scratch（スクラッチ）」や「micro:bit」等も有名ですが、これらを極めたとして、そこから実際のプログラミングにどう移行したらよいのか迷われる方が多いのではと思います。
ビジュアルプログラミングから実際のプログラミング言語への移行方法についても以下のリンクで詳しく紹介しています。
それでは、ビジュアルプログラミングを体験してみましょう！
１．ビジュアルプログラミングとは
２．M5Stackシリーズとは
３．UIFlowとは
４．準備
・M5Burnerのダウンロードと使用方法
・USBドライバのインストール
・ファームウェアの書き込み
・コンフィグ設定「Apikey」の確認
５．ブラウザ版 UIFlowの使い方
・UIFlowの起動と画面紹介
・初期設定
・主なプログラミングコマンドの紹介
・プログラムの作成方法
・プログラムの実行と動作確認
６．インストール版 UIFlowの使い方
・ダウンロードと起動
・初期設定
７．まとめ
１．ビジュアルプログラミングとは
「ビジュアルプログラミング」とは「ブロックプログラミング」とも呼ばれ、ブロックを組み合わせるようにプログラムを作成することができるプログラミング方法です。
一般的なプログラミング言語は「英語ベース」のコマンドが使用されるため、初心者には理解が困難なものですが、ビジュアルプログラミングは「日本語の説明が表示されたブロック」があらかじめ用意されており、それらを組み合わせてプログラムを作成できるため、初心者でも感覚的にプログラミングを体験することができます。
実際のプログラミング作成画面は下画像のようになります。
このプログラムの動作について、解説すると以下のようになります。
「もし、ボタンAが押されて（pressed）いれば、LEDの色を赤に設定し、そうでなければLEDの色を青色に設定します。」これを「ずっと」繰り返し続けます。
そのままですね・・・。
ビジュアルプログラミングはこのように感覚的にプログラミングを作成することができます。
２．M5Stackシリーズとは
「M5Stackシリーズ」とは、M5Stackテクノロジー社製マイコンボードです。
マイコンボードには他にも「Arduino」や「Raspberry Pi」「micro:bit」等がありますが、いずれも基板剥き出しで電源ON中に金属に触れないように等、扱いには少し注意が必要です。
「M5Stackシリーズ」はケースに入ったものがほとんどで安心して使用でき、液晶表示付きの物もあります。
また、「Arduino」には無いWiFi、Bluetooth等の通信機能や振動センサ、スピーカー、ブザー、赤外線通信等を搭載したものもあり、それ単体でいろいろなアイデアを試すことができます。
「M5Stack CORE2」や「M5StickC Plus」「ATOM LITE」については以下のリンクで詳しく紹介しています。
３．UIFlowとは
「UIFlow」とは「M5Stackシリーズ」のための「ビジュアルプログラミング」の開発環境で、「ブラウザ版」と「インストール版」があり、どちらも無償で使用することができます。
「ブラウザ版」はプログラムの実行、書込みをWi-Fi通信経由で行います。
このため、Wi-Fi環境のある場所で使用する必要がありますが、開発環境は常に最新版を使用することができます。
「インストール版」はプログラムの実行、書き込みをUSBケーブル経由で行います。
このためWi-Fi環境の無い場所でも使用できますが、開発環境は「ブラウザ版」より更新が遅く「ブラウザ版」で使える機能が使えなかったりするので「ブラウザ版」の使用をおすすめします。
どちらも使用するためには専用のソフト「M5Burner」を使用して本体に「ファームウェア」を書き込む必要があります。
４．準備
「UIFlow」を使用するためには専用のソフト「M5Burner」を使用して、マイコンボード本体に「ファームウェア」を書き込む必要があります。
また「M5Stackシリーズ」を初めて使用する場合は専用のUSBドライバをインストールする必要があるのでこの方法も紹介します。（既にインストール済の方は不要です。）
・M5Burnerのダウンロードと使用方法
専用の「ファームウェア」書込みソフト「M5Burner」のダウンロードから使用方法まで紹介します。
まずは以下のページにアクセスしてください。
下画像のようなページが表示されたら「UIFLOW FIRMWARE BURNING TOOL」の中の「M5Burner」の「Download」からお使いのOSに合わせて選択してクリックします。
今回は「Win10 x64v3.0」をクリックします。
ファイルのダウンロードが終わったら下画像のようにダウンロードしたファイルをクリックします。
ファイルは圧縮されているのでクリックすると以下のように展開が始まります。
展開が完了すると、下画像のようにフォルダが表示されます。
表示されない場合は「ダウンロードフォルダ」に展開されたフォルダ「M5Burner-v3-beta-win-x64」があるので、その中の「M5Burner.exe」をクリックします。
「M5Burner.exe」を実行すると以下のように「M5Burner」が起動します。
画面の左に使用できるマイコンボードの一覧があり、使用するマイコンボードを選択できます。
使用できるマイコンボードは下表のようになります。
| 表示名 | 対応マイコンボード |
|---|---|
| CORE | M5Stack BASIC /GRAY /M5GO |
| CORE2＆TOUGH | M5Stack TOUGH /CORE2 |
| STICKC | M5Stick C /C PLUS |
| ATOM | ATOM LITE /MATRIX /ATOMU |
| ATOMS3 | AtomS3/AtomS3-Lite |
| STICKV＆UNITV | M5StickV /UNIT-V |
| T-LITE | M5StickC-Plus-TLite-FW |
| CAMERA | TimerCam |
| PAPER | M5PAPER |
| COREINK | CORE INK |
| STAMP | M5Stamp Pico |
| STAMPS3 | M5StampS3 |
| STATION | M5Stack Station |
・USBドライバのインストール
「M5Stackシリーズ」を初めて使用する場合はUSBドライバのインストールが必要です。
既にインストール済の方は不要です。
まずは「ドライバ」のファイルをダウンロードします。以下のリンクへアクセスしてください。
表示されるページを下へスクロールすると下画像のようなページが表示されます。
必要なドライバは機種ごとに異なりますので、それぞれOSに合わせてダウンロードしましょう。
USBドライバのインストール完了後にパソコンとマイコンボードを接続して下画像のように画面右上に「COM番号（番号は環境によって異なります。）」が表示されれば認識されています。
・ファームウェアの書き込み
次にファームウェアの書き込みを行います。
今回は使用するマイコンボードとして「M5StickC Plus」を例に設定方法を紹介しますが、他のマイコンボードでも手順は同じです。
「M5StickC Plus」は 縦48.2 × 横25.5 × 高さ13.7と小型ですが 1.14インチTFT液晶画面や入出力端子、2個のボタン、LED、赤外線送信、ブザー、3軸ジャイロ＋3軸加速度センサ、マイク、RTC（リアルタイムクロック）、バッテリーが内蔵されています。
「M5StickC Plus」については以下のリンクで詳しく紹介しています。
画面左のリストから「STICKC」をクリックすると下画像のように「M5StickC Plus」が表示されるので［Dounload］ボタンをクリックします。
ダウンロードが完了して下画像のような画面になったら［Burn］ボタンをクリックします。
下画像のようなウインドウが表示されるので、Wi-Fiの接続先（WIFI SSID）とパスワード（WIFI Password）を、お使いの環境に合わせて入力して［Next］ボタンをクリックします。
以下のような画面が表示されたら［Start］ボタンをクリックします。
ファームウェアの書き込みが始りますのでしばらく待ちましょう。
下画像のような画面になったら［Burn successfully, click here to return］ボタンをクリックして書き込み完了です。
・コンフィグ設定「APIKEY」の確認
UIFlowを使用するためには「APIKEY」というものを使用します。
液晶画面のある機種は画面に表示されるため問題ありませんが、液晶画面のない機種は以下の手順で確認してメモしておきましょう。
「APIKEY」とはマイコンボードごとに割り当てられる識別番号で「UIFlow」では「APIKEY」でマイコンボードを特定します。
固定ではなく「ファームウェア」を書き込むごとに自動で生成されて割り当てられます。
「APIKEY」を確認するには下画像のように「M5Burner」で使用するデバイスを選択して［Configurate］ボタンをクリックしてください。
［Configurate］ボタンをクリックすると下画像のようなウインドウが表示されるので［Load］ボタンをクリックします。
下画像のようなウインドウが表示されたら、その中の「APIKEY」をメモしましょう。
「APIKEY」の確認だけなので、メモしたら［Cancel］ボタンをクリックして閉じます。
「Start Mode」の欄でマイコンボード本体の通信モードが確認できます。
まずはブラウザ版での動作確認を行いますので「Internet Mode」になっているのを確認してください。
「Start Mode」は「UIFlow」の「ブラウザ版」と「インストール版」で以下のように設定が異なります。
・ブラウザ版：Internet Mode
・インストール版：USB Mode
インストール版を使用するときはここで設定変更します。
他にもWi-Fiの接続設定の変更もここで行うことができます。
設定を変更する時は［Save］ボタンをクリックします。
５．ブラウザ版 UIFlowの使い方
ブラウザ版の「UIFlow」の使い方を紹介します。
・UIFlowの起動と画面紹介
ブラウザ版の「UIFlow」を起動するために以下のリンクをクリックしてください。
下画像のようなウインドウが表示されるので「UIFlow1.0」を選択して［Confirm］ボタンを押します。
下画像のように「UIFlow」のプログラム作成画面が表示されます。
基本的な機能説明を画像内に追記しました。
「コマンドエリア」のコマンドブロックをプログラム作成エリアに配置して組み合わせることでプログラムを作成することができます。
プログラムを作成したら［RUN］ボタンで実行しますが、この場合はパソコンと通信接続していないと動作しません。デバイス単体で動作させたい場合は［ダウンロード］ボタンをクリックします。
画面右上のアイコンの数が少ない場合は、下画像のようにブラウザ右上の「三点リーダー」をクリックして、「ズーム（表示倍率）」を変更すると全て表示されるようになります。
画面左エリアにある「Unit」と「Stamp」をクリックすると「M5Stack社」のGroveユニットやStampタイプの拡張ユニットが下画像のように選択できます。
Groveユニット
Stampユニット
・初期設定
「UIFlow」が起動したらマイコンボードとの通信接続設定を行います。
今回は「M5StickC Plus」を使用する例で紹介します。
まずは「M5StickC Plus」をパソコンと接続する等して電源を入れておきましょう。
次に、画面右上の設定ボタンをクリックすると下画像のように「バージョン」の切換や「アップデート情報」のメニューが表示されるので、一番下の「設定」をクリックしてください。
「設定」をクリックすると下画像のようなウインドウが表示されます。
ここで「APIKEY」の欄に「M5Burner」で確認した「APIKEY」を入力してください。
※液晶表示のある機種は液晶画面に表示されています。
次に使用するマイコンボードを選択します。
今回は「M5StickC Plus」を例に紹介しますので、下画像のように「M5StackC Plus」の画像をクリックして［OK］ボタンをクリックしてください。
「OK」をクリックすると下画像のように画面左に選択したマイコンボード、今回は「M5Stick Plus」が表示されます。
画面右上に「接続済み」と表示されれば初期設定は完了です。
・主なプログラミングコマンドの紹介
今回動作確認に使用するサンプルプログラムで使用する、主なプログラミングコマンドについて紹介します。
画面左の「作画コマンド」や画面中央付近の「コマンドエリア」の各項目をクリックすると下画像のようにプログラムコマンドの一覧が表示されます。
液晶画面のある機種は画面左の「作画コマンド」を使用します。
画面に文字を表示させるためには［Label］アイコンをドラッグ＆ドロップで画面上に配置します。
配置した「Label」をクリックすると表示内容（Text）や文字サイズ（Font）が設定できます。
［イベント］には、ほぼ毎回使用する［ずっと］というコマンドがあります。
これは電源ON中に常に実行させておきたいプログラムを書く時に使用します。
他にも「ボタン」を押した時に実行させたいプログラムを書くためのコマンド等があります。
［ラベル］には画面上に配置した「Label」の内容を指定するコマンドがあります。
「Label」の番号を指定して表示内容や文字色、フォント等を指定できます。
［LED］には本体内蔵のLEDを「ON／OFF」させるプログラムがあります。
本体に対象のLEDが無い場合は実行しても無効です。
［論理］には条件分岐を行うためのコマンドがあります。
「C言語」等の「if文」がこれになります。
［変数］ではプログラム内で使用する値を格納する「変数」を作成することができます。
「変数」を作成するには［変数の作成］をクリックします。
［変数の作成］をクリックすると上画像のようなウインドウが表示されます。
変数名を入力して［OK］ボタンをクリックすると変数を作成することができます。
「変数」を作成すると、作成した変数を使用するコマンドが選択できるようになります。
・プログラムの作成方法
動作確認のためのサンプルプログラムを作成します。
プログラムの作成は以下のようにプログラムコマンドの書かれたブロックを組み合わせるようにして作成します。
「Setup」の下に突起があります。
ここに［ずっと］というコマンドの凹部をドラッグして近づけると、背景の一部が黒くなります。
この状態でマウスのボタンを離すと「Setup」に「ずっと」のコマンドが吸い付きます。
以上のような手順で本体のLEDを点灯、消灯させる「Lチカ」のプログラムを作成したものは下画像のようになります。
プログラムを作成して画面右下の［RUN］ボタンを押すと本体に転送され実行できるようになります。
各コマンドに［ドロップダウンリスト］がある場合は、各コマンドの動作内容を変更することができます。
下画像の［ボタン］コマンドの場合は「wasPressed（ボタンが押されていれば）」や「wasReressed（ボタンが離されていれば）」を選択することができます。
・プログラムの実行と動作確認
まず、本体の電源を入れると下画像のようにWi-Fiへの接続が開始されます。
電源を入れると「M5Burner」で設定したWi-Fi接続先へ接続されます。
Wi-Fi接続が完了すると液晶画面に「APIKEY」が表示されます。
オレンジ画面は「UIFlow」との接続がされていない状態です。
「UIFlow」との接続が完了すると水色の画面に変わります。
プログラムを実行するには、下画像のように「RUN」をクリックしてください。
本体に書き込んだ「ファームウェア」によって、本体で動作を確認することができます。
ここではまだ本体には書き込まれていないため、電源を落とした場合には再度［RUN］をクリックする必要があります。
本体に書き込むには［ダウンロード］ボタンを押しますが［ダウンロード］ボタンを押すと本体の「Start Mode」が「App Mode」に変更されるため、その後「UIFlow」からの動作確認や書込みができなくなります。
「M5StickC Plus」本体では下画像のようにボタンを押すとLEDが点灯し、液晶画面の「OFF!」が「ON!」に変わることが確認できると思います。
「UIFlow」で［RUN］ボタンを押すと液晶画面に「OFF!」が表示されます。
本体ボタンを押すと液晶画面に「ON！」が表示され本体LED（赤）が点灯します。
［ダウンロード］ボタンを押すと本体単体で動作させることができるようになります。
再びプログラムを修正して動作確認するには「M5Burner」で「Start Mode」を「Internet Mode」に変更してから「UIFlow」で「RUN」をクリックする必要がありますが「M5StackC Plus」の場合は以下の方法で本体のボタンを使用することでモードを変更することもできます。
本体の電源を入れると上画像のような画面が表示されます。
この時に本体ボタンを押します。
上画像のような画面が表示されたら、もう一度本体ボタンを押します。
すると、Wi-Fiへの接続が実行され「Internet Mode」に切り換わります。
６．インストール版 UIFlowの使い方
「UIFlow」にはWi-Fiの無い環境でも使用できる「インストール版」の「UIFlow-Desktop-IDE」があります。
「ブラウザ版」は「APIKEY」で本体を特定してWi-Fi通信でデータの転送を行いましたが「インストール版」ではUSB接続でデータの転送を行います。
・ダウンロードと起動
インストール版の「UIFlow」を使用するためには以下のページにアクセスしてください。
下画像のようなページが表示されるので「UIFLOW SOFTWARES」の「Download」からお使いのOSに合わせて選択します。今回は「Desktop IDE Win10 x64」をクリックします。
ファイルのダウンロードが始まるので終わるまで待ちます。
ダウンロードが終わったらファイルを開いて圧縮ファイルを展開していきます。
ダウンロードしたファイルをクリックするとファイルの展開が始まるのでしばらく待ちます。
ファイルの展開が完了すると「ダウンロード」フォルダに「UIFlow-Desktop-IDE」フォルダができているので開くと下画像のように「UIFlow-Desktop-IDE.exe」があるのでクリックして開きます。
・初期設定
初期設定はUSBポートのCOM番号を「COM」に設定して、使用する「デバイス（マイコンボード）」を選んで「OK」をクリックします。言語は日本語にしておきましょう。
これでインストール版の「UIFlow」を使用することができます。
７．まとめ
「M5Stackシリーズ」でビジュアルプログラミングを行うための「UIFlow」の使い方について紹介しました。
「UIFlow」では専用のファームウェア書込みソフト「M5Burner」を使用してマイコンボードの設定を行いパソコン経由でマイコンボードのプログラミング実行や書き込みを行います。
「ブラウザ版」と「インストール版」があり、「ブラウザ版」では「APIKEY」で本体を特定してWiFi通信でデータの転送を行い「インストール版」ではUSB接続でデータの転送を行います。
「インストール版」は更新が遅く「ブラウザ版」にあるコマンドが無かったりするので、WiFi環境がある場合は「ブラウザ版」の使用をおすすめします。
プログラムの作成はブロックを組み合わせるように作成できるため感覚的に組み合わせて、どんな動きになるかいろいろ試してみましょう。
とは言え、実際に動作するプログラムにするにはある程度のルールがあり、これは「C言語」や「python」等のプログラム言語とほぼ同じです。
ビジュアルプログラミングを体験することで、今後本格的にプログラミング言語を学ぼうとした時に理解しやすくなると思います。
「まずは動かす！そして興味がもてたら本格的なプログラミングにも挑戦してみましょう♪」
当ブログでは「C言語」をメインにプログラミング言語の初歩的なところを紹介しています。
「C言語」の学習にも今回使用した「M5StickC Plus」等のマイコンボードは動かしながら学べるため、プログラミング学習に最適なツールと思います。
以下のリンクで「C言語」を使用した「マイコンボード」の開発環境やプログラミング方法も紹介しています。
「M5Stack社」の最新機種「S3シリーズ」で使用できる「UIFlow2.0」については、これから機能が充実していくと思うので今回は省略しました。こちらについては、また充実したら詳しく紹介したいと思います。
「AtomS3 Lite」「M5StampS3」については以下のリンクで詳しく紹介しています。
コメント
とても丁寧で、とても分かりやすかった。
ありがとうございました。多謝(=^・^=)
コメントありがとうございます。大変励みになります♪
自分も理解しながら書いてますので、ついつい長くなりがちなのですが(^^;)
少しでもお役に立てたのであれば幸いです。