LINE BOT のオウム返しと M5Stack からの受信を両対応したクラウド実行環境の仕組みを作ってみた話

by 1ft-seabass

Slide 1

Slide 1 text

20221202_enebular meetup 年末恒例：自由研究発表会 LINE BOT のオウム返しと M5Stack からの受信を両対応したクラウド実行環境の仕組みを作ってみた話ワンフットシーバス田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 3

Slide 3 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 4

Slide 4 text

LINE BOT と M5Stack からの受信を両対応したクラウド実行環境の仕組みを作ってみた

Slide 5

Slide 5 text

こんな仕組み enebular クラウド実行環境でつくった LINE BOT でシンプルオウム返しや M5Stack からボタン操作や起動をやりとりします M5Stack LINE BOT enebular クラウド実行環境スマホオウム返しボタン操作

Slide 6

Slide 6 text

早速デモしてみます！

Slide 7

Slide 7 text

まず LINE BOT でオウム返し

Slide 8

Slide 8 text

M5Stack でボタンを押すと Push Message で割り込みメッセージ起動時に Launched で、たとえば A ボタンを押すと Push A のメッセージが飛ぶ

Slide 9

Slide 9 text

実際の仕組み

Slide 10

Slide 10 text

LINE Developers で LINE BOT の仕組みがすでに設定できている状態

Slide 11

Slide 11 text

Discover Flow にすぐ動かせる仕組みをおきました https://enebular.com/discover/ﬂow/528c15e2-abeb-4013-8068-65d5ae712fa5

Slide 12

Slide 12 text

こちらをプロジェクトにインポートして

Slide 13

Slide 13 text

プロジェクトに lcdp-toolkit ノードもインポート

Slide 14

Slide 14 text

フローを編集します

Slide 15

Slide 15 text

LINE BOT 設定 change ノードに設定 LINE Developers で、今回の LINE BOT のチャネルシークレット・チャネルアクセストークン・ユーザーIDを反映

Slide 16

Slide 16 text

部分をチャネルシークレットに置き換えチャネル基本設定 > チャネルシークレットからコピーアンドペースト

Slide 17

Slide 17 text

部分をチャネルアクセストークンに置き換え Messaging API設定 > チャネルアクセストークンからコピーアンドペースト

Slide 18

Slide 18 text

部分をユーザーIDに置き換えチャネル基本設 > ユーザーID からコピーアンドペースト

Slide 19

Slide 19 text

保存してフローは設定完了

Slide 20

Slide 20 text

クラウド実行環境を一つ作って

Slide 21

Slide 21 text

今回の仕組みをデプロイ

Slide 22

Slide 22 text

デプロイできたら設定に移動

Slide 23

Slide 23 text

HTTP トリガーの URL 重複しないようにランダム値をつけつつ設定

Slide 24

Slide 24 text

HTTP トリガーをメモ M5Stack で使います

Slide 25

Slide 25 text

LINE Developers の今回の LINE BOT でさきほどの HTTP トリガー URL を反映

Slide 26

Slide 26 text

LINE BOT でオウム返しを一度検証長く起動してないと最初の起動が時間がかかり最初のメッセージの返答は 10 秒くらい待ちます

Slide 27

Slide 27 text

M5Stack のソースコードはこちらのリポジトリに公開してます https://github.com/1ft-seabass/enebular-m5stack-simple-post

Slide 28

Slide 28 text

プログラムをコピー enebular-m5stack-simple-post.ino

Slide 29

Slide 29 text

プログラム内に Wi-Fi 設定を反映

Slide 30

Slide 30 text

今回送る enebular クラウド実行環境の URLを反映今回送る enebular クラウド実行環境の URL に /from/m5stack をつけたものを反映します

Slide 31

Slide 31 text

M5Stack に書き込みます

Slide 32

Slide 32 text

起動すると早速 Launched! メッセージ

Slide 33

Slide 33 text

ボタンを押すとメッセージされます

Slide 34

Slide 34 text

時間があればフローの流れの紹介

Slide 35

Slide 35 text

アクセスする分岐が大事なところ

Slide 36

Slide 36 text

req.url は /トリガーURL/ 以下追加パスで来るので / で split してトリガー名を動的取得トリガー名が変わっても値がちゃんと取得できる

Slide 37

Slide 37 text

トリガー名が分かるので、これを元に追加パスに応じた分岐をしてますこれで、M5Stack の特定アクセス以外はオウム返しができます

Slide 38

Slide 38 text

エクストラ時間に余裕があれば ➔ なぜつくったか。LINE BOT のような通知がないと IoT つながったの分かりにくい問題。ログあるけど手順が多い。 ➔ M5Stack からの値はどのように受けているか ➔ タイムアウトを15秒に長めにしてコールドスタート時にエラーにならないようにした話 ➔ 重複しないトリガー名のランダム名の TIPS。Google に乱数ツールがある。 ➔ シンプルな LINE BOT も公開予定です！

Slide 39

Slide 39 text

まとめ ➔ パスによる分岐などだいぶ elebular クラウド開発環境と仲良くなれたのでよかった ➔ ナレッジをある程度まとめれたよかった ➔ このナレッジも出来ればブログにまとめる予定です！ ➔ IoT 連携についてもクラウド開発環境で連携例を作れて今後も伝えやすそう ➔ LINE BOT と IoT の仕組みが融合して楽しい！