ESP32でのPlatformIO IDEの使い方と環境構築

# 環境構築
windowsの方向けに説明します。MacやLinuxの方は、一部違うところがあると思います。
## 1.vscodeのインストール

https://code.visualstudio.com/download


![スクリーンショット 2023-05-08 150718.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/a9daa63c-23ac-a334-11c1-807c86902bb3.png)

インストールするときには、基本的に肯定的な言葉を押していればOKなのですが、赤丸のところにチェックを入れておくと便利です。
![スクリーンショット 2023-05-08 151004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/51aef119-50b1-31e4-257f-fcaa22943a98.png)
(エクスプローラーの右クリックでCodeで開くというメニューが追加されます)

詳しいvscodeのインストール手順は次のページをご覧ください。

https://miya-system-works.com/blog/detail/vscode-install/

## 2.Platform IOのインストール
![スクリーンショット 2023-05-08 152147.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/2e7d8b4f-e7d4-6441-9287-94926f5decc1.png)

vscodeの拡張機能のページを開き(写真の赤丸のところマークをクリックする)、検索欄(写真の黄色い下線の欄)で「platformio」と調べる。
![スクリーンショット 2023-05-08 152612.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/e758ba53-7f92-6c57-03b8-203f6fd359ae.png)

すると一番上にアリさんのマークの拡張機能がでてくる(赤丸のエリア)のでインストールしましょう。
![スクリーンショット 2023-05-08 153306.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/59c6a557-f8c5-37e1-eb52-ec01faa676c7.png)

拡張機能がインストールされると、左側の欄にアリさんマークが追加されます。

アリさんマークをクリックしてみましょう。
画面右下にポップアップが出現します。
これはplatformIO IDEをインストールしていることを表しています。しばらく待ちましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/1b24274e-ccc4-4729-0419-b6014f4d5967.png)

Platform IOのインストールに成功したら、ポップアップが出現するので、Reload Nowを押してvscodeを再起動します。

これで環境構築完了です。

<details><summary>インストール中にエラーが出た方へ</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/4ca822c5-27ff-ac6c-7266-0ecfad352361.png)
```
Error: error: subprocess-exited-with-error python setup.py bdist_wheel did not run succesfully. exit code: 1
```

インストール中にこんなメッセージのポップアップが出た方は居るかもしれません。

ここに修正方法があります。

https://community.platformio.org/t/platformio-ide-installation-fails-on-vscode/33586

英語恐怖症の方のためにやり方を書きます。

実はこのエラーは使用しているpcのユーザー名が長すぎるために起こります。(platformIO以外の拡張機能を入れるときも、ユーザー名が長すぎるとエラーが起こることがあるらしい）
ということで、長い名前でもエラーが起こらないようにしましょう。

Windowsマークを右クリックし、ファイル名を指定して実行をクリックします。

gpedit.mscと入力し、okを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/96caef6b-c570-99a5-4b06-0927fa4e54ce.png)


ローカルグループポリシーエディターが出現します。
コンピューターの構成→管理者用テンプレート→システム→ファイルシステムに進むと、以下のページに到達します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/def7cd02-ce15-0ba1-95e4-a8271af525d4.png)
Win32の長いパスを有効にするをクリックします。

ポップアップが出現したら、有効にして、適用してOKを押し、設定を保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/0e74b48a-5e65-29a5-0526-fa56057b6568.png)

これでvscodeを再起動して、もう一度アリさんマークをクリックすると、インストールが完了するはずです。
</details>

# platformIO IDEの使い方
## platformIO IDEのホーム画面
![スクリーンショット 2023-05-08 160135.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/cf4bcd3e-c5b8-168a-78d7-b65c21a9d81c.png)
ホーム画面に移動するには、アリさんマークのをクリックして上の画像のようなタブを開き、赤丸の`open`をクリックするとホーム画面に移動できます。

![スクリーンショット 2023-05-08 172520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/deb83b2a-90cb-887c-a89f-4ade12d3b204.png)

この画面がホーム画面です。

## プロジェクトの新規作成
`New Project`をクリックします。
![スクリーンショット 2023-05-08 172521.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/f2c9fb5c-8bff-e0f8-fbcc-7d3fa5c36bb9.png)

クリックすると次のようなポップアップが出現します。
![スクリーンショット 2023-05-08 174442.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/f9c9e960-b0d2-847f-0352-cab5590eccf4.png)

- `Name`にはプロジェクトの名前(好きな名前)。

