クリエイター手抜きプロジェクト[576]IoT M5 Stack編 ブロックでプログラミング
── 古籏一浩 ──

投稿:  著者:



今回は、M5 Stackを使ってプログラミングしてみます。M5にはいくつか種類があります。M5 Stack BASIC、Fire、GRAY、Stickなどです。また、IoT Starter KitのM5GO、M5Go LITEなどもあります。

M5というと、1980年代にSORDから発売されていたパソコンもM5という名称でした。今回のM5 StackとSORD M5は何の関係もありません。

・M5
https://m5stack.com/

https://m5stack.com/product#core


・SORD M5
https://ja.wikipedia.org/wiki/M5_(コンピュータ)






個人的にはIoT機器の中では、M5が一番いい設計ではないかと思ってます。M5は必要なものを重ねていく(つまりSTACK「スタック」)ことで、好きな機能を追加して使うことができます。

USB(Type C)やUART、WiFi/BLE、スピーカーやマイクはもちろん汎用ポートも多く備えています。液晶画面は320×240ピクセルでカラー表示も可能です。

・モジュール
https://m5stack.com/product#module


モジュールはどんどん追加されています。M5関係は進化/進歩がとにかく速い。中国だからというのはあるのかもしれませんが。検索して出てくる数か月前の記事は、若干参考になるかも程度で、なるべくなら一か月以内の記事を見た方がいいんじゃないかというほどです。

M5 Stackが出た時に、M5 Stack BASICとFIREを購入したのですが、開発環境構築に少し手間取っているうちに、次々と開発環境もモジュール数も発売される関連デバイスも、あっという間に変わってしまいました。

当初はArduino IDEで開発かなということでしたが、昨年からはUI.Flowで手軽に作れるようになっていました。おまけに手軽にプログラムが作れるようにブロックプログラミング環境まで用意されていました。

M5 Stack本体だけ購入しても、あまり面白くないのでここではSwitch Science(スイッチサイエンス)から発売されている「M5GO Starter Kit」を使うことにします。

・M5 Go Starter Kit
https://www.switch-science.com/catalog/3875/


ちなみにレゴブロックを持っているなら、レゴブロックを差し込んで使うこともできます。M5 Stackは最初にWiFiに接続する必要があります。

ブロックプログラミングを行う場合は、クラウド経由になるためです。セットアップの方法は以下のページにあります。
http://mag.switch-science.com/2018/07/09/m5go-handson/


ところが、すでに、最新版では変わってしまっていて、途中までしか参考にならないでしょう。

電源を入れたら、3つのボタンのうちWiFiセットアップを行うプログラムを起動します。接続するWiFiを選択しパスワードを入力します。うまくいけば画面にQRコードとデバイスIDが表示されます。デバイスIDはCCDA77といった文字列になります。

なお、他のプログラムが動作してしまったりして、このQRコード画面が表示されない場合は、電源ボタンを押してから表示される画面で「Upload」のボタン(一番左側のボタン)を押して下さい。

文字列が表示されたら以下のページにアクセスします。
http://flow.m5stack.com/


最初にApi Keyや使用する言語などを選択します。Api KeyはM5 Stackの画面に表示されているCCDA77といった文字列です。文字列をそのまま入力します。

Languageは日本語を選択します。DeviceはCoreを選択します。なお、M5 Stick(小型のもの)を使っている場合はStickを選択します。

テーマカラーは好みのものを選択してください。FirmwareでWindowsとMacOSがありますが、今回は特に必要がありません。

あとはOKボタンを押せば準備完了です。

なお、この設定は後からでも変更できます。その場合は、開発画面右上にある三をクリックして表示されるメニューから「設定」を選択します。すると、Api Keyなどを入力する画面になります。

それでは、簡単なところで文字を表示してみましょう。ブロックプログラミングだからブロックを配置といきたいところですが、M5 Stackの場合はブロックすら不要です。開発画面左上にある「Title」というアイコンをドラッグして、その下にあるM5画面に配置します。

これで終わりです。画面右上にある▼の実行ボタンをクリックすればM5 Stackの画面に、Titleの文字と青いバーが表示されます。

表示される文字がTitleではつまらないので、任意の文字に変えてみましょう。開発画面のM5の画面に配置したTitleの文字をクリックしてください。

すると、ポップアップダイアログが表示されます。textの欄に表示したい文字を入力します。backgroundColorは文字を表示する背景色になります。

また、画面全体の背景色を指定したい場合は、M5画面内をクリックするとポップアップダイアログが表示されます。backgroundColorの欄をクリックすると、カラーピッカーが表示されますので、表示させたい色を選択します。

▼のボタンをクリックして実行してみましょう。指定した色と文字がM5 Stackの画面に表示されたでしょうか。

他にも文字を表示する方法はあります。TitleではなくLabelをM5の画面に配置して、文字を表示させることができます。この場合、文字のフォントや表示位置などを指定することができます。

ブロックを使わなくてもできてしまうので、とても簡単です。もちろん、Pythonなどのプログラム言語を使って書くこともできます。M5 Stackの場合、様々な開発環境や手段が用意されているのも利点と言えます。VS Codeでも開発できるはずです。

次回はグラフィックを扱ってみましょう。


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


ちなみに、M5 Stackは性能がいいので、レトロPCのエミュレーターを移植して動かしている人もいます。小さいので腕時計として使えなくもありませんが、防水じゃないので、そこらへんは気をつけないといけません。

新元号は令和ということでゼロサム。0+と書けて何か楽そう。(しかし、発表から一週間経ってるので、ネタ的に古いんだろうなあ)

・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/