はじめに

普段、M5Stack のデバイスの開発は UIFlow をよく使っていて、他に Arduino IDE 2.x系を使ったりしています。それと、前に VS Code ＋ Platform IO を試したことはあったものの、その後は使わなくなっていたという感じでした。
（何か試作をする時に、UIFlow でできそうなことは UIFlow でやってみる、という感じにしていたところもあり）

今回、久しぶりに「VS Code ＋ Platform IO」の組み合わせを試そうと思い、この記事に書いた内容を進めてみました。その際、「M5Unified」と「ATOMS3R」を組み合わせた内容で試しています。

以前のお試しの跡

前に「VS Code ＋ Platform IO」を試した時のプロジェクトが、Platform IO のデフォルトのプロジェクト保存先フォルダに残っていました。

それを見てみると、Alexa からガジェットを使うという方向のものや、M5StickC で何か試していた時の内容が残っていました（時期は、2020年7月だったようです）。

公式の情報を確認しつつ進める

今回は、以下の公式の手順を見て試していきました。

●Visual Studio Codeを用いたM5Unifiedの導入方法
　https://docs.m5stack.com/ja/arduino/m5unified/intro_vscode

この後、今回行った内容の流れを書いていきます。

Platform IO のインストール

以前、Platform IO を試した時の状態を維持してなかったので、VS Code で Platform IO を新規にインストールします。VS Code の拡張機能のメニューから、Platform IO を検索して探し、インストールしました。

その後は、いったんインストール完了を待つ形になりました。この時、もしインストールが完了してない状態だと、VS Code の左メニューで Platform IO のアイコンを選んでも、左メニューでの表示が、インストール中というような表示だけが出ている状態になるようです。

インストール完了の判断については、画面右下での Platform IO のインストール完了のメッセージが出るのを待つ形になりました。そして、完了のメッセージの中で書かれていたとおりに VS Code を再起動します。

VS Code の左メニューで Platform IO のアイコンを選んだ時に、左メニューが以下のような見た目になっていれば、インストールは完了となるようです。

プロジェクトの作成

Platform IO のインストールが完了したので、ここからプロジェクトを作っていきます。左のアイコンで Platform IO を選んだ時に、「PROJECT TASKS」の中の下のほうに出てくる「Create New Project」をクリックします。

そうすると、右側に Platform IO のホームの画面が表示されます。そこで、右のほうにある「Quick Access」の「New Project」を選びます。

その後、以下のような画面が出てきたので、プロジェクト名は適当に「M5test」というのをつけて、ボードのところでは「M5Stack AtomS3」を選びました。

他はデフォルトの内容通りです。その結果、以下のようになりました。この画面で、右下にある「Finish」ボタンを押します。

エラーの対処（自分の環境での話と思われるものでアップデート関連）

上記の手順を進めたところ、自分の環境では以下のエラーが出ました。依存関係のエラーのようで、自分の環境依存の問題に思われました。

そこで、Platform IO のホームに移動して、「Platforms ⇒ Updates」と進んでいったところ、昔のお試しの内容が残っていて悪影響を及ぼしているようでした。単純に、上記の「Espressif 32」のバージョンが古すぎて、それをアップデートする必要がある状況でした（上で書いていた 2020年のものと思われるバージョン 1.12.4 が入っていて、それを最新の 6.11.0 にすれば良いだけのようでした）。

上記のアップデートを行った後、再度、プロジェクトを作成すると、先ほどのエラーが出ることなく先に進められました。

あらためて続きを試す（プロジェクトのファイル一式が表示されるまでの流れ）

エラーは解消できたので、あらためてプロジェクト作成後の内容を進めていきます。プロジェクト作成操作後は、以下のような表示になり、とりあえず処理が終わるのを待ちました。

そうすると、左メニューの「エクスプローラー」のところに、Platform IO用に新規作成したプロジェクト一式のファイルなどが表示された状態になりました。その際、以下のように iniファイルが開いた状態になりました。

今回は、このままの内容で問題なさそうなので、先へ進めます。

M5Unified を追加する

ここで、M5Unified を使えるようにしておきます。

Platform IO のホームの左メニューにある「Libraries」を選び、その後に出てくる検索をする部分で「M5Unified」を検索します。そうすると、以下のように一覧に M5Unified が出てくるので、それをインストールします。

インストールが進み、以下のような完了の表示が出れば OK です。

プログラムをビルドしてデバイスに書きこむ

プログラムのビルドやデバイスへの書きこみを進めます。

まずは、エクスプローラーのメニューからプロジェクトのファイル一式を表示させ、そして「main.cpp」を開きます。

その内容を、公式の手順に書かれたとおり、以下の内容に置きかえます。

