UIFlowのダウンロードから初期設定、使い方まで詳しく紹介

UIFlow
スポンサーリンク

「M5Stackシリーズ」(M5Stack CORE2、Stick-C、ATOM LITE等)でビジュアルプログラミングを行うための開発環境「UIFlow」の使い方について詳しく紹介します。

「M5Stackシリーズ」は「C言語」や「python(micro python)」での開発環境も充実しているため「UIFlow」はこれらの言語へ移行するためのビジュアルプログラミング環境としても最適と思います。
※2022/1/7 時点の情報です。今後のバージョンアップにより手順が異なる可能性があります。また、OSはWindows10でのインストール方法の紹介となります。

代表的なビジュアルプログラミングとしては「Scratch(スクラッチ)」や「micro:bit」等も有名ですが、これらを極めたとして、そこから実際のプログラミングにどう移行したらよいのか迷われる方が多いのではと思います。

ビジュアルプログラミングから実際のプログラミング言語への移行方法についても以下のリンクで詳しく紹介しています。

ビジュアルプログラミングをC言語、Python、JavaScriptで書くとこうなる
ビジュアルプログラミングはプログラミング?本当にプログラミングが出来るようになるの?実際のプログラミング言語に置き換えてみればわかる!ビジュアルプログラミングは間違いなくプログラミングです!

それでは、ビジュアルプログラミングを体験してみましょう!

1.ビジュアルプログラミングとは

「ビジュアルプログラミング」とは「ブロックプログラミング」とも呼ばれ、ブロックを組み合わせるようにプログラムを作成することができるプログラミング方法です。

一般的なプログラミング言語は「英語ベース」のコマンドが使用されるため、初心者には理解が困難なものですが、ビジュアルプログラミングは「日本語の説明が表示されたブロック」があらかじめ用意されており、それらを組み合わせてプログラムを作成できるため、初心者でも感覚的にプログラミングを体験することができます。

実際のプログラミング作成画面は下画像のようになります。

UIFlowでLチカプログラム

このプログラムの動作について、特に解説も必要ないように思いますが、一応解説をすると

「もし、ボタンAが押されて(pressed)いれば、LEDの色を赤に設定し、そうでなければLEDの色を青色に設定します。」これを「ずっと」繰り返し続けます。

そのままですね・・・。

ビジュアルプログラミングはこのように感覚的にプログラミングを作成することができます。

2.M5Stackシリーズとは

「M5Stackシリーズ」とは、M5Stackテクノロジー社製マイコンボードです。
マイコンボードには他にも「Arduino」や「Raspberry Pi」「micro:bit」等がありますが、いずれも基板剥き出しで電源ON中に金属に触れないように等、扱いには少し注意が必要です。

「M5Stackシリーズ」はケースに入ったものがほとんどで安心して使用でき、液晶表示付きの物もあります。
また、「Arduino」には無いWiFi、Bluetooth等の通信機能や9軸センサを搭載したものもあり、これ単体でいろいろなアイデアを試すことができます。

プログラムに関しては「ビジュアルプログラミング」の他にも「Arduino」と同じ「C言語」ベースのコマンドと開発環境が使えるので、学習のための情報も多く初心者の方のプログラミング学習に最適です。

「M5Stack CORE2」や「M5StickC Plus」「ATOM LITE」「ATOM MATRIX」については以下のリンクで詳しく紹介しています。

M5Stack CORE2の使い方、ArduinoIDE、UiFlow、PlatformIOの初期設定、工場出荷時への戻し方も紹介
CORE2の使い方、始め方を3つの開発環境 ArduinoIDE、UiFlow(ビジュアルプログラミング)、PlatformIOの初期設定から詳しく紹介します。
M5StickC Plusの使い方、初期設定、サンプルプログラム、M5StickCとの違い等を詳しく紹介
M5StickC PlusをArduino IDEやPlatformIOで使うための初期設定やサンプルプログラムでの動作確認の方法です。ビジュアルプログラミングのUiFlowの初期設定についても紹介します。
超小型で高機能!プログラミング初心者におすすめ「ATOM LITE」
マイコンボードはRaspberry Pi、Arduino、M5Stack等がありますが、一通りやってみてそれぞれの良さはあるものの「最初に何を?」と聞かれたらATOM LITEが一番お手軽♪プログラミング初心者におすすめ
ドットマトリクスLED簡単制御方法、点灯位置も色も思いのままに♪ATOM Matrix
ATOM Matrixには5×5の25個のフルカラーLEDで構成されたドットマトリクスLEDがあり、2重配列と「FastLED」ライブラリを使用することで簡単に制御できます。

