本セッションの登壇者
セッション動画
豊田陽介(Twitter: @youtoy)と申します。プライベートでビジュアルプログラミングIoTLTやロボットトイのコミュニティの共同主催/登壇/運営などの技術コミュニティ活動をしています。これらのコミュニティ活動に対して、2021年10月からMicrosoft MVPをいただいています。
私はガジェットが大好きなので、今日はIoTの**T(things)**の部分もたくさんご紹介したいと思います。ものづくりも好きなので、世界中で開催されているものづくりのイベントであるMaker Faireにも日本で今年(2022年に)3回出展しています。
最近、岐阜県・大垣で開催されたMaker Faireで複数の来場者に「Twitterで光学迷彩・透明マントやってる人ですよね」と声をかけられました。これはブラウザ上で機械学習/描画処理を行うデモです。機械学習をブラウザ(JavaScript)上で実現するのが好きで、これを題材にした書籍「Teachable Machine」による機械学習を今年(2022年)出版しました。
また、今日の本題であるビジュアルプログラミングやIoTについてもアイデアをカタチにする！ M5Stack入門&実践ガイド(共著)として出版しました。
本日の話の方向性 - 個人に簡単に試せるIoTを
今回は「個人でIoTをやりたい」という方に向けて、手元で簡単に試せるようなものをご紹介します。運用などをしっかり考慮して行うものとは別のお話です。IoT(Internet of Things)はモノがインターネットにつながるということですので、大きく分けるとモノが入力側か出力側のどちらかにあって、そこに別の入力や出力がつながっている(または両方にモノがある構成も含む)という流れです。このIoTを「ちょっと試してみたい」というときに個人で扱いやすいであろうことを、私がやってきたことをベースにお話したいと思います。
M5Stackシリーズ - 個人で試しやすいIoTデバイス
のびすけさんがお話された歴史の中で近代IoT時代に出てきた**M5Stackシリーズ**を個人で試しやすいIoTデバイスとしてご紹介します。
M5Stackシリーズは深センのM5Stack社が開発したデバイスで、このスライドに登場しているのは発売されているデバイスの中でもごく一部です。M5Stackシリーズは2018年に日本で発売が開始されましたが、現在も頻繁に新しい種類のデバイスが追加されていて、本日のテーマである「イマドキのIoT」にぴったりなデバイスです。また個人でIoTを試す際にも非常に扱いやすくもあるので今回ご紹介します。
M5Stackデバイス(本体)
M5Stackデバイスは、形状や用途によって多種多様なものが発売されています。
- 産業用レールに固定できる外装で、バッテリーを搭載可能、外部電源にも対応したタイプ
- 切手サイズ、USBメモリ型のタイプ
- 防水仕様で屋外でも使用できるタイプ
- 電子ペーパー搭載のタイプ
- Linux系OSが搭載されたAIカメラモデル
- AWSのIoTリファレンスモデルになっているタイプ(色もAWS仕様)
- スティック型タイプ
- 他にも異なる形状で小型サイズのものなど
M5Stackモジュール(センサー/出力など)
M5Stackのデバイスも扱いやすいですが、組み合わせて使うモジュールも使いやすいものがいくつもあります。入力であるセンサーから、出力であるモーター/アクチュエータまでさまざまなモジュールがあります。最近発売されたものをごく一部ピックアップしたのがこちらのスライドです。
- 計量センサー … 日本では発売されたばかりの重さを測るためのモジュールで、計量用のボードやロードセルなどの部品がコンパクトにまとまっています
- CO2/温湿度センサー … コロナ禍でも話題になったCO2センサーと環境センサー(温湿度)が合わさったセンサーモジュール
- 非接触温度センサー … 非接触で温度を計測できるセンサー
- 小型/カード型のキーボード
- タグを近接通信で読み取れるRFIDモジュール
- テープ型ではなく六角形に敷き詰められたフルカラーのLEDモジュール
- ジョイスティック
- チューブにつけて使う空気圧センサーモジュール
- 指をあてて心拍を測るモジュール
- サーボモーター(角度指定/ローテーションサーボ)モジュールなど
他にもたくさんのモジュールがあり、直近でも新製品が出ています。
私も多くの種類のM5Stackのデバイスやモジュールを持っています。この写真はあるイベント向けにすべてのM5Stackの製品を撮影しようと取り出したものですが、すべて取り出しているとキリがないので途中で諦めました。それでもこれだけの種類があり、どれも便利なので利用しています。
M5Stackシリーズがおすすめな理由
このように豊富なデバイスやモジュールが現在も続々と発売されているM5Stackシリーズですが、個人でIoTを試す際におすすめする理由をご紹介します。
使いやすくて豊富なデバイスとモジュール
一部の基盤型のものを除き、M5Stackシリーズの本体は基本的に外装で保護されているので、展示などにも使いやすいです。また、さきほど一部をご紹介しましたが、デバイスやモジュールの種類が豊富なので、用途に合わせた大きさ/スペック/値段のものを選べます。これらの豊富なモジュールを組み合わせて使うこともできますし、モジュールを買わなくてもデバイス単体であれこれ活用できるものがあります。
たとえば「ディスプレイ/いくつかのボタン/加速度センサー」が搭載された構成のデバイスもあり、「IoTの出力側として何かをディスプレイに表示する」「入力側としてセンサーが振られた/ボタンが押された」というトリガーをIoT動作のきっかけにすることもできます。
パーツの接続が容易
公式のモジュールは2つの接続方法がありますが、どちらも接続が簡単です。電子工作になじみがある方はご存知のGrove(Seeed社の規格)と互換性のある規格と、ツメのようなピンが複数本出ているタイプがあります。
Groveの場合は4本のケーブルが1つのコネクタにまとめられているので、コネクタ1つを接続すれば完了し、裏表を間違えないようにできているので電子工作初心者でも差し間違えしにくいです。ピンが複数本あるタイプも、裏表を間違えないようにできていて、接続もそのままデバイス本体に差し込めば使えるようになっています。
IoTに適したネットワーク機能と開発環境
多くのデバイスでWiFi/Bluetoothを使えるのでIoTや近接通信も可能です。
開発環境は複数あり、Arduino IDEでのテキストプログラミングも可能ですし、UIFlowというビジュアルプログラミング環境も公式に提供されています。UIFlowはブラウザで簡単にアクセスでき、Arduino IDEを使うときのようなIDEのダウンロードやボード/ライブラリの追加といった初期設定の手順に相当する部分を省略できるので、セットアップが簡単です。さらに、公式パーツを簡単に扱えるようになっています。世の中には複数のビジュアルプログラミング環境があるものの、やや機能制限があるものが多い印象がありますが、UIFlowは機能が豊富です。通信関連の機能も充実していて、HTTPリクエストやIoTでのリアルタイム通信に使われるMQTTといったネットワーク処理も使えるので、IoT向けの仕様といえます。
情報入手が容易
Facebookに日本のM5Stackユーザコミュニティがあったり、技術記事が豊富に出ていたりすることもおすすめする理由です。最近は毎年コンテストも開かれており、「作ってみました」レベルの作品から非常によく作り込まれた作品まで、創作意欲やアイデアのもとになる作例をたくさん見られるのもポイントです。
ビジュアルプログラミングのみでIoT
M5Stackとビジュアルプログラミング/ノーコードソリューションを組み合わせて、テキストプログラミングせずにIoTを簡単に実現した試作事例を紹介します。
試作したシステムでは、スマートフォン上のLINEアプリとデバイス間で2方向の通信を行っています。1つ目はスマートフォンからデバイスへの通信で、LINEアプリのリッチメニュー内のボタンをタップすると、複数あるデバイスでそれぞれ異なる動作を起動します。2つ目はデバイスからスマートフォンへの通信で、M5Stackデバイスのボタンを押すと、LINEサーバへのネットワーク通信を経てLINEに通知を送ります。
機器やサービスの構成
LINEのリッチメニューから各デバイスを操作する部分は、LINEボットを使っています。その機能の実現のためにボットサーバを用意し、そのボットサーバからはHTTPリクエストでMQTTブローカー(仲介役)であるbeebotteを呼び出しています。beebotteは、IoTでよく使われるリアルタイム通信プロトコルのMQTTでデバイスへの通信を行い、LINEでの操作がデバイスに伝わります。
デバイスからスマートフォンに通知を送る部分は、M5Stackから仲介役であるenebularにHTTPリクエストを送り、LINE Notifyを使ってLINEアプリに通知を送っています。
2方向の通信を実現する機器/サービス全体の構成は以下のとおりです。
プログラムの実装
さきほどM5Stackではビジュアルプログラミングが使えるとお話しましたが、この試作例でも各デバイスでUIFlowによるビジュアルプログラミングを使用しています。
一番左はMQTTの通信を受けて「音を鳴らす」「ボタンを押すとLINEへの通知を送る」機能を実装したものです。中央はMQTTの通信を受けて「LEDテープを光らせる」「ボタンを押すとLINEへの通知を送る」機能を実装したものです。一番右はMQTTの通信を受けて「電子ペーパーの画面を書き換える」処理を実装しています。 ブロック数もそこまで多くもなく、個人的には簡単に実装できたと思います。
また、デバイスからLINE Notifyを呼び出してスマートフォンに通知を送る部分や、スマートフォンからの操作を受けてMQTTでデバイスと通信する仕組みを含むLINEボットサーバもフローベースのビジュアルプログラミングで実装しています。
ここまで出てきた実装を行った開発環境はすべてブラウザからアクセスして使うものなので、それぞれの開発環境をローカルでセットアップする手間が大幅に削減できます。これらは、インターネットにつながる環境であれば手軽に使えるようになっています。
IoTを試すときに便利なMQTTブローカー
個人で手軽にIoTを試すときには、MQTTのブローカー(仲介役)が必要になる場合がありますので、便利なサービスを紹介します。
個人的なおすすめはbeebotteです。無料プランでクラウド上で動くリアルタイム通信の仲介役を使えます。また、データを可視化できるダッシュボード機能もあり、センサーのデータを仲介するだけではなく、データをグラフ化することもできます。冒頭でご紹介した本でも、このサービスを使ってセンサーのデータを可視化した事例を載せています。
ほかによくコミュニティで見かけるのはshiftr.ioです。こちらのサービスも無料プランがありますが、1日6時間で稼働停止するため、常時運用よりも開発で短期間だけ使う場合に適したサービスです。また、無料でダウンロードできるデスクトップ版(Windows/macOS/LinuxそれぞれのGUI/CLI版)があるので、ローカルでMQTTブローカーを用意して通信させたいときにはよく使っています。
beebotteもshiftr.ioもクラウドで動くMQTTブローカーですが、HTTPリクエストを使うREST APIもあるので、さきほどの例のLINEへの通知のようにMQTTに対応していないサービスと連携する場合や、M5StackなどのデバイスからHTTPでリクエストを受けるなど、HTTPとMQTTを混在させる構成にも対応でき、便利です。
クラウド型のサービスを利用するのではなく自前でMQTTブローカーを用意するときは、MQTT.jsで実装しています。このライブラリは、MQTTの仲介役だけではなく、Node.jsやブラウザで動作するMQTTクライアントの実装にも利用できます。
MQTT.jsの利用例として、M5Stack社のデバイスを宅内通信させた例を、私が過去のコンテスト向けに試作した話を用いて紹介します。この例は室内の二酸化炭素濃度を計測し、換気を促すアプリケーションです。
このときはコンテストの条件で、特定のデバイスを利用することと、Azureのサービス(Azure IoT Hub、Azure Stream Analytics、Azure Functions、Power BIなど)を用いたIoTという構成が指定されていました。そのため、これらのサービスを使った可視化・LINE通知の機能を実装していました。それに加えて、家の中でお知らせをする仕組みも追加したかったので、 MQTT.jsで実装したローカルMQTTブローカーとMQTTの通信を受けて動作するM5Stackのデバイスを追加した構成にしました。追加した部分は、UIFlowによるビジュアルプログラミングで簡単に実現できました。
今後気になるIoTの技術
IoTデバイスのうち、Raspberry Pi Pico Wは無線LAN機能搭載の安価なIoT向けデバイスとして日本での発売が待ち遠しいです。
個人でIoTの仕組みを試すのに使いやすいAPIに関して、ブラウザ上でデバイスを扱うことができるAPIもあるので、興味のある方はスライドを確認してみてください。
私の発表は以上です。ありがとうございました。
