はじめに

以前、VS Code に PlatformIO IDE の拡張機能を入れて、M5Unified を使った開発を試した内容がありました。今回の内容は、以下の記事に書いたような内容を Codex（統合版ChatGPTデスクトップアプリの Codex）を使って試してみたものです。

●M5Stack Stopwatch開発キット用にシンプルなアプリを作ってみた際のちょっとしたメモ： VS Code ＋ PlatformIO ＋ M5Unified - Qiita
　https://qiita.com/youtoy/items/87eb9619ea11cabb3ec0

以下に、試した内容を書いていきます。

試した内容の記録1 の前半

まずは試した内容の記録 1つ目です。
前半と後半があり、前半の流れを書いていきます。

お試し1 の前提条件

過去の自分のお試しを進めていた関係で、今回の M5Stack用のシンプルな開発を試す際に使える、既にセットアップ済みのツールがあります。

具体的には、以下の記事を書いた中で出てきている「VS Code 拡張用の pioarduino IDE」を入れたことでセットアップされた pioコマンドです。

●StackChan用の micro:bit接続拡張ボード「M5StackChan:bit」を少し試した際のメモ - Qiita
　https://qiita.com/youtoy/items/ff8d88d9ca6036402b5a

その pioコマンドが ~/.platformio/penv/bin/pio で使える状態になっています。
（それが使えない場合は、pioコマンドが使えるようにする準備自体も Codex に依頼してしまえるかと思われますが）

それと詳細未確認ですが、自分のローカルの Codex環境（旧Codexアプリや拡張機能などを使ったもの）で過去に行った開発の履歴が、今回のお試しに影響している可能性があります。もしかしたら、細かく指定をしていない仕様の部分を、補完する情報として過去の履歴が使われているかもしれません。
（ざっくり検索したところ、いくつか影響するかもしれないセッションの情報が出てきました）

作業する場所の用意など

今回のお試し用の空フォルダを用意しました。それを、統合版ChatGPTデスクトップアプリの Codex の作業対象／プロジェクトとして指定しました。

プロンプト

以下が今回のプロンプトです。

お試し1 のプロンプト1

~/.platformio/penv/bin/pio を使って、
M5Stack Stopwatch開発キットで画面に文字を表示するだけの
シンプルな内容を作ってビルドして

以下の記事に書いた、pioコマンドを直接 VS Code外で使えるシンボリックリンクを作っていない状態で、VS Code外から直接呼び出せる pioコマンドを使うように依頼した形です。

●【小ネタ】pioarduino IDE（VS Code用の拡張機能）をインストールした時に用意される CLIベースで使えるコマンドの確認 - Qiita
　https://qiita.com/youtoy/items/622df19e3007e8354aa4

実際に進められた内容

以下のように処理が進み始めました。

以下のビルドの実行について許可を求められたので、それを許可します。

ビルド実行後は、以下の状態になりました。

コードなど

この時に用意されていたファイルは、以下のものです。

以下に、iniファイル・cppファイルの内容を掲載します。

platformio.ini

[env:m5stack-stopwatch]
platform = espressif32 @ 6.12.0
board = esp32s3box
framework = arduino

board_build.partitions = default_16MB.csv
board_upload.flash_size = 16MB
board_upload.maximum_size = 16777216
board_build.arduino.memory_type = qio_opi

monitor_speed = 115200

build_flags =
    -DESP32S3
    -DBOARD_HAS_PSRAM
    -DCORE_DEBUG_LEVEL=5
    -DARDUINO_USB_CDC_ON_BOOT=1
    -DARDUINO_USB_MODE=1

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

src/main.cpp

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

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

    M5.Display.fillScreen(TFT_BLACK);
    M5.Display.setTextColor(TFT_WHITE, TFT_BLACK);
    M5.Display.setTextDatum(middle_center);
    M5.Display.setTextSize(2);
    M5.Display.drawString("Hello, M5Stack!",
                          M5.Display.width() / 2,
                          M5.Display.height() / 2);
}

void loop()
{
    delay(1000);
}

依頼したとおりの、すごくシンプルな内容が用意されていました。

試した内容の記録1 の後半

以下、試した内容の記録1 の後半（先ほどの続きです）。

デバイスの準備

ビルドした内容を書き込む M5Stack のデバイスを用意します。今回、M5Stack Stopwatch開発キットを使います。

M5Stack Stopwatch開発キットへの書き込みができるよう、PC への接続とダウンロードモードにする操作を行います。

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

2つ目のプロンプト

上記を進めた後、以下の内容を依頼しました。

お試し1 のプロンプト2

デバイスをダウンロードモードで接続したので、書き込んで

※ 以下、アプリのキャプチャ画像内では「ダウンロードモード」が「アップロードモード」となっていますが、誤記です（誤記を、Codex が良いように解釈してくれて、問題なく進みました）

