MacでM5stackをはじめる

![DSC_0036.jpg](https://qiita-image-store.s3.amazonaws.com/0/225997/120a1e97-40db-818f-33ae-8569f1a98916.jpeg)

### M5stackとは?
[M5stack](http://www.m5stack.com/)は、我流に説明すると、小さい画面にボタン３つと、バッテリー、WiFiアンテナ、SDカードスロット、センサーを繋げる穴などがついた4,500円のマイコン([Arduino](https://www.arduino.cc/)とかの類)です。USBでPCに繋げて、Arduino IDEで、C++風のArduino言語で書かれたプログラムを書き出して、本体に小型センサーを繋げたり、WebAPIと連動させたりして、遊ぶことができます。去年あたり流行って、今年2月に[日本でも買える](https://www.switch-science.com/catalog/3647/)ようになりました。
ここで、Arduinoを連発してますが、搭載しているマイコン(脳)はArduinoではなく、ESP32。

![method-draw-image.png](https://qiita-image-store.s3.amazonaws.com/0/225997/c2cced2a-4369-68f9-3fa5-7fb1b82c78c4.png)

---

# 導入方法

https://docs.m5stack.com/#/en/quick_start/m5core/m5stack_core_quick_start
こちらにやさしく書かれていますが、**Windows前提**。
Macの方はこちらで、例によってちょっとわかっている前提。
https://github.com/m5stack/m5-docs/blob/master/docs/ja/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md
そこで今回は、mac初心者でもスムーズに導入できるように、全ての手順を丁寧に図示していきたいと思います。

## 環境
今回の記事で使用するものはこちらです:

- M5Stack Basic
- MacBook Pro (MacOS High Sierra)
- Arduino IDE

Arduino IDEの他に様々な開発環境(プログラムを書くツール)が選べますが、
ここでは一番一般的な方法であるArduino IDEを採用します。


## 先に一言

* <font color="red">**電源ボタンは2回押し**</font>です。1回押しは再起動となります。


# STEP 1: Arduino IDE のインストール

https://www.arduino.cc/en/main/software

<img width="1283" alt="スクリーンショット 2018-08-04 17.15.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/dd1db92b-0fcd-4a3b-0bf4-e39c38ac405d.png">

ダウンロードしたzipファイルを解凍すると、Arduino IDEのアイコンが出てきます。
これをアプリケーションフォルダーにドラッグアンドドロップすると、Launchpadから選べるようにします。

<img width="882" alt="スクリーンショット 2018-08-04 17.17.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/7c592289-b1b5-2232-a421-e9aaa298f266.png">

Launchpadを開きます。

<img width="1440" alt="スクリーンショット 2018-08-04 17.20.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/1989ccba-e23a-55e8-9af2-8811d09e3cef.png">

<img width="584" alt="スクリーンショット 2018-08-04 17.21.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/f9b1d9c0-2e5a-4779-8ab4-0e9bf50b91ac.png">

これが、Arduino IDEです。
M5stackに書き込むプログラムはここで書きます。
ただ、現時点ではまだm5stackに書き込みはできません。

# STEP 2: USBドライバーをインストール

MacでM5stackを認識できるようにします。

https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers

<img width="1312" alt="スクリーンショット 2018-08-04 17.50.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/dd871533-265b-a249-8711-ca874df7f2d7.png">

ダウンロードしたzipファイルを解凍して、でてきたものを開く。

<img width="882" alt="スクリーンショット 2018-08-04 17.51.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/91e266ca-242b-3e74-8758-79abcd37d9ea.png">

ダンボールのアイコン(``Silicon Labs VCP Driver.pkg``)を開きます。

<img width="882" alt="スクリーンショット 2018-08-04 17.52.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/373533c1-badd-641b-e289-81a76d99324f.png">

画面の説明に沿ってインストールします。

<img width="732" alt="スクリーンショット 2018-08-04 17.28.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/0541f3e9-a972-6804-ea9c-e8946b8bf33c.png">


<img width="732" alt="スクリーンショット 2018-08-04 17.28.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/0c71e02b-a51d-3e8c-763b-f9b8c19d60e1.png">

<img width="732" alt="スクリーンショット 2018-08-04 17.28.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/7ff7b9a7-ff36-3ab0-809a-42bb49be95fe.png">


途中でこんな通知が来ますので、「"セキュリティ"環境設定を開く」を選びます。

<img width="536" alt="スクリーンショット 2018-08-04 17.30.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/21a5bf6b-001e-e538-fe1d-fcf5e0ab0394.png">

「許可」をクリック。
（もし、通知が出なかったり、逃してしまった場合は、「環境設定」 > 「セキュリティとプライバシー」 > 「一般」タブを開けば同じ画面が出せます。）

<img width="780" alt="スクリーンショット 2018-08-04 17.30.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/fd6f4539-211c-306a-61c2-bb28e4bc1e52.png">

<img width="732" alt="スクリーンショット 2018-08-04 17.53.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/852e7cf8-3abd-ff5d-247a-455a3cebbbd4.png">

これを終えて、Arduino IDEを起動すると、**M5stackをmacに繋いだときに**、「ツール」 > 「シリアルポート」 のところに、「SLAB_USBtoUART」の選択肢が出現するようになったことが確認できます。
出てこない場合はUSBを上下反転して繋ぎ直してみましょう。

<img width="1000" alt="スクリーンショット before after" src="https://image.ibb.co/esMpve/usb_beforeafter.png">

STEP 4でもう一度触れますが、M5stackにプログラムを書き込む時は、この「**SLAB_USBtoUART**」を選択します。


# STEP 3: Arduino Core for ESP32の導入

要は、Arduino IDEでESP32を扱えるようにすることで、M5stackに書き込みができるようになる。

> **ESP32とは?**
> M5stackの脳。
> 上海のESPRESSIF社が販売している32ビットのマイクロコントローラ。
> <img src="https://qiita-image-store.s3.amazonaws.com/0/225997/85608949-fa9a-8ce6-f3d5-4b860d462508.png" width="80px"><img src="https://qiita-image-store.s3.amazonaws.com/0/225997/c117a4d7-9ed3-0716-0655-4c48224857d7.jpeg" width="400px">


https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/mac.md
に載っている、以下のコマンドをまとめてコピーします。

```shell
mkdir -p ~/Documents/Arduino/hardware/espressif && \
cd ~/Documents/Arduino/hardware/espressif && \
git clone https://github.com/espressif/arduino-esp32.git esp32 && \
cd esp32 && \
git submodule update --init --recursive && \
cd tools && \
python get.py
```

<img width="1352" alt="スクリーンショット 2018-08-04 17.33.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/08a02df0-da53-fbb0-6869-0fa8105cc441.png">


ターミナルを開いて、貼り付けます。

<img width="682" alt="スクリーンショット 2018-08-04 17.34.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/8df05e13-d95a-0728-dcb6-7bae4dbd18cf.png">

実行して、成功するとこのようになります。

<img width="682" alt="スクリーンショット 2018-08-04 17.36.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/b79c9014-5d54-0836-ec69-f2c03847cf32.png">

> **エラーが返ってきた場合。**

> ``xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun``

> もし、このようなエラーが返ってきたら、Macの開発者用コマンドラインツールがまだインストールされていないということですので、``xcode-select --install``とターミナルに叩いてツールをインストールしてからもう一度トライしましょう。


これを終えて、Arduino IDEを再起動すると、「ツール」 > 「ボード」 のところに、「M5Stack-Core-ESP32」を含む、ESP32系の選択肢がたくさん追加されていることが確認できます。

<img width="1000" alt="スクリーンショット before after" src="https://image.ibb.co/gh54Tz/board_beforeafter1.png">

STEP4でもう一度触れますが、M5stackにプログラムを書き込む時は、この「**M5Stack-Core-ESP32**」を選択します。


# STEP 4: サンプルプログラムを動かしてみる

M5stackにプログラムを書き込む準備は整ったので、サンプルプログラムを動かしてみましょう。

まずは、Arduino IDEにサンプルプログラムのライブラリを追加してみます。
「スケッチ」>「ライブラリをインクルード」>「ラブラリを管理...」

<img width="1440" alt="スクリーンショット 2018-08-04 18.04.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/22221eee-c278-a63e-3df1-2113d0856865.png">

「M5Stack by M5Stack」をインストールします。

<img width="912" alt="スクリーンショット 2018-08-04 18.05.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/75d0e90b-380e-2de8-5bb8-bde818a93193.png">

「ファイル」 > 「スケッチ例」 > 「M5Stack」 から好きなサンプルを選んでみましょう。

<img width="1440" alt="スクリーンショット 2018-08-04 18.07.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/43b4b6c1-0352-13ab-fac2-38125fa6c413.png">

では、いよいよコンパイルして書き出してみます。
最初に、macと繋げて電源をつけましょう。(電源ボタンは2回押し)

![20180423174647.jpg](https://qiita-image-store.s3.amazonaws.com/0/225997/76be1a07-a502-19a2-54df-8f7c47706518.jpeg)

「ツール」 > 「シリアルポート」 のところが、「SLAB_USBtoUART」となっていることを確認。
出てこない場合は、USBを反転して繋げ直しましょう。

<img width="1440" alt="スクリーンショット 2018-08-04 18.01.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/bc710100-5318-14e8-830a-7f4262a3812e.png">

「ツール」 > 「ボード」 のところが、「M5Stack-Core-ESP32」 となっていることを確認。

<img width="1440" alt="スクリーンショット 2018-08-04 17.37.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/5447f0fb-bab4-1784-b8d3-ce74e15c30b9.png">

コンパイルします。

<img width="612" alt="スクリーンショット 2018-08-04 18.12.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/d1885c88-e916-14ac-143c-1c746a5aaf87.png">

書き出します。

<img width="612" alt="スクリーンショット 2018-08-04 18.13.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/f60230fc-40b0-b0f1-651f-b845451a1e2c.png">

書き出し中、下の黒い枠(コンソール)で赤い字がズラズラ出てエラーっぽいですが、エラーではありません。

<img width="612" alt="スクリーンショット 2018-08-04 18.13.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/225997/b41c508c-f131-3c4d-7069-cce8b00b3812.png">

書き出しが終わると、自動的にM5stackが再起動して、プログラムが実行されます。

![DY8Y9HhVoAE-YgB.jpg](https://qiita-image-store.s3.amazonaws.com/0/225997/2c36d159-d066-422d-a1af-508fdbe15df7.jpeg)

**おめでとうございます。**:tada:
無事、Hello Worldができました。:beers:
ある程度充電できたら、ケーブルを外して単体で遊ぶことができます。

# 最後に

いかがだったでしょうか。
ぜひ、他のサンプルをみて遊んでください。また、ネットにもいろんなサンプルが転がっているので、センサーや、Web APIなどと連携させて遊んでみてはいかがでしょうか。

まだ持ってない人は、5,000円もしないので、[買いましょう](https://www.switch-science.com/catalog/3647/)。

自分は、大学のオープンキャンパスの１日前に研究室の先生からM5stackでデモを作って欲しいと言われて嘆いていました。（それまでM5stackは触ってなかった。）
自分、プログラミングは好きなのですが、環境構築は大の苦手で、公式の導入手順を読んでもよくわからずに、1時間くらい書き込むことができずに、心が折れました。(USB-TypeCでも上下を意識しないといけないと知った瞬間は殺意が芽生えましたね。)
ただ、サンプルプログラムを漁っていると、結構楽しいので研究で使ってみたいという思いが少し芽生えました。

導入で諦めちゃう人が出ると勿体無いと思ったので、初心者に極力優しい記事にまとめることを心がけましたが、今見返すとややしつこいような気がします。()
それでも、誰かのために役立てば、幸いです。