Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Monthly LT #1
Search
you(@youtoy)
PRO
April 20, 2022
Technology
0
2.8k
ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Monthly LT #1
you(@youtoy)
PRO
April 20, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
100
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
160
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2.1k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
53
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
93
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
Algyan イベント振り返り
linyixian
0
190
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
ChatGPT for IT Service Management (IT Pro)
dahatake
4
290
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
350
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
62
18k
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
150
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
110
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
PHPカンファレンス小田原2024
ysknsid25
3
660
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
130
Featured
See All Featured
Done Done
chrislema
178
15k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Code Reviewing Like a Champion
maltzj
513
39k
Teambox: Starting and Learning
jrom
128
8.4k
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Statistics for Hackers
jakevdp
789
220k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
The Language of Interfaces
destraynor
151
23k
Automating Front-end Workflow
addyosmani
1355
200k
Documentation Writing (for coders)
carmenintech
59
3.9k
Transcript
ビジュアルプログラミングのみで作る LINE + IoT の仕組み 2022年4月20日 (水) LINE DC Monthly
LT #1 @オンライン 豊田陽介( ) @youtoy
自己紹介 ビジュアルプログラミング IoTLT共同主催、その他にも 豊田陽介( ) 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動(IT系以外も) ・技術書・技術記事の執筆も(IoT関連など)
プライベートでの活動 ・ Microsoft MVP(2021/10 から) ・ガジェット好き その他
作ったものの 動作概要・動画
LINE のリッチ メニューの操作 動作概要: 通信は「LINE⇒デバイス」 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 (全て実行)
① M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ②
動作概要: 通信は「デバイス⇒LINE」 M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ② LINE
のリッチ メニューの操作 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 (全て実行) ①
デモ動画
どんな技術を 使っている?
主なキーワード: LINE Bot、リッチメニュー、LINE Notify、 enebularのクラウド実行環境、Node-RED、 M5Stack・UIFlow、Beebotte・MQTT
Botサーバー +α 構成①: LINEからデバイスへ M5Paper LINE Notify HTTP(POST) HTTP(POST) MQTT
MQTT HTTP(POST) M5StickC Plus M5Stack Core2 リッチメニュー の操作
Botサーバー +α BeebotteでHTTP(POST)をMQTTに M5Paper LINE Notify HTTP(POST) HTTP(POST) MQTT MQTT
HTTP (POST) M5StickC Plus M5Stack Core2 リッチメニュー の操作
(REST API、MQTT) M5Stack Core2 構成②: デバイスからLINEへ M5StickC Plus M5Paper LINE
Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
クラウド実行環境 (HTTPトリガー) Botサーバー +α (REST API、MQTT) M5Stack Core2 作ったものの構成(全体) M5StickC
Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
詳細を話す時間が なさそうなので
今日の話に関するQiitaの記事 enebular や Beebotte関連の話
(まだ公開しきれてない 記事も...)
ざっくりな内容説明: 設定・実装
クラウド実行環境 (HTTPトリガー) Botサーバー +α (REST API、MQTT) M5Stack Core2 LINE・enebular・Beebotte M5StickC
Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
LINE関連の設定: GUIベース LINE Messaging API LINE Notify リッチメニュー
enebularの実行環境の設定: GUI 今回のサーバー(HTTPトリガー) LINE・デバイスからの POST先の設定など
enebularでの実装(Node-RED) フロー型のビジュアルプログラミング LINE・デバイスからの POSTを受けての処理
enebularでの実装内容 デバイス ⇒ LINE Notify LINE(Bot) ⇒ デバイス Beebotteとの連携
Beebotteの設定: GUIベース MQTT・REST API を扱うための準備 enebular ⇄ デバイス のつなぎ役
クラウド実行環境 (HTTPトリガー) Botサーバー +α (REST API、MQTT) M5Stack Core2 M5Stack系のデバイス M5StickC
Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
M5Stack系デバイスでの実装(UIFlow) ブロック型のビジュアルプログラミング
M5StickC Plusでの実装内容1 MQTT関連の セットアップ 画面の初期化 まわり等
M5StickC Plusでの実装内容2 MQTT のサブスクライブ ↓ LEDテープ制御など 本体ボタン押下を ↓ LINE通知処理等
テキストプログラミングを 使わない「LINE+IoT」 の完成
センサー活用なども 考えていければ!
記事の執筆などについて 豊田陽介( ) 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動(IT系以外も) ・技術書・技術記事の執筆も(IoT関連など) プライベートでの活動 ・
Microsoft MVP(2021/10 から) ・ガジェット好き その他
LINE関連でQiitaに書いた記事 Qiitaで「line user:youtoy」で検索すると JavaScript、ビジュアルプログラミング関連で、 試しにサービスをつないでみた話が多い (Azure Functions、Azure IoT Hub、MIT App
Inventor、UIFlow、など)
ビジュアルプログラミング+IoT関連 先月出版された 本で作例を
終わり!