3.UIFlowとは

「UIFlow」とは「M5Stackシリーズ」のための「ビジュアルプログラミング」の開発環境で、「ブラウザ版」と「インストール版」があり、どちらも無償で使用することができます。

基本的には「ビジュアルプログラミング」でプログラムを作成しますが、「python(micro python)」のプログラムも自動で生成されており、切り替えて使用することができます。
※「python」から「ビジュアルプログラム」への変換はできません。

「ブラウザ版」はプログラムの実行、書込みをWiFi通信経由で行います。
このためWiFi環境のある場所で使用する必要がありますが、開発環境は常に最新版を使用することができます。

「インストール版」はプログラムの実行、書き込みをUSBケーブル経由で行います。
このためWiFi環境の無い場所でも使用できますが、開発環境は「ブラウザ版」より更新が遅く「ブラウザ版」で使える機能が使えなかったりするので「ブラウザ版」の使用をおすすめします。

どちらも使用するためには専用のソフト「M5Burner」を使用して本体に「ファームウェア」を書き込む必要があります。

この「ファームウェア」を書き込むことでパソコン上のプログラムを実行し本体で動作確認できるようになるため、毎回プログラムの全てを書き込む必要がなくなります。
最終的に完成したプログラムを単体で動作させたい時に書き込み(ダウンロードという)を行います。

4.準備

「UIFlow」を使用するためには専用のソフト「M5Burner」を使用して、マイコンボード本体に「ファームウェア」を書き込む必要があります。

また「M5Stackシリーズ」を初めて使用する場合は専用のUSBドライバ「CP210x_VCP」をインストールする必要があります。(既にインストール済の方は不要です。)

・M5Burnerのダウンロードと使用方法

専用の「ファームウェア」書込みソフト「M5Burner」のダウンロードから使用方法まで紹介します。

「M5Burner」では使用するマイコンボードを選択して以下の環境設定を行います。
・ファームウェアの書き込み
・WiFi環境のSSIDとパスワード登録
・通信モードの設定:「UIFlow」使用時の通信モード選択(WiFi通信 or USB通信)

まずはこちらのページ →「Dounload|M5Stack-Store」にアクセスしてください。
下画像のようなページが表示されるので「SOFTWARE」の中の「M5Burner」の「Download」からお使いのOSに合わせて選択します。
今回は「Win10 x64」をクリックします。

M5StackシリーズのM5Burnerの使い方

ファイルのダウンロードが始まるので終わるまで待ちます。
ダウンロードが終わったらファイルを開いて圧縮ファイルの展開を行います。

お使いのOSによってファイルの開き方は異なります。
「Google chrome」と「Microsoft Edge」の場合はそれぞれ下画像のようになります。

・Google Chromeの場合

Chromeの場合は左下でダウンロードの状況が確認できます。

M5StackシリーズのM5Burnerの使い方

ダウンロードが完了したら下画像のように「開く」をクリックしてください。

M5StackシリーズのM5Burnerの使い方
・Microsoft Edgeの場合

Edgeの場合は右上辺りでダウンロードの状況が確認できます。

M5StackシリーズのM5Burnerの使い方

ダウンロードが完了したら下画像のように「ファイルを開く」をクリックしてください。

M5StackシリーズのM5Burnerの使い方

ファイルは圧縮されているので開くと以下のように展開が始まります。

M5StackシリーズのM5Burnerの使い方

