TPTブログ

テックポート株式会社のブログです。 技術情報や製品・サービス情報、 また未経験社員がデータサイエンティストを 目指す奮闘記など、更新していきます。

トップ > M5Stack開発環境を作ろう

M5Stack開発環境を作ろう

M5Stackでラジコンカーを作る過程を紹介する企画1回目ということで、
VSCodeとPlatformIOを使った開発環境を整えていきます。

M5Stackドライバのインストール

パソコンとM5Stackを繋ぐのにドライバのインストールが必要です。
以下の公式ホームページからお使いの環境用のドライバをインストールしてください。
docs.m5stack.com

2種類ドライバがあるのですが、どれを使っていいかわからない場合は両方入れればOKとのことです。
私はどっちか覚えていませんが先に入れた方が動きました。


PlatformIO

PlatformIOとはマイコンボードにプログラムを書き込むための統合開発環境です。
VSCodeの拡張機能から簡単にインストールできます。
ちなみにM5Stackだけでなく様々なマイコンボードを扱うことができます。
M5Stackの開発環境は公式のUIFlow、ArduinoIDEもあります。
使い方についてのネット記事が多く、プログラム書き込み速度が早いので私はPlatformIOを使っています。


インストール方法

1.VSCodeの拡張機能でPlatformIOと検索してインストールします。

2. インストールが完了するとサイドバーにアリ？のアイコンと、画面下に家の形のアイコンができます。
家のアイコンをクリックするとPlatformIOのホーム画面が現れます。

プロジェクトを作る

まず定番のHello Worldをしてみましょう。
PlatformIOでは、マイコンボードに書くプログラム・必要なライブラリ、設定ファイルなどをひとまとめにした
プロジェクトと呼ばれるフォルダ上で作業をします。まずこちらを作ります。

1.先ほど開いたPlatformIOホーム画面右側の「Create New Project」をクリックします。

2.出てきたProject Wizard画面に必要な情報を入れていきます。
まず「Name」にプロジェクト名を入力します。今回は仮にHello_Worldとします。

3.「Board」に使うマイコンボード名を入力します。
スクロール選択するとめんどくさいので、直接「m5」と入力すると候補一覧が出て早いです。
「M5Stack Core ESP32」と「M5Core2」どちらか迷うと思うのですが、
「M5Core2」はM5Stackの上位モデルでディスプレイ下のボタンがディスプレイと一体化したオシャレな見た目をしています。
ディスプレイと分かれているプラスチックの押しボタンだったら「M5Stack Core ESP32」を選びましょう。

4.「FrameWork」はM5Stack上で動くプログラムの骨組みのようなもので、「Arduino」が自動で選択されます。

5.「Location」のチェックボックスを外すとプロジェクトを保存する場所が選べます。
チェックボックスを入れるとデフォルトの場所に保存されます。

まとめるとこんな感じです。

6.Finishボタンを押す。5.でプロジェクト保存場所のチェックボックスを外した場合は保存場所を選びます。
初めてプロジェクトを作るときはインストールの都合でしばらく時間がかかるのでのんびり待ちましょう。
最終的にプロジェクト名と同じHello_Worldという名前のフォルダができます。


ライブラリをインストールしよう

これからM5Stack本体を操作するためのライブラリを入れていきます。
1.PlatFormIOホーム画面のタブから「Library」をクリックし、検索ボックスで「M5Stack」と検索します。
Core2の場合は「M5Core2」を選んでください。
2.なぜか検索候補の下の方に出てきますのでスクロールして見つけてください。
「M5Stack」ライブラリを見つけてクリックしたら「Add to Project」を選び、「Hello_World」プロジェクトに追加します。
pythonとは違い、ライブラリはプロジェクトごとに毎回追加する必要があります。

プロジェクトフォルダを覗いてみよう

出来上がったフォルダの構造を軽くみていきましょう。以下のようなフォルダ構造になっています。
Hello_World/
├.pio/
├build/ プログラムをマイコンボードで動く形にするときに必要な各種ファイル。
├libdepth/ 追加したライブラリを保存する場所。ライブラリのサンプルコードもあります。
├.vscode/ VSCodeでプログラムを動かすための設定関係のファイル。
├include/ ヘッダファイルを置きます。
├lib/ PlatFormIOのホーム画面から追加できないライブラリを置きます。（GitHub上に公開されているものなど）
├src/ 自分で書いたプログラムを置きます。本体のプログラムはmain.cppという名前にします。

プログラムを書いてみよう

さて、いよいよプログラムを書いていきます。
言語はCまたはC++ですが、私はC++を使っています。
C++はM5Stack開発目的で初めて触ったので正直あまりよくわかっていません。
ただプログラムを書くときはサンプルコードを少し変えるだけな場合が多いので、
なんらかの言語をさわっていればなんとなくいけると思います。
C/C++の拡張機能を入れるとコーディングを助けてくれるので楽です。

せっかくなのでHelloWorldのサンプルプログラムを動かしてみましょう。
1.先ほど追加したM5Stackライブラリの中身は.pio/libdepth/M5Stackフォルダ内にあります。
このフォルダ内にExampleというフォルダがあり、M5Stackを使う上での各種サンプルコードが入っています。
HelloWorldサンプルコードは以下の場所にあります。

