More than 1 year has passed since last update.

M5Stack-Grayの開発環境構築手順【VSCode + PlatformIO IDE】

M5stack

Last updated at 2023-09-28Posted at 2023-09-27

はじめに

SPAJAM2023出場に向けて、M5Stack-Grayを使えるように環境構築をしたので、備忘録も兼ねて記事を残します。
思い出しながら書いているので、情報が足りていない可能性があります。

実現したいこと

WindowsでM5Stack-Grayの開発環境を構築したい
使い慣れているエディター（VSCode）で開発したい
追加で何かをインストールしたくない

環境

OS：Windows 11 Home
Version：22H2
プロセッサ：11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz 3.00 GHz
RAM：16GB

前提条件

VSCodeがインストール済み

概要

PlatformIOの拡張機能のインストール
プロジェクトの作成
Hello World!

作業詳細

PlatformIOの拡張機能のインストール

VSCodeのサイドバーにある「拡張機能」アイコンをクリック
拡張機能マーケットプレイスの検索バーに「platformio」と入力して検索
検索結果の「PlatformIO IDE」をクリック
「インストール」ボタンをクリック
※当方の環境では、既にインストール済みなので「アンインストール」が表示されている
VSCodeの再起動

プロジェクトの作成

VSCodeのサイドバーにある「PlatformIO」アイコンをクリック
QUICK ACCESS > PIO Home > Openをクリック
Quick Accessの「＋ New Project」をクリック

Name に任意のプロジェクト名を指定
※ここでは workspace を指定
Board は M5Stack Grey ESP32 を選択
Framework は Arduino を選択
任意の場所にプロジェクトを作成したい場合は、Use default location のチェックをはずし、作成するフォルダを選択
「Finish」をクリック

PIO Home の左のサイドバーから「Libraries」アイコンをクリック
検索バーに「m5stack core development」と入力して検索
「M5Stack by M5Stack」をクリック

「＋Add to Project」をクリック

作成したプロジェクトを選択
「Add」をクリック

Hello World!

「プロジェクトの作成」で作成したプロジェクトをVSCodeで開き、src/main.cpp を開く

ソースコードを以下に変更

src/main.cpp

#include <M5Stack.h>

int counter = 0;

// 起動時に1回だけ動く処理
void setup() {
  M5.begin("");

  Serial.begin(9600);
  Serial.println(""); // シリアル通信の最初はゴミが出るので、ゴミの影響がでないようにする
  Serial.println("Hello from M5Stack-Gray");

  M5.Lcd.setTextSize(4);
  M5.Lcd.setCursor(10, 30);
  M5.Lcd.println("Hello World!");
}

// 繰り返し呼ばれる処理
void loop() {
  Serial.printf("Counter: %d\n", counter);
  counter++;

  delay(1 * 1000); // 1sec
}

VSCodeのボトムバーの「✓」をクリックし、ビルド
自動で表示されるターミナルで「SUCCESS」が表示されるまで待つ
※初回ビルドはライブラリもビルドするので時間がかかりが、2回目以降は短くなる
M5Stack-GrayとPCをUSBケーブルで接続する
※M5Stack-GrayとPCが接続できない場合はUSBドライバーのインストールが必要かもしれない（詳細は備考を参照）
VSCodeのボトムバーの「→」をクリックし、アップロード
自動で表示されるターミナルで「SUCCESS」が表示されるまで待つ
VSCodeのボトムバーのプラグのアイコンをクリックし、Serial Monitor を開く
Serial Monitor に以下の画像のようなログが出力されることを確認
M5Stack-Gray 本体の LCD に「Hello World!」と表示されていることを確認