Zenn
📟

M5Stick C Plus の開発環境を整える

2021/05/21に公開
M5Stack
tutorial
Arduino IDE
uiflow
m5stickcplus
tech

最近エッジコンピューティングに関心があるため，いろいろなエッジデバイスを買っては入門しています．今回は M5Stack の M5Stick C Plus に入門します．M5Stick C Plus は M5Stick C のアップグレード版で，液晶が大きくなったり，ブザーやボタンが付いたりと機能が拡張されたものです．

M5Stick C のドキュメントはたくさん見つかるので，基本はそれらと同じように進めればそんなに苦労はないかな，と思っております．

M5Stick C Plus の機能やスペックについてはスイッチサイエンスのページがわかりやすくていいと思います．

前提

  • M5Stack シリーズは全くさわったことがない
  • M5Stick C Plus を初めて触ったときの備忘録です

開発環境

  • ローカル: Macbook Pro (macOS Big Sur 11.3.1)
  • M5Stick C Plus

開発方法

M5Stick C Plus の開発方法としては様々な方法があるのですが，M5Stack の公式ドキュメントにある方法で行います．公式では UIFlow と Arduino IDE を使う開発方法があるのですがそれぞれのメリット・デメリットもわからない状態なので両方で環境構築と HelloWorld をします．

また，公式のドキュメントによると M5Stick C Plus では USB Driver をローカルにインストールしなくても書き込みできるようです．

Arduino IDE

まずは Aruduino IDE での開発を行っていきます．

環境構築 ( IDE )

Arduino IDE で M5Stick C Plus の開発環境を整えます．事前に Arduino の公式サイトのダウンロードページから最新版の Arduino IDE をインストールしておいてください．

  • Arduino IDE を開く (この記事の執筆時点ではバージョン1.8.15)

Arduino IDE

  • メニューバーの Arduino から Preferences を開く

    • Arduino IDE に関する諸々の設定は各自で入れておく
    • 「追加のボードマネージャーのURL:」に https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json を入力して M5Stack シリーズを扱うためのボードを設定する

    add url

    • 追加したら「OK」して環境設定画面を閉じる

  • メニューバーの ツール から ボード → ボードマネージャー を開く

    • M5Stack と入力して M5Stack を扱うための公式のボードマネジャーをインストールする

    board manager

    • インストールが完了したらボードマネージャーを閉じる

  • メニューバーの スケッチ から ライブラリのインクルード → ライブラリを管理 → ライブラリマネージャ開く

    • 検索バーに M5StickCPlus を入力する
    • M5StickCPlus をインストール ( この時点での最新版はバージョン 0.2.0 )

    M5StickCPlus

  • Arduino IDE を再起動

  • メニューバーの ツール から ボード → M5Stack Arduino からボードを M5Stick-C-Plus に設定して完了！

board

HELLO WORLD

実際に M5Stick C Plus にソースコードを書き込んで動かしてみます．

  • M5Stick C Plus を USB で PC と接続
    • 接続すると自動で電源が入る
    • 初期は FactoryTest のソースコードが書き込まれており，以下のようなプログラムが起動する

M5StickCPlus
※ 電源ボタンは2秒長押しで ON, 6秒長押しで OFF

  • 別のサンプルコードを書き込む

    • メニューバーの ツール から シリアルポート で接続しているポートを指定
    • メニューバーの ファイル から スケッチ例 → １番下の M5StickCPlus → Basics → Display を選択
    • 開いたサンプルコードで書き込みを実行する

    書き込み

  • コンパイルしてしばらく経つとディスプレイが切り替わり以下の画像のようにカラフルなエフェクトが表示されたら成功！
    Display

Arduino IDE を用いた M5Stick C Plus の入門はここまでです．

UIFlow

次に， UIFlow を用いた開発を行います．UIFlow は，Google のオープンソースのビジュアルプログラミング環境である Blockly を元に M5Stack シリーズ向けに開発された Web ベースのビジュアルプログラミング環境です．ブロックプログラミングと Python によるコーディングを切り替えて利用することができます．