- `Board`には使っているesp32のボードを選択肢の中から選択します。
    うちの大学だと、次のように選択してます。ご自身のマイコンに合わせて選択してください。
    - 秋月電子とかで売ってるESP32は`Espressif ESP32 Dev Module`。
    - カメラが付いているマイコンキットのやつは`Espressif ESP-WROVER-KIT`
    - M5Stack Toughは`m5stack core esp32`
    
- `Framework`はArduinoを選択してください。
- `Location`なのですが、ファイルを保存する場所の設定です。こだわりがない人はそのままでも大丈夫です。
> もしOneDriveでドキュメントフォルダーを同期させている方は、`Use default location`のチェックを外して、OneDriveで同期していないファイルを選択することをオススメします。結構OneDriveとの相性悪いです。

![スクリーンショット 2023-05-08 181035.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/15a9bc16-c653-a25b-7f08-5327f1567014.png)

以下のようなローディング画面が表示されます。初めてPlatformIO IDEでプロジェクトを作る方は、かなり長いロードになると思います。

ローディングが終わるとプロジェクトの作成は完了です。

## 既存のArduinoのコード(拡張子が.ino)をPlatformIOで使う方法
![スクリーンショット 2023-05-08 172522.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/ccc3d041-2ae1-2908-af16-72cfa0611b9f.png)

`Import Arduino Project`をクリックします。詳しくは説明しませんが、使うマイコンを選び、インポートしたいArduinoのプログラムを選択して、画面の指示に従えばインポートできるはずです。

## 編集するファイルについて
プロジェクトを作成するとファイルが自動生成されます。
![スクリーンショット 2023-05-08 182555.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/102121f9-c073-39b4-cce2-de022c589df8.png)
ファイル構造は画像のようになっています。
このうち以下の2つのファイルをまずは覚えましょう。
- `src/main.cpp`: __メインのソースコード__ はです。このファイルを弄っていきます。
- `platformio.ini`: プロジェクトの設定が書かれています。

## main.cppファイルの書き方について
![スクリーンショット 2023-05-08 184436.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/e62b00e5-0afd-d8f3-2274-db66c08faff8.png)

:::note info
main.cppは基本的にArduino IDEの.inoファイルと __同じ__ です。
:::

ただし、以下の点がinoファイルと違うので注意しましょう。
- `#include <Arduino.h>`が必ず必要
>PlatformIOでArduinoの関数を利用するにあたり、必須のライブラリとなっているので、インクルードされています。忘れがちですが、`#include <Arduino.h>`は __忘れるとプログラムが動かない大事な呪文__ だと覚えてください。
- 関数の呼び出し位置よりも後で宣誓するとエラーになる。
> inoファイルではなくcppファイルであることで起こる問題ですね。
![スクリーンショット 2023-05-08 185643.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/62034749-5cd8-fe45-eda9-76a34680aeb4.png)
このように`setup`関数の中で`function`関数を呼び出していますが、この`function`関数は`setup`関数よりも後に宣誓されています。このような書き方は.inoファイルならエラーにならないのですが、cppファイルならエラーになってしまいます。
``` 
src/main.cpp:6:3: error: 'function' was not declared in this scope 
```
なので、

![スクリーンショット 2023-05-08 190224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/a8ef9392-b915-be56-367e-b24d585a37e9.png)

このように`setup`関数と`loop`関数は __一番後ろに書く__ ようにしましょう。

## コンパイルと書き込みについて
![スクリーンショット 2023-05-08 190802.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/e99dcb5d-cf06-53e8-8cbe-2e6e7f0bd398.png)
ウィンドウの下のボタンを押すことで、様々なことが実行できます。
![スクリーンショット 2023-05-08 190852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/fb23cd08-f6a5-7575-d0ef-b21f7ac7430a.png)
以下の2つのボタンを覚えましょう。
![スクリーンショット 2023-05-08 190854.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/5ba5754c-1daa-d7ec-684c-c99b699e4dc5.png)
この矢印のマークがコンパイルとマイコンへのアップロードをしてくれるボタンです。

![スクリーンショット 2023-05-08 190853.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/554c452c-5de1-148e-4ebd-d6396bed33f5.png)
こっちのチェックマークもありますが、こっちはコンパイルのみでアップロードはしてくれないので、注意してください。

