今回から新しいコーナー「M5Stackカフェ」が始まりました。このコーナーではM5StackやM5StickCにまつわる楽しい話題を紹介していきます。M5StackやM5StickCなどを使って、面白いもの、役に立つもの、役に立ちそうにないものなどを作ったり、面白いことをやっているユーザーさんを紹介したりする予定です。M5StackやM5StickCに興味のある方は是非チェックしてみてください。

第1回は、最初なのでM5StickCでプログラムを作る準備をして、LEDを点滅させてみます。

M5Stackシリーズ

このコーナーで扱うM5StackやM5StickCは、M5Stack社が作っているマイコン端末です。M5Stack社はマイコン端末以外にも温度センサやGPS、カメラ、小型のロボットカーなど、M5StackやM5StickCと組み合わせて使ういろいろな拡張ユニットも作っています。

M5Stackシリーズ

写真の左上がM5Stackの基本モデルのM5Stack Basic、その右がM5Stack Gray、M5GO、M5Stack Fireです。真ん中の列の左から3つはM5Stackに挟み込んで機能を拡張するモジュール、その右のオレンジ色の端末がM5StickC、右端の青い端末はM5StickVです。一番下の列はセンサなどの拡張ユニットです。

M5Stackは「エムファイブ・スタック」と読む人と、「エムゴ・スタック」と読む人がいるようで、どちらが正解ということではなさそうです。ちなみにM5Stack社CEOのJimmy Laiさんは「エムファイブ・スタック」と言っていましたが、社内では「エムウー(中国語の五)スタック」と言うこともあるそうなので、「エムゴ」でもいいのかもしれません。

この記事ではM5StackとM5StickCについて説明しますが、M5StackとM5StickCは共通なことも多いです。毎回「M5StackやM5StickC」と書くのは煩雑なので、特に断りがない場合は「M5Stack」と書いてあったら「M5StackやM5StickC」のことだと思ってください。

M5Stackはパソコンで自分の好きなプログラムを作って、M5Stackに転送して動かすことができます。プログラムでM5Stackやこれにつながっているセンサやモーターなどを制御することで、M5Stackでさまざまな作品を作ることができます。

プログラムを作る方法

M5Stackで動くプログラムを作る方法(プログラミング環境)には、次の3つがあります。

  • Arduino IDE: 電子工作から業務まで幅広く使われているプログラミング環境。C++でプログラムを書く。センサなどを扱うライブラリも豊富。
  • UIFlow(Blockly): UIFlowはM5Stack社が開発したプログラミング環境。ブロックを組み合わせてプログラムを作れる。M5Stackの液晶画面に絵や文字を描いたり、センサを扱ったりも簡単。
  • UIFlow(MicroPython): UIFlowではBlocklyの他にMicroPythonでもプログラミングできる。MicroPythonは人工知能や画像処理などでよく使われるPythonの処理系の一つ。

UIFlow(Blockly)の画面

今回は、比較的簡単にM5Stackを制御するプログラムが作れるUIFlow(Blockly)を使います。

UIFlowを使う準備

UIFlowを使うには次のような準備が必要です。ここからはM5StickCを対象にして説明します。

  1. パソコンに、USBドライバをインストールして、M5StickCと通信できるようにする
  2. M5StickCにファームウェアを書き込むツール「M5Burner」をパソコンにインストールする
  3. M5Burnerを使ってM5StickCにファームウェアを書き込む
  4. Wi-Fiの設定をする
  5. APIキーを使ってM5StickCとUIFlowをつなぐ
  6. プログラムを作って動かしてみる

ファームウェアって何?APIキーって何?とわからない言葉がいくつもでてきましたが、順番に説明しますので、心配いりません。今のところは準備に6ステップかかることだけご理解ください。

0. 使うもの

次の4つのものを使います。

  • パソコン(WindowsでもMacでも大丈夫です)
  • M5StickC
  • M5StickCに一緒に入っていたType-C USBケーブル
  • Wi−Fiがつながる環境