ダウンロードフォルダに下画像のように「M5Burner.exe」ファイルがあるのでクリックして実行します。

M5StackシリーズのM5Burnerの使い方

「M5Burner.exe」を実行すると以下のような画面が表示されます。
これが「M5Burner」の設定画面です。

M5StackシリーズのM5Burnerの使い方

上画像のように画面の左端に使用できるマイコンボードの一覧があり、上下にスクロールさせて使用するマイコンボードを選択できます。

使用できるマイコンボードは下表のようになります。

表示名対応マイコンボード
CORE M5Stack BASIC /GRAY /M5GO
CORE2&TOUGHM5Stack TOUGH /CORE2
STICKC M5Stick C /C PLUS
ATOM ATOM LITE /MATRIX
STICKV&UNITVM5StickV /UNIT-V
TIMERCAMTimer Camera
COREINKCORE INK
PAPER M5PAPER
STAMP STAMP PICO

今回は使用するマイコンボードとして「ATOM LITE」を例に設定方法を紹介します。
他のマイコンボードでも手順は同じです。

「ATOM LITE」は液晶画面はないけど、サイズが縦24mm、横24mm、高さ10mmと小型なのに本体にボタンが1つとフルカラーLEDがついていて、シリアル通信はもちろんWiFiもBluetoothも搭載してます。価格も安くてお試しに最適です。

画面左のリストから「ATOM」をクリックすると下画像のように「UIFlow(LITE)」が表示されます。

M5StackシリーズのM5Burnerの使い方

次に通信ポートの設定を行います。
通信ポート確認のため、パソコンとマイコンボードを接続していない状態にしてください。(接続している場合は抜く)
この状態で下画像のように「COM:」右の検索窓をクリックしてください。

M5StackシリーズのM5Burnerの使い方

現在パソコンが使用している通信ポートのリストが表示されます。
ここでマイコンボードを接続してください。

M5StackシリーズのM5Burnerの使い方

マイコンボードを接続して再度「COM:」部をクリックすると、「COM」が一つ増えていると思います。
増えた「COM」がマイコンボードとの通信ポートなのでこれを選択します。

COM番号は使用するパソコンごとに異なります。上画像では「COM7」を選択

次に下画像のように「UIFlow(LITE)」欄の「Download」をクリックしてください。

M5StackシリーズのM5Burnerの使い方

M5StackシリーズのM5Burnerの使い方

「Download」をクリックすると上画像のようにダウンロードが始まるので終わるまで待ちます。

M5StackシリーズのM5Burnerの使い方

ダウンロードが終了すると上画像のような表示になります。
「Burn」というボタンが現れるのでこれをクリックします。


「Burn」をクリックすると下画像のようなウインドウが表示されます。
ここでお使いのWiFi環境の「SSID(接続先名)」と「Password(接続パスワード)」を入力して「Start」をクリックします。

M5StackシリーズのM5Burnerの使い方

「Start」をクリックすると下画像のようなウインドウが表示され「ファームウェア」の書き込みが始まります。

「Start Burn」の表示で書込みが始まり「Burn Successfully」が表示されたら書込み終了です。
右下の「Close」をクリックしてウインドウを閉じてください。

M5StackシリーズのM5Burnerの使い方

・コンフィグ設定「Apikey」の確認

次に使用するマイコンボード本体のコンフィグ設定をしていきます。

ここでは「ApiKey」というものが確認できます。「UIFlow」を使用するために重要なものになるのでここで確認してメモしておきましょう(コピーもできます)。

「ApiKey」とはマイコンボードごとに割り当てられる識別番号で「UIFlow」では「ApiKey」でマイコンボードを特定します。
固定ではなく「ファームウェア」を書き込むごとに自動で生成されて割り当てられます。

他にも通信モード「Start Mode」の選択を行います。
「Start Mode」は「UIFlow」の「ブラウザ版」と「インストール版」で以下のように設定が異なります。
・ブラウザ版:Internet Mode
・インストール版:USB Mode

