はじめに

この記事のトピックは、M5Stack社が提供している開発環境の、とある機能の話です。

具体的には、M5Stack社のデバイスをビジュアルプログラミングで開発できる「UIFlow」の中の、「リモコン＋（Remote+）」という機能に関するものです。

何ができる？

この「リモコン＋」を使うと、自分でサーバー側を用意しなくても、「M5Stack社のデバイス」と「スマホや PC（のブラウザで開いた Webページ）」との間での、インターネット経由のやりとりを実現できます。
その一例として、今回試したような「デバイス側のセンサーの値を、スマホや PC側で表示させる」というようなことができます。

これを活用すると、お手軽に IoT ができそう！

余談

余談ですが「リモコン＋（Remote+）」という仕組み、かなり前に知ってずっと気になりつつも、手を出していなかったものでした。そして今回ようやく手をつけてみました。
※ 「リモコン＋」を既に使っている方もいらっしゃるので、ネット上の投稿などを探すと、「リモコン＋」を使った事例を見ることができます

「リモコン＋」を試す

UIFlow の使い方

「リモコン＋」を使う話の前提として、M5Stack社のデバイスの開発を UIFlow で行うという部分があります。

この部分については、「UIFlow用のファームウェアの書き込み手順など、UIFlow での開発を始める方法」を書いた記事が、既にいろいろ公開されています。そのため、「UIFlow 使い方」などのキーワードで検索して記事を探して、その内容をご参照ください。

UIFlow上で「リモコン＋」を使う

前提となる話など

ここからの話は、UIFlow上での開発が行える状態になっていることが前提になります。

それでは、UIFlow上での話に入っていきます。
UIFlow で開発を行う際に「リモコン＋」を使うには、UIFlow上のメニューで「リモコン＋」を選びます。

そうすると、上記の画面が表示されます。この画面の右のほうに表示されているところで、Webページの UI を作ります。冒頭の説明で、「スマホや PC（のブラウザで開いた Webページ）」と書いていた側で使うものです。
それと合わせて、UIFlow のブロックを使って、デバイス側の実装も行っていく形です。

今回の UIFlow側の実装

今回作ったものの手順の詳細を書いていく前に、先に完成したものの紹介をします。

今回試した内容はとてもシンプルで、「M5Stack のデバイス（今回使うのは、M5Stack Core2）のセンサーで得られたピッチ角の値」を、「M5Stack社が用意してくれているサーバーを介して、スマホのブラウザで開いた Webページ上に表示する」という内容です。

そして、今回のお試しで利用するセンサーの値は 1つだけです。

以下が、UIFlow上で実装した内容の完成版です（補足などは、またこの後で）。

次に、今回の仕組みが動いている様子の動画も掲載します。

以下の動画の画面内の左のほうに M5Stack のデバイス（M5Stack Core2）があり、「M5Stack のデバイスのセンサーの値が、デバイス内蔵のディスプレイ上に表示されます（※ 2.5秒間隔で、表示する値を更新）。
そして、そのセンサーの値が、定期的に（3秒間隔で）スマホのページ上（動画の画面内の右のほう）に表示されます。

動画： #UIFlow の「リモコン＋」を使った #M5Stack Core2 からスマホへのデータのやりとり（シンプルな構成で試す） - YouTube

スマホ側で、センサーの値の取得・表示を 3秒間隔と比較的長い時間にしているのは、今回使ったリモコン＋の機能の仕様によるものです。その仕様で、最短の時間間隔が 3秒となっていて、その最小の時間間隔を設定しています。

Webページ側の実装

それでは、実装の詳細について書いていきます。まずは、Webページ側です。

UIFlow のメニューの「リモコン＋」を選び、以下の「123」と書かれたアイコンを、ドラッグアンドドロップで以下の赤矢印で示したように動かします。

そして、配置したパーツをクリックすると、以下のように設定画面が表示されます。

設定はこのまま変更を加えなくても、今回の内容は試せるます。しかし、設定を変えて結果も見てみたくて、以下のような変更を加えました。

