クリエイター手抜きプロジェクト[594]IoT M5StickC編 UIFlowで時計を作成する(前編)/古籏一浩

投稿:  著者:  読了時間:9分(本文:約4,000文字)


今回は、M5StickCとUIFlowを使って、簡単な時計を作成してみます。といっても、簡単に開発するところまで行かないので、二回に分けて説明します。これまではM5Stackを使いましたが、M5StickCはM5Stackよりも、さらにコンパクトなIoTデバイスです。

・M5StickC
https://www.switch-science.com/catalog/5517/

実はM5StickCの前にM5Stickというのがありましたが(持ってはいるけど)、現在では製造販売とも行われていません。また、似たような名前でM5StickVというデバイスもあります。

・M5StickV
https://www.switch-science.com/catalog/5700/

こちらは、RISC-V(リスクファイブ)というCPUを搭載した意欲的な製品です。というか、こんなものをあっさりと出してくるあたりが凄いのですが、今回はそれはおいておきましょう。




手軽にブロックプログラミングUIFlowで使うなら、間違えずにM5StickCの方を購入しましょう。ただ、このM5StickCは人気デバイスなので、在庫0ということが多く入手が難しいかもしれません。在庫があったら即買いですが、ここでちょっと注意しないといけないことがあります。

M5StickCに限らずM5Stackもですが、製造ロットによって搭載されているセンサーICや液晶が異なります。同時期に複数購入すれば同じものが来る可能性が高くなりますが、そうでない場合、同じ製品が来る保証がありません。

M5StickCも4台購入しましたが、そのうちのひとつはUSBケーブルをつないでも電源も入らず、熱くなるだけでした。これは、このロット特有の問題みたいで、G0と3V3を線で接続(もしくは抵抗)を接続すれば起動します。ホームページにもこのような解決方法が掲載されています。また、有志の方々も情報を掲載しています。

https://macsbug.wordpress.com/2019/07/09/m5stickc-start-adapter/
http://sasapea.mydns.jp/2019/07/11/m5stickc-start-adapter/

その後のロットでは、この問題はなさそうです。少なくとも、この後に購入したM5StickCは正常に起動しています。起動しないM5StickCの中には、ファームウェアを書き込めないものもあるので、なるべく新しいM5StickCを購入した方がよいと思われます。(が、よさそうというだけで保証はありません)

それではUIFlowを使って、M5StickCのプログラムを作成してみましょう。購入した時のM5StickCには、UIFlowを使うためのファームウェアが書き込まれていません。そこで、以下のページからM5Burnerをダウンロードして、ファームウェアの書き込みを行います。

https://m5stack.com/pages/download

ファームウェアの書き込み方法ですが、macOS版は以下に用意しておきましたので参考にしてください。

http://www.openspc2.org/reibun/M5/UI-Flow/1.3.2/setting/5001/

なお、セキュリティポリシーに引っかからないように注意してください。システム環境設定のセキュリティと、プライバシーのカテゴリでダウンロードしたアプリケーションの実行許可のところです。なお、どうしてもうまくいかない場合は、コマンドラインから全部のアプリケーションを許可するコマンドを入力してみてください。

sudo spctl --master-disable

それでも駄目な場合は、El Capitanなど古いmacOSであれば、あっさりと書き込むことができます。

UIFlowのファームウェアはいくつかありますが、バージョン1.3.2を書き込みます。UIFlow 1.2.3のバージョンもありますが、こちらはM5StickCがサポートされていないと思われます。ですので、M5StickCの場合バージョン1.3.2以上のファームウェアを書き込んでください。

ファームウェアを書き込む場合は、M5StickCについてきたUSB Type Cケーブルを使ってMac/Windows/UNIXマシンと接続してください。接続したら、接続したポートと、SeriesでStickCを選択すればOKです。通信速度は自動的に設定されます。あとは、Brunボタンをクリックするだけです。数分とかからずファームウェアの書き込みが終了します。

ファームウェアを書き込んだだけでは、まだUIFlowでプログラムを作成することはできません。ファームウェアを書き込んだ後に、WiFi接続設定を行います。

M5StickCの電源を入れると、WiFiの設定を行うためにM5StickC自体に接続するように指示されます。スマートフォンやパソコンで、WiFiの一覧からM5StickCの名前を選択します。

選択し接続したら、Webブラウザで192.168.4.1のアドレスを入力します。SSID、Passwordの欄に接続するWiFiの情報を入力します。この手順についてはスイッチサイエンス社に解説がありますので、こちらを参照してください。

https://docs.m5stack.com/#/ja/quick_start/m5stickc/m5stickc_quick_start_with_uiflow

無事にWiFi設定が終わったら、UIFlowを使ったM5StickCの開発準備が完了です。なお、M5Stackには多数に便利なUnitがありましたが、M5StickCにもいくつかのユニット(M5StickCではHat:ハット)があります。

ただし、UIFlowでHATを使うには、UIFlow 1.3.5β以上でないと使うことができません。1.3.2ではメニュー項目にも出てきません。1.3.5βであれば、Unitの横にHatの文字があるので、それをクリックすることでHatを使うことができます。

・M5StickC PIR Hat(AS312搭載)
https://www.switch-science.com/catalog/5756/
・M5StickC Speaker Hat(PAM8303搭載)
https://www.switch-science.com/catalog/5754/
・M5StickC ENV Hat(DHT12/BMP280/BMM150搭載)
https://www.switch-science.com/catalog/5755/

ということで、次回ようやくUIFlowを使ってM5StickCで時計を作ります。

【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

来月の6日に、obnizの本が出ます。Web技術をそのままIoTデバイスに利用できます。IoTでセンサーとか使って制御したりしてみたいけど、Webしか分からない人におすすめです。ちなみにハンダ付けとかはありません。基本的にobnizに差し込むだけで、制御できるような感じにしてあります。

ものによってはブレッドボード等を使っていますが、差し込むだけなので初心者でもそれなりに何とかなるのではないかと思います。

ちなみに、差し込むだけで使える多数のセンサーは海外で売られています。元々はマイクロビット用のものですが、obnizでも半分くらい使用することができます。本の発売に合わせて、使用しているパーツのキットも出るらしいのですが、ここらへんはまだ未定のようです。

・みんなのobniz入門
https://www.amazon.co.jp/dp/4865942165/

・InDesign自動化サンプルプログラム逆引きリファレンス上/下
https://www.amazon.co.jp/dp/4844396846/
https://www.amazon.co.jp/dp/4844396854/

・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/