それでは設定をしていきます。下画像のように「Configuration」ボタンをクリックしてください。

M5Burnerのコンフィグ設定

「Configuration」をクリックすると下画像のようなウインドウが表示されます。

このウインドウが表示されたらまず「ApiKey」をメモしましょう。
「コピーマーク」をクリックしてコピーすることもできます。

「Start Mode」の欄でマイコンボード本体の通信モードが確認できます。
まずはブラウザ版での動作確認を行いますので「Internet Mode」になっているのを確認してください。

その他の設定は変更せずに「Save」をクリックしてください。

M5Burnerのコンフィグ設定

「Save」をクリックすると書き込みが始まり、以下のように「Tips」が表示されるのでちょっと待つと「Success」が表示されて完了です。「OK」をクリックするとウインドウが閉じます。

M5Burnerのコンフィグ設定
M5Burnerのコンフィグ設定

・コンフィグ設定「Start Mode」の変更方法

「UIFlow」で「ブラウザ版」を使うか「インストール版」を使うかで「Start Mode」の設定を変更します。

まずは「M5Burner」で「Configuration」ボタンをクリックます。

M5Burnerのコンフィグ設定

コンフィグ設定ウインドウが表示されるので「Start Mode」の設定を以下のように設定します。


ブラウザ版の設定
M5Burnerのコンフィグ設定

「ブラウザ版」を使う場合は「Internet Mode」を選択してください。

M5Burnerのコンフィグ設定

「Internet Mode」になっているのを確認して「Save」をクリックします。

インストール版の設定
M5Burnerのコンフィグ設定

「インストール版」を使う場合は「USB Mode」を選択してください。

M5Burnerのコンフィグ設定

「USB Mode」になっているのを確認して「Save」をクリックします。

Start Modeの「App Mode」は「アプリケーションモード」で本体に書き込まれたプログラムを実行するモードです。このモードに設定した時はマイコンボード単体で書き込んだプログラムの動作が可能ですが「UIFlow」との通信による実行(RUN)や書き込みができなくなります。プログラムを修正したい時は「Start Mode」を変更してからやり直しましょう。

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

「M5Stackシリーズ」を初めて使用する場合はUSBドライバのインストールが必要です。
既にインストール済の方は不要です。

USBドライバ「CP210x_VCP」のインストール方法は以下のリンクを参照してください。

USBドライバのインストール方法は → こちら

5.ブラウザ版 UIFlowの使い方

・UIFlowの起動と画面紹介

ブラウザ版の「UIFlow」を起動するためにはこちら →「https://flow.m5stack.com」へアクセスしてください。

下画像のような画面がブラウザで表示されます。
これが「UIFlow」のプログラム作成画面です。

UIFlowの画面紹介

・初期設定

「UIFlow」が起動したらマイコンボードとの接続設定を行います。
画面右上の設定ボタンをクリックすると下画像のように「バージョン」の切換や「アップデート情報」のメニューが表示されるので、一番下の「設定」をクリックしてください。

UIFlowの初期設定

「設定」をクリックすると下画像のようなウインドウが表示されます。
ここで「Apikey」の欄に「M5Burner」で確認した「Apikey」を入力してください。

次に使用するマイコンボードを選択します。
今回は「ATOM LITE」を例に紹介しますので、下画像のように「ATOM LITE」の画像をクリックして「OK」をクリックしてください。

UIFlowの初期設定

「OK」をクリックすると下画像のように画面左に選択したマイコンボード、今回は「ATOM LITE」が表示されます。

画面右上に「接続済み」と表示されれば初期設定は完了です。
画面左下にも「接続済み」と表示され、入力した「Apikey」が表示されます。

UIFlowの初期設定

・主なプログラミングコマンドの紹介

ほんの一部ですがプログラミングコマンドについて紹介します。
画面中央付近の「プログラミングコマンドエリア」の各項目をクリックすると下画像のようにプログラムコマンドの一覧が表示されます。

UIFlowのコマンド紹介