●M5Unifiedライブラリの始め方
　https://docs.m5stack.com/ja/arduino/m5unified/helloworld#%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E5%85%A5%E5%8A%9B

具体的には、以下の内容でした。

#include <M5Unified.h> // M5Unifiedライブラリをプログラムで使用可能にします。

// グローバル変数(プログラム全体で使用する変数の定義をします。)
uint32_t count;


// setup関数は起動時に一度だけ実行されます。
// 主に初期化処理を記述します。
void setup() {

  auto cfg = M5.config();       // M5Stack初期設定用の構造体を代入
  // configを設定する場合はここで設定
  // 例
  // cfg.external_spk = true;

  M5.begin(cfg);                           // M5デバイスの初期化

  M5.Display.setTextSize(3);               // テキストサイズを変更
  M5.Display.print("Hello World!!");       // 画面にHello World!!と1行表示
  Serial.println("Hello World!!");         // シリアルモニターにHello World!!と1行表示
  count = 0;                               // countを初期化

}

// loop関数は起動している間ずっと繰り返し実行されます。
// センサーから値を取得したり、画面を書き換える動作等をおこないます。
void loop() {

  M5.Display.setCursor(0, 20);              // 文字の描画座標(カーソル位置)を設定
  M5.Display.printf("COUNT: %d\n", count);  // countを画面に表示
  Serial.printf("COUNT: %d\n", count);      // countをシリアルに表示
  count++;                                  // countを1増やす
  delay(1000);                              // 1秒待つ

}

今回は内容は変更せず、このまま使っていきます。

以下の赤矢印で示した部分を押してビルドします

無事にビルドが完了したら、上で黄色矢印で示した部分を押してデバイスへの書き込みを行います。

デバイスへの書き込みのエラーとその対処

このデバイスへの書き込みのところで、自分は以下のようなエラーが出ました。

この時、ATOMS3R に書き込み済みだったファームウェアの関係で、書き込みができない状態になっていたための思われます。対処法は、以下のポストに書かれている「ダウンロードモード」にするための操作です。

ATOMS3R の場合は、以下の公式ページに書かれているように、「リセットボタンを約 2 秒間押し続け、内部の緑色 LED が点灯したら離す」という対応です。

●AtomS3R
　https://docs.m5stack.com/ja/core/AtomS3R

これで書き込みを成功させることができました。

処理を実行している時の様子

上記を完了させた後、ATOMS3R の表示は以下のようになりました。

おわりに

今回、公式の手順を見ながら VS Code ＋ Platform IO ＋ M5Unified での開発を少し試してみました。それについて、ATOMS3R を使って、公式の Hello World を試しました。

今後、プログラムの内容を変更したり、別の M5Stack のデバイスを扱ったりできればと思います。

Platform IO で既存のプロジェクトを開く流れ

今回作成したプロジェクトを、また開く時の導線をメモしておきます。

【追記２】簡単に開ける導線

当初、『「Pick a folder」から開く』という手順を書いていたのですが、M5Stack公式の手順内に、以前作ったプロジェクトを開きたい場合という記載があり、そちらのほうが簡単でした。

具体的には、以下の「Projects & Configuration」を使うやり方です。

「Projects & Configuration」を選ぶと、以下のように以前作ったプロジェクトの一覧がリストで表示されます。

当初書いていたもの

VS Code の左のアイコンで、Platform IO のアイコンを選び、その後に出てくるメニューの中の「Pick a folder」から所定のプロジェクトのフォルダを選べば OK です。

その他

ATOMS3R の　PSRAM を扱う場合

今回の内容では扱ってないですが（公式の Hello World を試しただけなので）、もし ATOMS3R の　PSRAM を扱いたいという場合は、別途、以下の記事にあるような対応が必用になるようです。

●ATOMS3R のPSRAMをPlatformIOから使いたい - Qiita
　https://qiita.com/tarmn3/items/ff9a0de56d7b9ec54a1e

今回の記事の内容に関連した情報を検索していた時に見かけて、ひとまずメモして置ければと思います。

【追記】 Platform IO関連の豆知識

Platform IO について記事公開後に情報を調べていた時に見かけた、豆知識が書かれたページのメモです。

●PlatformIO豆知識
　https://zenn.dev/saitotetsuya/articles/platformio_tips

ざっと見て、個人的には以下の内容が特に気になったところでした。

【追記2】 M5StickC Plus2 を使ったお試し

今回の流れで、プロジェクト作成時の対象デバイスを変更するだけ、という内容で、M5StickC Plus2 でも Hello World を試してみました。

デバイス選択で出てくる項目が、M5Stick系は M5Stick-C のみだったので（※ 以下の画像のとおり）、それを選んで進めてみましたが、上記のように無事に Hello World的な内容は動作させることができました。