Upgrade to Pro — share decks privately, control downloads, hide ads and more …

個人で手軽にブラウザやビジュアルプログラミングでIoT /【イマドキのIoTを支える技術】/ TechFeed Experts Night#10

個人で手軽にブラウザやビジュアルプログラミングでIoT /【イマドキのIoTを支える技術】/ TechFeed Experts Night#10

you(@youtoy)

December 14, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. View Slide

  2. 個人で手軽に
    ブラウザやビジュアルプログラミングでIoT
    2022年12月14日 (水)
    TechFeed Experts Night#10 〜 イマドキのIoTを支える技術 @オンライン
    豊田陽介( )
    @youtoy

    View Slide

  3. 自己紹介
    豊田陽介( )
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動いろいろ
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    ・ガジェット大好き
    ・今年、本2冊出したり、メーカーフェア出展3回
    好きなことなど
    3月発売
    (共著)
    7月発売
    (単著)

    View Slide

  4. 大垣のメーカーフェアの会場の来場者の方から
    複数の方に「Twitter で光学迷彩・透明マントやってる人ですよね」と言われた
    ブラウザ上での機械学習と描画処理を
    使ったもの(MediaPipe Hands による
    手の認識と、p5.js を使った描画)

    View Slide

  5. 自己紹介:書籍で書いた内容関連
    豊田陽介( )
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動いろいろ
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    ・ガジェット大好き
    ・今年、本2冊出したり、メーカーフェア出展3回
    好きなことなど
    3月発売
    (共著)
    7月発売
    (単著)
    ブラウザ上でできる機械学習
    や描画との組み合わせの話
    ビジュアルプログラミング
    + IoT の話の作例

    View Slide

  6. スライドは公開済みなので
    発表中は文字などの記載を
    追わなくても大丈夫です

    View Slide

  7. 今日の話の方向性

    View Slide

  8. こういった構成を個人で手軽に試す
    何らかの入力
    インター
    ネット モノ
    モノ
    インター
    ネット 何らかの出力

    View Slide

  9. 「ちょっと試してみる」くらい
    のレベル感の内容を

    View Slide

  10. 個人で試しやすい
    IoT向けデバイス

    View Slide

  11. 先ほどの話でココに出てた

    View Slide

  12. M5Stack社のデバイス(のごく一部)
    どんどん発売される、Wi-Fi にもつながる多種多様なデバイス群
    産業用 切手サイズ
    USB
    メモリ型
    防水型
    電子ペー
    パー搭載 AIカメラ
    AWS
    連携
    スティッ
    ク型

    View Slide

  13. M5Stack社のモジュール(のごく一部)
    センサーからアクチュエーターまで様々
    計量 CO2、温湿度 非接触温度 カード型キーボード RFID
    フルカラーLED ジョイスティック 空気圧 心拍 モーター

    View Slide

  14. 直近でも新製品が
    どんどん出てきている

    View Slide

  15. うちに大量にあります

    View Slide

  16. うちにあるもののごく一部の写真
    全部集めて写真を撮ろうとして、早々に諦めた状況のもの

    View Slide

  17. オススメな理由

    View Slide

  18. M5Stack製品のオススメポイントの例
    ● 本体は基本的に外装がついている
    ● デバイス・モジュールの種類が豊富
    ● デバイス単体でもあれこれ活用できる
    ● 公式のモジュールの接続が手軽
    ● Wi-Fi・Bluetoothが使えてIoT・近接通信も!
    ● 開発環境もいろいろ
    ● M5Stack用のビジュアルプログラミング環境
    ● 開発環境はブラウザで簡単アクセス
    ● 公式パーツを簡単に扱える
    ● HTTPリクエストや MQTT等のネットワーク系
      処理や Bluetooth も扱える

    View Slide

  19. 日本のユーザコミュニティが
    あったり、技術記事なども多い

    View Slide

  20. ビジュアルプログラミング
    のみでIoT
    (ちょっとした仕組みを複数実装)

    View Slide

  21. LINE のリッチ
    メニューの操作
    試作概要1: 通信方向「LINE⇒デバイス」
    LEDテープの点灯、
    電子ペーパーの
    書きかえ
    デバイスで音の再生
    (全て実行)

    M5Stack系の
    デバイスで
    ボタン押下
    LINE Notify でメッセージ通知

    View Slide

  22. 試作概要2: 通信方向「デバイス⇒LINE」
    M5Stack系の
    デバイスで
    ボタン押下
    LINE Notify でメッセージ通知

    LINE のリッチ
    メニューの操作
    LEDテープの点灯、
    電子ペーパーの
    書きかえ
    デバイスで音の再生
    (全て実行)

    View Slide

  23. デモ動画

    View Slide

  24. 技術の部分をざっくりと

    View Slide

  25. 機器やサービスの構成

    View Slide

  26. Botサーバー
    +α
    BotサーバーからMQTTブローカー経由でIoT
    M5Paper
    LINE Notify
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP
    (POST)
    M5StickC
    Plus
    M5Stack
    Core2
    リッチメニュー
    の操作

    View Slide

  27. (REST API、MQTT)
    M5Stack
    Core2
    デバイスからHTTPリクエストでスマホ通知
    M5StickC
    Plus
    M5Paper
    LINE Notify
    スマホのLINE
    アプリ
    リッチメニュー
    の操作
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)

    View Slide

  28. クラウド実行環境
    (HTTPトリガー)
    Botサーバー
    +α
    (REST API、MQTT)
    M5Stack
    Core2
    全体像はこのような構成で
    M5StickC
    Plus
    M5Paper
    LINE Notify
    スマホのLINE
    アプリ
    リッチメニュー
    の操作
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)

    View Slide

  29. プログラムの実装

    View Slide

  30. M5Stack系デバイスの実装:UIFlow
    ブロック型のビジュアルプログラミング

    View Slide

  31. サーバーもビジュアルプログラミング
    【スマホへの通知】
    デバイス ⇒ LINE Notify
    LINE(Bot) ⇒ デバイス
    【MQTTへのつなぎ】
    Beebotteとの連携
    実装はenebular

    View Slide

  32. 実装は全てブラウザベース
    (環境構築の手間は大幅削減)

    View Slide

  33. 最新ではないけれど
    個人で手軽にIoTをやるのに
    便利なMQTTブローカー

    View Slide

  34. Beebotte
    無料プランあり
    データを可視化
    できるダッシュ
    ボード機能あり

    View Slide

  35. shiftr.io
    無料で利用できる
    デスクトップ版が
    ある(GUI・CLI)
    無料プランあり
    ※ 1日6時間の稼働
      で停止する

    View Slide

  36. Beebotte・shiftr.ioに共通する話
    ・クラウドで動く MQTTブローカー
    ・REST API あり(MQTT と HTTP
     リクエストを混在させられる)
    ・無料プランあり

    View Slide

  37. 自前で用意する場合の選択肢

    View Slide

  38. 自分はMQTT.jsをよく使っています
    ・MQTTブローカー
     の実装だけでなく
     クライアントの
     実装でも
     (Node.js、ブラウザ)

    View Slide

  39. 【余談】
    M5Stack社のデバイスで
    宅内通信
    (今回の本筋と違う実装あり)

    View Slide

  40. 試作したもので実現しようとした内容
    ・二酸化炭素濃度を計測
     ⇒ 基準値以上/以下の値になったら
       お知らせ
    ・二酸化炭素濃度、温湿度のデータを
     可視化

    View Slide

  41. IoTコンテスト用の試作の一部で活用
    MQTT
    MQTT
    POST(HTTP
    リクエスト)
    二酸化炭素
    濃度の値
    Azure
    Functions
    Azure IoT Hub
    LINE Notify
    LINE アプリ
    二酸化炭素濃度の値を
    見て、特定条件で通知
    Azure Stream
    Analytics
    Power BI
    宅内通知の仕組みを
    サクッと後で付け足し
    (音や光でお知らせ)
    センサーで取得
    した値を可視化

    View Slide

  42. 【余談2】
    日本での発売を待っている
    IoTに使えるデバイス

    View Slide

  43. 先ほどの話でココに出てた

    View Slide

  44. Raspberry Pi Pico W
    無線LAN機能搭載の安価なデバイス

    View Slide

  45. ここは話す時間がなさそう...

    View Slide

  46. ブラウザでデバイスを扱うAPIが楽しい!
    で外部デバイスとの通信
    ブラウザの API でモノとインターネットをつなぐ
     ・Web Serial
     ・Web Bluetooth
     ・Gamepad API
     ・WebHID
     ・Web MIDI API
    シリアル通信
     
    BLE
     
    コントローラーなど
    MIDIデバイス
    (試作や展示用作品に使ってたりするものも)

    View Slide

  47. 終わり!

    View Slide