CLionでPlatformIOを使って、M5StackのHello Worldを作るまで

# はじめに
今まで`ArduinoIDE`を使って、`M5Stack`をビルドしていたのですが、
普段使っている[JetBrains社](https://www.jetbrains.com/)の製品でビルド出来ないかと探したら、
CLionとPlatformIOを組み合わせれば出来そうな事がわかりました。
ただ、[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code)と[PlatformIO](https://platformio.org/)の組み合わせを紹介するサイトは多々あるのですが、
[CLion](https://www.jetbrains.com/clion/)と[PlatformIO](https://platformio.org/)の組み合わせを紹介しているサイトが少なかったので、
`Hello World`を出すまでの手順を備忘録として記載しておきます。
# 目次
[0. インストール順](#0-インストール順)
[1. Pythonのインストール](#1-pythonのインストール)
[2. PlatformIO Coreのインストール](#2-platformio-coreのインストール)
[3. 環境変数の確認](#3-環境変数の確認)
[4. CLionにPlatformIOプラグインをインストール](#4-clionにplatformioプラグインをインストール)
[5. 新規プロジェクト](#5-新規プロジェクト)
[6. PlatformIOの設定画面](#6-platformioの設定画面)
[7. platformio.iniの設定](#7-platformioiniの設定)
[8. ライブラリの追加](#8-ライブラリの追加)
[9. Hello Worldの作成](#9-hello-worldの作成)
[10. ビルドとアップロード](#10-ビルドとアップロード)
# 環境
- Windows10 Home
- CLion 2022.2.4
- PlatformIO Core 6.1.5 / Home 3.4.3
- Python 3.9.6
- M5Stack Basic

# 0. インストール順
CLionでPlatformIOを使えるようにするには、CLionの[PlatformIOのページ](https://pleiades.io/help/clion/platformio.html)にインストール手順が載っていますが、大まかには以下の感じです。
1. Pythonのインストール
1. PlatformIO Coreのインストール
1. CLionにPlatformIOプラグインのインストール
CLionは既にインストール済の想定で、以下からそれぞれインストールの解説をしていきます。

# 1. Pythonのインストール
PlatformIO Coreをインストールするには、VSCodeを入れて、PlatformIO IDEを入れることで、自動的にPlatformIO Coreが入るそうですが、それするならVSCodeで書けよ、って話なので、今回はPlatformIO Coreのみを入れて行こうと思います。ということで、インストールするにはまずはPythonを入れる必要がありますので、Pythonをインストールします。
## Pythonのダウンロード
![python_01_web.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/4d17e77f-6822-32e5-9fcf-7bbeab295998.png)
[Pythonのサイト](https://www.python.org/)にアクセスして、Windows版のインストーラをダウンロードします。
## Pythonのインストール
![python_02_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/edab6053-7d54-00f6-0bb5-0b14c9f33408.png)
ダウンロードしたインストーラを起動し、`Add python.exe to PATH`にチェックを入れて、`Install Now`をクリックしてインストールを進めます。
## Pythonのバージョン
![python_04_cli.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/8ecc8085-e48d-f037-b78f-8adc6ee66f2f.png)
インストール完了後、動作確認のため、コマンドプロンプトでバージョンを確認します。
```shell
python --version
```
と入力するとバージョンが確認できます。

# 2. PlatformIO Coreのインストール
Pythonのインストールが完了したら、次はPlatformIO Coreをインストールします。
## get-platform.pyのダウンロード
PlatformIOの[Local Download (macOS / Linux / Windows)](https://docs.platformio.org/en/latest/core/installation/methods/installer-script.html#id2)のページから、`get-platformio.py`を右クリックして、デスクトップなどに別名で保存します。
## PYファイルの実行
コマンドプロンプトを起動して、ダウンロードしたPYファイルを実行します。
![python_05_platformio_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/55f4cf78-b0d4-f2ed-8429-eb9c4a267e72.png)
インストールが完了すると、`PlatformIO Core has been successfully installed...`みたいな文言が出てきます。
![python_06_platformio_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/68b0d6b2-04e2-15cf-e544-a183f2024f8d.png)

# 3. 環境変数の確認
PlatformIO Coreのインストールが完了したら、次はパスを通します。
Windowsのコントロールパネルを開き、
`システム` > `詳細情報` > `システムの詳細設定`の順で進むと、
`システムのプロパティ画面`が開きます。
![path_02_moreinfo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/721a3ca8-446b-7945-848e-55b168cd7062.png)
その後、`詳細設定タブ`から`環境変数`をクリックし、`Path`を選択して、`編集`を選択。
開いた画面から`新規`を押して、以下のパスを入力するか、`参照`ボタンから、該当のフォルダを開いて、選択します。
```console
C:\Users\UserName\.platformio\penv\Scripts
```
※`UserName`の部分は、お使いのパソコンにより異なります。
PlatformIOの[Install Shell Commands](https://docs.platformio.org/en/latest/core/installation/shell-commands.html#id4)にも説明があります。

# 4. CLionにPlatformIOプラグインをインストール
CLionの[PlatformIOのページ](https://pleiades.io/help/clion/platformio.html#install)にも載っています。
## CLionを起動
![clion_02_init.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/a69d78eb-deed-e81e-2c74-d8368943ccc6.png)
CLionを起動します。
## PlatformIOプラグインをインストール
![clion_03_plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/8c341c0f-504a-41cd-f91e-18f09d327129.png)
`Plugins`を選択し、`Marketplace`から`PlatformIO`を検索して、インストールします。
## 再起動
![clion_05_restart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/cfa1ad28-36c6-784a-0b03-371f32318a59.png)
インストールが完了したら、CLionを再起動します。

# 5. 新規プロジェクト
![clion_06_newprojct.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/8a3cb200-adbc-77c0-0707-358640da466a.png)
CLionの再起動後、`New Project`を選択すると、左のライブラリ一覧に`PlatformIO`の項目が出てきます。
`PlatformIO`を選択すると、ボードとフレームワークの一覧が出てきます。
今回はM5Stack Basicを使用するので、`M5Stack` > `M5Stack Core ESP32`を選択しました。
`Location:`に、プロジェクトを保存する場所を指定して、`Create`を押すと、プロジェクトが作成されます。
![clion_06_newprojct_nocore.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/38cbcaa9-8226-844b-f56a-56e8526ddecf.png)
もし、PlatformIO Coreがなかったり、パスを通していないと、上記の画面のようになり、左にメニューは追加されるものの、ボードやフレームワークの一覧が出てきません。
## プロジェクト画面
![clion_10_cpp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/f7b78b49-53c5-ae46-060e-654707bfb8c5.png)
新規プロジェクトを作成するとデフォルトのファイルが色々生成されます。
`src` > `main.cpp`にコードを書いていきます。
## 設定ファイル
![clion_09_ini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/fae54850-57a5-df02-d225-e7f1ccfe049e.png)
設定ファイルは`platformio.ini`ファイルで、直接書くことも出来ますが、
platformioの設定画面を開くことでiniファイルに追記していくことができます。
設定ファイルには、アップロード先のCOMポートやシリアルモニタの速度などを書きます。
## M5Stackのポートの確認
というわけで、アップロード先のCOMポートを調べるために、M5StackをWindowsのUSBに接続します。
Windowsマークを左クリックして、`デバイスマネージャー`を選択します。
![platformio_05_device.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/e1f4d7ac-8186-50e2-523e-ed2daf9ffbe2.png)
`ポート（COMとLPT）`を開くと、M5Stackが接続されているポート番号が確認できますので、これを覚えておきます。
上記の場合は、`COM3`がM5Stackのポート番号です。

# 6. PlatformIOの設定画面
ポート番号が分かったところで、次にiniファイルの設定です。
![clion_08_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/0ae13f3d-e071-4502-ca96-e228120aedf6.png)
CLionの`Tools`>`PlatformIO`>`Home`を選択すると、ブラウザでPlatfomIOの設定画面が開きます。
![platformio_01_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/f64c2dc5-31e7-d096-8cb6-873575c52d1c.png)
## プロジェクトのインポート
PlatformIOの画面でプロジェクトの設定を行う場合、CLionで作ったプロジェクトをインポートする必要があります。
![platformio_02_import.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/cda6fa56-7b7e-283e-41b6-e838bae086ef.png)
先ほどの設定画面の`import Arduino Project`を選択すると、上記のインポートフォルダの選択画面が出ます。
プルダウン画面で、インポートするプロジェクトのボードを選択します。今回は、`M5Stack Core ESP32`を選択します。
また、`Use libraries installed by Arduino IDE`もチェックしてみました。チェックしなくてもいいかもしれません。
CLionで作ったプロジェクトフォルダまで移動して、`import`を選択します。
![clion_03_import_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/76c4a7af-a1d6-e495-dc16-92a30b690021.png)
インポートが完了すると、ポップアップメッセージが出て、`OK`を押すと、設定画面に戻ります。
画面下の`Recent Projects`に、インポートしたプロジェクトが表示されていればインポートが出来ていると思います。

# 7. platformio.iniの設定
プロジェクトのインポートも出来たところで、platformio.iniの設定をしていきたいと思います。
![clion_04_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/1730752e-d7f9-0d70-dd2a-f78c546a812b.png)
設定画面の左メニューから`Projects`を選択すると、インポートしたプロジェクトの一覧が表示されます。
先ほどインポートしたプロジェクトを探して、`Configure`をクリックします。
![platformio_03_config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/39581b67-1eab-5083-bd20-ce22fdc54e99.png)
ここに、設定を追加していくので、`New Option :`のプルダウンから、必要なオプションを追加していきます。
![platformio_06_option.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/45fcae34-3c5c-64ae-59a6-3b747203022e.png)
今回は、`monitor_port`、`monitor_speed`、`upload_port`を追加しています。

:::note info
`upload_port`、`monitor_port`は先ほど調べたM5Stackの ***COMポート*** を指定します。
:::
右上の`save`をクリックすれば、保存完了ですので、CLion IDEに戻ります。
![platformio_08_ini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/b544f039-7eca-80a8-3fc4-b559dad43042.png)
platformio.iniファイルに設定が追加されています。

# 8. ライブラリの追加
次にHello Worldを表示するうえで、画面表示用のライブラリを追加したいと思います。
`main.cpp`ファイルには、初期状態で、
```cpp:main.cpp
#include <Arduino.h>
```
しかないため、M5Stack用のライブラリを追加します。
1. PlatformIO設定画面に戻り、左のメニューの`Libraries`を選択します。
![clion_11_library.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/f7e560ba-2c05-1c16-6d6a-ee8c822a5fa3.png)
`Search libraries...`にカーソルを合わせて、`M5Stack`と入力して、ライブライを検索します。
1. 検索一覧から、M5Stackライブラリを選択します。
![clion_12_library_add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/66e78ff7-b41b-28a6-f547-6301cff6ebcd.png)
`Add to Project`を選択します。
1. プルダウンからプロジェクトを選択して`Add`をクリックすると、ライブラリが追加されます。
![clion_13_add_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/16eb968d-6247-4cf4-f263-53a473d69c9f.png)
1. CLionのライブラリ
![clion_14_libdeps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/1493205b-efb1-89d7-e01f-c011664d009e.png)
`libdeps`>`m5stack-core-esp32`に`M5Stack`のライブラリが追加されているのが確認できます。
ただ、この状態だと、まだCLion側で関連付けができていないので、`main.cpp`にincludeを記述しても、ライブラリが使えないため、コードアシストが出てきません。
![clion_15_include.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/e7bcca24-7baf-07c1-6ce5-68128ab810c9.png)
1. PlatformIOの再初期化
:::note info
ライブラリを使えるようにするには、PlatformIOを ***再初期化*** する必要があります。
:::
![platformio_09_reinit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/a87786e0-58dc-680b-b9d5-7d448a36f32a.png)
`Tools`>`PlatformIO`>`Re-Init`を選択すると、PatformIOのファイルが初期化されます。
![clion_16_include_reinit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/fe2b7059-4a44-86c9-665b-5413e7049aed.png)
これで、ライブラリが使えるようになり、includeのコードアシストに`M5Stack.h`が出てくるようになりました。

# 9. Hello Worldの作成
ここからようやくHello Worldの作成です。
`M5Stack.h`をインクルードして、画面表示部分を記述していきます。
```cpp:main.cpp
#include "Arduino.h"
#include "M5Stack.h"
void setup() {
// write your initialization code here
    M5.begin();
    M5.Lcd.setCursor(20,60);       //表示座標
    M5.Lcd.setTextSize(4);         //文字サイズ
    M5.Lcd.printf("Hello World");  //テキスト表示
}

void loop() {
// write your code here
}
```
# 10. ビルドとアップロード
Hello Worldのファイルは出来たので、M5Stackにアップロードします。
![clion_18_run.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/3f60cb99-1009-8248-0b82-5f7b1bdc1976.png)
画面右上の`Edit Run/Debug configurations`のプルダウンを開き、`PlatformIO Upload`>`Run 'PlatformIO Upload'`を選択すると、
ビルドが始まり、アップロードが自動的に始まります。
![clion_19_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/18af155b-870f-57ee-4b6a-e5aab15c6ebb.png)
アップロードが完了したら、`SUCCESS`という文字が出ます。
![IMG_2197.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/c1ef3cc9-b06d-5254-8ab3-8ec6e9d656c8.png)
M5Stackに無事 `Hello World` が表示されました。

というわけで、記事がめっちゃ長くなりましたが、無事アップロードまで出来た。
この環境ができれば、次回からプロジェクトを作成するところからで良くなります。

platformio.iniのオプションや、ライブラリなどはたくさんありますので、これから色々試したいなと思います。
# 参考
- [Python](https://www.python.org/)
- [CLion Installation](https://docs.platformio.org/en/latest/integration/ide/clion.html#ide-clion)
- [PlatformIO / Local Download](https://docs.platformio.org/en/latest/core/installation/methods/installer-script.html#id2)
- [PlatformIO / 環境変数](https://docs.platformio.org/en/latest/core/installation/shell-commands.html#windows)