M5StickCにファームウェアを書き込む時はUSBケーブルを使いますが、その後はWi-Fi経由でプログラムを書き込みます。Wi-Fiは2.4GHzと5GHzの周波数を使いますが、M5StickCは2.4GHzでしか通信ができないので、お使いのWi−Fiルータの2.4GHzのSSIDとパスワードを控えておいてください。

ここからはWindows10での準備手順を説明しますが、Macでもほぼ同じ流れで準備できます。

1.パソコンにUSBドライバをインストールする

初めてM5StickCをパソコンにUSBケーブルでつないで通信するときは、その前にパソコンにUSBドライバのインストールが必要です。ブラウザで次のページにアクセスし、「CP210X Driver」のWindows版をクリックしてダウンロードします。

https://m5stack.com/pages/download

ダウンロードページ

ZIPファイルがダウンロードされるので、それを展開し、64ビット用のインストーラ(CP210xVCPInstaller_x64_v6.7.0.0)をクリックして、USBドライバをインストールします。

USBドライバインストール

インストールが完了したら、M5StickCに同梱されているType-C USBケーブルでM5StickCとパソコンをつなぎます。Windowsの設定から「デバイス」を選択すると、次の図のようにM5StickCが表示されます。図では「M5Stack Intf」と表示されています。これでドライバのインストールは完了です。

USBドライバの確認

2.パソコンにM5Burnerをインストールする

次にパソコンにM5Burnerという、M5StickCにファームウェアを書き込むツールをインストールします。ファームウェアとはM5StickCを制御して、これから皆さんが作るプログラムのM5StickCへの司令をM5StickCに伝えてくれるプログラムです。

先程のダウンロードページの「M5Burner」のWindows版をクリックして、ダウンロードします。

M5Burnerのダウンロード

ZIPファイルがダウンロードされるので、展開してその中にある M5Burner.exe を起動します。「.NET Frameworkが必要」というメッセージが出たら、それもインストールします。「PCを再起動する必要がある」というメッセージが出た場合は、メッセージに従ってPCを再起動して、PCが立ち上がったら M5Burner.exe を起動してください。

3.M5StickCにファームウェアを書き込む

M5Burnerを起動すると、次のような画面が表示されます。

M5Burner

左のメニューからファームウェアのバージョンを選び、ファームウェア名の右のダウンロードボタンをクリックしてファームウェアをダウンロードします。今回は UIFlow-v1.4.1-beta を選択しました。

ダウンロードできるとファームウェア名が白い表示に変わり、右上の「Erase」ボタンの左に「Series: Stack-EN」が表示されます。「Series」の中から「StickC」を選択します。

M5StickCがUSBケーブルでパソコンにつながっていることを確認して、「Erase」ボタンをクリックし、「Finished」の表示がでたら、「Burn」ボタンをクリックします。最後に「Leaving… Staying in bootloader.」と表示されたらファームウェアの書き込みは完了です。

UIFlowのファームウェアを書き込んでしまって、Arduinoが使えなくなってしまったのではと不安になった方もおられると思いますが、心配いりません。Arduinoでスケッチを書いた場合は、そのままArduino IDEでスケッチをM5StickCに書き込めば、Arduinoスケッチを動かすことができます。さらにもう一度UIFlowを使う時は、M5Burnerでファームウェアを書き込むところからやり直してください。

4.Wi-Fiの設定をする

ファームウェアを書き込んだら、Wi-Fiの設定をします。

まず、M5StickCの左側面にある電源スイッチを2秒押してオンにします。するとM5StickCの液晶画面に図のようにWi-Fiのアクセスポイント(AP)が表示されます。図では「M5-8da4」になっています。

M5StickCのWi-Fi設定画面

パソコンでもスマホでもいいので、そのAPに接続します。パスワードはありません。接続したら、ブラウザから液晶画面に表示されているIPアドレス(図では「192.168.4.1」)にアクセスします。すると次のような画面が表示されるので、接続したいアクセスポイントのSSIDとパスワードを設定します。M5StickCは2.4GHzでしか通信できないので、2.4GHzのSSIDとパスワードを入力して「Configure」をクリックします。

