M5StickS3のPlatformIO開発環境を構築してプログラムの書き込みからボタンによる画面切り替えまで試す

こんにちは
ソーイ株式会社Webエンジニア2年目の村上です。

学生時代、講義で初めてArduino Unoというマイコンを使用した際、コードと電子部品を使ってこんなに形になる開発が自由で簡単にできるのかと衝撃を受けました。

当時を思い出して調べてみると、M5StickS3というスピーカー、マイク、そしてLCDディスプレイがついているコンパクトな機器が売られていたため、会社の機器購入制度を利用して手に入れました。

普段の業務ではWebアプリの開発に加えて、リアルタイム通信やAWSを利用する機会があります。そこで、今後はM5StickS3で取得した情報をWebアプリやAWSと連携するような検証もしてみたいと考えています。

今回はその第一歩として、M5StickS3の開発を進めるにあたって、自分のパソコンに開発環境を整え、実際に動作を確認するまでを試してみます。

今回の記事で分かること

本記事では、M5StickS3をPlatformIOで動かすための環境構築から、簡単な入出力処理までを扱います。

• PlatformIOを使ったM5StickS3の開発環境構築
• PlatformIOからM5StickS3へプログラムを書き込む方法
• M5StickS3のボタン入力を取得する方法
• ボタン入力を判定してディスプレイの表示を変更する方法

想定とする読者

• M5StickS3を初めて触る方
• PlatformIOを使ってM5StickS3の開発を始めたい方
• M5StickS3へのプログラムの書き込みや基本的な入出力を試してみたい方

開発環境

使用する機器

機器	用途
M5StickS3	今回使用するマイコン
USB Type-Cケーブル	PCとの接続・プログラムの書き込みに使用
Windows PC	開発・M5StickS3への書き込みに使用

M5StickS3はSwitchScienceで購入しました。

USB Type-Cケーブルは、今回以下を使用しました。

開発環境

項目	使用するもの
OS	Windows 11
エディタ	Visual Studio Code　v1.136
開発環境	PlatformIO v3.3.4
フレームワーク	Arduino Framework
ライブラリ	M5Unified

ここで使用するライブラリであるM5Unifiedとは、M5Stackシリーズの各種デバイスを共通のAPIで扱うためのライブラリです。
ディスプレイやボタン、マイクなどの機能を簡単に操作でき、今回使用するM5StickS3にも対応しています。

PlatformIOで開発環境を構築する

M5StickS3では、Arduino、UIFlow2、ESP-IDF、PlatformIOなどを使って開発できます。

学生時代にはArduinoを使用したことがあったため、今回は触ったことのない開発環境も試してみたいと思い、その中からPlatformIOを選びました。

まずは、PlatformIOからM5StickS3へプログラムを書き込めるように開発環境を構築していきます。

PlatformIOでプロジェクトを作成する

まずはVS Code内で、PlatformIOが使えるように拡張機能をダウンロードしましょう。

ダウンロード後にVS Codeを再起動すると、左のメニューにアイコンが出ます。
アイコン -> Openとクリックするとホーム画面が開きます。

VS CodeからPlatformIOを開き、PIO Home → New Projectを選択します。

プロジェクトの設定は以下のようにしました。

項目	設定値
名前	m5sticks3-test
ボード	Espressif ESP32-S3-DevKitC-1
フレームワーク	Arduino

なぜEspressif ESP32-S3-DevKitC-1なのか

BoardからM5StickS3を検索してみましたが、PlatformIO上では該当するボードが表示されませんでした。

一方で、M5Stickと検索するとM5Stick-Cなどは表示されます。

M5StickS3はESP32-S3を搭載しているため、今回はM5Stack公式ドキュメントを参考にEspressif ESP32-S3-DevKitC-1をベースとして使用します。

M5Stick-CはM5StickS3とは異なるボードのため、今回は選択しません。

M5StickS3向けにplatformio.iniを設定する

プロジェクトを作成したら、ルートディレクトリにあるplatformio.iniをM5StickS3向けに設定します。

今回は公式ドキュメントのソフトウェア -> PlatformIOに記載がある通り、以下のように設定しました。

platformio.iniの設定

[env:m5stack-sticks3]
platform = espressif32@6.12.0
board = esp32-s3-devkitc-1
framework = arduino

board_build.arduino.partitions = default_8MB.csv
board_build.arduino.memory_type = qio_opi

build_flags =
    -DESP32S3
    -DBOARD_HAS_PSRAM
    -mfix-esp32-psram-cache-issue
    -DCORE_DEBUG_LEVEL=5
    -DARDUINO_USB_CDC_ON_BOOT=1
    -DARDUINO_USB_MODE=1

lib_deps =
    M5Unified=https://github.com/m5stack/M5Unified
    M5PM1=https://github.com/m5stack/M5PM1

platformio.iniの主な設定について

今回のplatformio.iniには、M5StickS3を動作させるためのライブラリやメモリ、USBに関する設定が含まれています。

ここでは、今回の環境構築で特に関係する設定について簡単に確認します。

lib_depsの取得方法について

