M5Stack 入門 環境構築編 (主にMac向け)

# はじめに

[**M5Stack**](http://m5stack.com/)を手に入れたはいいけど、そこからどうしたら良いかわからないという方を対象に環境構築の方法を簡単に説明したいと思います。

# 基本情報

## 開発言語

- **Python** (pSRAMを使用可能なloboris版 MicroPythonベース)

  - [MicroPythonドキュメント](https://docs.micropython.org/en/latest/)
  - [LoBo_MicroPython Wiki](https://github.com/loboris/MicroPython_ESP32_psRAM_LoBo/wiki)

- **Arduino** / **C** / **C++**

  - [Arduino 言語リファレンス](https://www.arduino.cc/reference/en/)
  - [ESP-IDF プログラミングガイド](https://docs.espressif.com/projects/esp-idf/en/latest/)

- それ以外(**Lua**, **mruby** など)

  - 本記事では割愛

### 開発環境

- オンライン

  - [UiFlow](http://flow.m5stack.com/) (Python)
  - [M5Cloud](http://cloud.m5stack.com/) (Python)

- オフライン

  - [PlatformIO](https://platformio.org/) (Python, Arduino, 他)
  - [Arduino IDE](https://www.arduino.cc/en/Main/Software) (Arduino)
  - [ESP-IDF](https://github.com/espressif/esp-idf) (C言語)

## 環境構築

### 全環境共通作業

まずシリアル通信用のドライバを入れる必要があります。[Silicon labs](https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers)のサイトで自分のOSに合わせてドライバをダウンロード、インストールします。
*※ Windowsの人はUniversal版ではなく、for Windows 7/8/8.1 (v6.7.6)を入れた方がいいようです。*
*※ macの場合、Macの**システム環境設定**→**セキュリティとプライバシー**内でソフトウェアがブロックされているので、許可（ブロック解除）してあげないといけません。*

---

### オンライン環境

---

#### UiFlow

以下、Mac向けに説明します。他のOS使っている方はなんとか頑張ってください。

まず、**esptool**というファームウェア書込み用のツールをインストールします。ターミナルを開いて以下のコマンドを入力します。

```shell:esptool_install

# pipの確認。入ってない場合は、自分で調べてインストールしてください・・・
$ pip -V
pip 18.1 from /usr/local/lib/python2.7/site-packages/pip (python 2.7)

# esptoolをインストール
$ pip install esptool

# バージョン確認
$ esptool.py version
esptool.py v2.5.0
2.5.0
```

そしてブラウザで[UiFlow](http://flow.m5stack.com/)のページにアクセスします。
右上の歯車の設定ボタンをクリックします。

<img width="300" alt="UiFlow01" src="https://qiita-image-store.s3.amazonaws.com/0/110484/b9274eaf-af89-a56d-1d37-3d49d523261c.png">

モーダル画面が開くので、そこからFirmwareをダウンロードします。
*※ Mac向けはfirmwareのバージョンが最新ではないので、Windows向けを落としてください。*

<img width="300" alt="UiFlow02" src="https://qiita-image-store.s3.amazonaws.com/0/110484/e09ed62d-36fa-0d55-9fee-0a2bb928edcd.png">

---

もしMac版のアプリを使う場合は、先に以下の作業が必要になります。

```shell
$ sudo spctl --master-disable
```
Macの**システム環境設定**→**セキュリティとプライバシー**→**すべてのアプリケーションを許可**

---

M5StackとパソコンをUSBケーブルで接続します。またターミナルに戻り、以下のコマンドを入力します。

```shell:burn_firmware
# ダウンロードしたファイルを解凍します。
$ unzip ~/Downloads/M5Burner-flow-only.zip -d M5Burner-flow-only

# 執筆時点の最新版はv0.9.1ですが適宜最新版に読み替えてください
$ cd M5Burner-flow-only/firmwares/M5Flow/v0.9.1-en/

$ sh flash.sh
```

書込みが完了したら、M5Stack本体横のリセットボタンを一回押して再起動します。起動したら画面下の右ボタンを連打してください。以下の画面にきたら**Change WiFi Connect**を選択し、真ん中のボタンを押します。以下の画面まで来なかったら、再度リセットして右ボタンを連打してください。

![IMAGE01.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/e9a16a2c-6063-c531-01ba-6d15c3b5f255.jpeg)

表示されているSSIDのWiFiに接続します。

![IMAGE02.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/60e584ac-efc9-0e90-b091-3a39d29ebdb8.jpeg)

ブラウザで http://192.168.4.1/ にアクセスします。

![IMAGE03.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/9e0101ff-c160-70a8-5e05-0021a1db7634.jpeg)

使用するSSIDを選択し、パスワードを入力します。最後にConfigureをクリックします。

![IMAGE04.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/19f28d2b-6c40-71b7-d24a-a73fd989d778.jpeg)

接続できるかな・・・

![IMAGE05.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/26a4f619-0ec2-ec45-78db-c022e2dee851.jpeg)

うまくいきました！

![IMAGE06.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/d38569cd-8331-5792-dc63-a006cb417c66.jpeg)

WiFi接続設定が完了すると、M5Stackが自動的に再起動し、しばらくすると以下の画面になると思います。（**APIKEY**は異なります。）

![IMAGE07.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/57850c7b-67d2-5072-476d-f7441bf1e55e.jpeg)

ブラウザのUiFlowのページに戻り、また右上の歯車をクリックします。

<img width="300" alt="UiFlow01" src="https://qiita-image-store.s3.amazonaws.com/0/110484/b9274eaf-af89-a56d-1d37-3d49d523261c.png">

先ほど、M5Stackに表示されていた**APIKEY**を入力し、Saveをクリックします。

<img width="250" alt="UiFlow03.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/07807078-38fa-9c40-447e-616f6f5896dd.png">

Titleをドラッグして、Titleオブジェクト配置します。そしてTitleオブジェクトをクリックし、プロパティボックスを表示します。**text**の内容を書き換えて、最後に右上の実行ボタンをクリックします。

<img width="250" alt="スクリーンショット 2018-11-24 16.50.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/0ac19f9c-7ebe-4c37-c7d5-c9e6e8c44b95.png">

M5Stackに同じ画面が表示されていたら、成功です。

![IMAGE08.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/a7df3da6-97cf-030c-6401-efe83680666b.jpeg)

#### M5Cloud

[M5Cloudのページ](http://cloud.m5stack.com/)にアクセスし、登録を行う必要があります。大まかな流れはUiFlowと似ているので割愛します。現在は更新が止まっているようですが、M5Cloud向けのfirmwareは[**GitHub**](https://github.com/m5stack/M5Cloud/tree/master/firmwares)から取得できます。

---

### オフライン環境

---

#### Arduino IDE

Arduino IDEを[公式サイト](https://www.arduino.cc/en/Main/Software)からダウンロードして、インストールします。

Arduino IDEを起動したらメニューから**Arduino**→**Preferences...**を開き、**追加のボードマネージャのURL**に以下のURLを追記し、右下の**OK**ボタンを押します。そして一旦Arduino IDEを再起動します。(再起動不要かも)
https://dl.espressif.com/dl/package_esp32_index.json

*追記*
リリース候補のRC版を入れる場合は、以下のURLとのことです。
https://dl.espressif.com/dl/package_esp32_dev_index.json

<img width="250" alt="Arduino01" src="https://qiita-image-store.s3.amazonaws.com/0/110484/19a68bef-610b-c5f7-306e-28294d65df8e.png">

次にArduino IDEのメニューから**ツール**→**ボード**→**ボードマネージャ**を選択します。

<img width="250" alt="tool-board-boardmanager.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/b4cdb15f-48b8-15f5-21f7-6f44dbbadcaa.png">

ボードマネージャ内で**esp32**と検索し、出てきたボードをインストールします。

<img width="250" alt="boardmanager.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/3914bd4c-d49f-249c-0350-e1d285ab2768.png">

*※ ただし、執筆時の安定版であるarduino-esp32のstable-1.0.0ではI2C周りのライブラリにバグがあるため、GitHubから最新版を落として入れた方がいいかもしれません。やり方はこちらの記事：[【心折れずに】MacでM5stackをはじめる](https://qiita.com/hmmrjn/items/2b2da09eecffcbdbad85)にまとめられています。*

次にArduino IDEのメニューから**スケッチ**→**ライブラリをインクルード**→**ライブラリを管理**を選択します。

<img width="250" alt="sketch-include-lib.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/2a82bb4f-8660-ad49-f07f-9035bf93a2c2.png">

ライブラリマネージャ内で**m5stack**と検索し、m5stackのライブラリをインストールします。

<img width="250" alt="libmanager.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/24361f4c-d819-3d63-26a2-c3b8971746d1.png">

次にボードの設定をします。Arduino IDEのメニューから**ツール**→**ボード**→**M5Stack-Core-ESP32**を選択します。

*追記*
M5Stack-Fireというボードも選べるそうです。詳しくはコメント欄参照。

<img width="250" alt="board.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/8f0da1d3-6f5a-42c1-55cf-30395c25728b.png">

次にポートの設定をします。Arduino IDEのメニューから**ツール**→**ポート**→**/dev/cu.SLAB_USBtoUART**を選択します。

<img width="250" alt="port.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/b838077f-98ab-494c-cdc0-14ad76a57b68.png">

最後にサンプルスケッチを実行してみましょう。Arduino IDEのメニューから**ファイル**→**スケッチ例**→**M5Stack**→**Basics**→**HelloWorld**を選択します。

<img width="250" alt="sample.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/0be079d5-ec57-c6b4-f9fd-9cc02fa235d2.png">

そしてM5StackとパソコンがUSBケーブルで接続されていることを確認して、書込みを実行します。

<img width="250" alt="execute.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/c2355e6c-72bc-2166-65cc-d1478f63e761.png">

うまく言ったら、M5Stackの画面に"Hello World"と表示されるはずです。

![IMAGE09.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/9dc3de5b-a7bf-4385-6b44-8ecedb61db0a.jpeg)

---

#### ESP-IDF

ESP-IDFを使うとESP32の機能を全て使うことができます。例えばCPUのクロックを変更したり。[ここ](https://docs.espressif.com/projects/esp-idf/en/latest/get-started/)を参考にインストールしていきます。まずはtoolchainを入れる必要があります。

Mac向けに説明します。まずは[ここ](https://docs.espressif.com/projects/esp-idf/en/latest/get-started/macos-setup.html)からツールチェインをダウンロードします。執筆時の最新版は以下のリンクになります。
https://dl.espressif.com/dl/xtensa-esp32-elf-osx-1.22.0-80-g6c4433a-5.2.0.tar.gz

```shell
$ mkdir -p ~/esp
$ cd ~/esp
# 解凍するファイル名は適宜読み替えてください。
$ tar -zxf ~/Downloads/xtensa-esp32-elf-osx-1.22.0-80-g6c4433a-5.2.0.tar.gz
$ echo 'export PATH=$HOME/esp/xtensa-esp32-elf/bin:$PATH' >> ~/.bash_profile
$ git clone --recursive https://github.com/espressif/esp-idf.git
$ python -m pip install --user -r $IDF_PATH/requirements.txt
$ cp -r $IDF_PATH/examples/get-started/hello_world .
$ cd ~/esp/hello_world
$ make menuconfig
# メニューコンフィグで、SerialPortの設定を変更してSaveし、M5Stackとパソコンをケーブルで接続し書込み
$ make flash
# M5Stackをリセットして以下のコマンドで接続、hello worldとesp32の詳細情報が表示されていたら、成功です。
$ screen /dev/tty.SLAB_USBtoUART 115200
```

**make flash**の際、自分の場合はLDFLAGSとCPPFLAGSを設定していたら、エラーが出たので以下で回避。

```sh
$ unset LDFLAGS && unset CPPFLAGS
$ make flash
```

---

#### PlatformIO

VSCodeの場合は、**Extensions: Marketplce**で**PlatformIO** extensionをインストールします。そして、PlatformIOのPlatformマネージャで**Espressif 32**、Boardマネージャで**M5Stack Core ESP32**と**M5Stack FIRE**、Libraryマネージャで**M5Stack**と他に各自のプロジェクトで必要なものを入れます。

## まとめ

ちょっと（かなり？）後半雑になってしまいましたが、何か間違いやご指摘などありましたら、お気軽にお知らせください。