M5Stackの開発環境を構築する

M5Stack Core2 IoTを購入したのでMacBookAirに開発環境を構築してみる。

## Arduino IDEをインストールする

[Arduino IDE](https://www.arduino.cc/en/software)

赤枠で囲んだMac OS Xのところをクリックする。

|![m5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/77f2cbbc-e0bd-83c1-6f9c-dd6f2dd60f9a.png)|
|:-:|

以下のような画面になったら赤枠の「JUST DOWNLOAD」をクリックする。

|![m5-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/42a7996f-f68b-c706-6df6-692a5f05369c.png)|
|:-:|

|![M5-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/06971e64-0c4f-cd50-271f-198e60008952.png)|
|:-:|

ダウンロードしたArudioをアプリケーションフォルダに移動して起動する。
以下のようなダイアログが出たら「開く」をクリックする。

|![M5-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/b4d8e662-d4f7-264f-85dd-2e5dfb0f1cb9.png)|
|:-:|

Arudino IDEが起動すると以下のような画面になります。

|![M5-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/f5d997c5-6849-3078-a5cb-2525e76766b5.png)|
|:-:|



## CP210X Driverのインストール
[M5Stackのダウンロードサイト](https://m5stack.com/pages/download)

|![m5-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/c9de5d8e-0358-3da8-bff1-4729e0346392.png)|
|:-:|

ダウンロードしたファイルを開いて、「Silicon Labs VCP Driver.pkg」をダブルクリックしてドライバーをインストールする。

|![m5-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/e48493c6-aefe-d4db-9b32-bc89745c809a.png)|
|:-:|
|![m5-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/bc043ba8-a27e-9d82-085f-916f00fc8553.png)|
|:-:|

ダブルクリックすると、以下のような流れでインストールされる。

|![m5-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/b0156faf-7cfc-902d-e3dc-911268717152.png)|
|:-:|
|![m5-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/a194f90c-43aa-5bdf-5048-5d8cf2d83fdb.png)|
|:-:|
|![m5-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/5cb16b8f-077e-ba6d-7a6a-db751458a0a3.png)|
|:-:|
|![m5-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/28451514-639d-79e6-1bd3-11f15bd6b290.png)|
|:-:|
|![m5-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/947e2173-0c34-0d77-b1a1-71ac2f6519f5.png)|
|:-:|

もし以下のようなダイアログが出たら、詳しい情報をクリックして「セキュリティとプライバシーのダイアログを表示すると「開発元　"Silicon Labortories Inc"のシステムソフトウェアの読み込みがブロックされました。」という表示が出ていますので許可します。

|![m5-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/b4fcb146-aa0e-4abe-51dd-8d72a345f183.png)|
|:-:|
|![M5-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/8550d455-9fc5-405c-8a90-3a1ff2a6e250.png)|
|:-:|

ドライバがインストールされたかを確認する。

```
% ls /Library/Extensions/
AX88179_178A.kext	HighPointRR.kext	SoftRAID.kext
HighPointIOP.kext	SiLabsUSBDriver.kext
```

SiLabsUSBDriver.kextがあればインストールは完了している。

M5Stack Core2を接続して、Arduino IDEを起動する。
その後に[ツール]-[シリアルポート]-[/dev/cu.usbserial-0202E72E]を選択します。

|![スクリーンショット 2021-02-14 10.26.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/bf76fe25-69af-194a-ccbf-0d721a9ae64f.png)|
|:-:|

## ArduinoIDEの設定
### ボードの追加

メニューバーの[Arduino]-[Preferences...]から環境設定のダイアログを開き、赤枠で囲んだ追加ボードマネージャのURLのところに以下のURLを入力して[OK]ボタンを押す。

https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json

|![m5-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/9ec8b551-c92d-dfd6-0670-9d9c41f22ef4.png)|
|:-:|

その後、メニューバーの[ツール]-[ボード]-[ボードマネージャ...]を選択し、ボードマネージャを起動して赤枠の検索ボックスに「m5」を入力して検索された「M5Stack」をインストールします。

|![m5-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/7877afa9-1028-cdb5-7c89-31d2ad10e88e.png)|
|:-:|


### ライブラリの追加
メニューバーの[ツール]-[ライブラリを管理...]を選択して、ライブラリマネージャを起動します。
赤枠で囲んだ検索ボックスに「m5core2]を入力して検索された「M5Core2」をインストールします。

|![m5-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/5a9a01c0-dde8-e036-e90f-61d228f659b1.png)|
|:-:|

### ボードの選択
メニューバーの[ツール]-[ボード]-[M5Stasck Arduino]-[M5Stack-Core2]を選択してボードを選択します。

|![スクリーンショット 2021-02-13 18.28.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/ea38ee57-77bb-f8fd-bcf9-f024e47a56a5.png)|
|:-:|

ボードの選択が完了すると以下のような表示になります。

|![スクリーンショット 2021-02-14 10.55.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/9ade6696-6aaa-3c7a-3c28-67fb24e3f422.png)|
|:-:|

## Hello Worldを表示

```
#include <M5Core2.h>

void setup() {
  M5.begin(true, true, true, true);
  M5.Lcd.setTextSize(3);
  M5.Lcd.print("Hello World");
}

void loop() {

}
```
を入力して、赤枠のボタンを押すとM5Stack Core2のディスプレイに「Hello World」が表示されます。

|![m5-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/cc877cfa-89c8-3c12-e7df-1b3f948d2ca1.png)|
|:-:|

もしコンパイルエラーが出たら以下のところを参考にpyserial-3.5をインストールします。

### コンパイルエラー

MacのArduino IDE環境ではエラーが出てコンパイルができなかった。

```

Traceback (most recent call last):
  File "/Users/nomura/Library/Arduino15/packages/m5stack/tools/esptool_py/3.0.0/esptool.py", line 39, in <module>
    import serial
ImportError: No module named serial
「WiFiClient.h」に対して複数のライブラリが見つかりました
使用済：/Users/nomura/Library/Arduino15/packages/m5stack/hardware/esp32/1.0.7/libraries/WiFi
未使用：/Applications/Arduino.app/Contents/Java/libraries/WiFi
「SD.h」に対して複数のライブラリが見つかりました
使用済：/Users/nomura/Library/Arduino15/packages/m5stack/hardware/esp32/1.0.7/libraries/SD
未使用：/Applications/Arduino.app/Contents/Java/libraries/SD
exit status 1
ボードM5Stack-Core2に対するコンパイル時にエラーが発生しました。
```

M5Stackのライブラリも入っていたので、ライブラリを消してM5Stack Core2のものだけをインストールしたが、改善せず。

色々と調べているうちの以下のページに到達。
[Mac版Arduino IDE で M5Stackがビルドできない（import Serialエラー）](https://qiita.com/Nabeshin/items/b429675faa918f12c415)
ということで、

```
 % sudo pip3 install --target /Library/Python/2.7/site-packages pyserial
Password:
WARNING: The directory '/Users/nomura/Library/Caches/pip' or its parent directory is not owned or is not writable by the current user. The cache has been disabled. Check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
Collecting pyserial
  Downloading pyserial-3.5-py2.py3-none-any.whl (90 kB)
     |████████████████████████████████| 90 kB 4.4 MB/s 
Installing collected packages: pyserial
Successfully installed pyserial-3.5
```

この後ビルドが成功してM5Stack Core2に「Hello World」が表示されました。