環境構築

公式ドキュメントの M5Stick C Plus のページにあるチュートリアルである UIFlow Quick Startと UIFlow ドキュメント を参考にしながらすすめていきます．

  • まずはチュートリアルにしたがって各環境に合わせてファームウェア書き込み用のツールである M5Burner をダウンロード/インストールする
  • M5Burner を開く

M5Burner

  • M5Stick C Plus の burning tool の最新版 ( v1.7.6-plus ) をダウンロードする

burning tool

  • M5Stick C Plus を PC に接続して COM ポートを指定し，BURN でファームウェアを書き込む
    • このとき WIFI の設定を行う画面が表示されますが今回はスキップします

burning

  • 書き込みが完了すると M5Stick C Plus のディスプレイが以下のように更新されます

書き込み完了

  • WiFi に接続する場合にはこの M5Burner を用いることで設定する方法が推奨されています
  • ここまでで準備は完了です！

HELLO WORLD

つづいて UIFlow の M5Stack 用である M5Flow の Web 版を用いてプログラムを作成 ( サンプルコードを使うだけ ) し M5Stick C Plus に書き込みを行います．

  • UIFlow ( M5Flow ) を開くと最初に設定画面が表示される

config

  • M5Stick C Plus のアイコンを選択し，言語は日本語，エディタのテーマ色を設定する

editor

  • メニューバーの DEMO から Digital Clock を選択し，Load

Load

  • サンプルコードが読み込まれる

sample code

  • UIFlow の Web 版で M5デバイスに書き込みを行う場合にはネットワーク接続を利用する

    • 前のセクションでスキップした WiFi の設定を入れる
    • M5Stick C Plus を PC に接続し起動
    • ふたたび M5Burner を開き正しいポートを指定
    • 今回は WiFi の設定を入れた上で Burn する
      Burn
    • Burn Successfully が表示されれば接続成功

    Burn Successfully

    • M5Stick C Plus が再起動されて WiFi に接続，API Key が表示されたらネットワーク接続は成功！

    network

  • UIFlow に戻りメニューバー右の3点リーダーから「設定」を開き，M5Stick C Plus の画面に表示されている API Key を入力

API Key

  • UIFlow の左下の API Key のところに key が表示され「接続済み」となれば成功！

接続済み

  • UIFlow 右上の「▶」アイコンを押してサンプルコードの書き込みを実行
    • Excute code successfully が表示されれば書き込み完了

success

  • M5Stick C Plus が再起動し，Digital Clock が表示されたので成功！

ここまでで UIFlow を用いて M5Stick C Plus に入門できました．
UIFlow でのデバイスへのソースコードの書き込みはネットワーク経由で行いましたが，公式ドキュメントからダウンロードできる UIFlow Desktop IDE は UI は Web 版とほぼ変わらないですが，設定に COM ポートの選択が出てくるので， USB 接続して直接書き込みができそうです．もしかするとこちらの方が早いかもしれません ( 後で試してみます )．

Summary

M5Stick C Plus の開発環境を Arduino IDE と UIFlow それぞれで構築し，サンプルコードを用いて HELLO WORLD しました．どちらも公式のドキュメントが豊富なのでそのとおりに進めて行くだけで特に詰まることなく入門することができました．

それぞれ選べるのはなかなか使い勝手がいいと思います．個人的にはせっかくなので M5Stack が M5 デバイス向けに開発した UIFlow がビジュアルプログラミング以外に Python で書くこともできるのでもう少し触って遊んでいきたいと思います．

今後は， M5Stick C Plus とセンサをつなげて色々実験していきたいと思います．興味があるものとしては，こちらの論文 ( CO2 濃度の可視化に基づく安心・安全な対面学習／試験環境提供の試み) にある CO2 濃度の可視化だったり，M5 デバイスではないですが，コチラの記事 ( Raspberry Piで部屋の空気コンディションモニタを作る方法 ) でやっている実験も自分で試してみたいところです！

Reference

Discussion