enebular（Node-RED）でLINE Bot開発 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ 〜 / Visual Programming IoTLT vol5

Transcript

1. enebular（Node-RED）でLINE Bot開発 2020年10月28日 (水) ビジュアルプログラミングIoTLT vol5 @オンライン 　　豊田 陽介 (

   @youtoy ) 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ 〜

2. 豊田陽介（@youtoy） 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） プライベートでの活動 ガジェット好き その他

   主催テーマ： ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど ビジュアルプログラミングIoTLT vol5 @オンライン

3. 今月はイベントが盛りだくさんだった！ スマートスピーカーを遊びたおす会 運営 Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交 流会 コラボ 主催（コラボ）・

   講師 オンラインLTハックLT 共同主催・ 登壇 Maker Faire Tokyo 2020 共同主催コミュ ニティブース・ 作品出展

4. ビジュアルプログラミングが大活躍！ Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交流会 コラボ オンラインLTハックLT Maker Faire Tokyo

   2020 toio用のビジュアル プログラミング enebular、 Node-RED UIFlow、 enebular、 Node-RED

5. 界隈の気になる話題！ 新micro:bit iOS用のNode-RED • Node-PAD on the App Store 　

   https://apps.apple.com/us/app/node-pad/id1534470128 •micro:bit のバージョンアップについて 　https://switch-education.com/2020/10/13/ ビジュアルプログラミングIoTLT vol5 @オンライン

6. 界隈の気になる話題！ UIFlowのファームウェア M5Stack Core2 用の正式版リリース ビジュアルプログラミングIoTLT vol5 @オンライン

7. LINEとつないだ アプリ・サービス？

8. デモ動画1： アプリ外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc ビジュアルプログラミングIoTLT vol5 @オンライン

9. デモ動画2：コメント表示＋合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& ビジュアルプログラミングIoTLT vol5 @オンライン

10. いったん、これまでのデモの補足 仕組みについてなど ビジュアルプログラミングIoTLT vol5 @オンライン Qiitaの記事もあるよ

11. 全体構成（外部からのOBS操作） 画面タップで シーン変更命令 （UIFlow実装） シーン変更命令を 受信しOBSへ （Node.js実装） MQTT WebSocket M5Stack

    PC OBS ビジュアルプログラミングIoTLT vol5 @オンライン

12. ビジュアルプログラミングIoTLT vol5 @オンライン 全体構成（ニコニコ動画風コメント表示＋音） Webサイト上の ボタン押下で メッセージ送信 MQTT PC グリーンバックの

    ページ上にテキス ト・絵文字を流す OBS ブラウザ スマホ等 PC上の画面や カメラ映像を 合成 効果音を再生

13. （既存の類似サービスはあるけど） ニコニコ動画風コメント表示！ ⇒ 実装は実質20行ほど 独自実装なので、好きな機能を足せる！ Qiitaの記事で複数掲載 オンラインLTハックLT @オンライン

14. LINEアプリ連携！ （LINE Bot開発との組み合わせ） ビジュアルプログラミングIoTLT vol5 @オンライン 既存サービスにない機能

15. デモ動画3：LINEアプリからOBSを操作 https://www.youtube.com/watch?v=K2A2sBlboHU ビジュアルプログラミングIoTLT vol5 @オンライン

16. デモ動画4：画面を流す文章をLINEで入力 https://www.youtube.com/watch?v=zXj-Cy7aM94 ビジュアルプログラミングIoTLT vol5 @オンライン

17. 全体構成（LINEアプリ連携のバージョン1） LINEアプリ上で 入力した内容を POSTで送信 MQTT PC スマホ等 MQTT Websocket HTTP

    リクエスト （POST） 受信したテキスト に合わせて処理を 場合分け ビジュアルプログラミングIoTLT vol5 @オンライン

18. 利用したNode-REDのノード ビジュアルプログラミングIoTLT vol5 @オンライン 以下のAPIを利用可能 ・LINE Messaging API 　・Reply Message

    　・Push Message ・LINE Notify Maintainers ・n0bisuke

19. 主な追加実装部分（バージョン1） ビジュアルプログラミングIoTLT vol5 @オンライン LINEアプリ上で 入力された内容に よって場合分け 受信したテキストの格納先

20. 主な追加実装部分（バージョン1） ビジュアルプログラミングIoTLT vol5 @オンライン LINEアプリ上で 入力された内容に よって場合分け OBSの遠隔 操作用の流れ ニコニコ動画風の

    コメント表示機能 と連携する流れ

21. さらに追加実装

22. 主な追加実装部分（バージョン2） ビジュアルプログラミングIoTLT vol5 @オンライン 返信をオウム返しではなく 何を実行するのか示す内容に

23. 主な追加実装部分（バージョン2） ビジュアルプログラミングIoTLT vol5 @オンライン バージョン1からの主な差分 （メッセージの加工とリプライ）

24. 終わる前に

25. ビジュアルプログラミングなハンズオンイベント ビジュアルプログラミングIoTLT vol5 @オンライン 明後日 10/30（金）開催！（※ 事前準備が必要です） 【Voiceflow】 ビジュアルプログラミング でAlexaスキル開発！

26. 終わり！