LineBot(LINE Messaging API)からUiFlow経由でM5StackBASICを制御する

本記事について

先日参加したハッカソンでM5StackとLineBotを連携するために行ったことについてまとめます。

【増枠！】M5Stackハッカソン by #ヒーローズリーグ

なお、この記事はハッカソン当日に技術サポートを担当していただいたProtoOut Studioで講師を務めている小野さんから指導していただいた内容を記録したものです。
改めて小野さんにお礼を申し上げます。

M5Stack→Line Notifyに関する記事は結構あるのですが

IFTTTで簡単IoT！M5StackとLINEを連携する方法
[プリンを守る技術 ～その１：LINEへの通知～]
(https://qiita.com/nnn112358/items/8d2021bce1113d7e60ce)
M5StackからLINEでデータを送信
(▼こちらはかなり最近投稿されたものですね。LGTM!▼)
【初心者向け】M5StackのUiFlowからLINEに通知を送れるようにする方法【LINE Notify】

今回やりたいのは逆なのです

LineBot(LineMessagingAPI)から送った値を使用してM5Stackを制御する方法ってあるのでしょうか。
Botから1っておくったらM5Stackの画面を赤にするとか、そういう感じです。。。！#ヒーローズリーグ　#protoout

— ウーリズム (@Uh_rhythm) September 20, 2020

すでに小野さんは答えを持っていたようで！

皆さん思ったよりM5Stackへ通知送りたいようですね...MQTTかリモートだけども、どちらで行くか… #ヒーローズリーグ

— るしわん (@tkyko13) September 20, 2020

という訳で教えていた内容をまとめていきます。

準備

UiFlow側

1.Remoteメニューよりボタンを作成
2.デプロイする
3.QRコードからURLを取得

4.URLにアクセス。検証ツールからエンドポイントのURLを取得する

LineBot(LINE Messaging API,Node.js)側

1.おうむ返しbotなどをあらかじめ作っておく
2.axiosを使いBotから投稿されたメッセージによりUiFlowのエンドポイントを呼び出す

コードはこんな感じです

'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const axios = require('axios');
const PORT = process.env.PORT || 3000;

const config = {
    channelSecret: '{CHANNELSECRET}',
    channelAccessToken: '{CHANNELACCESSTOKEN}'
};

const app = express();

app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない)
app.post('/webhook', line.middleware(config), (req, res) => {
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);
var message = "Hello M5Stack";
async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  if (event.message.text == "1") {
  // エンドポイントに先ほどのButtonのURLを設定する  
  axios.get('http://api.m5stack.com/v1/{APIKEY}/call?func=_remote_ButtonName1()')
  }
  console.log(event.message.text)
  return client.replyMessage(event.replyToken, {
        type: 'text',
        text: message
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

まとめ

これはAPIの知識さえあれば実装はすぐ理解できますがUiFlowにはなれていなかっためこれができなければ当日の制作は成り立ちませんでした。
人に聞くことの大事さを改めて学ぶとともに、今いる環境に感謝したいと思いました。