View Slide
個人で手軽にブラウザやビジュアルプログラミングでIoT2022年12月14日 (水)TechFeed Experts Night#10 〜 イマドキのIoTを支える技術 @オンライン豊田陽介（ ）@youtoy
自己紹介豊田陽介（ ）@youtoy・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ・ Microsoft MVP（2021/10 から）プライベートでの活動・ガジェット大好き・今年、本2冊出したり、メーカーフェア出展3回好きなことなど3月発売（共著）7月発売（単著）
大垣のメーカーフェアの会場の来場者の方から複数の方に「Twitter で光学迷彩・透明マントやってる人ですよね」と言われたブラウザ上での機械学習と描画処理を使ったもの（MediaPipe Hands による手の認識と、p5.js を使った描画）
自己紹介：書籍で書いた内容関連豊田陽介（ ）@youtoy・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ・ Microsoft MVP（2021/10 から）プライベートでの活動・ガジェット大好き・今年、本2冊出したり、メーカーフェア出展3回好きなことなど3月発売（共著）7月発売（単著）ブラウザ上でできる機械学習や描画との組み合わせの話ビジュアルプログラミング＋ IoT の話の作例
スライドは公開済みなので発表中は文字などの記載を追わなくても大丈夫です
今日の話の方向性
こういった構成を個人で手軽に試す何らかの入力インターネット モノモノインターネット 何らかの出力
「ちょっと試してみる」くらいのレベル感の内容を
個人で試しやすいIoT向けデバイス
先ほどの話でココに出てた
M5Stack社のデバイス（のごく一部）どんどん発売される、Wi-Fi にもつながる多種多様なデバイス群産業用 切手サイズUSBメモリ型防水型電子ペーパー搭載 AIカメラAWS連携スティック型
M5Stack社のモジュール（のごく一部）センサーからアクチュエーターまで様々計量 CO2、温湿度 非接触温度 カード型キーボード RFIDフルカラーLED ジョイスティック 空気圧 心拍 モーター
直近でも新製品がどんどん出てきている
うちに大量にあります
うちにあるもののごく一部の写真全部集めて写真を撮ろうとして、早々に諦めた状況のもの
オススメな理由
M5Stack製品のオススメポイントの例● 本体は基本的に外装がついている● デバイス・モジュールの種類が豊富● デバイス単体でもあれこれ活用できる● 公式のモジュールの接続が手軽● Wi-Fi・Bluetoothが使えてIoT・近接通信も！● 開発環境もいろいろ● M5Stack用のビジュアルプログラミング環境● 開発環境はブラウザで簡単アクセス● 公式パーツを簡単に扱える● HTTPリクエストや MQTT等のネットワーク系 処理や Bluetooth も扱える
日本のユーザコミュニティがあったり、技術記事なども多い
ビジュアルプログラミングのみでIoT（ちょっとした仕組みを複数実装）
LINE のリッチメニューの操作試作概要1： 通信方向「LINE⇒デバイス」LEDテープの点灯、電子ペーパーの書きかえデバイスで音の再生（全て実行）①M5Stack系のデバイスでボタン押下LINE Notify でメッセージ通知②
試作概要2： 通信方向「デバイス⇒LINE」M5Stack系のデバイスでボタン押下LINE Notify でメッセージ通知②LINE のリッチメニューの操作LEDテープの点灯、電子ペーパーの書きかえデバイスで音の再生（全て実行）①
デモ動画
技術の部分をざっくりと
機器やサービスの構成
Botサーバー＋αBotサーバーからMQTTブローカー経由でIoTM5PaperLINE NotifyHTTP（POST）HTTP（POST）MQTTMQTTHTTP（POST）M5StickCPlusM5StackCore2リッチメニューの操作
（REST API、MQTT）M5StackCore2デバイスからHTTPリクエストでスマホ通知M5StickCPlusM5PaperLINE NotifyスマホのLINEアプリリッチメニューの操作HTTP（POST）HTTP（POST）MQTTMQTTHTTP（POST）
クラウド実行環境（HTTPトリガー）Botサーバー＋α（REST API、MQTT）M5StackCore2全体像はこのような構成でM5StickCPlusM5PaperLINE NotifyスマホのLINEアプリリッチメニューの操作HTTP（POST）HTTP（POST）MQTTMQTTHTTP（POST）
プログラムの実装
M5Stack系デバイスの実装：UIFlowブロック型のビジュアルプログラミング
サーバーもビジュアルプログラミング【スマホへの通知】デバイス ⇒ LINE NotifyLINE（Bot） ⇒ デバイス【MQTTへのつなぎ】Beebotteとの連携実装はenebular
実装は全てブラウザベース（環境構築の手間は大幅削減）
最新ではないけれど個人で手軽にIoTをやるのに便利なMQTTブローカー
Beebotte無料プランありデータを可視化できるダッシュボード機能あり
shiftr.io無料で利用できるデスクトップ版がある（GUI・CLI）無料プランあり※ 1日6時間の稼働 で停止する
Beebotte・shiftr.ioに共通する話・クラウドで動く MQTTブローカー・REST API あり（MQTT と HTTP リクエストを混在させられる）・無料プランあり
自前で用意する場合の選択肢
自分はMQTT.jsをよく使っています・MQTTブローカー の実装だけでなく クライアントの 実装でも （Node.js、ブラウザ）
【余談】M5Stack社のデバイスで宅内通信（今回の本筋と違う実装あり）
試作したもので実現しようとした内容・二酸化炭素濃度を計測 ⇒ 基準値以上/以下の値になったら お知らせ・二酸化炭素濃度、温湿度のデータを 可視化
IoTコンテスト用の試作の一部で活用MQTTMQTTPOST（HTTPリクエスト）二酸化炭素濃度の値AzureFunctionsAzure IoT HubLINE NotifyLINE アプリ二酸化炭素濃度の値を見て、特定条件で通知Azure StreamAnalyticsPower BI宅内通知の仕組みをサクッと後で付け足し（音や光でお知らせ）センサーで取得した値を可視化
【余談2】日本での発売を待っているIoTに使えるデバイス
Raspberry Pi Pico W無線LAN機能搭載の安価なデバイス
ここは話す時間がなさそう...
ブラウザでデバイスを扱うAPIが楽しい！で外部デバイスとの通信ブラウザの API でモノとインターネットをつなぐ ・Web Serial ・Web Bluetooth ・Gamepad API ・WebHID ・Web MIDI APIシリアル通信 BLE コントローラーなどMIDIデバイス（試作や展示用作品に使ってたりするものも）
終わり！
you
niba1122
jacopen
line_developers_tw
devops_vtj
tsubakimoto_s
sbtechnight
tomohisa
mapbox_jp
nttcom
k1low
jrom
sstephenson
bcantrill
mclloyd
aleyda
aki_iinuma
geoffreycrofte
dougneiner
chriscoyier
smashingmag
trishagee
davidbonilla