2.見つけたHelloWorld.inoの中身をsrcフォルダのmain.cppにコピペしましょう。
もともとmain.cppに書いてあった内容は全部上書きしてしまって大丈夫です。
中身はこんな感じです。

#include <M5Stack.h>    // M5Stackライブラリを使いますという宣言です。Core2の場合はM5Core2.hです

// M5Stackが起動した時に行われる処理を書きます。
void setup() {
    M5.begin();        // M5Stackを初期化します。
    M5.Power.begin();  // バッテリーを初期化します。
    M5.Lcd.print("Hello World!!");  // ディスプレイに文字を出力します。
}

// 繰り返し行う処理を書きます。今回はないので空欄です。
void loop() {
}

プログラムは大きく3つの部分に分かれています。
1つ目は#includeから始まる使用ライブラリを定義する部分です。使うライブラリの名前をつらつらと書いていきます。
2つ目はvoid setup()という部分です。これはマイコンボードが立ち上がったときに1回だけ行われる処理を書きます。
主に各種初期化、Wifi接続、他の機器との通信設定などを書きます。
3つめはvoid loop()という部分です。マイコンボードの起動中に繰り返し行う処理を書きます。
今回は繰り返し行う処理はないので空欄です。

ビルドしてみよう

ビルドというのはwindowsのexeファイルのような、プログラムを実行するためのファイルを作成することです。
先ほど作ったプログラムを保存して、画面下ツールバーのチェックマークをクリックするとビルドが始まります。
1~2分くらいかかるので少し待ちます。

こんな感じで最後にSUCCESSと表示されれば完了です。
ライブラリがない、変数の方がおかしいなどプログラムが動かなくなるような間違いがあるとエラーになります。

アップロードしよう

ビルドが済んだらいよいよM5Stackにプログラムをアップロードします！
まずパソコンとM5StackをUSBで繋ぎましょう。
M5Stackを買った時についてくるUSBケーブルには向きがあるという噂があります。
M5と書いてある側がディスプレイと同じ方を向くように挿すのが正しいそうです。
逆にするとたまに不具合がある？？そうなのでもしうまく認識されないときは向きを気にしてみてください。

画面下ツールバーの右矢印のマークをクリックするとプログラムをアップロードできます。
ビルドと同様に最後にSUCCESSと表示されれば完了です。
本体や接続に異常がなければよっぽど問題なく終わるはずです。
M5Stackが起動し、画面にHelloWorldと表示されます。お疲れ様でした！


おまけ：ループ処理ってなんでしょう？

先ほどのHelloWorldプログラムのなかにループ処理に関する部分があったと思います。
ループ処理ってなんだろう・・・？と思われる方向けにサンプルを交えて軽く説明させていただきます。
先ほどのmain.cppを以下のように書き換えてみてください。

#include <M5Stack.h>    // M5Stackライブラリを使いますという宣言です。Core2の場合はM5Core2.hです。

// M5Stackが起動した時に行われる処理を書きます。
void setup() {
  M5.begin();               // M5Stackを初期化します。
  M5.Power.begin();          // バッテリーを初期化します。
  M5.Speaker.begin();       // スピーカーを初期化します。少しノイズ音が出るかもしれませんが正常です。
  M5.Speaker.setVolume(1);  // 音の大きさを1(最小値)に設定します。デフォルトの8は大きすぎるので・・・
  M5.Lcd.print("Loop sample program");  // ディスプレイに文字を出力します。
}

// 繰り返し行う処理を書きます。
void loop() {
  M5.update();            // M5Stackの状態を取得します。
  if(M5.BtnA.isPressed()) { // もしボタンAが押されたとき
    M5.Speaker.beep();        // beep音を鳴らします。
  }
  delay(100);             // 0.1秒待ちます。ループ処理がうまくいくために少し待つ時間をつくります。

このプログラムを実行すると、本体一番左のボタンAを押している間プーッという機械音が鳴ります。
ボタンを押したら何かする、という部分に関わっているのがループ処理です。
プログラム中では以下のような動作が繰り返されています。

  1. M5Stackの本体の情報を取得する。
  2. ボタンAが押されているか調べる。
  3. もしボタンA押されていたら音を鳴らす。

それぞれのプロセスは一瞬で終わってしまいますが、
1~3をずっと繰り返すことでボタンが押されている間音が鳴るという仕組みを作っています。

次回予告

今回はPlatformIO開発環境と簡単なプログラムの説明をしました。
最初は何やってるか全然わからないと思うのですが、サンプルプログラムをいくつか動かすうちにだんだん慣れてくると思います。
次回はいよいよM5Stackの代名詞ともいえる、顔を表示するプログラム「m5stack-avatar」を使っていきます。
お楽しみに！

github.com

宣伝！**

弊社で開催しているデータサイエンティスト養成講座第七期が現在受講生募集中です。
こちらはAIってなんなの？使ってみたいけどよくわからないよ？？という方向けの半年間の講座です。
わたしも前職まではAIよくわからん！って感じだったのですがこちらの講座を受けてなんとか仕事ができています。

機械学習やAIの基礎を勉強し、最終的には受講生のグループに分かれた開発演習を行います。
AIって何？という全くの初心者でも、自分でデータを集めてモデルを組めるようになれたと好評の講座です。
もし気になる！という方がいらっしゃいましたら下記講座HPからを詳しい内容を見てみてください！

www.tbtech.co.jp