Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Monthly LT #1
you(@youtoy)
April 20, 2022
Technology
0
170
ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Monthly LT #1
you(@youtoy)
April 20, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
公式版Scratchやtoio DoでIoT(ブラウザ上でのJavaScript実行で) / ビジュアルプログラミングIoTLT vol.11
you
0
250
enebularクラウド実行環境でIoT / enebular developer meetup 20220602
you
0
95
LINEアプリでIoTやってみた / エンジニアの自由研究発表会vol.6
you
0
78
enebularの新機能「クラウド実行環境」を自分も使ってみた(LINE との組み合わせ)/ IoTLT vol.86
you
0
220
Tech-onセッション / SORACOM UG × Tech-onコラボ #1
you
0
230
Socket.IO 4.x や JavaScriptフレームワーク+リアルタイム通信の話(Fastify・µWebSockets.jsなど) / IoTLT vol.85
you
0
270
ロボットトイ「toio」を使ってみよう! / 第208回 CoderDojo Kodaira
you
0
28
ビジュアルプログラミングに関する複数の話題を紹介 / ビジュアルプログラミングIoTLT vol.10
you
0
210
Raspberry Pi Pico を JavaScript で扱う / IoTLT vol.84
you
1
220
Other Decks in Technology
See All in Technology
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
4
300
【SAP知らない人向け】SAP on AWS 個人学習メモ/sap-on-aws-study
emiki
3
2.3k
データ分析で切り拓け! エンジニアとしてのデータ分析職キャリア戦略
ksnt
0
170
QiitaConference2022
fuwasegu
0
190
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
260
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
kosako
10
4.3k
Build 2022で発表されたWindowsアプリ開発のあれこれ振り返ろう
hatsunea
1
380
DOM Invader - prototype pollution対応の衝撃 - / DOM Invader - prototype pollution
okuken
0
160
機械学習システムのアーキテクチャとデザインパターン
washizaki
1
490
Swift Regex Builder
kumamotone
1
110
Citizen 개발기
outsider
0
280
Oracle Cloud Infrastructure:2022年6月度サービス・アップデート
oracle4engineer
PRO
0
150
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Optimizing for Happiness
mojombo
365
63k
Code Reviewing Like a Champion
maltzj
506
37k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
Web Components: a chance to create the future
zenorocha
303
40k
The Mythical Team-Month
searls
209
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Web development in the modern age
philhawksworth
197
9.3k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Scaling GitHub
holman
451
140k
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関連 先月出版された 本で作例を
終わり!