M5Stack＆さくらのモノプラットフォームの検証にPlatformIO for VSCodeを使ってみる

# 記事の趣旨
さくらのモノプラットフォームで提供されている開発キットにはM5Stack向け変換基板が含まれており、M5Stackベースでの検証が可能です。
そのM5Stackの統合開発ツールとして「**[ArduinoIDE](https://www.arduino.cc/en/software)**」が挙げられることが多いと思います。

ただ、ArduinoIDEはコンパイルに時間を要しストレスが溜まりますし、ArduinoIDEの高速化の記事はいくつか散見されますがpreferenceの変更や別途ツールの導入が必要だったりと手間がかかります。
例えばハンズオンなどのコンテンツを検討する場合においても、手順がシンプルかつ多くの人に馴染みがあるツールで実施できることが好ましいと考えています。

もう少し手早く修正のサイクルを回せるようにするため、代替ツールとして話題の「**[PlatformIO](https://platformio.org/)**」をエンジニアの方にも馴染み深いであろうVSCode上で使用し、さくらのモノプラットフォームで提供されるM5Stack変換基板を用いたサンプルプログラムを書き込めるようになるまでを説明します。

# さくらのモノプラットフォームってなんや？
[さくらのモノプラットフォーム](https://iot.sakura.ad.jp/platform/)（以下、モノプラ）は2022年3月24日にリリースされた、さくらインターネットが提供するIoTプラットフォームサービスです。

https://iot.sakura.ad.jp/platform/

実態として利用するのはクラウド上に用意されたプラットフォーム部分であり、所定のエンドポイントに所定のデータフォーマットでアクセスします。
また、デバイス側は基板の電子回路から標準ファームウェアと呼ばれる組込みソフトウェアまでを例として公開しており、**MITライセンスの下で自由に使うことができます。**

https://wisdommingle.com/mit-license/

これにより、デバイス側は任意のハードウェアや任意のファームウェア／プログラムで構成することができるため、昨今問題になっている半導体不足において、特定の部品等の依存度を下げることができます。
※現時点ではデバイス⇔プラットフォーム間の通信は[さくらのセキュアモバイルコネクト](https://iot.sakura.ad.jp/sim/)（以下、セキュモバ）による4GLTE通信に限定されていますが、今後LTE回線以外からのプラットフォーム利用も受け入れ予定です

なお、公開されている基板は数量の制限はありますが **[開発キット](https://iot.sakura.ad.jp/platform/service/dev-kit/)** として無料で入手することもできるので、比較的簡単に利用できるようになっています。

https://iot.sakura.ad.jp/platform/service/dev-kit/

# 記事の前提条件
本記事では以下の部分は実施済みとして省略しています。
 * [ご利用の流れ](https://manual.sakura.ad.jp/cloud/iotpf/getting-started/gs-scom5snrf9160.html)および[サンプル基板取扱説明書](https://manual.sakura.ad.jp/cloud/_downloads/%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E5%9F%BA%E6%9D%BF%E5%8F%96%E6%89%B1%E8%AA%AC%E6%98%8E%E6%9B%B8_M5Stack%E5%90%91%E3%81%91%E5%A4%89%E6%8F%9B%E5%9F%BA%E6%9D%BF_SCO-M5SNRF9160.pdf)をもとに、ArduinoIDE環境で動作確認できている
    * M5Stack向け変換基板に部品が実装され、正常に動作することが確認できている
    * 会員IDの取得が完了し、さくらのクラウドコントロールパネルにログインできる
    * セキュモバSIMおよびモノプラの各種リソース作成が完了している
 * [こちら](https://miya-system-works.com/blog/detail/vscode-install/)の記事等をもとに、VSCodeのインストールが完了している

# 開発環境の作り方
以下から、実際にPlatform for VSCodeを用いてM5Stack向け変換基板のプログラム例を書き込めるようになるまでの手順を説明していきます。

## PlatformIOのインストール
VS Codeを起動し、拡張機能から *PlatformIO* を検索し、インストールをクリックします。
インストールにはしばらく時間がかかります。
![qiita01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/53509583-4ebe-0ac3-9371-5361492f5be6.png)
![qiita02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/ff504582-3237-f753-225f-1f96e5c54aef.png)

インストールが完了したらVSCodeを再起動します。
再起動すると左側にPlatformIOのアイコンが登場します。
![qiita03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/04732995-6449-ffee-143e-fa375b9a9296.png)

## Projectの作成
PlatformIOではまずProjectを作成します。
*PIO Home > Open > New Project* をクリックします。
![qiita04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/aa502309-b288-72b4-bcce-967f72e23055.png)
![qiita05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/a504d19e-f7f4-3d65-eb39-caf5eb8410dd.png)

Project作成ウィザード以下の項目を指定します。
LocationはProjectの保存場所なので、チェックを外してデフォルトではない場所に保存しても問題ありません。

Name：任意のプロジェクトの名前
Board：M5Stack Core ESP32
Framework：Arduino Framework
Location：Use default location

Projectの作成が完了するとエクスプローラーに以下のようなフォルダが構成されます。
![qiita06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/fed6b728-4045-11fb-522f-357aff766811.png)

## Projectの設定
PlatformIOでは使用するライブラリをProjectごとに指定できます。
今回はM5Stackのライブラリを使用するので、そちらの推奨Ver.を参照するようProjectに設定情報を書き込みます。

*PIO Home > Libraries* から、今回使用する *M5Stack by M5Stack* のライブラリを検索します。
![qiita07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/fcee419f-e86a-99f0-aa95-ba88b0730672.png)

対象のライブラリをクリックし、*Installation*を開くとplatform.iniファイルにどのような指定をすべきかが記載されています。
![qiita08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/7a8ceca2-0c48-d93d-5a3a-adc152b40b14.png)

該当の内容をコピーし、Project内のplatform.iniにペーストします。
![qiita09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/4c998a4d-48b9-262e-78e9-18a6d69769a6.png)

## サンプルプログラムの取り込み
次に、さくらインターネットで公開されている[M5Stack用のサンプルプログラム](https://github.com/sakura-internet/sipf-std-client_sample_m5stack)をプロジェクト内に取り込みます。

https://github.com/sakura-internet/sipf-std-client_sample_m5stack

上記URLから *Code > Download Zip* をクリックし、ソースコードをダウンロードします。
![qiita10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/e5da56bd-da7c-7d9a-b707-40b0a686537a.png)

ダウンロードしたZipファイルを解凍し、sipf-std-m5stackフォルダ内の全ファイルをVSCodeのsrcフォルダ内にコピーします。
![qiita11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/02f69385-c099-28cd-4e82-75824778d1dd.png)

元々srcフォルダ内にあったmain.cppファイルを削除します。最終的なsrc内のファイル構成は以下のようになります。
![qiita12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/169e611d-f26a-1b09-5cf0-ca2e9d3a9947.png)

## ビルドの検証
PlatformIOに取り込んだプログラムをビルドしてみます。
本来inoファイルはArduinoIDEで扱うためのファイル形式ですが、PlatformIO側でいい感じに変換してくれるので名前や拡張子の変更は不要です。

PlatformIOアイコンをクリックし、*PROJECT TASKS > Default > General > Build* もしくは左下のチェックマークをクリックすると作成したProjectのビルドが始まります。
いくつか黄字でWarningのメッセージも見受けられますが、とりあえず止まることなくビルドは進行します。
![qiita13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/ab4c7157-466b-1525-2adc-ba86871afc8b.png)

ビルドが完了すると成功したことを示すログと完了までに要した秒数が表示されます。
性能の違いもありますが、このPCでは2～3分でビルドが完了しました。
![qiita14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/33df248f-eef6-5dc5-4933-dc17aa1598ed.png)

もう一度ビルドを実行し、完了時間の違いを確認します。何も変更していない状態では10秒足らずで完了しました。
その他、一箇所で定数をいじった場合でも20秒ちょっとで完了するようになりました。
![qiita15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217223/d17f4048-5029-646b-3f62-7d7ef00b771d.png)

# まとめ
開発環境は情報が多く存在するかも重要ですが、日々の開発において素早く修正→確認のサイクルを回せるようにすることも開発意欲維持の観点で重要です。
PlatformIOを多くのエンジニアにも親しまれているVSCodeの拡張機能として利用できるようになったことで、時間短縮だけでなくその他の拡張機能と組み合わせた開発もできるようになります。

開発するものによっては必ずしも早くなるものでもないと思いますが、ぜひ開発手法のひとつとして検討されてみてはいかがでしょうか？

※Warningをなくすための方法や、よりスムーズな開発を行うために検討すべき設定などがあればご意見いただけると幸いです:relaxed:

# 参考URL
[M5Stackの開発環境を整える - PlatformIO IDE編](https://qiita.com/lutecia16v/items/1c560bdd7eac7ebeaff7)
[【M5Stack】Arduino IDEでの書き込みが絶望的に遅いのでPlatform IOを試してみた](https://qiita.com/tatsuya1970/items/ceeb5a5b011d53910fbb)
[（その２）M5StackをVSCODEとPlatformIOで開発する場合にはまったこと(LDF)](https://qiita.com/watarukato/items/455c74c625e178de385d)