設定を変えた項目と内容
- Name ⇒ SensorValue
- Show Title ⇒ True
- Font Size ⇒ Large

また、上記の操作を行うと、以下のブロックが配置された状態になります。

この続きで、デバイス側の実装も行って行きます。

デバイス側の実装

デバイス側の実装で、大きく 2つの実装を行います。

実装の 1つ目は、デバイス内蔵ディスプレイに、センサーの値を表示する部分を作ります。
UIFlow の左上の部分で、以下の「Label」のアイコンを操作します。アイコンをドラッグアンドドロップで以下の赤矢印で示したように動かします。

その配置を行った後の状態が、以下です。「label0」という表示がされていれば OK です。

実装の 2つ目は、以下の固まりの部分の「Setup」で始まっているほうを作ります（※ 以下は、上で完成形として示していたもの）。

具体的には、UIFlowで以下のメニュー・ブロックを選択して、配置していきます。

追加するブロック
1. イベント＞ずっと
2. 変数＞ rp_label1_data をにする
3. ハードウェア＞加速度＆ジャイロ＞ピッチ角
4. UI ＞ラベル＞ラベル label0 に Hello M5 を表示
5. 変数＞ rp_label1_data
6. タイマー＞ 1 [秒]停止

上記の「2 と 3」および「4 と 5」のブロックは、それぞれ組み合わせて使います。
さらにその下に、上記「6」のタイマーのブロックをつなげます（※ 時間は 1秒から、2.5秒に変更しました）。

そして、それらが上記の「1」の「ずっと」のブロックの中に、入れ子になって入る形です。

これで、ブロックの実装は完了です。あとは、UIFlow の画面右下にある「Ruｎ」ボタンを押すことで、デバイスへのプログラムの書きこみと処理の実行が行えます。

処理を実行した後に、デバイス内蔵ディスプレイの画面上で数字が表示され、それが一定間隔で変化していれば OK です（※ このとき、デバイスを傾けるなどして、センサーの値が変わるようにして確かめてください）。

スマホで Webページを表示する方法

あとは、M5Stack のデバイス上で表示されていた値を、スマホ側でも表示させてみます。そのために、Webページにブラウザでアクセスします。

その際にアクセス先となる URL は、UIFlow上で取得することができます。
以下の赤矢印で示した部分をクリックすると、QRコードと「Copy Url」と書かれたボタンが表示されます。

このボタンを押すと、クリップボードに URL がコピーされます。そのコピーされた URL をスマホ側に送ってブラウザで開いても良いですし、表示された QRコードをスマホで読み取ってアクセスするやり方でもかまいません。

そのようにして、スマホで Webページを開きます。そして、スマホのブラウザ上の画面で、数字が表示された部分が一定間隔で変化しているのを確認してみてください（※ このとき、M5Stack のデバイスを傾けるなどして、センサーの値が変わるようにして確かめてください）。

おわりに

UIFlow の「リモコン＋（Remote+）」をシンプルな構成で試してみました。そして、自前でサーバーを用意することなく、M5Stack のデバイスからスマホへと、センサーのデータを送ることができました。

今回試した内容は、「リモコン＋」の UIパーツの 1つを使ったのみで、「リモコン＋」には他にも様々な UIパーツがあります（例えば、M5Stack のデバイス側を遠隔で操作することもできる「ボタン」や「スライダー」、「ジョイスティック」といったもの）。
さらに、EzData という、M5Stack社が提供しているクラウド上のデータストレージサービスと組み合わせて、データのグラフ表示を行うことも可能です。

まだ自分自身、「リモコン＋」で試せてない内容が多いので、引き続きお試しをやっていければと思います。

IoTLT というイベントで発表してみました

この記事に書いた話は、8/22 に開催された「IoTLT vol.102」で発表しました。

以下は、その際の登壇スライドです。

⇒ こちらは、動画アーカイブで自分が登壇部分へのリンクです