M5Stackの開発環境を整える - PlatformIO IDE編

#はじめに
M5Stackをがっつり使っていこうと思うので開発環境を整えて行こうと思います。
ベースはWindowsを想定して書いていますが、Macでも同様に確認できていますので、適宜読み替えてください。できる範囲でMacの場合も記載していく予定ではいます。

#エディタ環境

M5Stackの開発環境としては、まずは[Arduino IDEを利用する](https://github.com/m5stack/M5Stack)ことになるかと思います。
プロトタイピングでちょこっとコードを書くレベルならArduino IDEでも十分ですが、ガッツリコード書こうと思うと非常に不便なので、エディタ環境を変更します。

オープンな組み込み用IDEといえばEclipseベースを思い浮かべる人も多いと思いますが、最近はVisual Studio Codeベースも台頭してきています。

これまで組み込み向けの開発環境は様々であったのですが、これを統合的に扱えるようにする仕組みとして[PlatformIO](https://platformio.org/)が開発されています。そしてPlatformIOを使った開発統合環境として[PlatformIO IDE](https://platformio.org/platformio-ide)が[Atom](https://atom.io/)と[Visual Studio Code](https://code.visualstudio.com/)向けに提供されています。PlatformIO（PlatformIO IDEと区別するためにPlatformIO Coreと呼ぶ)は、[他のエディター(Eclipseも含む)にも組み込み可能](https://platformio.org/install/integration)となっています。

##M5Stack用にVisual Studio CodeにPlatformIO IDEを設定する

M5Stack用にVisual Studio CodeにPlatformIO IDEを設定します。Visual Studio Codeはインストール済とします。

###拡張機能のインストール

Visual Studio Code（以降、VSC）の左側にある「拡張機能」アイコンを押し、表示される検索窓に"PlatformIO"と入力して、PlatformIOを見つけます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/de01f7f3-04ab-fa90-f037-1f03ef3203d8.png)

そして、"インストール"を選択してインストールを開始します。次に"再読み込み"が表示されますので、選択すると拡張機能がアクティブになり、"Installing PlatformIO Core..."と表示されますので、インストールが完了するまでそのままで待ちます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/8381a9fd-3359-3403-26ab-8a25e7be4bf3.png)

インストールが成功すると、その旨を知らせるダイアログが表示されますので、"Reload Now"を選択して再読み込みをします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/933ee405-0f2f-e25d-1a63-be85fd3b041d.png)

すると以下のダイアログが表示されますので、"ウインドウの再読み込み"を選択して、再度読み込みを行います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/30e60e32-3ae0-232f-bd79-ea2b13c4ce73.png)

以下のように拡張機能のインストール済みに"PlatformIO IDE"が表示され、"PIO HOME"ウィンドウが表示（少し時間がかかるかも）されれば完了です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/29269a91-b603-09fd-081d-07824ebca691.png)

この"PIO HOME"ウィンドウからM5Stack用のプロジェクトを作成することができます。

###M5StackのPlatformIO用ライブラリのインストール

この状態でも、プロジェクト作成時にM5Stackを選択できるのですが、M5Stack用のライブラリをインストールしておかないとコンパイルが失敗します。

"PIO HOME"ウィンドウの左側の"Libraries"アイコンを選択し、検索窓に"m5stack"を入力するとライブラリ（[M5Stack by Zibin](https://platformio.org/lib/show/1851/M5Stack)）が表示されますので選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/6c8d4203-77de-4211-03c9-b8bd8739b3be.png)

以下の画面が表示されますので、"Install"を選択してインストールを開始します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/b2976e1d-9e3b-ae64-2b00-2fddbc479ee2.png)

PlatformIO IDEを初めて使う場合はおそらくこのままでも動くと思いますが、ライブラリの依存性問題があるようなので、作成したプロジェクト内にある"platformio.ini"に以下のようにlib_depsを追加しておくことが推奨されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/d2c3e62f-fcb2-b6b9-d403-860b1ceaba22.png)

これで準備は完了です。

###サンプルをコンパイルしてM5Stackに書き込む

では、実際にM5StackのサンプルをコンパイルしてM5Stackに書き込んでみます。

まずはプロジェクトを作成します。"PIO HOME"ウィンドウの"New Project"を押すと"Project Wizard"のダイアログが表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/6fcbab8a-a7ce-bba4-3420-65902eda90ea.png)

目的にあわせて内容を選択・記載する。

|項目|設定内容|
|:---|:---|
|Name:|プロジェクトの名前|
|Board:|M5Stack Core ESP32 もしくは M5Stack Fire ※使用するM5Stackに合わせて選択|
|Framework:|Arduino|
|Location:|プロジェクトの保存フォルダ。チェックボックスを外すと以下の画像になって選択や新規作成できる。|
![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/9e005cda-e1fe-2d70-c5e6-1ac7265ace61.png)

サンプルコードは、"PIO HOME"ウィンドウの"Libraries"アイコンを選択して、"Installd"タブを選択すると先ほどインストールしたライブラリが表示されるので選択します。"Examples"タブに選択リストがあるので、そこで検索できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/d248261b-6603-b3a1-8dcf-f7604508a5c3.png)

例えば、"Basics\Display"を選ぶと"Display.ino"におなじみのsetup(), loop()のコードが表示されますので、丸ごとごっそりプロジェクト内の"main.cpp"にコピーします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/65ed9eea-77d2-7c03-3132-4825a21eef0b.png)

その後、タスク実行（ALT+CTRL+T）で"PlatformIO:Bulid"を選んでビルド、"PlatformIO:Upload"を選んで書き込みを行います。もしくはVSCの左下にあるアイコンの"√"（ビルド）と"→"（書き込み）を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/5bede2bc-bcd5-a653-0763-1bfff32e7a3b.png)

###M5Stack-Avatarを導入する

次に、M5Stackアプリの代表作の１つである[M5Stack-Avatar](https://github.com/meganetaaan/m5stack-avatar)を導入しておきます。

とはいえ、M5Stack-AvatarはPlatformIO用にライブラリ公開されてますので、"PIO HOME"ウィンドウの"Libraries"アイコンを選択して、"M5Stack"で検索すると出てきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/47bb220f-5281-90a1-00ed-2eee99b58a51.png)

ですので、Installするだけです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/2705e3fc-342f-67d2-4fdd-ed3823da5e36.png)

前回のサンプル同様にExamplesにあるコードをmain.cppに書き換えればよいです。

```main.cpp
#include <M5Stack.h>
#include <Avatar.h>

using namespace m5avatar;

Avatar avatar;

void setup()
{
  M5.begin();
  avatar.init();
}

void loop()
{
}
```

簡単！。

###AquesTalkを導入して喋らせる

次に、M5Stack-Avatarのサンプルのtalkを、PlatformIO IDEからコンパイルできるようにします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/3c802f44-1d29-8837-b177-2f4b83280446.png)

このサンプルは、株式会社アクエストさんの音声合成エンジン[AquesTalk](https://www.a-quest.com/index.html)のESP32版である、[AquesTalk pico for ESP32](https://www.a-quest.com/products/aquestalk_pico_esp32.html)を使用します。

また、このAquesTalkをアプリケーションから簡単に使用できるためのクラスライブラリである、[AquesTalkTTS](http://blog-yama.a-quest.com/?eid=970191)を使用します。

プログラムからみたAquesTalkTTSとAquesTalkの関係は以下のようなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/19d03dfd-22d8-931f-d9ce-3c190037d2dc.png)

####AquesTalkTTSの設定 - プロジェクト用ライブラリの設定

まずは、AquesTalkTTSライブラリを使用できるようにします。AquesTalkTTSの各ファイル(AquesTalkTTS.cpp, AquesTalkTTS.h)はM5Stack-Avatarに含まれてますが、直接プロジェクトのmain.cppのソースからは参照できないようです。

PlatformIOの設定でできるかもしれませんが、今回はプロジェクトのlibディレクトリに配置することにしました。

プロジェクトのlibディレクトリにあるreadme.txtに書かれていますが、プロジェクト毎のライブラリをこのlib配下に配置することができます。

libの配下に`AquesTalkTTS`のフォルダを作成し、その中に`AquesTalkTTS.cpp`と`AquesTalkTTS.h`をコピーします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/51272/41f03a17-4691-0546-1857-1668e6f83de4.png)

AquesTalkTTSの各ファイルは、M5Stack-Avatarのインストール先であるユーザホームの配下の`.platformio\lib\M5Stack-Avatar_ID4529\lib`にありますし、別途ネットから取得してもよいかと思います。

####AquesTalkの設定

次に、AquesTalkの設定です。株式会社アクエストさんから[ダウンロード](https://www.a-quest.com/download.html)したファイルを任意の場所（今回は`c:\esp32`を例としています）に解凍します。解凍後のフォルダ名は`aquestalk_esp32`となりますが、念のため`aquestalk`にリネームしました。

次に、```platformio.ini```に以下の記載を追加します。

```platformio.ini
lib_extra_dirs = c:\esp32

build_flags =
  -Lc:\esp32\aquestalk
  -llibaquestalk
```

- lib_extra_dirs
 - LDF(Library Dependency Finder)の対象とするディレクトリの指定。これを指定することで、AquesTalkTTS.cppがaquestalk.hを参照することができるようになります。注意点は、[直接includeファイルがあるフォルダを指定するのではなく、それが含まれるフォルダのパスを指定する点](http://docs.platformio.org/en/latest/projectconf/section_env_library.html#lib-extra-dirs)です。つまり、今回のケースでは、`c:\esp32\aquestalk`ではなく、`c:\esp32`を指定します。

- build_flags
 - ビルド時のオプションを指定できます。今回は、`libaquestalk.a`をビルド時にリンクする指定をしておきます。`-L`で`libaquestalk.a`のあるフォルダを指定し、`-l`でリンク対象のライブラリを指定します。

これで、talkのサンプルをVSCでコンパイルできるようになります。

（続く）