M5StackカフェM5Stackカフェ2019年11月25日LEDを点滅させる今回から新しいコーナー「M5Stackカフェ」が始まりました。このコーナーではM5StackやM5StickCにまつわる楽しい話題を紹介していきます。M5StackやM5StickCなどを使って、面白いもの、役に立つもの、役に立ちそうにないものなどを作ったり、面白いことをやっているユーザーさんを紹介したりする予定です。M5StackやM5StickCに興味のある方は是非チェックしてみてください。第1回は、最初なのでM5StickCでプログラムを作る準備をして、LEDを点滅させてみます。M5Stackシリーズこのコーナーで扱うM5StackやM5StickCは、M5Stack社が作っているマイコン端末です。M5Stack社はマイコン端末以外にも温度センサやGPS、カメラ、小型のロボットカーなど、M5StackやM5StickCと組み合わせて使ういろいろな拡張ユニットも作っています。真ん中の列の左から3つはM5Stackに挟み込んで機能を拡張するモジュール、その右のオレンジ色の端末がM5StickC、右端の青い端末はM5StickVです。下の列はセンサなどの拡張ユニットです。M5Stackは「エムファイブ・スタック」と読む人と、「エムゴ・スタック」と読む人がいるようで、どちらが正解ということではなさそうです。Laiさんは「エムファイズ・スタック」と言っていましたが、社内では「エムウー(中国語の五)スタック」と言うこともあるそうなので、「エムゴ」でもいいのかもしれません。この記事ではM5StackとM5StickCについて説明しますが、M5StackとM5StickCは共通なことも多いです。毎回「M5StackやM5StickC」と書くのは煩雑なので、特に断りがない場合は「M5Stack」と書いてあったら「M5StackやM5StickC」のことだと思ってください。M5Stackはパソコンで自分の好きなプログラムを作って、M5Stackに転送して動かすことができます。プログラムでM5Stackやこれにつながっているセンサやモーターなどを制御することで、M5Stackでさまざまな作品を作ることができます。プログラムを作る方法M5Stackで動くプログラムを作る方法(プログラミング環境)には、次の3つがあります。電子工作から業務まで幅広く使われているプログラミング環境。C++でプログラムを書く。センサなどを扱うライブラリも豊富。UIFlowはM5Stack社が開発したプログラミング環境。ブロックを組み合わせてプログラムを作れる。M5Stackの液晶画面に絵や文字を描いたり、センサを扱ったりも簡単。UIFlowではBlocklyの他にMicroPythonでもプログラミングできる。MicroPythonは人工知能や画像処理などでよく使われるPythonの処理系の一つ。今回は、比較的簡単にM5Stackを制御するプログラムが作れるUIFlow(Blockly)を使います。UIFlowを使う準備UIFlowを使うには次のような準備が必要です。ここからはM5StickCを対象にして説明します。パソコンに、USBドライバをインストールして、M5StickCと通信できるようにするM5StickCにファームウェアを書き込むツール「M5Burner」をパソコンにインストールするM5Burnerを使ってM5StickCにファームウェアを書き込むWi-Fiの設定をするAPIキーを使ってM5StickCとUIFlowをつなぐプログラムを作って動かしてみるファームウェアって何?APIキーって何?とわからない言葉がいくつもでてきましたが、順番に説明しますので、心配いりません。今のところは準備に6ステップかかることだけご理解ください。使うもの次の4つのものを使います。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ドライバのインストールが必要です。Driver」のWindows版をクリックしてダウンロードします。https://m5stack.com/pages/downloadZIPファイルがダウンロードされるので、それを展開し、64ビット用のインストーラ(CP210xVCPInstaller_x64_v6.7.0.0)をクリックして、USBドライバをインストールします。USBケーブルでM5StickCとパソコンをつなぎます。Windowsの設定から「デバイス」を選択すると、次の図のようにM5StickCが表示されます。Intf」と表示されています。これでドライバのインストールは完了です。2.パソコンにM5Burnerをインストールする次にパソコンにM5Burnerという、M5StickCにファームウェアを書き込むツールをインストールします。ファームウェアとはM5StickCを制御して、これから皆さんが作るプログラムのM5StickCへの司令をM5StickCに伝えてくれるプログラムです。先程のダウンロードページの「M5Burner」のWindows版をクリックして、ダウンロードします。Frameworkが必要」というメッセージが出たら、それもインストールします。3.M5StickCにファームウェアを書き込むM5Burnerを起動すると、次のような画面が表示されます。左のメニューからファームウェアのバージョンを選び、ファームウェア名の右のダウンロードボタンをクリックしてファームウェアをダウンロードします。Stack-EN」が表示されます。「Series」の中から「StickC」を選択します。M5StickCがUSBケーブルでパソコンにつながっていることを確認して、「Erase」ボタンをクリックし、「Finished」の表示がでたら、「Burn」ボタンをクリックします。bootloader.」と表示されたらファームウェアの書き込みは完了です。UIFlowのファームウェアを書き込んでしまって、Arduinoが使えなくなってしまったのではと不安になった方もおられると思いますが、心配いりません。IDEでスケッチをM5StickCに書き込めば、Arduinoスケッチを動かすことができます。一度UIFlowを使う時は、M5Burnerでファームウェアを書き込むところからやり直してください。4.Wi-Fiの設定をするファームウェアを書き込んだら、Wi-Fiの設定をします。M5StickCの左側面にある電源スイッチを2秒押してオンにします。するとM5StickCの液晶画面に図のようにWi-Fiのアクセスポイント(AP)が表示されます。図では「M5-8da4」になっています。パソコンでもスマホでもいいので、そのAPに接続します。パスワードはありません。接続したら、ブラウザから液晶画面に表示されているIPアドレス(図では「192.168.4.1」)にアクセスします。すると次のような画面が表示されるので、接続したいアクセスポイントのSSIDとパスワードを設定します。M5StickCは2.4GHzでしか通信できないので、2.4GHzのSSIDとパスワードを入力して「Configure」をクリックします。するとM5StickCは自動的にWi-Fiアクセスポイントに接続します。これでM5StickC側の設定は終わりです。5.APIキーを使ってM5StickCとUIFlowをつなぐM5StickCがWi-Fiアクセスポイントに接続すると、液晶画面にAPIキーが表示されます。APIキーは、M5StackやM5StickCに個別につけられたIDです。UIFlowにこのAPIキーを入力することで、UIFlowがそのAPIキーを持つM5Stackとやり取りするようになります。M5Stackが2つ以上あっても、どのM5Stackとやり取りすればいいか区別がつくようになります。ブラウザで次のアドレスにアクセスします。flow.m5stack.comすると次のように設定画面が現れます。KeyにM5StickCに表示されたAPIキーを入力し、Deviceは「Stick-C」を選択します。ThemeはUIFlowのテーマカラーで、初期設定の青のままでも構いませんが、気分を盛り上げるためにM5StickCと同じオレンジを選択しました。OKボタンを押すと設定が終わり、UIFlowが立ち上がります。]と表示されていれば、UIFlowはM5StickCと接続された状態です。次に右上の「VER」というメニューをクリックして、「Lastest」を選択してください。save」をクリックしてください。6.プログラムを作って動かしてみるではさっそくプログラムを作ってみましょう。UIFlowの画面中央のメニューの一番上にある「イベント」をクリックすると、イベント関係のブロック(機能部品)が現れます。この中から「くりかえし」というブロックをドラッグ&ドロップして、右側のプログラムエリアに持っていきます。プログラムエリアにある「setup」というブロックの出っ張った部分と「くりかえし」ブロックの凹んだ部分を近づけると、2つのブロックがつながり、「くりかえし」ブロックが「setup」ブロックと同じ色になります。ON」の下につなげます。「1」の部分をクリックして「500」に書き換えてください。OFF」と「1ミリ秒停止」をつなげて、次の図のようにします。ここまでできたらUIFlowの右上の三角のアイコンをクリックしてみてください。M5StickCの左上の赤いLEDが点滅し始めました。UIFlowはこんな感じで用意されたブロックを組み合わせてプログラムを作り、M5StickCに送って動かすことができます。作ったプログラムを簡単に説明します。「setup」ブロックからプログラムが動き始めます。「くりかえし」はその中のブロックをくりかえし実行します。ON」はM5StickCの内蔵LEDをONにします。「1ミリ秒停止」はプログラムの実行を1ミリ秒止めます。1を500に変えれば500ミリ秒停止します。OFF」はLEDをOFFにします。このプログラムを動かすと、LEDを点け、0.5秒待ち、LEDを消し、0.5秒待ち、という動作が繰り返され、LEDが0.5秒ごとに点いたり消えたりします。最後に、せっかく作った最初のプログラムなので、UIFlowの下のフロッピーのアイコンをクリックして保存しておきましょう。第1回はプログラムを作る準備をしたので、話が長くなってしまいました。今回はここまでにします。マスターの一言いやー、新コーナー「M5Stackカフェ」が始まりました。このコーナーでは、M5StackやM5StickCの魅力を、なるべくわかり易い言葉で紹介していこうと思います。いえ、第1回はM5Stackシリーズ全体の説明や、プログラムを作る方法の説明、その準備、とどうしても説明が多くなってしまいました。次回からは作例を中心に紹介していきますので、お付き合いください。Ambient開発者。アンビエントデーター代表取締役。実際に実験をおこなった上で書いていますが、動作を保証するものではありません。本記事を利用したことにより生じる損害についてスイッチサイエンスおよびアンビエントデーターは一切の責任を負いません。