M5Stack開発環境

# M5Stack開発環境構築

M5stackBasicの開発環境の構築メモ

# 開発環境

- Windows11 Pro
- VSCode

# IDE

- PlatformIO ← 今回の対象（VSCode）
- UIFlow
- Arduino IDE

# PlatformIOのセッティング

VSCodeを公式ページよりダウンロード＆インストール

https://code.visualstudio.com/download

VSCodeの拡張機能より「PlatformIO」を検索＆インストール

![スクリーンショット 2024-07-20 6.33.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/3edca346-1866-5ee3-11ef-d619d84eace6.png)

# PlatformIOの起動

左パネルに👽マークが出るのでクリック。
初回起動時は少し時間がかかる。

![スクリーンショット 2024-07-20 6.36.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/58dc91a2-44b5-73fe-e378-c8f34e41194d.png)

右下下部に「PlatformIO Installer: Finished! Please restart VSCode.」と表示されたらVSCodeを再起動。

![スクリーンショット 2024-07-20 6.38.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/c1543e60-afc4-636f-f57d-9082c5d9c980.png)

PlatformIOの開発準備OK。

![スクリーンショット 2024-07-20 6.40.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/9f90e230-81cc-b436-3f1c-883f44c06eae.png)

# 新規プロジェクトの作成

「New Project」から作成

![スクリーンショット 2024-07-20 8.01.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/42147097-ae0a-7f73-641b-279215c6cc3f.png)

Boardの設定は以下を参考に使っているM5Stackに合うやつを選択

https://qiita.com/penguinprogrammer/items/774d4b719464e41cdcf3#%E9%96%8B%E7%99%BA%E5%85%83m5stack%E7%A4%BE%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E6%83%85%E5%A0%B120201114-%E7%8F%BE%E5%9C%A8

![スクリーンショット 2024-07-20 8.00.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/8b43bc3a-2dee-1f91-39b0-67b883d3680f.png)

「Finish」を押して完了


# M5Stack用の設定

M5StackのPlatformIO用ライブラリのインストール

M5Stack用のライブラリをインストールしておかないとコンパイルが失敗するので、Librariesからm5stackを検索して`M5Stack by M5Stack`というのをプロジェクトに追加

 ![スクリーンショット 2024-07-20 7.18.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/9d6e7022-dd02-6d77-43bc-1f11f8cce62c.png)

![スクリーンショット 2024-07-20 8.04.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/fbf6abd4-5003-7395-7250-735663129ed4.png)

## 追加するプロジェクトを選ぶ

![スクリーンショット 2024-07-20 8.05.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/4750ed56-f163-2876-2a29-2dadd6d084c7.png)


![スクリーンショット 2024-07-20 7.59.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/0ffbcdd6-bacd-c958-76a8-727c886027cf.png)

# サンプルプログラム実行

サンプルプログラムを動かしてみる

PlatformIOの`Libraries`タブをクリック
`Install`タブをクリックして`Examples`を表示
検索欄に`display`と入力して、`Basics\Dispaly`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/d34dba9e-aed1-ce0f-df06-dbff87fe00ff.png)

コードが表示されるのでコピー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/e9c97d38-d1a4-6636-a132-bf073ec64d68.png)

`src/main.cpp`に貼り付け

![スクリーンショット 2024-07-20 8.26.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/370a2297-c9ae-86f4-b3d3-a3316937de77.png)

VSCodeの下部に小さく「→」が表示されているのでクリック

![スクリーンショット 2024-07-20 9.22.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/2106376a-33c9-fa1b-ee48-5b2edd938df2.png)

正常にビルドできればM5Stackに以下のような表示がでる

![1000003675.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/a8013eba-5a70-4035-9d11-dabc2d355a8f.jpeg)