[Remotteアプリ] リモッテで M5StickC 基本アプリを使う

[リモッテ](https://www.remotte.jp/ "ホームページ")は、IoT や AI、自動化といったアプリのための All-In-One プラットフォーム。無料で使えて、Remotte ストアからアプリをダウンロードすれば、ほんの数分程度でアプリを実現できる。今回は「M5StickC 基本アプリ」というのを使ってみる。
### 基本的な使い方
リモッテの基本的な使い方については Qiita の別の投稿を参考に。
[IoT プラットフォーム「リモッテ」をインストールしてみた](https://qiita.com/remotte_jp/items/39278287097a7a25432d)
[IoT プラットフォーム「リモッテ」でステーションを登録してみた](https://qiita.com/remotte_jp/items/94fb73db9fb98e9e10a2)
[IoT プラットフォーム「リモッテ」でアプリを実行してみた](https://qiita.com/remotte_jp/items/324f99727c68392b80e5)
### 「MQTT ブローカー」の準備
M5StickC のアプリのインストールに先立って、「MQTT ブローカー」を用意します。既に何らかの MQTT ブローカーを使っている場合は、既設のものをそのまま使えば良いですが、ここでは別の投稿 [[Remotteアプリ] リモッテで MQTT ブローカーを立ち上げる](https://qiita.com/remotte_jp/items/893800044319a8c9a3a2) を参考に、Remotte ストアから「MQTT Broker」というアプリをダウンロードし、リモッテ・ステーション上でブローカーを走らせておくことにする。
### 「M5StickC 基本アプリ」のインストール
アプリの一覧画面にて「ストアへ」をクリックし、Remotte アプリストアを開く。以下の画面は既に MQTT ブローカーを起動済みの状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/d68dac4e-20ae-f590-a8d1-833a53b6c8a7.png)
アプリストアから「M5StickC 基本アプリ」を見つけてダウンロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/b9472a81-ecdd-4ba3-2c46-25d160155057.png)
「ファイルから読み込み」を選択し、ダウンロードしたファイルを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/bac41183-0a50-3404-479d-e42029d1e9f0.png)
以下はインストールが完了した状態。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/7b50f170-ad4d-1e6a-5669-0c9a697e2736.png)
どんなアプリでも、インストールしたらまずその詳細画面を開き、「全般」タブ内の説明をよく読みましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/904487a0-9835-b057-61e9-8f41ab8ed262.png)
### プログラムの書込み
M5StickC にプログラム（ファームウェア）を書き込みます。「M5StickC 基本アプリ」には、デバイスに書き込むべくプログラムが含まれており、それを書き込む操作をすれば良いだけになっています。
まず、「利用ページ」タブの「レイアウト」画面に移動した上で、画面上部の「開始」ボタンを押し、アプリを開始します。ここで、M5StickC をパソコンと接続し、電源を入れておきましょう。電源さえ入っていればどういう状態でも構いません。画面中央に、「USB の接続ポート」を選択するドロップダウンメニューがあり、ここで M5StickC が接続されているポート番号を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/f6c03e3a-2139-9505-e85f-8fedda1ccf5c.png)
ポート番号を知るためには、Windows のスタートメニューを右クリックして表示されたメニューにて、「デバイス マネージャー」を選択し、「ポート(COM と LPT)」というグループを展開すると分かります。以下の画面の例では、「COM7」であることが分かりますので、ドロップダウンメニューで「COM7」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/17a9c661-5e54-0199-3570-bd755a131259.png)
次に画面中央の緑色のボタン「プログラムの書込み」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/8ec941b1-c0f7-dc5f-b8d6-a63dd655c122.png)
ボタンの右側に、書き込み中のステータスが表示され、数秒後に以下のような「Success!!」が表示されれば書込み完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/a0384f03-6a38-dbf9-44f8-98ab123c6291.png)
もし、「プログラムの書込み」ボタンを押した直後にアプリがエラーで終了してしまったり、その他の書込みエラーが発生した場合は、M5StickC が正しく接続されて電源が入っているか、正しいポート番号が選択されているかを再確認した上で、再度書込みを行なってみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/c9265afe-8f28-206f-81c8-4bab4e74ed6d.png)
この時点で M5StickC の画面の１行目に、「Device is not configured.」と表示されていればオッケー。
### 動作設定
画面左側にて、利用ページ「動作設定」を選択します。ここでは、M5StickC と MQTT ブローカーとの通信設定、および M5StickC に接続しているセンサーやモーターなど、動作させたい要素を選択する動作設定をした上で、その情報を M5StickC に構成情報として書き込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/22728470-86aa-818b-1076-51a0d6168685.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/cd5f2cef-7ae5-e717-80df-c4540f6481bd.png)
まずは上記の画面に赤色の下線を引いた４つの項目を設定してみよう。このアプリでは Wi-Fi および MQTT ブローカーを使って M5StickC とステーションとを接続するように作られているため、まず、ステーションが接続された Wi-Fi 環境と同じ「Wi-Fi SSID」と「Wi-Fi パスワード」を入力します。次に、「MQTT ブローカー」の IP アドレスを入力します。本投稿では、ステーション上で MQTT ブローカーを実行しているので、ここには今使用しているパソコンの IP アドレスを入力します。一番手っ取り早い方法は、Remotte のコントロールパネルの「ステーション情報」タブを開くと、画面の一番下に IP アドレスが表示されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/0babae8f-9cc0-bb77-4c8f-bdca3fa7ec07.png)
上記の例では、「192.168.0.3」と表示されているので、これを「MQTT ブローカー」の欄に入力する。これでとりあえず通信設定はオッケーで、より詳細な設定項目については、別の投稿にて説明することにする。
次は動作設定で、動作させたいデバイスのチェックボックスをオンにする。上記の例では、人感センサー PIR(HAT) と環境センサー ENV(Grove) を有効にした。非推奨ではあるが、今回は動作確認を容易にすべく、画面の一番下のチェックボックス「Wi-Fi および MQTT の設定情報を不揮発メモリーに書込む」をオンにした。
最後に、M5StickC に構成情報を書き込む。ファームウェアの書込みをした直後においては、一度「リセット」ボタンを押してから、続いて緑色のボタン「構成情報の書込み」を押してみよう。