・イベント
 ここにはほぼ毎回使用する「ずっと」というコマンドがあります。
 この「ずっと」は電源ON中に常に実行させておきたいプログラムを書く時に使用します。
 他にも「ボタン」を押した時に実行させたいプログラムを書くためのコマンド等があります。

・RGBカラー
 ここでは本体に内蔵しているLEDを制御するプログラムがあります。
 本体に対象のLEDが無い場合は実行しても無効です。

・論理
 ここでは条件分岐等を行うためのコマンドがあります。
 「C言語」等の「if文」はここにあります。

「コマンドエリア」の一番上に「search」と書かれた検索窓があります。
ここでコマンドの検索ができますが日本語に対応していないため、検索するにはアルファベットで入力する必要があります。
例えば「もし~」なら「if」、文字表示関連の「テキスト」なら「text」等です。

・プログラムの作成方法

プログラムの作成方法について紹介します。
プログラムは下画像のようにコマンドのブロックを組み合わせるように作成します。

UIFlowでLチカプログラム

「Setup」の下に突起があります。

UIFlowでLチカプログラム

ここに「ずっと」というコマンドの凹部をマウスの左ボタンを押したまま近づけると、背景の一部が黒くなります。

UIFlowでLチカプログラム

この状態でマウスのボタンを離すと「Setup」に「ずっと」のコマンドが吸い付きます。


UIFlowでLチカプログラム

「ずっと」コマンドのように、間にスキマのあるコマンドの場合

UIFlowでLチカプログラム

他のコマンドをスキマに近づけると、スキマが広くなります。

UIFlowでLチカプログラム

この状態でマウスのボタンを離すと、その隙間にぴったりはまります。


簡単な「Lチカ(LEDを点灯させる)」プログラムを組んでみましょう。

コマンドエリアから、下画像のようにコマンドのブロックをプログラム作成画面に置いてください。

UIFlowでLチカプログラム

UIFlowでLチカプログラム

準備したブロックを上画像のように組み合わせてみましょう。

UIFlowでLチカプログラム

ボタンを押した時にLEDの色を変えたいので、上画像のように片方の「赤色」の部分をクリックして「青色」に変更しましょう。


これで「Lチカ」プログラムが完成です。
このプログラムは以下のように動作します。

「もし、ボタンAが押されて(pressed)いれば、LEDが赤色に点灯し、ボタンAが押されてなければLEDを青色に点灯します。」これを「ずっと」繰り返し続けます。

UIFlowでLチカプログラム

・プログラムの実行と動作確認

作成したプログラムを実行してみましょう。

プログラムを実行するには、下画像のように「RUN」をクリックしてください。
本体に書き込んだ「ファームウェア」によって、本体で動作を確認することができます。

UIFlowのプログラム実行(RUN)

ここではまだ本体には書き込まれていないため、電源を落とした場合は再度「RUN」をクリックする必要があります。

本体に書き込むには、隣の「ダウンロード」ボタンを押します。
しかし「ダウンロード」を押すと本体の「Start Mode」が「App Mode」に切替わるため、その後続けて動作確認や書込みができなくなります。

再びプログラムを修正して動作確認するには「M5Burner」で「Start Mode」を「Internet Mode」に変更してから「UIFlow」で「RUN」をクリックする必要がありますので、プログラムが完成するまで「ダウンロード」は押さない方が良いです。

「M5Burner」での「Start Mode」の変更方法はこちら →「上ページへ移動


「ATOM LITE」本体では下画像のようにボタンを押すことによってLEDの色が変化することが確認できると思います。

ATOM LITEのLED点灯動作確認

6.インストール版 UIFlowの使い方

「UIFlow」にはWiFiの無い環境でも使用できるように「インストール版」の「UIFlow-Desktop-IDE」があります。

「ブラウザ版」は「Apikey」で本体を特定してWiFi通信でデータの転送を行いますが「インストール版」ではUSB接続でデータの転送を行います。