Wi-Fiの設定Web

するとM5StickCは自動的にWi-Fiアクセスポイントに接続します。これでM5StickC側の設定は終わりです。

5.APIキーを使ってM5StickCとUIFlowをつなぐ

M5StickCがWi-Fiアクセスポイントに接続すると、液晶画面にAPIキーが表示されます。

APIキー

APIキーは、M5StackやM5StickCに個別につけられたIDです。UIFlowにこのAPIキーを入力することで、UIFlowがそのAPIキーを持つM5Stackとやり取りするようになります。M5Stackが2つ以上あっても、どのM5Stackとやり取りすればいいか区別がつくようになります。

ブラウザで次のアドレスにアクセスします。

flow.m5stack.com

すると次のように設定画面が現れます。

UIFlow設定

Api KeyにM5StickCに表示されたAPIキーを入力し、Deviceは「Stick-C」を選択します。ThemeはUIFlowのテーマカラーで、初期設定の青のままでも構いませんが、気分を盛り上げるためにM5StickCと同じオレンジを選択しました。OKボタンを押すと設定が終わり、UIFlowが立ち上がります。

画面左下に入力したAPIキーが表示され、[ Connected ]と表示されていれば、UIFlowはM5StickCと接続された状態です。

次に右上の「VER」というメニューをクリックして、「Lastest」を選択してください。小さい画面が現れたら、真ん中の「Switch but don’t save」をクリックしてください。

UIFlow起動

6.プログラムを作って動かしてみる

ではさっそくプログラムを作ってみましょう。

UIFlowの画面中央のメニューの一番上にある「イベント」をクリックすると、イベント関係のブロック(機能部品)が現れます。この中から「くりかえし」というブロックをドラッグ&ドロップして、右側のプログラムエリアに持っていきます。

くりかえし

プログラムエリアにある「setup」というブロックの出っ張った部分と「くりかえし」ブロックの凹んだ部分を近づけると、2つのブロックがつながり、「くりかえし」ブロックが「setup」ブロックと同じ色になります。

setupとくりかえし

次に「ハードウェア」メニューの「LED」から「LED ON」をドラッグ&ドロップして「くりかえし」ブロックの中にいれ、「タイマー」メニューの「1ミリ秒間停止」を「LED ON」の下につなげます。「1」の部分をクリックして「500」に書き換えてください。同様に、「LED OFF」と「1ミリ秒停止」をつなげて、次の図のようにします。

Lチカ

ここまでできたらUIFlowの右上の三角のアイコンをクリックしてみてください。M5StickCの左上の赤いLEDが点滅し始めました。

UIFlowはこんな感じで用意されたブロックを組み合わせてプログラムを作り、M5StickCに送って動かすことができます。

作ったプログラムを簡単に説明します。

  1. 「setup」ブロックからプログラムが動き始めます。
  2. 「くりかえし」はその中のブロックをくりかえし実行します。
  3. 「LED ON」はM5StickCの内蔵LEDをONにします。
  4. 「1ミリ秒停止」はプログラムの実行を1ミリ秒止めます。1を500に変えれば500ミリ秒停止します。
  5. 「LED OFF」はLEDをOFFにします。

このプログラムを動かすと、LEDを点け、0.5秒待ち、LEDを消し、0.5秒待ち、という動作が繰り返され、LEDが0.5秒ごとに点いたり消えたりします。

最後に、せっかく作った最初のプログラムなので、UIFlowの下のフロッピーのアイコンをクリックして保存しておきましょう。

第1回はプログラムを作る準備をしたので、話が長くなってしまいました。今回はここまでにします。

マスターの一言

いやー、新コーナー「M5Stackカフェ」が始まりました。このコーナーでは、M5StackやM5StickCの魅力を、なるべくわかり易い言葉で紹介していこうと思います。とはいえ、第1回はM5Stackシリーズ全体の説明や、プログラムを作る方法の説明、その準備、とどうしても説明が多くなってしまいました。次回からは作例を中心に紹介していきますので、お付き合いください。