M5Stack

【M5Stack】M5Stackのセットアップ(UIFlow)を分かりやすく解説!【ビジュアルプログラミング】

m5stack-setup-uiflow.png

<この記事について>

  • 「M5Stackのセットアップがよく分からない…」、「UIFlowの使い方を知りたい!」などと悩んでいる人のために書きました。
  • この記事を読むことで、実際にM5StackをUIFlowという開発環境で動かす方法が分かります。
  • 結論としては、「USBドライバをインストール」→「M5Stackにファームウェアを入れる」→「UIFlowの初期設定」→「プログラムを作成して実行」という手順でM5Stackを動かすことができます。

こんにちは!こんばんは!

ちゃとらです(・ω・)/

M5Stackを制御するためにはArduino IDEなどで可能ですが、プログラミングが苦手な人や未経験者にはハードルが高いです。

しかし、UIFlowというソフトを使えば誰でも簡単にM5Stackを制御することが可能です。

ちゃとら

M5Stackのセットアップ(UIFlow)ついて分かりやすく解説していきます!

m5stack-setup-arduino.png
【M5Stack】M5Stackのセットアップ(Arduino)を分かりやすく解説!【Arduino IDE】この記事では、M5Stackのセットアップ(Arduino IDE)について解説しています。手順としては、「USBドライバをインストール」→「ボードマネージャをインストール」→「ライブラリをインストール」→「プログラムを書いて実行」となっています。...

今回扱うM5Stack

M5Stackの種類M5Stack FIRE(V2.6)
値段49.90ドル(税別)
(販売価格は7700円程 投稿日現在)
生産国中国
サイズ5.4 x 5.4 x 3.05 cm

今ぐらいの時期にM5Stack FIREを通販で購入すると、7700円程かかります。

かなりコンパクトなデザインとなっています。多くのM5Stackには加速度センサやジャイロセンサなどが搭載されているかつWi-Fi接続やBluetooth通信も可能です。

別売りの専用のユニットを購入すれば距離計測やカメラなどが可能となるので、できることの幅が広がります。

UIFlowとは

とあるモブ

ちょ、ちょっと待って、当たり前のようにUIFlowって言葉が出てきたけどUIFlowって何?

ちゃとら

と思われている人もいるはずなので、UIFlowについて簡単に説明します。

UIFlowとは、M5Stackシリーズ専用の開発環境です。UIFlowにはブラウザ版とインストール版両方あるので、オンライン・オフラインどちらの環境でも使うことが可能です。

UIFlowでは、ビジュアルプログラミング言語のBlocklyかマイコンを操作可能な言語であるMicroPythonいずれかを使ってM5Stackを制御します。

ビジュアルプログラミングとは、処理が書かれたブロックを組み合わせてプログラミング行います。コードを記述するのではなく処理に必要なピースを組み合わせるだけなので、視覚的に分かりやすくかつプログラミング初心者にも使いやすいです。

代表的なビジュアルプログラミングとしてはScratchやVISCUITなどがあり、小学校のプログラミング教育として導入されている物もあります。

ちゃとら

要はUIFlowとは、プログラミング初心者でも簡単に操作できるビジュアルプログラミングと細かく凝った制御も可能なコード記述タイプのプログラミング両方を兼ね備えた開発環境です!

使い方

UIFlowの使い方の手順は以下の通りです。

  1. USBシリアルドライバをインストールする
  2. M5Burnerでファームウェアをダウンロードする
  3. UIFlowで初期設定をする
  4. プログラムを作成して実行する

インストールや各設定などでやることが多くそこそこ時間がかかります。

ちゃとら

一気に行うのが面倒だと思ったら、区切りをつけましょう。

中途半端に止めてしまうのが一番よくないですね…

USBドライバをインストール

今回扱うM5Stack(V2.6)はシリアル変換モジュールがCH9102Fなので、対応したUSBドライバをインストールする必要があります。

M5Stack FIREではなくてもV2.6のM5Stackだとしたらこれから紹介するUSBドライバをインストールしてください。

以下のリンクにアクセスしてOSごとに対応するドライバをダウンロードしましょう。

USBドライバを配布しているリンク

https://docs.m5stack.com/en/download(M5Stack公式サイト)

ドライバをダウンロード

Windouwsだったら「CH9102_VCP_SER_Windows」、Macだったら「CH9102_VCP_SER_MacOS」をダウンロードすればOKです。

ダウンロードできたらCH9102_VCP_SERのexeファイルを実行してドライバをインストールします。