「Apikey」の代わりに「USBポート」の設定を行う以外はほぼ同じですが細かいところが少しづつ違います。
また「ブラウザ版」にあるコマンドが無かったり、更新が遅いためWiFi環境がある場合は「ブラウザ版の使用をおすすめします。

・ダウンロードと起動

まずはこちらのページ →「Dounload|M5Stack-Store」にアクセスしてください。

下画像のようなページが表示されるので「SOFTWARE」の中の「UIFlow-Desktop-IDE」の「Download」からお使いのOSに合わせて選択します。
今回は「Win10 x64」をクリックします。

UIFlowインストール版の設定

ファイルのダウンロードが始まるので終わるまで待ちます。
ダウンロードが終わったらファイルを開いて圧縮ファイルを展開していきます。

お使いのOSによってファイルの開き方は異なります。
「Google chrome」と「Microsoft Edge」の場合はそれぞれ下画像のようになります。

・Google Chromeの場合
UIFlowインストール版の設定
・Microsoft Edgeの場合
UIFlowインストール版の設定

「開く」をクリックするとファイルの展開が始まるのでしばらく待ちます。

UIFlowインストール版の設定

ファイルの展開が終了すると「ダウンロード」フォルダに「UIFlow-Desktop-IDE」フォルダができているので開くと下画像のように「UIFlow-Desktop-IDE.exe」があるのでクリックして開きます。

UIFlowインストール版の設定

開くとまず「設定」ウインドウが開いてくるので初期設定を行います。


・初期設定

パソコンとマイコンボードを接続しているUSBポートを「COM」に設定します。
(「M5Burner」で設定したCOM番号と同じです。)
次に使用する「Device(マイコンボード)」を選んで「OK」をクリックします。

UIFlowインストール版の設定

初期設定が完了すると下画像のような画面が表示されます。
「ブラウザ版」とほぼ同じですが「RUN(実行)」ボタンは画面右上にあります。

プログラムの作成方法は「ブラウザ版」と同じです。

UIFlowインストール版の設定

7.まとめ

「M5Stackシリーズ」でビジュアルプログラミングを行うための「UIFlow」の使い方について紹介しました。

「UIFlow」では専用のファームウェア書込みソフト「M5Burner」を使用してマイコンボードの設定を行いパソコン経由でマイコンボードのプログラミング実行や書き込みを行います。

「ブラウザ版」と「インストール版」があり、「ブラウザ版」では「Apikey」で本体を特定してWiFi通信でデータの転送を行い「インストール版」ではUSB接続でデータの転送を行います。

「インストール版」は更新が遅く「ブラウザ版」にあるコマンドが無かったりするので、WiFi環境がある場合は「ブラウザ版」の使用をおすすめします。

プログラムの作成はブロックを組み合わせるように作成できるため感覚的に組み合わせてどんな動きになるかいろいろ試してみましょう。

とは言え、実際に動作するプログラムにするにはある程度のルールがあり、これは「C言語」や「python」等のプログラム言語とほぼ同じです。
ビジュアルプログラミングを体験することで、今後本格的にプログラミング言語を学ぼうとした時に理解しやすくなると思います。

「まずは動かす!そして興味がもてたら本格的なプログラミングにも挑戦してみましょう♪」

当ブログでは「C言語」をメインにプログラミング言語の初歩的なところを紹介しています。
「C言語」の学習にも今回使用した「ATOM LITE」等のマイコンボードは動かしながら学べるためプログラミング学習に最適なツールと思います。

以下のリンクで「C言語」を使用した「マイコンボード」の開発環境やプログラミング方法も紹介していますので確認してみてください。

プログラミング初心者おすすめ最短ルートは → こちら
「C言語」を使用したプログラミング方法については → こちら

コメント

  1. やまねこG3 より:

    とても丁寧で、とても分かりやすかった。
    ありがとうございました。多謝(=^・^=)

    • logikara より:

      コメントありがとうございます。大変励みになります♪
      自分も理解しながら書いてますので、ついつい長くなりがちなのですが(^^;)
      少しでもお役に立てたのであれば幸いです。

タイトルとURLをコピーしました