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

20221202_enebular meetup 年末恒例：自由研究発表会「LINE BOT のオウム返しと M5Stack からの受信を両対応したクラウド実行環境の仕組みを作ってみた話」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 20221202_enebular meetup 年末恒例：自由研究発表会 LINE BOT のオウム返しと M5Stack からの受信を両対応し たクラウド実行環境の仕組みを作ってみた話 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. LINE BOT と M5Stack からの受信を 両対応したクラウド実行環境の仕組みを作ってみた
5. こんな仕組み enebular クラウド実行環境でつくった LINE BOT でシンプルオウム返しや M5Stack からボタン操作や起動をやりとりします M5Stack LINE BOT enebular クラウド実行環境 スマホ オウム返し ボタン操作
6. 早速デモしてみます！
7. まず LINE BOT でオウム返し
8. M5Stack でボタンを押すと Push Message で割り込みメッセージ 起動時に Launched で、たとえば A ボタンを押すと Push A のメッセージが飛ぶ
9. 実際の仕組み
10. LINE Developers で LINE BOT の仕組みが すでに設定できている状態
11. Discover Flow に すぐ動かせる仕組みをおきました https://enebular.com/discover/flow/528c15e2-abeb-4013-8068-65d5ae712fa5
12. こちらをプロジェクトにインポートして
13. プロジェクトに lcdp-toolkit ノードもインポート
14. フローを編集します
15. LINE BOT 設定 change ノードに設定 LINE Developers で、今回の LINE BOT のチャネルシークレット・ チャネルアクセストークン・ユーザーIDを反映
16. <ChannelSecret> 部分を チャネルシークレットに置き換え チャネル基本設定 > チャネルシークレット からコピーアンドペースト
17. <ChannelAccessToken> 部分を チャネルアクセストークンに置き換え Messaging API設定 > チャネルアクセストークン からコピーアンドペースト
18. <UserID> 部分を ユーザーIDに置き換え チャネル基本設 > ユーザーID からコピーアンドペースト
19. 保存してフローは設定完了
20. クラウド実行環境を一つ作って
21. 今回の仕組みをデプロイ
22. デプロイできたら設定に移動
23. HTTP トリガーの URL 重複しないようにランダム値をつけつつ設定
24. HTTP トリガーをメモ M5Stack で使います
25. LINE Developers の今回の LINE BOT で さきほどの HTTP トリガー URL を反映
26. LINE BOT でオウム返しを一度検証 長く起動してないと最初の起動が時間がかかり最初のメッセージの返答は 10 秒くらい待ちます
27. M5Stack のソースコードは こちらのリポジトリに公開してます https://github.com/1ft-seabass/enebular-m5stack-simple-post
28. プログラムをコピー enebular-m5stack-simple-post.ino
29. プログラム内に Wi-Fi 設定を反映
30. 今回送る enebular クラウド実行環境の URLを反映 今回送る enebular クラウド実行環境の URL に /from/m5stack をつけたものを反映します
31. M5Stack に書き込みます
32. 起動すると早速 Launched! メッセージ
33. ボタンを押すとメッセージされます
34. 時間があればフローの流れの紹介
35. アクセスする分岐が大事なところ
36. req.url は /トリガーURL/ 以下追加パスで 来るので / で split してトリガー名を動的取得 トリガー名が変わっても値がちゃんと取得できる
37. トリガー名が分かるので、これを元に 追加パスに応じた分岐をしてます これで、M5Stack の特定アクセス以外はオウム返しができます
38. エクストラ 時間に余裕があれば ➔ なぜつくったか。LINE BOT のような通知がないと IoT つ ながったの分かりにくい問題。ログあるけど手順が多い。 ➔ M5Stack からの値はどのように受けているか ➔ タイムアウトを15秒に長めにしてコールドスタート時に エラーにならないようにした話 ➔ 重複しない トリガー名のランダム名の TIPS。Google に 乱数ツールがある。 ➔ シンプルな LINE BOT も公開予定です！
39. まとめ ➔ パスによる分岐などだいぶ elebular クラウド開発環境と 仲良くなれたのでよかった ➔ ナレッジをある程度まとめれたよかった ➔ このナレッジも出来ればブログにまとめる予定です！ ➔ IoT 連携についてもクラウド開発環境で連携例を作れて今 後も伝えやすそう ➔ LINE BOT と IoT の仕組みが融合して楽しい！