今回のplatformio.iniでは、M5Stack公式ドキュメントを参考に、M5UnifiedとM5PM1をGitHubリポジトリから取得する設定にしています。

lib_deps =
    M5Unified=https://github.com/m5stack/M5Unified
    M5PM1=https://github.com/m5stack/M5PM1

この設定ではGitHubリポジトリからライブラリを取得するため、PC側でGitを利用できる必要があります。

また、取得するライブラリのバージョンが固定されていないため、将来的に同じ設定で環境を構築した場合、この記事で使用したものとは異なるバージョンが取得される可能性があります。

再現性を重視する場合は、PlatformIO Registryに登録されているライブラリをバージョン指定して利用する方法もあります。

本記事執筆時点では、例えば以下のように指定できます。

lib_deps =
    m5stack/M5Unified@0.2.17
    m5stack/M5PM1@1.0.7

本記事ではM5Stack公式ドキュメントの設定を使用して動作確認しているため、以降はGitHubリポジトリを指定した設定のまま進めます。

PSRAMに関する設定

board_build.arduino.memory_type = qio_opi

build_flags =
    -DBOARD_HAS_PSRAM

M5StickS3はPSRAMを搭載しているため、BOARD_HAS_PSRAMでPSRAMを利用するボードであることを定義しています。

また、board_build.arduino.memory_type = qio_opiでは、FlashとPSRAMの接続方式を指定しています。

今回はESP32-S3-DevKitC-1をベースのボードとして使用しているため、これらの設定によってM5StickS3の実機に合わせたメモリ構成を指定しています。

USBに関する設定

-DARDUINO_USB_CDC_ON_BOOT=1
-DARDUINO_USB_MODE=1

これらは、M5StickS3に搭載されているESP32-S3のUSB機能に関する設定です。

ARDUINO_USB_CDC_ON_BOOT=1は、起動時にUSB CDC（USB経由のシリアル通信）を有効にするための設定です。

ARDUINO_USB_MODE=1は、ESP32-S3の内蔵USB機能を利用するための設定です。

今回のようにM5StickS3とPCをUSB Type-Cケーブルで接続し、プログラムの書き込みやシリアル通信を行う際に関係します。

M5PM1について

lib_deps =
    M5PM1=https://github.com/m5stack/M5PM1

M5PM1は、M5StackのPM1電源管理ICを制御するためのライブラリです。

M5StickS3ではPM1が電源管理に使用されており、バッテリーや電源に関する機能を扱います。

今回はM5Stack公式ドキュメントに掲載されているplatformio.iniを参考にしているため、M5UnifiedとあわせてM5PM1も依存ライブラリとして追加しています。

設定の詳細については、M5Stack公式のM5StickS3ドキュメントを参照してください。

M5PM1については、以下の公式リポジトリも参考になります。

M5StickS3にプログラムを書き込む

開発環境の準備ができたので、実際にM5StickS3へプログラムを書き込んでみます。

今回は動作確認として、M5StickS3のディスプレイにHello StickS3!と表示させます。

プログラムを作成する

src/main.cppを開き、以下のコードを記述します。

Hello StickS3! をディスプレイに出力する

#include <Arduino.h>
#include <M5Unified.h>

void setup() {
    auto cfg = M5.config();
    M5.begin(cfg);

    M5.Display.setRotation(1);
    M5.Display.fillScreen(BLACK);
    M5.Display.setTextColor(WHITE);
    M5.Display.setTextSize(2);
    M5.Display.setCursor(10, 20);

    M5.Display.println("Hello StickS3!");
}

void loop() {
    M5.update();
}

Buildする

コードを記述したら、PlatformIOのBuildを実行します。
BuildはVS Code上のフッターにある✓のマークを押下すれば実行できます。

正常にBuildが完了すると、ターミナルに以下のようにSUCCESSと表示されます。

Build時にGitのエラーが発生した場合

初回のBuild時に以下のエラーが発生しました。

Library Manager: Installing git+https://github.com/m5stack/M5Unified
UserSideException: Please install Git client

platformio.iniでは、M5UnifiedなどのライブラリをGitHubから取得するように設定しています。

lib_deps =
    M5Unified=https://github.com/m5stack/M5Unified
    M5PM1=https://github.com/m5stack/M5PM1

そのため、Gitがインストールされていない環境ではライブラリを取得できず、Buildに失敗します。

最近はWebアプリ開発が中心で、GitはLinux環境にしかインストールしていなかったため、Windows側でGitを利用できない状態になっていたのが原因でした。
今回はGit for Windowsをインストールして対応しました。

インストール後、VS Codeを再起動してターミナルから以下を実行します。

git --version

バージョン情報が表示されれば、Gitを利用できる状態になっています。

git version 2.x.x.windows.x

この状態でもう一度Buildを実行し、SUCCESSとなることを確認します。

M5StickS3へプログラムを書き込む

Buildが完了したので、作成したプログラムをM5StickS3へ書き込みます。

M5StickS3の接続を確認する

M5StickS3とPCをデータ転送対応のUSB Type-Cケーブルで接続します。