「Connecting Wi-Fi...」と表示され。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/99939dd8-4ee6-be33-4c3b-65b08bec835b.png)
「Interval(sec): 5.0」のように、動作設定で指定したセンス間隔[秒]が表示され。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/3115887e-2e4a-e2bd-30a2-1127ea66a9e3.png)
各種センサー値など、M5StickC の状態が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/9a5829ac-0ce6-5d7f-aee1-ff21c9a14de2.png)
上手く表示されない場合は、もう一度「構成要素の書込み」ボタンを押してみてください。
### データの表示と制御
画面左側にて、利用ページ「表示と制御」や「バッテリーの状態」を選択すると、動作設定で選択した項目のデータが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/7a734ec9-7225-2c40-d150-e80b506b1450.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/4c98c6d3-9f07-417a-8a3f-941dda337601.png)
また、「表示と制御」ページの下側で、「LED」スイッチをオンにすると、M5StickC に内蔵された LED が点灯します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491154/743eafb2-6ce4-2517-4b15-64acf902ad14.png)
### 上手く動作しない場合のチェック項目
LAN 内で評価している状態で、MQTT 用のポートも正しく開き、MQTT ブローカーが正しく動作しているのにもかかわらず期待した動作が得られない場合、以下のことを確認してみましょう。

１）Remotte ストアからダウンロードしてインストールしたアプリ「MQTT Broker」の「設定」に「ID とパスワード」という項目がありますが、ここで設定したものと「M5StickC 基本アプリ」の「動作設定」画面内の「ユーザー ID」と「パスワード」は一致している必要があります。とりあえず動作確認するだけであれば、手っ取り早く「MQTT Broker」の「設定」の「ID とパスワード」にデフォルトで定義されているものを、画面右側の「マイナス」ボタンを押して削除してみましょう。

２）「M5StickC 基本アプリ」の利用ページ「動作設定」画面内の「MQTT ブローカー」の項目に、ステーションの IP アドレスが入力されていますか？この値は、M5StickC からみた、ステーションの IP アドレスですので、ここに localhost や 127.0.0.1 という値を入力した場合、エラーになります。

３）「M5StickC 基本アプリ」を開始する前に、「MQTT ブローカー」を起動してください。一度 MQTT ブローカーを起動した後では、何度「M5StickC 基本アプリ」の「開始」や「停止」を繰り返しても良いです。

４）使用しているルーターで「分離機能」が有効になっているなど、M5StickC と ステーションが通信できないネットワーク環境になっていないかを確認しましょう。

５）M5StickC の表示に、「Connecting Wi-Fi...」と表示され、この点々表示 ........ が無限に続くようなら、Wi-Fi の SSID とパスワードに問題がありそうです。確認して再度「構成情報の書込み」をクリック、ないしは一度「リセット」をクリックしてみてください。また、SSID に記号が含まれている場合に接続できないことがあります。Wi-Fi ルーターから離れすぎていると、Wi-Fi 環境にパソコンでは接続できても、小型の M5StickC では接続できないかもしれません。

６）M5StickC の電源ボタンを６秒間ほど押し続けて、一度電源を切断し、再度電源を投入してみましょう。

なお、M5StickC 本体の画面の下に、「MQTT Error (-2)」などのようなエラーが表示される場合、エラー番号は以下のページを参考にしましょう。
https://pubsubclient.knolleary.net/api.html#state

その他、何をやっても進展しない場合や動作が不安定な場合は、「Remotte コントロールパネル」にてステーションを「停止」し、再度「起動」することでステーションを再起動したり、Windows メニューから「Remotte Station」を開き「サービスの起動と停止」の画面にて再起動してみる、ないしは Windows 自体を再起動してみる等してみましょう。
### まとめ
本稿では、MQTT ブローカーを立ち上げた上で、M5StickC の基本アプリを使用してみた。基本アプリでは、今回使った人感センサーと環境センサーの他に、サーボモーターや土壌水分センサー、GPS、リレー、TOF 距離センサー、光センサー、ミニファンなどが利用できる。本投稿で説明しなかった設定項目について、また、温度や湿度などのデータの校正（キャリブレーション）の方法や、複数の M5StickC を使用し、複数拠点のデータ収集をするアプリの作成については、別の投稿で説明することにする。なお、管理ツール以外の端末からデータを閲覧、制御したり、各種データの履歴を見るためには、下記の投稿を参考にして欲しい。
[Remotte（リモッテ）を利用者として使う](https://qiita.com/remotte_jp/items/7ec79a400429738843d0)
[Remotte（リモッテ）で時系列データの詳細を見る](https://qiita.com/remotte_jp/items/a7b5475176eb133af957)