前回、M5StickCの開封からどんな事ができるかなど簡単にご紹介しました。
今回は、プログラムを組みM5StickCで実際に動作させるための開発環境の整備をやっていきたいと思います。
M5StickCにプログラムを書き込んで動作させるには本体ファームウェアの書き換え作業およびプログラムを書くためのPCソフトのインストールが必要となってきます。
はじめての場合少し面倒な作業ではありますが、M5StickCを使ってプログラムを組むには必要な作業となり何度かやって雰囲気が掴めればそう難しい事ではありません。
M5StickCの開発環境にはArduino-IDEやUIFlowそしてESP-IDEが使えるのですが、まずはその使用環境に対応したPCソフトやファームウェアの書き換え作業が必要となってきます。
この作業はじめてだと結構つまずく方も多いと思いますので、詳しくご紹介していきたいと思います。（私も何度もやり直しました！）
今回こちらではM5StickCで1番使う頻度が高いと思われるブロックプログラミングを使ったプログラム方法、いわゆるUIFlowが使える状態にしていきたいと思います。
このUIFlowとは、機能が割り当てられたブロックをドラック＆ドロップで並べていくプログラム方法となり初心者の方でも直感的に扱う事ができるので敷居はかなり低いプログラム方法となります。
このプログラム方法が使えるのがM5StickCの大きな魅力の1つでもあり、小さなお子様でも扱えるので教育学習にも適しています。
目次
【M5StickC】ブロックプログラミング（UIFlow）開発環境 セットアップ手順！
まずはM5StickCにはどんな開発環境（プログラム方法）があるのか簡単にご紹介します。
M5StickC 開発環境
前回の記事で数件お問い合わせをいただきましたが、全く初めてだと少し戸惑う方も多いと思います。
理解を深めるためM5StickCで使える開発環境のことを先に少しご紹介しておきます。
実際にM5StickCを動かすには、UIFlowやArduino IDEなどの開発環境（プログラム方法）が用意されています。
まずはこれを理解する事で大まかな雰囲気が掴めるかと思います。
UIFlow（ブロックプログラミング）
まずは今回ご紹介するM5StickCで1番使う頻度が高いと思われるUIFlowと呼ばれるものです。
UIFlowはM5Stack社が開発した開発環境で、下図のように機能が割り当てられたブロックを組み合わせていく事でプログラムを行なっていきます。
直感的に行えるので、プログラム初心者の方でも比較的簡単で理解しやすいプログラム環境になります。
Arduino
次にArduino IDEです。
すでにArduinoを扱われている方や電子工作をある程度やられている方はこちらの方が一般的なプログラム方法になるのでしょうか。
ArduinoはC ++言語をベースにした開発環境となりますが、プログラム言語が必要なので上記UIFlowより敷居は高くなりますがさらに高度な事が出来るかと思います。（私は勉強中です）
また、ESP-IDEでの開発も可能なようですが、いろいろとご紹介すると分かりづらくなるので割愛させて頂きます。（実際にまだ使った事がないので！）
UIFlowとArduino IDEの開発環境の違いは？
M5StickCを使ってのプログラム環境は、UIFlowとArduino IDEがメインとなるかと思います。
今回はUIFlowでの環境を整えていきますが、理解しやすいように両者の違いを少しご説明しておきます。
UIFlowはブロックを組み合わせていく事でプログラムを行う開発環境で、初心者の方にも分かりやすく直感的に行う事ができます。
そして事前に（初回のみ）UIFlowで動作させるためのファームウェアをM5StickC本体に書き込んでおく必要があります。（今回やろうとしている作業です）
ファームウェアを事前に書き込んでいるため、あとは組んだブロック情報のみを転送する事により動作させる事が出来るため、プレビュー（動作確認）等が非常に早く行う事ができます。
はじめてだと何度もブロック（プログラム）を組み直して動作確認をするかと思いますが、その際の動作が非常に早くこれがUIFlowを使うメリットの一つでもあります。
それに対して今回は割愛させてもらいますが（別の機会に紹介したいと思います）Arduino IDEでは、ファームウェアとプログラムをコンパイルしてゴッソリM5StickCに書き込む形式となります。
そのため、ちょっとした短いプログラムでも動作確認をするには結構時間がかかります。
少し前置きが長くなってしまいましたが、それではM5StickCでUIFlowを使えるようにしていきましょう！
UIFlowには【デスクトップ版】と【ブラウザ版】がある
UIFlowには、【デスクトップ版】と【ブラウザ版】があります。
いきなりですが少しややこしいですね！
基本的にはどちらを使っても機能的には全く同じなので、使う環境に応じて使い分けるのがいいかと思います。
デスクトップ版UIFlow
簡単にご説明すると、PCにUIFlow用のアプリ（ソフト）をインストールしてM5StickCとPCをUSB接続して書き込みを行うのがこの【デスクトップ版UIFlow】となります。
プログラムの書き込みにはM5StickC本体をPCと毎回USB接続する必要がありますが、Wi-Fi環境を必要としないメリットがあります。
しかし次にご紹介する【ブラウザ版UIFlow】と比べるとファームウェアのアップデートが少し遅いため、どうしても最新のファームウェアのものを使いたいという場合には不向きとなります。
ブラウザ版UIFlow
それに対して【ブラウザ版UIFlow】では、Wi-Fi環境があればPCに事前にアプリをインストールしておく必要がなく、またブラウザベースで開発（プログラムの作成）を行なえます。
タブレット端末などWi-Fi環境さえあれば、あとはブラウザから使うことが出来ます。
またM5StickC本体もPCとの接続が必要ありません。（Wi-Fiアクセスポイント経由でデータのやり取りを行います）
ご自身の環境に合った方法を選択すればいいのですが、両方使えた方が何かと便利になるかと思います。
簡単にまとめてみるとこんな感じ！
| デスクトップ版 | ブラウザ版 | |
| Wi-Fi環境 | 不要 | 必要 |
| プログラムの書き込み方法 | USB経由 | Wi-Fi経由 |
| 対応OS | Mac / Windows / Linux | |
| ファームウェアのバージョン | 少し古いバージョンとなる | 最新のものが使える |
デスクトップ版UIFlowの設定方法！
まずはデスクトップ版UIFlowを設定していきます。
必要ないという方は次項のブラウザ版UIFlow設定方法まで飛ばしてください。
デスクトップ版UIFlowを使うには、以下のサイトからPCアプリ（UIFlow-Desktop-IDE）をダウンロード＆PCにインストールする必要があります。
参考 ソフトウェアダウンロードM5STACK
Windows / Mac / Linuxに対応しています。
ここではMac版でご紹介していきますが、他のOS版ではシリアルポートの表記や必要なドライバー等が変わってくるかと思います。
ダウンロード＆インストール完了後、初回起動時に【設定】画面が開くと思います。
あとでも設定しますが、【言語】に日本語・【Device】にStick-Cを選択して進めていきましょう。
そしてまずアプリのバージョンを確認します。
現在最新のアプリバージョンは、V1.4.5となっています。（2020年8月現在）
この確認をしたのはUIFlowでは事前にM5StickC本体内にUIFlow用のファームウェアを書き込んでおく必要がありますが（これからやろうとしている事です）、デスクトップ版UIFlowアプリを使う場合ファームウェアのバージョンを一致させておく必要があるからです。
バージョンが違う場合、後々こんな感じでバージョンを変えろという警告が出ます！
バージョンの確認が出来たら［メニュー］から［FirmwareBurner］を起動します。
左側の［STICKC］を選択し、M5StickC本体に書き込むUIFlowのファームウェアバージョンを選びます。
最新ファームはV1.6.2となっていますが、デスクトップ版アプリを使う場合先程確認したバージョンに合わす必要があるので、ここではV1.4.5を選択し［Download］をクリック。
【エラーが出た場合の対処法】
ここでMacの場合、このようなエラーが出る場合があります。（私の場合、もう1台のM5StickC設定時にも出ました！）
これは管理者権限？の話となります。
このエラーが出たら管理者権限でPCにログイン後、以下のファイルをダブルクリックして下さい！（分かる方はターミナルからコマンドを打ち込んでも可能です）
これでこの場合の問題は解決するかと思います。
Finderから［アプリケーション］⇒［UIFlow-Desktop-IDE］を選択し右クリックメニューから［パッケージの場所を開く］⇒Contents⇒MacOS⇒UIFlow-Desktop-IDEファイルをダブルクリック ！
次にダウンロードしたファームウェアをM5StickC本体に書き込みます。
M5StickC本体をPCとUSB接続します。
［COM］の項目に［usbserial-◯◯◯］が追加されるのでこれを選択。
あとは【Burn】をクリックするとファームウェアの書き込み作業が開始されます。
［Burn Successfully］と表示されれば無事書き込み作業は成功で、自動的にM5StickCが再起動します。
これでM5StickC本体内にUIFlowファームウェアが書き込まれました。
これでUIFlowでの開発環境が出来上がりました。
一応動作確認のためテストでLEDを点灯させてみましょう。
プログラム自体はLED点灯ブロックを［Setup］の下に繋げただけの簡単なものを作りました。
こんな感じ！
これを M5StickCに転送して動作させてみますが、プログラムの転送にはM5StickCを【USB Mode】にする必要があります。
USBモードで接続する
それではM5StickCを【USB Mode】にしてみます。
M5StickCが起動している状態で、左の［電源ボタン］を押すと再起動します。
そして再起動中に中央［ボタンA（M5と書かれたボタン）］を押すと【メニュー画面】に入る事ができます。
そこから［ボタンB］（右のボタン）を押し【setup】まで行き［ボタンA］で決定します。
ここから【USB Mode】を選択。
APIKEYとケーブルロゴがM5StickCの画面に表示されます。
これで【USB Mode】に設定でき、USBケーブル経由での書き込みが出来る状態になりました。
そして先程作成したLEDが点灯するテストプログラムを転送して実行させてみます。
［設定］画面から［COM］［言語］［Device］を設定。
「Disconnected（未接続）」表示なら［リロード］を押しM5StickCと接続します。
接続出来ていれば「接続済み」と表示されます。
あとは三角の再生ボタン？を押すとM5StickCにプログラムが転送され実行されます。
実際に書き込みたい場合、［ダウンロード］をクリックするとM5StickC本体にプログラムが書き込まれ起動時にこのプログラムが自動的に実行される形となります。
問題なければM5StickC内蔵のLEDが点灯していると思います。
これで完了です。
ブラウザ版UIFlowの設定方法！
次にブラウザ版UIFlowの設定方法です。
ブラウザ版では最新のファームウェア（2020年8月現在V1.6.2）を使う事ができます。
基本的には上記デスクトップ版UIFlow同様にM5StickC本体にファームウェアを書き込む作業から入ります。
ブラウザ版UIFlowではWi-Fiアクセスポイント経由でデータのやり取りが出来るためM5StickCとPCとをUSB接続する必要はありませんが、ファームウェアの書き込みの際には接続の必要があります。
ファームウェアの書き換えにはM5Burnerというソフトを使います。
以下のサイトからダウンロード＆インストールして下さい。
このM5Burnerというソフトは、先にご紹介したデスクトップ版アプリ（UIFlow-Desktop-IDE）内にも同じソフトが組み込まれています。
既にデスクトップ版アプリをインストール済みの方は新たにインストールする必要はなく、［FirmwareBurner］で起動することが出来ます。
ここからはデスクトップ版UIFlowとほぼ同じ作業となります。
M5Burnerを起動し［STICKC］を選択。UIFlowのファームウェアのバージョンを選択しダウンロードします。
ブラウザ版を使用の際は最新のファームウェアを使うことが出来ます。（2020.08現在最新はV1.6.2です）
【エラーが出た場合の対処法】
ここでMacの場合、このようなエラーが出る場合があります。
このエラーが出たら管理者権限でログイン後、以下のファイルをダブルクリックして下さい！
これでこの場合の問題は解決するかと思います。
Finderから［アプリケーション］⇒［UIFlow-Desktop-IDE］を選択し右クリックメニューから［パッケージの場所を開く］⇒Contents⇒MacOS⇒UIFlow-Desktop-IDEファイルをダブルクリック ！
ブラウザ版のみを使う場合は最新のファームウェアを使えばいいのですが、デスクトップ版も使いたい場合バージョンを上げてしまうと【デスクトップ版】の方が使えなくなってしまうので注意が必要です！
ダウンロードが完了したら、M5StickCをPCとUSB接続。
お使いのWi-Fi環境での【SSID】【Password】を入力し［Burn］でM5StickC本体にファームウェアを書き込みます。
書き込みが完了すればM5StickCが再起動しAPIKEYが表示されます。
その時、地球マークが青なら正常に接続されWi-Fi経由でプログラムを転送できる状態です。
これでPCとUSB接続することなくプログラムを転送出来ます。
現在最新のV1.6.2では画面表示やUI等少し変更されています。
無事Wi-Fi接続が完了したら、実際にテストプログラムを動かしてみましょう。
ブラウザ版のUIFlowは、Webブラウザからこちら（https://flow.m5stack.com/）にアクセスします。
起動するとバージョン選択画面が表示されました。
V1.4.5と最新のV1.6.2（Beta表示となっています）から選択出来ます。
M5StickC本体に書き込んだファームウェアのバージョンにより選択して下さい！
あとはデスクトップ版UIFlowと操作方法は全く同じです。
［設定］からM5StickCに表示されているAPIKEY、言語、Deviceを設定。
あとは［Disconnected（未接続）］なら［リロード］を押し［接続済み］表示を確認。
あとは同様に簡単なブロックで動作を確認してみます。
LED点灯ブロックを配置して［再生ボタン］を押してプログラムを転送します。
無事にM5StickCに転送されれば、本体LEDが点灯するはずです。
ポイント まとめ
M5StickCでUIFlowを使うには、【デスクトップ版UIFlow】と【ブラウザ版UIFlow】の2つがあります。
操作方法やUI等は同じですが、使えるファームウェアのバージョンやWi-Fiの有無により使い分ける形となります。
自宅などWi-Fi環境がある場所ではPCとケーブル接続が必要ない【ブラウザ版UIFlow】の方が使いやすいかと思いますが、PCさえあればどこでも動作させることが出来るのが【デスクトップ版UIFlow】の強みでもあります。
- 【デスクトップ版】【ブラウザ版】ともに初回にM5StickC本体にUIFlow用のファームウェアを書き込む必要がある！
- その際にデスクトップ版UIFlowではアプリのバージョンを確認し、それに対応した（同じバージョンの）ファームウェアを選択する必要がある！
- ブラウザ版UIFlowでは、書き込むファームウェアは最新のものが使える！
- 【デスクトップ版UIFlow】と【ブラウザ版UIFlow】の両方を使う場合は、デスクトップ版の方にファームウェアを合わせておく必要がある！
最後に！
UIFlowは用意された様々なブロックを組み合わせる事により直感的に比較的簡単にプログラムを組む事が出来き、非常に素晴らしい環境だと思いますが・・・事前にM5StickC本体にファームウェアを書き込んでおく必要があります！（初回のみ）。
そしてこの作業が初めてだと少し戸惑う方が多いと思います。
しかしファームウェアを事前に書き込んでいるので作成したブロックプログラムの動作確認もサクサク行う事ができ快適です。
またM5StickCはArduino IDEでも動作させる事が出来ます。
その際はゴッソリとファームウェアごと書き換える（上書きする）形となります。
そして再度UIFlowファームウェアに書き換えるとUIFlowとしてまた使えるようになり・・・
いろんな環境で試せる非常に優秀なデバイスですね、M5StickCって！
そして最後に・・・今回この作業をやるにあたり参考にさせて頂いたサイトをご紹介します。
M5StickCやArduinoに関する有益な記事を多数掲載されており、大変参考になりました。
コメントを残す