PlatformIOのPIO HomeからDevicesを開くと、PCに接続されているシリアルデバイスを確認できます。

今回の環境では、M5StickS3が以下のようにCOM4として認識されました。

Port : COM4
Description : USB シリアル デバイス (COM4)
Hardware : USB VID:PID=303A:1001

COMポートの番号は環境によって異なるため、自身の環境で表示されているポートを確認します。

Download Modeに切り替える

M5StickS3へプログラムを書き込むため、Download Modeに切り替えます。
Download Modeは、M5StickS3に搭載されているESP32-S3を、プログラムの書き込みを待つ状態にするためのモードです。

M5StickS3をUSB接続した状態で側面のリセットボタンを約2秒間長押しし、緑色のLEDが点滅したらボタンを離します。

これでDownload Modeに切り替わります。

プログラムをUploadする

Download Modeに切り替えた状態で、PlatformIOからUploadを実行します。

正常に書き込みが完了すると、ターミナルに以下のようにSUCCESSと表示されます。

Upload後、画面が真っ暗な状態のままプログラムが起動しない場合は、M5StickS3の側面にあるリセットボタンを短く1回押します。

正常に起動すると、ディスプレイに以下の文字が表示されます。

Hello StickS3!

これでPlatformIOからM5StickS3へプログラムを書き込み、実行できることを確認できました。

今回試しましたが、「こんにちは」など日本語を出力させることはできませんでした。
調べると日本語を表示するには日本語フォントの用意や設定が必要になるようです。
今回は扱わず、次回検証する予定です。

ボタン入力に応じて画面表示を変更する

M5StickS3へのプログラムの書き込みまで確認できたので、次はボタンからの入力を取得してみます。

今回は、以下のような処理を実装します。

ボタンを押す
    ↓
ボタン入力を取得
    ↓
押されたかを判定
    ↓
ディスプレイの表示を変更

src/main.cppを以下のように変更します。

#include <Arduino.h>
#include <M5Unified.h>

void setup() {
    auto cfg = M5.config();
    M5.begin(cfg);

    M5.Display.setRotation(1);
    M5.Display.fillScreen(BLACK);
    M5.Display.setTextColor(WHITE);
    M5.Display.setTextSize(2);
    M5.Display.setCursor(10, 20);

    M5.Display.println("Ready!");
}

void loop() {
    // ボタンなどの状態を更新
    M5.update();

    // BtnAが押された瞬間を判定
    if (M5.BtnA.wasPressed()) {
        M5.Display.fillScreen(BLACK);
        M5.Display.setCursor(10, 20);
        M5.Display.println("Pressed!");
    }
}

ボタン入力を取得する

今回押下するBtnAボタンは、M5StickS3の前面にある青い横長のボタンです。
ボタン入力では、主に以下の2つを使用しています。

M5.update();
M5.BtnA.wasPressed();

M5.update()は、M5StickS3のボタンなどの状態を更新するための処理です。

loop()はプログラムの実行中に繰り返し呼び出されるため、その中でM5.update()を実行することで、ボタンの状態を継続的に更新します。

続いて、

M5.BtnA.wasPressed()

でBtnAが押されたかを判定します。

wasPressed()はボタンが「押された瞬間」を検出するため、ボタンが押されたタイミングでif文の中の処理が実行されます。

今回はボタンが押された場合に、

M5.Display.fillScreen(BLACK);
M5.Display.setCursor(10, 20);
M5.Display.println("Pressed!");

を実行し、一度画面を黒色で塗りつぶしてからPressed!を表示します。

動作確認

コードを変更したら、先ほどと同じようにBuildとUploadを実行します。

起動直後は、ディスプレイに以下の文字が表示されます。

Ready!

この状態でBtnAを押すと、

Pressed!

へ表示が変われば成功です。

これで、

ボタンから入力を受け取る → プログラムで判定する → 結果をディスプレイへ出力する

という一連の処理を確認できました。

まとめ

今回はM5StickS3をPlatformIOから開発するための環境を構築し、実際にプログラムを書き込んで動作を確認しました。

最終的には、
ボタンを押す → 入力を取得する → プログラムで判定する → ディスプレイの表示を変更する
という一連の処理を実装し、M5StickS3の基本的な入出力を確認することができました。

コードを書いて実機の動作としてすぐに確認できる点は、改めてマイコン開発の面白さだと感じました。
マイクやスピーカー、Wi-FiやLCDディスプレイが内蔵されており、追加のモジュールを用意せずにさまざまな機能を試せる点も、M5StickS3の良さだと感じました。

会社ではWebアプリの開発に加え、リアルタイム通信やAWSを利用する機会があります。今後はM5StickS3から取得したセンサー情報をWebアプリやAWSへ連携するなど、IoTとWeb技術を組み合わせた検証にも活用していきたいと考えています。
また、日本語をそのまま出力しようとしてもディスプレイに表示されなかったため、そこは次回までに調べたい要素の一つですね。

ではまた。

お知らせ

技術ブログを週1〜2本更新中、ソーイをフォローして最新記事をチェック！
https://qiita.com/organizations/sewii