M5Stack Gray購入後に必要なセットアップとHello Worldの実行まで

#本記事の内容
- M5Stack Grayでアバターにしゃべらせてみた

M5Stackのアバターに画面に出せるアバターがとっても可愛いんです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">M5Stackでアバターを動かしてみた！かわいい～ <a href="https://t.co/Q2pN0uYhOd">pic.twitter.com/Q2pN0uYhOd</a></p>&mdash; kanameyo (@kanamekunkun) <a href="https://twitter.com/kanamekunkun/status/1441308458305736708?ref_src=twsrc%5Etfw">September 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

可愛さに惹かれて、、勢いで購入してしまいました！
いろいろ喋らせたり、ラズパイとも連携していきたいなと考えてます。
まずはセットアップをします。

#実施環境
- Windows 10
- Arduino 1.8.16
- M5Stack Gray
![IMG20210917132533.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/bb1d5e0a-bdcf-5dff-6599-156290dd85c7.jpeg)

思っていたより小さくてびっくり。

#手順の流れ 
1. ArduinoIDEのインストール
2. USBドライバー(CP2104 Driver)のインストール
3. M5StackのPC接続
4. ArduinoIDEの初期設定
5. サンプルプログラム(Hello World)の実行

## 1. ArduinoIDEのインストール

[Arduinoのページ](https://www.arduino.cc/en/software)にアクセスして、
自分の環境にあったインストーラーをダウンロードする。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/688e315a-4777-efa6-a917-64603673f77e.png)
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/0f6b9c62-55f8-f05a-2edd-5cbc596c77e2.png)

ダウンロードしたインストーラーを実行し、指示に従ってインストールを進める。
私はデフォルトのままインストールしました。

## 2. USBドライバー(CP2104 Driver)のインストール

[M5Stackのページ](https://m5stack.com/pages/download)から自身の環境にあったドライバーをダウンロードする。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/b38150f2-38f6-a9d2-16d5-4f1cffa878b2.png)

ダウンロードした「CP210x_VCP_Windows.zip」を解凍し、PCの環境にあったインストーラーを実行する。私の環境は64bitなので、「CP210xVCPInstaller_x64_v6.7.0.0.exe」を選択。

## 3. M5StackのPC接続

USB Type Cケーブルを用いて、M5StackをPCに接続した。
![IMG20210917091539.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/53294fe7-9338-555b-85f7-8c589652a7fe.jpeg)


ここで起動音が鳴り、画面が切り替わった。
音が鳴ると思わなかったので、少しびっくり。

Windowsの画面左下の`スタートボタンの上で右クリック > デバイスマネージャ`を開く。
「ポート(COMとLPT)」をクリックし「Silicon Labs CP210X USB～」が認識されていることと何番COMなのかを確認する。私の環境では、COM3で認識されていた。一応メモ。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/a9f88327-2032-4c23-e91b-74d5d92b7b4a.png)

## 4. ArduinoIDEの初期設定

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/8079910a-ac3f-6608-dc82-088220f22ec3.png)
ArduinoIDEを起動する。

### 4.1 ボードマネージャの設定
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/9d5d9b1e-0f04-0a13-3c5f-b1c214a9d5f5.png)

メニューから`ファイル > 環境設定`を辿る。
![08.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/53066c03-1120-afd1-96d4-4f327e993668.png)

追加のボードマネージャーのURLの右のアイコンをクリックする。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/aa050402-e899-3f9e-5331-a3f926058978.png)

新しく出たポップアップに対して、https://dl.espressif.com/dl/package_esp32_index.json を入力し"OK"をクリックする。
※M5Stackに同梱されていたQuick Startに書かれていたURLがこちらでした。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/2c53ca6c-bb8d-ac71-2de5-c5beb5afae77.png)

元の画面に戻ったら、"OK"をクリックする。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/627c0d59-83b8-2ca1-39c5-ad53e6867147.png)

### 4.2 ESP32ライブラリーのインストール
ESP32ライブラリーをインストールするために、`ツール > ボード："Arduino Uno" > ボードマネージャー`を開く。
![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/93d6cbc3-cac3-327d-4e37-3f1b2ea4d1a5.png)
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/3b8ee37d-2bad-810e-a2a4-770fd21aa852.png)

入力ボックスに"ESP32"を入力する。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/edf275f5-d8e3-a029-d50e-88f088005b4a.png)

表示されたライブラリーにカーソルを合わし"インストール"をクリックする。
※カーソルを合わせることで、右側にインストールボタンが出た。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/0d995b63-5ab6-a253-5039-734b1bde5b01.png)
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/ef146c19-c8d3-fe6a-afe8-8a0c50bf05ca.png)

インストールが完了すると、"～バージョン1.0.6"の記載の横に"INSTALLED"と表示された。
※私はインストール中にエラーが出たので、再度"インストール"をクリックすることでインストールを完了できました。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/de9fc16d-0f24-0e63-1730-00d78ba57692.png)

"閉じる"をクリックし、ポップアップを消す。

