M5Stack Core2 で開発するための環境構築

M5Stack Core2 で開発を始めるための準備（環境構築）を行っていきます。

:::note info
本記事では M5Stack Core2 を使用していますが，他のシリーズでも対応するライブラリがインストールしてあれば同じようにできるはずです（保証はできませんが...）。
また，本記事中では客観的に見ると好まれない表現があるかもしれません。
何かお気づきの際は，コメント等で教えていただけると幸いです。
:::

# 前提
以下を前提に，進んでいきます。
- 使用するIDE：Arduino IDE

# はじめに
Arduino IDEのインストールは済んでいる状態で進めます。
なお，今からやることは公式サイトにある [Arduino Guide](https://docs.m5stack.com/en/arduino/arduino_ide) を順番に進めるだけです。
こちらのページを見て進めることができる方は，こんな記事読まなくて大丈夫です。

# 初期状態の確認
`File > Examples` がこのようになっています。（最終的にここに項目がいっぱい増えます）
<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/2812b1e7-c372-bba0-f04b-770a91fa4f77.png">
また，ライブラリは何も入っていません（後述する`LIBRARY MANAGER`から確認できます）。

# Board Manager の追加
Arduino IDE Board Manager（ボード；esp32，M5Stack Core2 など）は，開発ボードに関する設定情報や開発で使用したツールチェーンを記録するために使用します。
M5Stack シリーズ用の Board Manager を追加しましょう。

## Preferences（設定）を開く
`Arduino IDE > Preferences...`より，Preferences を開きます。
<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/dccf09a0-2a63-a20f-9ceb-3a08f9ed4251.png">

## M5Stack の Board Manager を追加する
以下のURLをコピーし，Preferences の一番下，`Additional boards manager URLs:`に貼り付け，`OK`を押します。
```
https://static-cdn.m5stack.com/resource/arduino/package_m5stack_index.json
```
<img width="700px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/e46d81ec-cb92-fb99-6098-ccafa5f8aa72.png">
そうすると，画面右下にダウンロード中...という旨のプログレスバーが表示されます。

完了後，もう一つやることがあります。
左のメニューから`BOARDS MANAGER`を選び，出てきた「M5Stack by M5Stack official」をインストールします。
<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/19f58ece-eb52-cdc3-7bd6-6de2876fab92.png">
先ほどと同様，ダウンロードが開始されます。

以上で，M5Stack の Board Manager の追加が完了しました。`Tools > Board:`から，M5Stack のモデルが選択できるようになります。
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/ab0a5baa-5d1c-4d2c-cae0-4bc7a4d70086.png">


# 必要ライブラリをインストール
左側にある`LIBRRY MANAGER`を開き，検索欄に`M5Core2`と入力します（使用モデルに合わせてください）。
すると，（おそらく）一番上に「M5Core2 by M5Stack」というのが出てくるので，こちらをインストールします。
<img width="250px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/a6661292-2aa4-1663-7805-de3c214d5f85.png">
`INSTALL`を押すと，「足りてないライブラリもインストールするか？」と聞かれるので，右側の`INSTALL ALL`で全てインストールしましょう。
<img width="330px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/4ebe099d-fc53-6173-c6ad-00edb509ce3e.png">
インストールが完了すると，一番最初に見た，`File > Examples`の項目がたくさん増えます。
<img width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/d5112f38-74e3-b58b-9dc0-80b5770b95a6.png">

これで，環境構築は終了です。

# 早速動かしてみる
環境構築が終わったので，実際に M5Stack を動かしてみましょう。
## PCとM5Stackを接続
付属のケーブルでもなんでも良いですが，PCとM5Stackを接続してください。自動的に M5Stack が起動します。

## 使用するBoardを選択
`Tools > Board:`より，使用する M5Stack のモデルを選択します。本記事では M5Stack Core2 を使っているので，`M5Stack > M5Core2`を選択します。

## Exampleプログラムを読み込む
`File > Examples > Examples from Custom Libraries`の`M5Core2 > Basics > helloworld`を選択します。
<img width="450px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/d044db56-67f7-89cf-35c8-f8282cabc29d.png">
別ウィンドウが立ち上がり，`helloworld.ino`が開かれています。
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/0974e950-a6ed-ccff-0c80-68f6f426f743.png">

## コンパイル＆アップロード
さて，左上の <img width="25px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/ea3c4e14-58bf-c77a-721c-65d6a5516cd1.png"> ボタン（Upload）を押してみましょう。
Outputウィンドウが表示され，プログラム（スケッチ）のコンパイルが開始されます。
最初，いきなり大量の赤文字が出てくることもあります。最後らへんに`exit status 1`みたいなメッセージが表示されていなければ，コンパイルは続いているので，気にせずもう少し待ちましょう。
無事コンパイルが終わると，それのマイコンへの転送が始まります。
```
（略）
Writing at 0x000720f1... (93 %)
Writing at 0x000776f9... (100 %)
Wrote 436960 bytes (238409 compressed) at 0x00010000 in 4.3 seconds (effective 822.4 kbit/s)...
Hash of data verified.

Leaving...
Hard resetting via RTS pin...
```
これで，プログラム（スケッチ）のコンパイル＆アップロードが完了しました。

## 結果
画面左上に，「Hello World」と表示されました。
<img width="250px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2981603/c1fdcde9-0e86-4d1a-2569-051e066339d0.png">

本記事は以上です。お疲れ様でした。

---
**参考文献**
- https://docs.m5stack.com/en/arduino/arduino_ide