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

# はじめに

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

<img width="50%" alt="M5Stack-Gray Developer Kit" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/9a277f15-c71a-0864-a2fe-514fabac2110.jpeg">


# 実現したいこと

* 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がインストール済み

# 概要

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

# 作業詳細

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

<img width="80%" alt="PlatformIO IDE拡張機能のインストール" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/60011abd-e927-15d6-6ab3-ba01078ef9ce.png">

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

## プロジェクトの作成

<img width="80%" alt="プロジェクト作成手順1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/e0918b64-39fb-c2d0-1a7b-a5ea656995bd.png">

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

<img width="80%" alt="プロジェクト作成手順2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/cd33ed45-1a48-4e3e-80b5-c0d0b74ef3f5.png">

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

<img width="80%" alt="プロジェクト作成手順3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/6a502171-0578-4e2e-cfa8-164aafd609a1.png">

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

<img width="80%" alt="プロジェクト作成手順4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/2e8c9c84-9c94-15e7-296e-f586c485a5a5.png">

0. 「＋Add to Project」をクリック

<img width="80%" alt="プロジェクト作成手順5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/5b8c8322-1ad7-2ee8-1d72-95ea15ac844e.png">

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

## Hello World!

0. 「プロジェクトの作成」で作成したプロジェクトをVSCodeで開き、`src/main.cpp` を開く
0. ソースコードを以下に変更
   ```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
   }
   ```
0. VSCodeのボトムバーの「✓」をクリックし、ビルド
   <img width="80%" alt="ビルド1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/64ff2bc1-3288-16d6-f354-369f6fcf2f1b.png">
0. 自動で表示されるターミナルで「SUCCESS」が表示されるまで待つ
   ※初回ビルドはライブラリもビルドするので時間がかかりが、2回目以降は短くなる
   <img width="80%" alt="ビルド2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/df87250a-2726-35f8-55c3-a6d05764baee.png">
0. M5Stack-GrayとPCをUSBケーブルで接続する
   ※M5Stack-GrayとPCが接続できない場合はUSBドライバーのインストールが必要かもしれない（詳細は備考を参照）
0. VSCodeのボトムバーの「→」をクリックし、アップロード
   <img width="80%" alt="アップロード1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/44675206-900d-7fac-2b2b-0dec047dc8e0.png">
0. 自動で表示されるターミナルで「SUCCESS」が表示されるまで待つ
   <img width="80%" alt="アップロード2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/bf22a981-ea88-acfe-d75a-80b6622201f8.png">
0. VSCodeのボトムバーのプラグのアイコンをクリックし、Serial Monitor を開く
   <img width="80%" alt="シリアルモニター1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/c43ff772-9a3e-f3dd-eba9-4328a93eb181.png">
0. Serial Monitor に以下の画像のようなログが出力されることを確認
   <img width="80%" alt="シリアルモニター2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/f10a56f3-69ed-fe55-00b6-d411259880e5.png">
0. M5Stack-Gray 本体の LCD に「Hello World!」と表示されていることを確認
   <img width="50%" alt="LCD1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1561074/8536f979-8a2b-40e5-5195-5689a432f2ad.jpeg">

# 備考

## USBドライバー

当方の環境では、PCとM5Stack-Grayを接続するためにUSBドライバーをインストールする必要がありました。
[公式サイト](https://docs.m5stack.com/en/download)のCP210x_VCP_Windowsをインストールしました。
※使用しているOSに応じたものを使用する必要あり

## M5Stack-Grayの電源OFF

今回の構成では、USBケーブルをつないでいる状態でM5Stack-Grayの電源はOFFできない。。。
USBケーブルをつないでいない状態で電源ボタンを2回押下で可能。

# まとめ

これで、M5Stack-GrayをVSCodeで開発できるようになったので、ゴリゴリ使っていこうと思う。
まずは単体で動かせるやつら（WiFi/Bloutooth/LCD/Button/SDカード...etc.）を触っていこうかと画策中。

もっと良い方法があればコメントください。

# 参考

* [Platfrom IO 公式ドキュメント](https://docs.platformio.org/en/latest/)