M5Stack公式の Twitterアカウントのツイートで、UIFlow側の対応が先行してお知らせされていた、「M5Station をビジュアルプログラミングの UIFlow で扱う話」です。
※ この記事では、Webサイト上で開発が行える UIFlow を対象とします
上に示したツイートが行われた時点と、その後しばらくの間は、M5Station を UIFlow で利用するためのファームウェアが提供されておらず、実機でプログラムを動かすことができない状況でした。
その後、8/16 の夕方ごろからファームウェアの提供が始まったため、それを利用可能になった当日にさっそく試してみたというのが、今回の記事の内容です。
今回利用したデバイス「M5Station-BAT」
今回、自分が利用したデバイスは、以下の写真にうつっている「M5Station-BAT」です。
M5Station-BAT は、2種類ある M5Station というデバイスのうちの片方です。2種類のデバイスは、以下のスイッチサイエンスさんのサイトで購入可能です。
- M5Station-BAT（電池なし） - スイッチサイエンス
- M5Station-485 - スイッチサイエンス
自分が購入したほうの「M5Station-BAT」が「M5Station-485」と異なる部分は、3.7V 18650セルのバッテリが搭載可能という点です。「M5Station-485」のほうは、RS-485規格からの通信・電源供給ができるようになっています。
M5Station とは？
M5Station-BAT の話をしましたが、「そもそも、M5Station はどんなデバイスか？」という話を記載していませんでした。
その部分も少し記載します。以下の記事や上で掲載したスイッチサイエンスさんの販売ページに書かれている内容を引用すると 「M5Stack社が発売した、工業用途向け開発プラットフォーム」 です。
※ 仕様の詳細は、上で掲載したスイッチサイエンスさんの販売ページを見ていただくのが分かりやすいかと思います
M5Station は、過去に M5Stack社が販売しているデバイスのように、Wi-Fi/Bluetooth の両方を搭載していて、外から分かる物理的な部分に関するところでは「ディスプレイやボタン、Grove互換のコネクタなど」が利用可能です。
以下は、個人的に気になった特徴・ポイントです。
試した内容
動作している様子とプログラムの内容
今回、UIFlow で M5Station を動かす最初のお試しの結果と、作成したプログラムは以下のとおりです。
作成したプログラムの内容ですが、M5Station の 3つの入力用ボタン（A/B/C ボタン）を押すと、ディスプレイの背景・ディスプレイに表示された文字が変化するというシンプルなものです。
おおまかな手順
作成したプログラムと、それが動いた時の様子は上に書いたとおりなのですが、その前段階の話も記載しておきます。
「ブラウザ上で動作するUIFlow」を使って M5Station を動かす手順は、おおまかには以下のとおりです。
- ドライバをダウンロードしてインストールする
- M5Burner（ファームウェアを書きこむソフト）をダウンロードしてインストールする
- M5Burner で M5Station用のファームウェアをダウンロードして、M5Station への書き込みを行う（Wi-Fi に関する設定も書きこむ）
- ファームウェアが書きこまれた M5Station の画面に表示される APIキーを使って、UIFlow と M5Station を紐付ける
- UIFlow でプログラムを作成し、M5Station上で実行させる
ドライバ・M5Burner を準備する
上記の ドライバ・M5Burner のダウンロードは、M5Stack社のサイトから行えます。
ドライバは、以下のページ内の「USB DRIVER & OPEN SOURCE LIBRARY」というところでダウンロードできます。ご自身の環境に合わせて「CH9102_VCP_SER_MacOS v1.7、CH9102 MacOS(M1 Silicon)、CH9102_VCP_SER_Windows」のいずれかをご利用ください。
●m5-docs
https://docs.m5stack.com/en/download
M5Burner については、同じページ内の「UIFLOW FIRMWARE BURNING TOOL」というところでダウンロードできます。こちらもドライバと同様、ご自身の環境に合わせたものをダウンロードしてください。
●m5-docs
https://docs.m5stack.com/en/download
M5Burner を使う
M5Burner（v3）の使い方は、以下の記事で詳しく解説されていますので、こちらをご覧ください。以下のページでは上記のドライバ周りの話にも触れられています。
●M5Burner v3の使いかた
https://zenn.dev/saitotetsuya/articles/m5stack_m5burner_v3
M5Station用のファームウェアは、M5Burnerの左メニュー内の 「STATION」を選んで出てくる「UIFlow_Station」です（以下の画像で示したもの）。
記事執筆時点では、画像右上に「Alpha」と書かれているように、αバージョンになります。
上記の画像の右側のほうで、赤矢印で示した「Download」を押すことで、ファームウェアをダウンロードできます。その後の書き込みなどは、上記の記事を見つつ進めてみてください。
APIキーを確認する
Wi-Fi の設定・ファームウェアの書き込みが完了したら、M5Station が再起動します。
起動後は、画面上に APIキーが表示されるのですが、これを UIFlow側で利用することになります。以下は、APIキーが表示されている様子です（※ APIキーの部分をぼかしています）。
APIキーが表示されている状況になったら、開発に進みましょう。
UIFlow で開発可能な状態にする
ブラウザで UIFlow のサイト（ https://flow.m5stack.com/ ）にアクセスしたら、そこで表示される以下の画面で APIキーを入力してください。また、言語（Language の部分）は「日本語」を選んでおきましょう。
さらに画面を下にスクロールすると、デバイスを示すアイコンが並んでいるので、M5Station に該当するものを選んで OK を押してください。
それらの入力・選択が完了したら、右下にある緑色の「OK」ボタンを押してください。そうすると、開発用の画面が表示されます。
今回の記事ではプログラムの作成方法の詳細は省きますが、この画面でプログラムを作成します。
プログラムを作成した後は、画面右下の「Run」と書かれた青いボタンを押すことで、プログラムを M5Station で実行できます。
余談
今回の内容を急ぎ試した背景
今回、M5Station用のファームウェアが公開されてからすぐに開発を試していましたが、その背景には同日の夜に開催されたイベントでの発表がありました。
●IoT縛りの勉強会! IoTLT vol.90 @秋葉原+YouTube - connpass
https://iotlt.connpass.com/event/255506/
発表準備に関しては、ファームウェアが公開されなくても問題ないよう、ひとまずは Arduino IDE を使ったお試しもやっていました。
その後、UIFlow 周りの状況を見守りつつ、発表当日の昼頃に公式の Twitterアカウントに質問を送ってみたりもしました。
その質問にはすぐに回答してもらえて、「今日の午後」とのことでした。
その後は、15時ごろと18時ごろに状況を確認してみていたところ、18時ごろの時点でファームウェアが利用できるようになっていたのが確認できたため、急ぎ試してイベントの発表スライド・内容にもその話を追加したという流れがありました。