M5Stack LovyanLauncher対応アプリの作り方

　自分で作成したスケッチをM5Stack LovyanLauncherから呼び出して、メニューに戻ることができるようにするポイントを紹介します。スケッチを作成できる方は簡単にできると思うので、是非挑戦してみてください。

M5Stack関連の目次へ戻る

開発環境の準備

　SD-Updater対応アプリのコンパイルに必要なのはM5StackとM5Stack SD-Updaterのライブラリのみです。

ArduinoIDEの準備

　初心者向けM5Stackの始め方（ArduinoIDE編）の記事を参照してArduinoIDEをインストールし、M5Stackのスケッチをコンパイルできるようにしましょう。

M5Stack SD-Updaterのライブラリを追加

　「スケッチ」→「ライブラリをインクルード…」→「ライブラリの管理…」を開き、「M5Stack-SD-Updater」を追加します。

サンプルスケッチを動かす

　サンプルスケッチはSD-Updaterで最初に表示されるように「01SDUpdaterExample.ino」という名前にしています。

　サンプルは下記のリンクで公開しています。

https://github.com/mongonta0716/M5Stack-SDUpdater-example

Hello World

　Hello WorldをSD-Updater対応にすると下記のようになります。 ボタンAを押しながら起動した際に、microSDカード上のmenu.binをロードする処理を追加します。

#include <M5Stack.h>
#include <M5StackUpdater.h>

void setup() {
  M5.begin();
  Wire.begin();
  if(digitalRead(BUTTON_A_PIN) == 0) {
    Serial.println("Will Load menu binary");
    updateFromFS(SD);
    ESP.restart();
  }

  // put your setup code here, to run once:
  M5.Lcd.print("Hello World\n");
  
}

void loop() {
  // put your main code here, to run repeatedly:
}

★注意★
M5.begin();
Wire.begin();
の直後に追加します。

これだけでSD-Updater対応は完了です。

サンプルスケッチのコンパイル

　コンパイルは「スケッチ」→「コンパイルしたバイナリを出力」を選択します。コンパイルが終了するとスケッチがあるフォルダに「<スケッチ名>.ino.m5stack_core_esp32.bin」というバイナリ形式のファイルが出来ます。

ファイル名を変更しmicroSDへコピー

①ファイル名を半角英数のみを使用して短めに変更する。

先ほど生成したbinファイルを<アプリ名>.binへ変更します。

　SD Libraryの制限は32文字です。Pathも含んで32文字なので短めにしましょう。

　LovyanLauncher v0.1.5からbinファイルのフォルダ分けが可能になりました。32文字をオーバーしやすくなりますので注意しましょう。32文字を超えると問題が起きやすくなるそうです。

●32文字は結構短いです。

⁄Avatar.bin⁄jpg⁄appname01_gh.jpg
01234567890123456789012345678901</pre>

②ファイルをmicroSDへコピー

　<アプリ名>.binのファイルをmicroSDのルート上にコピーします。

　なお、SD-Updaterの制限でメニューに表示できる数は最大256です。

③M5StackにmicroSDカードをセットし実行

　実行している様子は下記を見てください。下記の動画ではまだ配布用のファイルを用意していないので「- no image -」と表示されます。

配布用のファイルを用意する。

　先ほどのサンプルではLovyanLauncherから起動する時に「- no image – 」という画面が表示されていました。SD-Updaterアプリを配布用にするために、いくつかファイルを用意する必要があります。

用意するファイル

①JSONファイル（UTF-8)

　GitHubへのリンクやAuthor情報を書くJSONファイルをUTF-8で作成します。ファイルサイズを節約するために1行にしましょう。（下記の説明では見やすいように改行しています。）

• width：画像の幅
• height：画像の高さ
• authorName：作者の名前
• projectURL：GitHubのリポジトリへのリンク（短縮URLの方がいいかもしれません）
• credits：クレジット

{
"width":120, 
"height":120, 
"authorName":"Akaki Takao", 
"projectURL":"https://github.com/mongonta0716/M5Stack-SD-Updater-example", 
"credits":"https://github.com/mongonta0716"
}

●1行バージョン

{"width":120, "height":120, "authorName":"Akaki Takao", "projectURL":"https://github.com/mongonta0716/M5Stack-SDUpdater-example", "credits":"https://github.com/mongonta0716"}

②アプリのプレビュー画面

　どんなアプリかわかりやすい画像を用意しましょう。200×200px以下でjpg形式です。私は120×120で作成してみました。

＜アプリ名＞.jpg で作成します。

③作者のアイコン

　作者のアイコンを用意します。こちらも200×200以下でjpg形式です。私は120×120で作成してみました。

＜アプリ名＞_gh.jpg という名前で作成します。

ファイル名を揃える。

　用意したファイルはアプリと関連付けるためにファイル名を揃えます。例えば「01SDUpdaterExample.bin」という名前のアプリだったら下記のようになります。

• JSON：01SDUpdaterExample.json
• プレビュー：01SDUpdaterExample.jpg
• 作者アイコン：01SDUpdaterExample_gh.jpg

配布用ファイルのフォルダ構成

以下のように配置します。

ルート---｜01SDUpdaterExample.bin
         ｜
         ｜jpg--------------------｜01SDUpdaterExample.jpg
         ｜                       ｜01SDUpdaterExample_gh.jpg
         ｜
         ｜json-------------------｜01SDUpdaterExample.json

配布用ファイルを用意した時の動作

　配布用のファイルが存在する場合は下記のように動作します。

JSONファイルの動作。

　LovyanLauncherからアプリを起動する時にJSONファイルに書き込んだ情報を表示するようになっています。QRCodeを撮影するとprojectURLを開くことができます。

　アプリの概要や操作方法を記載したURLを設定しましょう。

LovyanLauncher対応アプリ作成時のヒント

WiFiはWiFi.begin()だけで大丈夫

　WiFiに接続するアプリの場合、SSIDやパスワードの情報を設定しなくても、LovyanLauncherでWiFiを設定していればWiFi.begin()だけで接続可能です。

　※１つ前に接続した先へ接続します。

注意事項

Partition Schemeは変更しない

　パーティションの構成が変わってしまうと動作しなくなるので、ArduinoIDEのPartition Schemeは”初期値”から変えてはいけません。

おわりに

　自分で作ったスケッチをM5Stack LovyanLauncherから起動できるようにする方法を紹介しました。M5Stack LovyanLauncherの使い方で説明したFTP経由の書き込みを利用するとデバッグもしやすくなります。

　M5Stack用のアプリをどんどん作ってみましょう。

Credits

　M5Stackに関する記事を作成するにあたって、素晴らしいツールを開発・公開したり、記事作成にアドバイスを頂いた方々に感謝いたします。