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 からの受信を両対応し
   たクラウド実行環境の仕組みを作ってみた話
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. 早速デモしてみます！
   

   View Slide

7. まず LINE BOT でオウム返し
   

   View Slide

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

   View Slide

9. 実際の仕組み
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. フローを編集します
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. 今回の仕組みをデプロイ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. M5Stack に書き込みます
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide