Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ビジュアルプログラミングのみで作る LINE ＋ IoT の仕組み 2022年4月20日 (水) LINE DC Monthly LT #1 @オンライン 豊田陽介（ ） @youtoy
Slide 2
Slide 2 text
自己紹介 ビジュアルプログラミング IoTLT共同主催、その他にも 豊田陽介（ ） 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動（IT系以外も） ・技術書・技術記事の執筆も（IoT関連など） プライベートでの活動 ・ Microsoft MVP（2021/10 から） ・ガジェット好き その他
Slide 3
Slide 3 text
作ったものの 動作概要・動画
Slide 4
Slide 4 text
LINE のリッチ メニューの操作 動作概要： 通信は「LINE⇒デバイス」 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 （全て実行） ① M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ②
Slide 5
Slide 5 text
動作概要： 通信は「デバイス⇒LINE」 M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ② LINE のリッチ メニューの操作 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 （全て実行） ①
Slide 6
Slide 6 text
デモ動画
Slide 7
Slide 7 text
どんな技術を 使っている？
Slide 8
Slide 8 text
主なキーワード： LINE Bot、リッチメニュー、LINE Notify、 enebularのクラウド実行環境、Node-RED、 M5Stack・UIFlow、Beebotte・MQTT
Slide 9
Slide 9 text
Botサーバー ＋α 構成①： LINEからデバイスへ M5Paper LINE Notify HTTP（POST） HTTP（POST） MQTT MQTT HTTP（POST） M5StickC Plus M5Stack Core2 リッチメニュー の操作
Slide 10
Slide 10 text
Botサーバー ＋α BeebotteでHTTP（POST）をMQTTに M5Paper LINE Notify HTTP（POST） HTTP（POST） MQTT MQTT HTTP （POST） M5StickC Plus M5Stack Core2 リッチメニュー の操作
Slide 11
Slide 11 text
（REST API、MQTT） M5Stack Core2 構成②： デバイスからLINEへ M5StickC Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP（POST） HTTP（POST） MQTT MQTT HTTP（POST）
Slide 12
Slide 12 text
クラウド実行環境 （HTTPトリガー） Botサーバー ＋α （REST API、MQTT） M5Stack Core2 作ったものの構成（全体） M5StickC Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP（POST） HTTP（POST） MQTT MQTT HTTP（POST）
Slide 13
Slide 13 text
詳細を話す時間が なさそうなので
Slide 14
Slide 14 text
今日の話に関するQiitaの記事 enebular や Beebotte関連の話
Slide 15
Slide 15 text
（まだ公開しきれてない 記事も...）
Slide 16
Slide 16 text
ざっくりな内容説明： 設定・実装
Slide 17
Slide 17 text
クラウド実行環境 （HTTPトリガー） Botサーバー ＋α （REST API、MQTT） M5Stack Core2 LINE・enebular・Beebotte M5StickC Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP（POST） HTTP（POST） MQTT MQTT HTTP（POST）
Slide 18
Slide 18 text
LINE関連の設定： GUIベース LINE Messaging API LINE Notify リッチメニュー
Slide 19
Slide 19 text
enebularの実行環境の設定： GUI 今回のサーバー（HTTPトリガー） LINE・デバイスからの POST先の設定など
Slide 20
Slide 20 text
enebularでの実装（Node-RED） フロー型のビジュアルプログラミング LINE・デバイスからの POSTを受けての処理
Slide 21
Slide 21 text
enebularでの実装内容 デバイス ⇒ LINE Notify LINE（Bot） ⇒ デバイス Beebotteとの連携
Slide 22
Slide 22 text
Beebotteの設定： GUIベース MQTT・REST API を扱うための準備 enebular ⇄ デバイス のつなぎ役
Slide 23
Slide 23 text
クラウド実行環境 （HTTPトリガー） Botサーバー ＋α （REST API、MQTT） M5Stack Core2 M5Stack系のデバイス M5StickC Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP（POST） HTTP（POST） MQTT MQTT HTTP（POST）
Slide 24
Slide 24 text
M5Stack系デバイスでの実装（UIFlow） ブロック型のビジュアルプログラミング
Slide 25
Slide 25 text
M5StickC Plusでの実装内容1 MQTT関連の セットアップ 画面の初期化 まわり等
Slide 26
Slide 26 text
M5StickC Plusでの実装内容2 MQTT のサブスクライブ ↓ LEDテープ制御など 本体ボタン押下を ↓ LINE通知処理等
Slide 27
Slide 27 text
テキストプログラミングを 使わない「LINE＋IoT」 の完成
Slide 28
Slide 28 text
センサー活用なども 考えていければ！
Slide 29
Slide 29 text
記事の執筆などについて 豊田陽介（ ） 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動（IT系以外も） ・技術書・技術記事の執筆も（IoT関連など） プライベートでの活動 ・ Microsoft MVP（2021/10 から） ・ガジェット好き その他
Slide 30
Slide 30 text
LINE関連でQiitaに書いた記事 Qiitaで「line user:youtoy」で検索すると JavaScript、ビジュアルプログラミング関連で、 試しにサービスをつないでみた話が多い （Azure Functions、Azure IoT Hub、MIT App Inventor、UIFlow、など）
Slide 31
Slide 31 text
ビジュアルプログラミング＋IoT関連 先月出版された 本で作例を
Slide 32
Slide 32 text
終わり！