M5Stack-SD-Updaterのすすめ

# M5Stack-SD-Updaterとは

「M5Stack-SD-Updater」は、tobozo氏が開発したマイクロSDカードからバイナリファイルを起動できるランチャーです。

https://github.com/tobozo/M5Stack-SD-Updater

ArduinoIDEで一度バイナリファイルを作ってしまえば、それをマイクロSDカードに書き込むことでArduinoIDEを使わずにM5Stack単体でソフトが書き換えができるという画期的なアプリケーションです。
本稿では「M5Stack-SD-Updater」の使い方について紹介します。

## 開発環境(Auruino IDE)

まず最初にEspressif Systems社から提供されている「Arduino core for the ESP32」を導入したArduino IDEでの開発環境を構築します。以下のページに各OSでのArduinoIDE環境構築からM5Stack Libraryの導入方法までの手順があります。

https://github.com/m5stack/M5Stack

### ArduinoIDE環境の構築

Arduino用の公式環境である「ArduinoIDE」に「ESP32ボード設定 (Arduino core for ESP32) 」と「M5Stackライブラリ」を追加して使用します。「Arduino core for ESP32」はArduinoIDE のメニューからインストールできます。

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

  Arduino.ccのSoftwareページ (https://www.arduino.cc/en/Main/Software) から各OSにあわせたArduinoIDE をダウンロードしてインストールします。

#### 「Arduino core for ESP32」の導入

1. ArduinoIDEを起動し[ファイル] -> [環境設定] で環境設定画面を開きます。

2. "追加のボードマネージャのURL"に以下を追加して [OK] で閉じます。

https://dl.espressif.com/dl/package_esp32_index.json

![00_Preference.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/60de18d2-89c5-ebb4-cda9-b88d880f5f09.jpeg)

3. メニューの[ツール] -> [ボード] -> [ボードマネージャ] を選択します。"検索をフィルタ..."に"esp32"と入力し"esp32 by Espressif Systems"を選択してインストールします。インストールが終わったら"INSTALLED"と表示されますので[閉じる]で画面を閉じます。

![01_boardMGR.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/eae1319e-2c54-cc7f-1e41-f2786e84d0cc.jpeg)

Windowsの場合のデフォルトのインストール先は以下になります。

C:\Users\[ユーザー名]\AppData\Local\Arduino15\packages\esp32

#### 「M5Stack Library」の導入

1. メニューの[スケッチ] -> [ライブラリをインクルード] -> [ライブラリを管理]を選択しライブラリマネージャを開きます。"検索をフィルタ..."に"M5Stack"と入力し"M5Stack by M5Stack"を選択してインストールします。インストールが終わったら"INSTALLED"と表示されますので[閉じる]で画面を閉じます。

![02_LibraryMGR.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/791f7d5b-4cc4-ff53-930d-14c199bb7a57.jpeg)

Windowsの場合のデフォルトのインストール先は以下になります。

C:\Users\[ユーザー名]\Documents\Arduino\libraries\M5Stack

#### スケッチの書き込みのテスト

バックアップが終わったら、サンプルスケッチを選択しコンパイル->書き込むための設定を行います。ArduinoIDEの[ツール] -> [ボード] -> [M5Stack-Core-ESP32]を選択し以下の図の様に設定します。シリアルポートは環境にあわせて変更します。

![03_IDESetting.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/befc5c04-0f06-3085-ac96-50e0ea364450.jpeg)

環境構築ができた事を確認するために、M5Stackのスケッチ例より試したいサンプルスケッチを読み込み、M5Stackに書き込んで実行します。稀にコンパイルが通らないサンプルプログラムがあるので最初のテストには「Basics」にあるスケッチを使用するのがおすすめです。

![04_example.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/ffa45aa4-89f4-4532-8dfe-68ab217af0f9.jpeg)

### 「M5Stack-SD-Updater」を使ってみる

#### 「M5Stack-SD-Updater」に必要なライブラリの導入

「M5Stack-SD-Updater」の実行に必要なライブラリは以下となります。いずれも「ライブラリマネージャ」より導入可能です。

  - M5Stack-SD-Updater: 本体
  - ArduinoJSON: ArduinoでJSON形式を扱うためのライブラリ
  - M5StackSAM: M5Stackでアプリケーションメニューを扱うためのライブラリ

#### 「M5Stack-SD-Updater」用のアプリケーションの入手

tobozo氏のGitHubリポジトリで「M5Stack-SD-Updater対応アプリケーション」のバイナリファイルが配布されています。
以下のリリースページからアーカイブをダウンロードし、フォーマット済のマイクロSDカードのルートに展開します。

https://github.com/tobozo/M5Stack-SD-Updater/releases

展開が終わったら、バイナリファイルが書き込まれたマイクロSDカードをM5Stackに装着します。

#### 「M5Stack-SD-Menu.ino」のコンパイルと書き込み

「M5Stack-SD-Updater」のスケッチ例から「M5Stack-SD-Menu」を読み込んで、M5Stackに書き込みます。

![05_SD-Updater_scketch.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/c23ea133-0e97-013d-f31e-04184eb839bc.jpeg)

コンパイル->書き込みが正常に終了すると、マイクロSDカードにあるバイナリファイルの一覧がメニュー表示されます。
Cボタンでアプリケーションを選択しBボタンで"LOAD"すると選択されたアプリケーションがSDカードから読み込まれて実行されます。

![06_SD-menu.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/ece4aab4-f9a6-e69a-45da-822c58808c7e.jpeg)

Aボタンを押しながら電源スイッチを押して再起動すれば「M5Stack-SD-Menu」に戻ることが出来ます。

### 「M5Stack-SD-Updater」対応のスケッチの作り方

既存のM5Stack対応スケッチに以下の記述を追加する事により「M5Stack-SD-Updater」対応にする事が出来ます。

#### ヘッダファイルのInclude

まずは、M5Stackライブラリのヘッダを探します。

```
  #include <M5Stack.h>
```

見つけたら後ろの行に以下の記述を追加します。

```
  #include "M5StackUpdater.h"
```

#### メニューへ戻るための記述を追加

setup() 関数の中にある

```
M5.begin();
```

の後ろの行に以下の記述を追加します。

```
  if(digitalRead(BUTTON_A_PIN) == 0) {
    Serial.println("Will Load menu binary");
    updateFromFS(SD);
    ESP.restart();
  }
```

#### コンパイル済のバイナリの出力

ArduinoIDEの[スケッチ] -> [コンパイルしたバイナリを出力] を選びます。コンパイルが無事完了すると、スケッチのあるフォルダにコンパイル済のバイナリファイル(*.bin)が出力されます。

![07_create_binary.JPG](https://qiita-image-store.s3.amazonaws.com/0/120903/e68210ab-b183-fe28-f24f-36dba2d46493.jpeg)

*.binファイルをマイクロSDカードに追加すると「M5Stack-SD-Menu」に表示され実行できます。

## 最後に

「M5Stack」は公式から提供されるモジュールや「UIFlow」のような新しい開発環境に加えて、ユーザーが開発した「M5Stack-SD-Updater」のようなアプリや拡張ボードがどんどん公開されています。
皆さんもこれらの環境を使う事によって充実して楽しい「M5Stack生活」を送ってください。

### M5Stack公式アカウント

Web Site: https://www.m5stack.com/

Fecebook: https://www.facebook.com/M5Stack/

Twitter: https://twitter.com/M5Stack