実際に進められた内容

以下が、プロンプトを送った後に進められた内容です。

ここで、ビルドした内容を書き込むためのコマンド実行の許可が求められました。

それを許可したところ、以下の書き込み中の状態になりました。

そして、書き込みが完了しました。

書き込み後のデバイスの状態

書き込みが行われた後のデバイスの状態は以下のとおりです。

画面に文字が表示されたことを確認できました。

試した内容の記録2

このあとの内容は、試した内容の記録 2つ目です。

お試し2 の概要

先ほどのお試し1 とほぼ同じ内容ですが、お試し1 の前半・後半の内容を一度で進めてもらうようなものにしました。ダウンロードモードにしたデバイスは接続済みの状態で、空フォルダを作業対象に以下のプロンプトで作業を進めてもらいます。

プロンプト

今度のお試しのプロンプトは以下のとおりです。これを進める前に、ダウンロードモードにした M5Stack Stopwatch開発キットを、PC に接続済みの状態にしておきます。

お試し2 のプロンプト

~/.platformio/penv/bin/pio を使って、
M5Stack Stopwatch開発キットの画面にいくつかの色違いの図形を表示するだけの
シンプルな内容を作ってビルドして、デバイスへの書き込みまで行って

ダウンロードモードにしたデバイスは接続済みです

作ってもらう内容については、1つ目のお試しで「文字表示」だったところを「いくつかの色違いの図形表示」にしています。

実際に進められた内容

以下は、実際に進められた内容です。

途中で、以下のビルドコマンドの実行許可を求められました。

それを許可した後に処理がまた進み、ビルドした内容をデバイスに書き込むためのコマンド実行の許可を求められました。

それを許可した後に処理がまた進み、そして、以下が表示されました。この時点でデバイスへの書き込みまで完了した状態でした。

この時に表示されたレポートの部分を以下に抜き出して記載します。

書き込みまで完了しました。
- 対象: M5Stack StopWatch（ESP32-S3）
- ポート: /dev/cu.。。。
- ビルド: 成功
- 書き込み・SHA検証: 成功
- 使用量: Flash 7.7%、RAM 6.7%
- 表示内容: 赤い円、緑の角丸矩形、青い三角形、黄色い線、白い中心点
作成ファイル:
- src/main.cpp
- platformio.ini
公式のStopWatch向けPlatformIO設定に準拠しています。
書き込み後は自動リセット済みです。なお、この書き込みで工場出荷
ファームウェアは置き換えられています。

作成された ini・cppファイル

上記の処理が進められた中で作成された、ini・cppファイルの内容は以下のようになっていました。

platformio.ini

[env:m5stack-stopwatch]
platform = espressif32 @ 6.12.0
board = esp32s3box
framework = arduino

board_build.partitions = default_16MB.csv
board_upload.flash_size = 16MB
board_upload.maximum_size = 16777216
board_build.arduino.memory_type = qio_opi

monitor_speed = 115200
upload_port = /dev/cu.usbmodem101

build_flags =
    -DESP32S3
    -DBOARD_HAS_PSRAM
    -DCORE_DEBUG_LEVEL=5
    -DARDUINO_USB_CDC_ON_BOOT=1
    -DARDUINO_USB_MODE=1

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

src/main.cpp

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

namespace {

void drawShapes() {
  auto &display = M5.Display;
  const int width = display.width();
  const int height = display.height();
  const int centerX = width / 2;
  const int centerY = height / 2;

  display.startWrite();
  display.fillScreen(TFT_BLACK);

  // Red circle at the upper left.
  display.fillCircle(centerX - 105, centerY - 85, 55, TFT_RED);

  // Green rounded rectangle at the upper right.
  display.fillRoundRect(centerX + 35, centerY - 140, 125, 105, 22,
                        TFT_GREEN);

  // Blue triangle at the bottom.
  display.fillTriangle(centerX, centerY + 15,
                       centerX - 90, centerY + 145,
                       centerX + 90, centerY + 145,
                       TFT_BLUE);

  // Yellow accent line through the center.
  display.drawWideLine(centerX - 145, centerY,
                       centerX + 145, centerY, 12, TFT_YELLOW);

  // White center marker.
  display.fillCircle(centerX, centerY, 18, TFT_WHITE);
  display.endWrite();
}

}  // namespace

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

  M5.Display.setBrightness(160);
  drawShapes();

  Serial.begin(115200);
  Serial.println("M5Stack StopWatch shapes ready");
}

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

デバイスで表示された内容

最後に M5Stack Stopwatch開発キットで表示された内容を掲載します。

依頼に書いていたとおり、「いくつかの色違いの図形表示」が行われたことが確認できました。