【M5StickC Plus2入門編】ページクリッカーつくった


# はじめに
はじめましてM5Stack。
…ということでM5StickC Plus2を使ってページクリッカー作りました。

# 環境
- M2 Mac (Sanoma14.2)

# 用意する物
- [M5StickC Plus2 ウォッチアクセサリキット](https://www.switch-science.com/products/9420)　…★今回はキットを購入しましたがM5StickC Plus2単体で問題ありません
- TypeC - A 変換ケーブル　…★M5StickCへの書き込みで使用します。
![IMG_4200.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/2796cbd3-98dc-4224-4d9d-0888d5dbea57.jpeg)

# 成果物
早速ですが完成品はこちら👇

https://x.com/taaaaaaaki85457/status/1865758233576767828

https://github.com/take12012/page-clicker

仕様としては…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/a7682413-6073-267a-5ce4-386909559035.png)

- ボタンA: ページ送り
- ボタンB: ページ戻し

となっています。

# 事前準備

## ツールのインストール

### ArduinoIDE

今回はArduinoIDE上で開発します。

[公式のダウンロードページ](https://www.arduino.cc/en/software)よりインストールしていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/56278e2b-4691-0e18-95a5-4a32b30362d8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/b57c226f-4ff8-44b7-8a92-faf615af0dbe.png)

画面通りにドラッグ＆ドロップ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/69bea12b-9b31-326a-d7f2-3ac73395e4ff.png)


インストールしたArduinoIDEを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/88d86bfd-db91-c993-4088-6db96680d298.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/7df3d0d5-8592-705f-a3d4-e20711be2fc9.png)


### ライブラリのインストール

### M5Unified

[対応してるボード一覧](https://github.com/m5stack/M5GFX/blob/master/src/lgfx/boards.hpp)に`M5StickCPlus2`が含まれていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/37a07dd8-c372-8dfa-9a16-c15773b1ec4f.png)


『[M5StickC PLUS2](https://docs.m5stack.com/en/core/M5StickC%20PLUS2) > チュートリアル[Arduino IDE](https://docs.m5stack.com/en/arduino/arduino_ide)』を参考に、`M5Unified`のライブラリをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/3e5db629-3418-4362-fc42-b27afbd88813.png)


### M5StickCPlus2

同様に、`M5StickCPlus2`のライブラリをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/4677510f-9658-fcff-169d-cae6e9900547.png)

### ESP32-BLE-Mouse

外部ライブラリの『[ESP32-BLE-Mouse](https://github.com/T-vK/ESP32-BLE-Mouse) 』をインストール・読み込みします。

[リリースノート](https://github.com/T-vK/ESP32-BLE-Mouse/releases)より、最新をzipでダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/ce8898e5-d31e-084e-be03-f4275db0040b.png)

ArduinoIDE上で、インストールしたzipを「Sketch」>「Include Library」>「Add .ZIP」の順で読み込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/15e6b042-ca2a-1d5c-c7f4-e28764f0b714.png)


# コンパイルと書き込み
こちらがとても参考になりました🙇‍♀️

https://docs.m5stack.com/ja/arduino/m5stickc_plus2/program

## 使用するボードの選択
「ArduinoIDE」>「Preferenses」のタブを表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/d7eefa4e-b06a-3b60-7292-6929eccd1037.png)

`Additional bords manager URLs`に以下を入力します。
```
https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json
```

`M5Stack`のボードマネージャーを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/5ce80200-bb8b-b760-290f-b3d942183a9f.png)

「Tools」>「Board」>「M5Stack」>「M5StickC Plus2」の順で選択します・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/9ec27ac3-322c-f923-aa1a-69a8033abe32.png)

`M5StickC Plus2`とPCをUSBで接続した状態で、
左上の「→」ボタンをクリックしコンパイル＆書き込みをおこないます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/7d89f9b4-f952-2277-72eb-117f4f2efc7c.png)


…🤔？？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/173ce8f4-bc54-bb1a-e310-bc4fd3ce210d.png)

```bash
A fatal error occurred: Failed to connect to ESP32: No serial data received.
For troubleshooting steps visit: https://docs.espressif.com/projects/esptool/en/latest/troubleshooting.html
Failed uploading: uploading error: exit status 2
```

~~→シリアルポートの設定がうまくいってないっぽい？
と思いUSBドライバのインストールとポートの設定を一生懸命しましたが関係ありませんでした~~😂


原因としては、正しくポートに`M5StickC Plus2`を設定できていなかったようです。
一度`M5StickC Plus2`を再起動し、画面左上のボードを編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/efdfa617-a90f-5a02-07d4-7d6568a964e1.png)

ポートに「/dev/cu.usbserial~」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/92339b19-349e-dfb0-ec5a-988ebbdecb64.png)


再度「→」ボタンよりコンパイル・書き込みを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616068/ddceb220-3dbd-e4f6-c85c-8675b9c27d32.png)

→無事書き込みできました！

お疲れ様です🥳🙌


# あとがき
`Arduino`も`M5Stack`もはじめて触るということで、前提知識がなく割と時間がかかってしまいました。
ただやはりモノづくりは楽しい物だと改めて時間することができました。
今回参加させていただいた『[IoTLT （IoTや電子工作ネタなど） Advent Calendar 2024](https://qiita.com/advent-calendar/2024/iotlt)』のおかげで完成までできたのだと思います。
素敵な機会をありがとうございました🎄✨

皆さん、残りの期間もアドカレを楽しんでください！
良いXmasを…❄️


# 参考文献

- [M5StickC Plusで作るスライド用リモコン](https://zenn.dev/sou1118/articles/a566d87e917022)　…とても参考になりました大感謝😭🙏
- [M5StickC Plus2の使い方、初期設定、旧モデルとの違い等サンプルプログラムで詳しく紹介](https://logikara.blog/m5stickc-plus2-init/)　…M5StickC Plus2の性能から使い方までわかりやすくまとまってました✨