シリアルドライバのインストールはこれで完成ですが、一応確認です。

M5StackとパソコンをUSB接続したら、スタートボタンを右クリック→「デバイスマネージャー」を選択し、デバイスマネージャーのウィンドウで「ポート(COMとLTP)」をクリックしてポート番号を確認します。

ポート番号を確認

M5Stackのポートに先程インストールしたCH9102ドライバが使用されていればOKです。

詳細な設定を知りたい人は以下のリンクを参考にしてください。

CH9102ドライバの導入方法を解説しているリンク

https://mag.switch-science.com/2021/11/01/m5stack-v2-6-changes/(スイッチサイエンスマガジン)

M5Burnerでファームウェアをダウンロード

UIFlowを使うためには、M5Burnerという専用のソフトでファームウェアをM5Stackに書き込む必要があります。

ファームウェアという言葉が出てきましたが、ここではM5StackというハードウェアをUIFlowというソフトウェアで制御可能にする物(ソフトウェア)という認識でOKです。

先程のUSBドライバ配布リンクと同じですが、以下のリンクにアクセスしてOSごとに対応するM5Burnerをダウンロードしましょう。

M5Burnerを配布しているリンク

https://docs.m5stack.com/en/download(M5Stack公式サイト)

M5Burnerをダウンロード

ダウンロードできたら「M5Burner.exe」を実行してM5Burnerを起動させましょう。

M5Burnerのウィンドウ

起動すると上のようなウィンドウが表示されます。ファームウェアを入れたいM5StackをパソコンにUSB接続し左上のCOMポートをクリックしてCOMを選択します。

COMポートの設定

今回はM5Stack FIREを使うので「UIFLOW(FIRE)」の「Download」をクリックしてダウンロードを実行します。ダウンロードが終わったら「Burn」をクリックします。

ただし、M5Stack BASIC,GRAY,M5GOだったら「UIFLOW(CORE)」、M5Stack CORE2だったら「UIFLOW(CORE2)」などM5Stackの機種によってダウンロードする物が異なるので注意です。

UIFLOWをダウンロード

Burnをクリック

「Burn」をクリックするとWiFi設定の画面が出てくるので、「SSID」にはネットワーク名を入力し「Password」にはネットワークの接続に必要なパスワードを入力し「Start」をクリックしましょう。

M5Stackに搭載されているESP32は2.4GHz帯だけに対応しているので、WiFiのSSIDは2.4GHz帯のネットワークを選択する必要があります。

WiFi設定

「Start」クリック後にM5Stackにファームウェアが書き込まれます。書き込みが完了するのに1~2分ほど時間がかかります。

「Start Burn」の表示でファームウェアの書き込み開始し「Burn Successfully」が表示されたら書き込みが完了するので「Close」をクリックしてウィンドウを閉じます。

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

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

書き込みが完了するとM5Stackが以下のような画面を表示します。

ApiKeyを表示するM5Stack

ここまでできたらファームウェアの設定は完了…ではなく、もう少しだけあります。次のコンフィグ設定が最後の設定となります。

コンフィグ(config)とは設定ファイルのことですが、UIFlowの環境設定だと思ってくれたらOKです。

先程ファームウェアの設定をしたUIFlowの「Configuration」をクリックします。

Configurationをクリック

クリックしたら「UIFlow Config」の画面が表示されます。上から順に必要なことを説明していきます。

「ApiKey」をメモしておきましょう。メモはスマホでもパソコンでも紙でも何でもOKです。右側にある青いアイコンをクリックすることでコピー可能です。

ApiKeyはあるソフトウェアの使用許可を特定の条件をクリアしたユーザーのみに許可するといった役割がありますが、ここではファームウェアとUIFlowを接続するのに必要な物だというイメージです。

「Start Mode」の設定はブラウザ版のUIFlowを使うなら「Internet Mode」を選択し、インストール版を使うなら「USB Mode」を選択しましょう。

「Wifi」には少し前にWiFi設定したこと同じSSIDとPasswordになっているのかを確認しましょう。

それぞれの設定が終わったら「Start」をクリックします。Successの画面が表示されたら「OK」をクリックし画面を閉じましょう。

コンフィグ設定

Successの画面

ファームウェアのダウンロードや設定はこれで完了です。

UIFlowの初期設定

ブラウザ版もインストール版もUIFlowの操作はほぼ同じですが、初期設定が少し異なるので説明していきます。