## シリアルモニターについて
先程のウインドウ下のエリアでシリアルモニターが使えます。
![スクリーンショット 2023-05-08 190852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/fb23cd08-f6a5-7575-d0ef-b21f7ac7430a.png)
![スクリーンショット 2023-05-08 190855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/22f6464e-b68d-42fd-d643-e0f42ddee317.png)
フラスコマークの横にあるコンセントみたいなマークを押すとシリアルモニターが出現します。
ただ、ここではボーレートの設定ができません。
ボーレートの設定は`platformio.iniファイルで行います。
![スクリーンショット 2023-05-08 192115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/1e138d7c-3092-ee0f-42de-f6ce8eb51d48.png)
以下のような文を追加してください。
```
monitor_speed = 115200
```
`115200`のところに使用したいボーレートを代入してください。

シリアルモニターを使っているときに帰ってくるはずの値が正しく表示されない場合は、ボーレートの設定をしたかをチェックしてください。

ちなみにArduino IDEのようなシリアルモニターを使える拡張機能があります。
<details><summary>シリアルモニター拡張機能の詳細はこちら</summary>
![スクリーンショット 2023-05-09 115823.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/cdb23836-15b2-38f7-6996-3b2fae2f942e.png)
拡張機能の検索欄に「Serial」と入力すると、一番上にMicrosoft製のSerial Monitorが出てきます。

使い方はvscodeで`Ctrl-@`を押すとターミナルが出現しますが、この拡張機能をインストールするとシリアルモニターという項目が出現します。
![スクリーンショット 2023-05-09 120813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/23470b29-04e8-6501-bf90-49554b2c83d2.png)
これをクリックすると、シリアルモニターが出現します。
![スクリーンショット 2023-05-09 121323.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/f63d2d2b-404c-366e-ac24-8e8b989be4de.png)
ポートでマイコンが刺さっているポートを選択し、正しいボーレートを選択し、`監視の開始`をクリックするとマイコンから情報が流れてきます。
 __注意点__ なのですが、この拡張機能を使うときは監視中にマイコンにプログラムを書き込もうとすると、ポートが使われているので、書き込みできない的なエラーが出てくるので、プログラムを書き込むときは __`監視の停止`を押してからプログラムを書き込みましょう。__

結局デバッグ中にいちいち開始したり、停止したりするのが煩わしくて、PlatformIOに付いているシリアルモニターを私は使うことが多いです。

</details>


## ライブラリのインポート
`Libraries`をクリックします。
![スクリーンショット 2023-05-09 122957.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/d4b91b60-3e11-9ac5-ef18-a2fc929467f9.png)
Librariesのページに移動できます。検索欄にインポートしたライブラリの名前を検索しましょう。
![スクリーンショット 2023-05-09 123226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/84df2562-8460-f257-8284-a341dea5452b.png)
例えば、今回は「LovyanGFX」というモジュールをインポートするとします。
![スクリーンショット 2023-05-09 123832.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/f51124d2-1e17-e205-505d-ec19bf667b54.png)
2番目に出てきてますね。
ライブラリをクリックしましょう。
![スクリーンショット 2023-05-09 124049.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/e93a18ec-385e-fa78-b300-233425657834.png)
青い`Add to Project`ボタンを押せばライブラリをダウンロードできます。
また、赤い線の場所をクリックすると、このライブラリの使い方やサンプルが書かれています。
察しの良い方はお気付きだと思いますが、githubとリンクされています。ライブラリをインポートする上で、必要な情報がピックアップされて表示されている感じです。使いやすくて便利ですね。

## ライブラリの削除。
ホーム画面から`Project`を開きます。
![スクリーンショット 2023-05-09 130735.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/b76dde3a-2163-8d15-5c7d-d959ce6c24d0.png)
消したいライブラリがインポートされているプロジェクトの青い`Configure`ボタンをクリックしてください。
クリックするとプロジェクトの設定画面が表示されます。
下のほうに __Libraly Options__ という項目があります。
![スクリーンショット 2023-05-09 131244.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/aff17e0f-5733-2a77-431c-f02301deb261.png)
その中に消したいライブラリが書かれていると思うので、ライブラリ名のよこのバツボタンを押します。
 __最後に__ 画面右上の青い`Save`ボタンを押します。
saveを押すのを忘れないで下さい。

ライブラリの削除についてですが、バグやコンパイルが通らない原因になるので、__必要ないライブラリが出たら逐次削除することをおすすめします。__

# まとめ
長くなってしまいましたが、環境構築と使い方は以上です。この記事を参考程度にPlatformIOで遊びながら覚えるのが、一番覚えられると思います。
ということで、良いPlatformIO IDEライフを。

# 宣伝
現在新潟大学学生フォーミュラプロジェクトでは、スポンサーになっていただける企業様や個人を募集しています。
スポンサーの方は、Webサイト(2023年中には改修して綺麗になる予定)やマシン本体やTwitterやInstagramなどの各種SNSで宣伝、今年の活動報告書の送付をさせていただいています。
下記のメールまでご連絡をお待ちしております。
next-fp@eng.niigata-u.ac.jp
![car run.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219558/511deae5-8528-411b-9e71-1e9f065a6bf4.jpeg)