ビジュアルプログラミングで デバイス間をつなぐ / 出張IoTLT@くらでべ

出張IoTLT@くらでべ で LT登壇する際に作成した資料です。
（設定した日付は収録日になります）

Transcript

1. ビジュアルプログラミングで デバイス間をつなぐ 　　豊田 陽介 ( @youtoy ) 出張IoTLT@くらでべ
2. 豊田陽介（@youtoy） 自己紹介 • 職場： 某通信会社の研究所 • プライベートでの活動： IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） • その他： ガジェット好き ビジュアルプログラミング IoTLT共同主催、など 話題のものをたくさん 購入している気がする
3. ビジュアルプログラミングが できる環境がいろいろ
4. そして機能も様々 （例：デバイス連携・IoT）
5. 【事例】ビジュアルプログラミングでIoTなLチカ IoTLT vol.61 の LTより https://www.youtube.com/watch?v=9-kfvPtjvb8
6. Microsoft MakeCode for micro:bit 利用しているビジュアルプログラミング環境 Node-RED UIFlow
7. 実装している機能 ・センサーの値の取得 ・LED制御 ・シリアル通信 （数値・文字列の送受信） ・フルカラーLEDの制御 ・ボタンの処理 ・MQTTの通信 （数値・文字列の送受信） ・シリアル通信 ・MQTTブローカー ・MQTTの通信
8. 他のデバイス間通信
9. 【事例】MIDIコントローラーの入力の可視化 https://www.youtube.com/watch?v=kiJtJbwYCg4
10. フローで実装している機能 数値のGUI表示 MIDIの入力取得 Node-REDのフロー 入力値の分岐など
11. ビジュアルプログラミングを 使ったメリット 〜 今回の事例の場合 〜
12. 環境構築が簡単 ・ブラウザベースで扱えるものも多数 ⇒ 開発を始めるまでの準備段階の手間を削減できる ・デバイス連携の仕組み ⇒ ブラウザからデバイスへの直接書き込みや転送の仕組み 実装の手間が少ない ・手間がかかる実装を内包した機能の提供 ⇒ 可視化の部分をサクッと試せた ⇒ 二次元で配置されたLEDの点灯箇所の指定を見た目通りに
13. 提供されている機能が限定的な場合も ・自分がやりたいことを実現する機能がないこともあり ⇒ 拡張機能が多数用意されている場合もあるがサービス依存 　（自分で拡張機能を作成可能なものもあるが・・・） デバッグしづらいことも ・問題が起きたときのデバッグがやりにくい環境がある 　（デバッグの機能を持ったものもあるが・・・） 注意点： もちろん向き不向きはあり
14. テキストプログラミング も混じりますが・・・
15. OBSを別デバイスから遠隔で制御 ⇒ シーンの切り替えをM5GO・スマホといったデバイスで 先ほど登場したMQTTを活用してみた例 https://www.youtube.com/watch?v=Q3wINpPLj8E
16. 構成など UIFlow Node.js HTML + JavaScript MQTT MQTT WebSocket
17. https://qiita.com/youtoy/items/23fb0e16f1a4428b5c9b 仕組みに関する記事