まずは、ブラウザ版からです。以下のリンクにアクセスするとUIFlowが画面に表示されます。

ブラウザ版UIFlowのリンク

https://flow.m5stack.com/

UIFlowの画面

UIFlowとM5Stackの接続設定をします。画面右上のメニューアイコンみたいな物にマウスカーソルを置き「設定」をクリックします。

設定の画面が表示されたら「Api Key」に先程メモしたApiKeyを入力し「言語」は日本語に設定しましょう。

そして、使用するM5Stackの画像を選択します。今回はM5Stack FIREを使用するのでM5Stack FIREの画像をクリックします。

それぞれの設定が終わったら「OK」をクリックしましょう。

設定をクリック

UIFlowの設定画面

設定が完了し左下に「接続済み」と表示されたらOKです。「接続済み」になっていない場合は「リフレッシュ」をクリックして更新しましょう。

接続済みを確認

ブラウザ版UIFlowの初期設定はこれで完了です。

次は、インストール版です。M5Burner配布リンクと同じですが、以下のリンクにアクセスしてOSごとに対応するUIFlowをダウンロードしましょう。

インストール版UIFlowを配布しているリンク

https://docs.m5stack.com/en/download(M5Stack公式サイト)

UIFlowをダウンロード

ダウンロードできたら「UIFlow-Desktop-IDE.exe」を実行してUIFlowを起動させましょう。

UIFlowのウィンドウが表示されたら設定画面が出てきます。

「COM」にはM5StackのUSB接続ポートを選択し「言語」は日本語に設定しましょう。

「Device」には使用するM5Stackの画像を選択します。今回はM5Stack FIREを使用するのでM5Stack FIREの画像をクリックします。

それぞれの設定が終わったら「OK」をクリックしましょう。

UIFlowの設定

設定が完了し左下に「接続済み」と表示されたらOKです。「接続済み」になっていない場合は「リフレッシュ」をクリックして更新しましょう。

接続済みを確認

インストール版UIFlowの初期設定はこれで完了です。

プログラムの作成と実行

実際にUIFlowを使ってM5Stackを制御してみます。

UIFlowでのビジュアルプログラミングについて細かく説明していくとめちゃくちゃ長くなってしまうので、詳しく知りたい方は以下のリンクを参考にしてください。

UIFlowの使い方(ビジュアルプログラミングなど)のリンク

https://m5stack.github.io/UIFlow_doc/ja/

今回はビジュアルプログラミングでM5Stackを動かしてみます。

まずは左側にある様々な図形が並んでいるアイコンから「Title」をクリックしながらM5Stackの画面上に引っ張て投下します(ドラッグアンドドロップ)。

「Label」も同じくM5Stackの画面上にドラッグアンドドロップします。

Titleとlabelを設置

次はプログラムのブロックを組みます。画面真ん中あたりに処理の一覧があるので「UI」→「タイトル」をクリックしたら一番上を選択し「setup」のブロックの下に接続します。

同じように「UI」→「ラベル」→一番上を選択→先程のタイトルブロックの下に接続します。

titleのブロックをクリック

setupの下に接続

labelのブロックをクリック

titleブロックの下に接続

このまま実行しても画面表示されますが何のひねりもないので、それぞれ設置したブロックの「””」で囲われている部分をクリックして表示させる文字を変更します。

「Title」には「Sample Title」,「Hello M5」には「Hello! M5Stack!」と打ち込みましょう。打ち込みが終わったら右下の「Run」を押してプログラムを実行します。

ここで「ダウンロード」をクリックしてもプログラムは実行されますが、M5Stackがアプリモードになってしまいその後のプログラムを書き込むことができなくってしまいます。

アプリモードの変更はM5Stackでの操作などで可能ですが少し面倒です…

なので、「ダウンロード」のクリックには注意です。

文字を変更して実行

プログラムを実行するとM5Stackは以下のような画面を表示します。

M5Stackに表示

こんな感じでUIFlowを使えばプログラムを記述しなくてもM5Stackを制御することが可能です!

まとめ

M5Stackのセットアップ(UIFlow)について

  1. USBシリアルドライバをインストールする。
  2. M5Burnerという専用のソフトを使ってM5Stackにファームウェアを入れる。
  3. UIFlowの初期設定を行う。
  4. プログラムを作成して実行する。
ちゃとら

UIFlowを使えば比較的簡単にM5Stackのプログラミングが可能です!

今回はここまでです。

ちゃとら(・ω・)/