### 4.3 M5stackのライブラリーのインストール
M5stackのライブラリーのインストールのために、`スケッチ > ライブラリをインクルード > ライブラリを管理 `を開く。
![18.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/d3921919-6dd4-623a-f988-701041ee447c.png)

ライブラリーマネージャが表示された。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/61ab6621-0307-938f-5424-f9a26e59f9c9.png)

検索ボックスに"M5Stack"を入力し、下の方にある"M5Stack by M5Stack Library for M5Stack Core development kit"にカーソルを合わせて、"インストール"をクリックする。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/a854e0dd-81c4-da70-011d-05b1f3ad1cda.png)

依存関係にあるいくつかのライブラリーがインストールされていないとメッセージが出たので、"Install all"をクリックした。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/ef7310f8-529c-7c3e-3b64-8a1e752a6ddc.png)
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/f9d4c499-1d5b-9f88-65ee-4cee5d36e47c.png)

・・・が途中で、画面下部に「no protocol」エラー？が出てしまったので、調査した。
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/76a398bb-390d-701e-5f98-4db8dd11fc6d.png)

こちらのサイト[Core 2 Arduino getting started](https://community.m5stack.com/topic/3540/core-2-arduino-getting-started/2?fbclid=IwAR0H3XyhqakWb5x_FGXBEsyVKvrgRqgbXR4GUXaUZe8XBwc2FGpragkiLBg)で似たような事象に遭遇していた方がいた。

>Work around found:
>　・Fresh/clean install of Arduino
>　・Install M5Core2 in Library Manager & opt to include all 15 dependencies (will fail with "no protocol:" error)
>　・Install manually the 5 remaining dependencies that failed (MFRC522_I2C,M5_BM8563,M5_ADS1100,M5_ADS1115,HX711 Arduino Library,PCA9554)
>　・Install M5Core2 v0.0.1 in Library Manager (downgrade)
>　・Update M5Core2 in Library Manager to latest version (0.0.6), will list 0 dependencies and ask if you would like to install them, but select "Install 'M5Core2' only".
>
>Can now compile and run helloworld example (and others too). Confirmed same install problems encountered on a second PC, and same work around solved it.
>
>Arrgh~! Shouldn't be this messy/difficult.

一つ目に書いてある、Arduinoをフレッシュ(Arduinoの再起動でいいのか？)を実施した。再度、ライブラリー管理から"M5Stack"の状態を確認すると"INSTALLED"になっていた。これでいいのか・・・。気になるが一旦無視して進むことにする。
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/73af74d5-ba10-d7ba-6ac6-cf1b835ed1b9.png)


### 4.4 ボードの選択
`ツール > ボード > ESP32 Arduino > M5Stack-Core-ESP32 `をクリックする。
![25.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/95b8217b-88bd-9331-254a-d3d58f849f6c.png)

## 5. サンプルプログラム(Hello World)の実行

メニューから`ファイル > スケッチ例 > カスタムライブラリーのスケッチ例 > M5Stack > Basics > HelloWorld`をクリックする。
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/0e35be9b-db2a-4daf-f6b4-e5af44b49872.png)

新しい画面が開かれるので、メニューから`スケッチ > マイコンボードに書き込む`をクリックする。
![27.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/89b6c460-fb13-5a3d-237e-66c2928ac145.png)

![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/494ce09c-2202-c706-534f-ad43b25a46e8.png)

以下の注意が出た。接続しているのはCOM3のシリアルポートであっていることを確認済みなので、"OK"をクリックする。

![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/358ba952-77e8-dfab-8566-cf2bc241a712.png)

"OK"をクリックする。

下部に"ボードへの書き込みが完了しました。"のメッセージが完了し、M5Stackに「Hello World」と表示された。
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/e2dd33ec-ffba-cd1d-b862-6cff1460cf6f.png)
![IMG20210917105623.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/9b00f108-0504-b0c7-4504-d96a6d5c8ab8.jpeg)


手順は以上。

全ての手順が終わってからM5Stackの公式ページに「追加のボードマネージャーのURL」に設定するURLとして https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json を指定するように記載されていることに気づいた。製品に同梱されていたQuick StartのURLと異なるが、こちらのURLも追加しておくことにする。設定はこんな感じ。
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017667/ca6229af-55b3-f339-2895-47d86f21da18.png)

以下の記載があった。
> 2.Copy the following M5stack Boards Manager url to Additional Boards Manager URLs:
>
> https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json


# 参考文献
本記事の作成に当たり、以下の情報を参考にさせて頂きました。
- 商品に同梱されていたM5 StackのQuick Start
- [Arduino IDE Development](https://docs.m5stack.com/en/arduino/arduino_development)
- [Core 2 Arduino getting started](https://community.m5stack.com/topic/3540/core-2-arduino-getting-started/2?fbclid=IwAR0H3XyhqakWb5x_FGXBEsyVKvrgRqgbXR4GUXaUZe8XBwc2FGpragkiLBg)
- [初心者向けM5Stackの始め方（ArduinoIDE編）](https://raspberrypi.mongonta.com/howto-start-m5stack-arduinoide/)