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

Slide 1

Slide 1 text

enebular（Node-RED）でLINE Bot開発 2020年10月28日 (水) ビジュアルプログラミングIoTLT vol5 @オンライン　　豊田陽介 ( @youtoy ) 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ〜

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

今月はイベントが盛りだくさんだった！スマートスピーカーを遊びたおす会運営 Node-REDで色々試すハンズオン Tec-Nomad ・ビジュアルプログラミング交流会コラボ主催（コラボ）・講師オンラインLTハックLT 共同主催・登壇 Maker Faire Tokyo 2020 共同主催コミュニティブース・作品出展

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

界隈の気になる話題！新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 @オンライン

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

全体構成（外部からのOBS操作）画面タップでシーン変更命令（UIFlow実装）シーン変更命令を受信しOBSへ（Node.js実装） MQTT WebSocket M5Stack PC OBS ビジュアルプログラミングIoTLT vol5 @オンライン

Slide 12

Slide 12 text

ビジュアルプログラミングIoTLT vol5 @オンライン全体構成（ニコニコ動画風コメント表示＋音） Webサイト上のボタン押下でメッセージ送信 MQTT PC グリーンバックのページ上にテキスト・絵文字を流す OBS ブラウザスマホ等 PC上の画面やカメラ映像を合成効果音を再生

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

全体構成（LINEアプリ連携のバージョン1） LINEアプリ上で入力した内容を POSTで送信 MQTT PC スマホ等 MQTT Websocket HTTP リクエスト（POST）受信したテキストに合わせて処理を場合分けビジュアルプログラミングIoTLT vol5 @オンライン

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

さらに追加実装

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

終わる前に

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

終わり！