趣味TECHオンライン | 趣味のモノづくりを応援するオンラインメディア

趣味のモノづくりを応援するオンラインメディア

【M5Stack初心者向け】M5Cloud開発環境セットアップ方法(2018年10月版)

f:id:tokyo_ff:20181007061225j:plain

話題の液晶付きマイコンボードM5Stack。開発環境として、Arduino IDEとM5Cloudの二種類の環境が利用できる。今回はブラウザだけで利用できるクラウド開発環境「M5Cloud」のセットアップ方法をご紹介したい。

M5Stackとは?

M5StackはESP32搭載のマイコンボード。液晶、スピーカー、バッテリー、ボタン、microSDカードスロットが5cm角のコンパクトな筐体に詰め込まれている。色々な拡張ボードが売られているので、Stackしてどんどん拡張が可能だ。

 

クラウドに画像をアップして、シンプルなコードを書くだけで簡単に動かせる。

M5Stack用プロトモジュール

M5Stack用プロトモジュール

 
Interface(インターフェース) 2018年 09 月号

Interface(インターフェース) 2018年 09 月号

 

では早速、環境構築手順を説明していこう。ちなみに公式サイトの

M5Stack Documentation

にはArduino IDEの説明しか載っていない。

詳しく見たい人はGitHubのこちらのページを確認頂きたい。

github.com

ドライバを入れる

f:id:tokyo_ff:20181008005406j:plain

M5StackをPCに認識させるためには、CP210x USB to UART Bridge VCP Driversをインストールする必要がある。こちらのサイトからダウンロードしよう。

www.silabs.com

 

なお今回はWindows10環境でセットアップを実施した。他OSの方は公式ドキュメントも参考頂きたい。公式ドキュメントには、Windows10用のユニバーサルドライバを使うなと書かれているため、Windows 7/8/8.1 (v6.7.6)用をダウンロードした。

 

ファームウェアを書き込む

ファームウェアのダウンロード

f:id:tokyo_ff:20181008010911j:plain

M5Stackは、Arduino開発環境用のファームウェアが書き込まれている。M5Cloudを使うには専用のファームウェアに書き換える必要があるため、m5cloud-20180516-v0.4.0.binを下記サイトからダウンロードする。

github.com

ファームウェア書き込みツールを使う

Windowsの場合、Espressif Flash Download Toolsが使えるので、下記からダウンロードする。

www.espressif.com

 

Espressif Flash Download Toolsを起動すると下記の画面が出るので、ESP32 DownloadToolを選択しよう。

f:id:tokyo_ff:20181008011523j:plain

 

M5StackをPCに繋いだら、デバイスマネージャーからどのポートに接続されているかを確認する。この場合はCOM4。

f:id:tokyo_ff:20181008011724j:plain

 

Espressif Flash Download Toolsで

  1. 「COM」が先程確認したポート(COM4)になっていることを確認
  2. 書き込むファームウェアをセット
  3. 「ERASE」を押して消去
  4. 「START」で書き込み

を行う。

f:id:tokyo_ff:20181008011713j:plain

 

M5Stackへの接続

f:id:tokyo_ff:20181008012702j:plain

ファームウェアを書き換えた後、M5Stackが写真のような表示になる。ここに記載されているSSIDに接続し、PCのブラウザから192.168.4.1にアクセスする。

 

f:id:tokyo_ff:20181008013731j:plain

ブラウザからアクセスすると、WiFiのセットアップ画面が表示される。普段使っているWiFiの接続情報を入力すると、これ以降はM5Stackが自動でWiFiに接続するようになる。

 

M5Stackの登録

f:id:tokyo_ff:20181008014309j:plain

M5StackのWiFi接続設定ができたので、

http://io.m5stack.com/

にアクセスして、M5Cloudのアカウント登録をしよう。ログイン後、デバイスマネジメントの画面から、「Add」を押してM5Stackを登録する。

f:id:tokyo_ff:20181008014740j:plain

 

コードの入力を求められるので、M5Stackに表示されたチェックコードを入力すれば、登録が完了する。

f:id:tokyo_ff:20181008015233j:plain

 

M5Cloudを使ってみる

M5Cloudに接続して、Hello Worldを出力してみよう。左側メニューのProjectを選択して「+」ボタンを押す。

f:id:tokyo_ff:20181008041855j:plain

 

Project nameを入力する欄があるので、適当なプロジェクト名を付けよう。ちなみに後で変更できない仕様になっている。言語はPythonとLuaから選ぶことができる。今回はPythonを選択する。

f:id:tokyo_ff:20181008042010j:plain

 

「Create」を押すと、エディタ画面になり、main.pyが開かれた状態となる。M5Stackの電源が入っている状態で、「Upload & Run」を押すとM5Stackにプログラムが転送され、実行される。PC上のローカルのファイルも追加できるので、ぜひ色々試してほしい。

f:id:tokyo_ff:20181008042201j:plain

 

最後に

以上でM5StackのM5Cloudにおけるセットアップが完了した。公式のリファレンスがこちらで公開されている。

github.com

 

またサンプルもいくつか公開されているので、ぜひ参考にしてプロトタイピングに活用してほしい。

github.com