LINE BOT と MQTT の仕組みを起動する
大事なこと
- ここからは GitHub Codespaces の LINE BOT 側の作業です
- Chrome ブラウザのなるべく最新版でアクセスしましょう
使う Git リポジトリ
すでに、今回の LINE BOT をはじめる環境は作ってあります。
https://github.com/1ft-seabass/dhw-ppB-m5stack-linebot-mqtt-codespace-2024
こちらを使います。前回の授業で使ったものとは違うのでご注意ください。
こちらを Codespaces で起動しましょう。
作成したBOTのチャンネルシークレットとチャンネルアクセストークンを反映
// 作成したBOTのチャンネルシークレットとチャンネルアクセストークン
const config = {
channelSecret: '作成したBOTのチャンネルシークレット',
channelAccessToken: '作成したBOTのチャンネルアクセストークン'
};
LINE BOT 作成手順 で、作成したBOTのチャンネルシークレットとチャンネルアクセストークンを、それぞれ反映します。
わりと編集中にシングルクォーテーション消してしまったり、channelSecretとchannelAccessTokenを、逆に書いたりしてハマるので気をつけましょう。
M5Stack から来るプッシュ通知の送り先のユーザーIDを反映
まず、プッシュ通知の送り先であるこの BOT のユーザーIDを LINE Developers から取得します。
https://developers.line.biz/ja/
こちらからログインしましょう。
今回使っている BOT のチャネル設定に移動します。
下にスクロールしていくと あなたのユーザーID という項目があるので、これをメモしておきます。
// プッシュメッセージで受け取る宛先となる作成したBOTのユーザーID'
const userId = '作成したBOTのユーザーID';
作成したBOTのユーザーID の部分を先ほどメモしたユーザーIDで書き換えます。
ここまで設定出来たらファイルを保存します。
MQTT の接続設定
冒頭でもお知らせしたとおり、本来であれば MQTT ブローカーという指揮者のような役割のサーバーが必要ですが、今回は私（講師）の方が、CloudMQTT というサービスで、ひとつブローカーを立ち上げているので、そのまま使いましょう。
// 今回使う CloudMQTT のブローカーアドレス
const clientMQTTAddress = 'CloudMQTT のブローカーアドレス'
// 今回使う CloudMQTT のポート番号
const clientMQTTPort = 1883;
// 今回使う CloudMQTT のユーザー名
const clientMQTTUserName = 'CloudMQTT のユーザー名';
// 今回使う CloudMQTT のパスワード
const clientMQTTPassword = 'CloudMQTT のパスワード';
ここの設定を Slack でお知らせする設定で置き換えましょう。
このような関係性で動作しています。
自分の名前の半角英数字で決める
このあと、M5Stack と LINE BOT がやりとりするトピック名などで、半角英数字の自分の名前を決めておきましょう。
M5Stack からのデータ受信を待つ MQTT トピックに自分の名前を入れる
clientMQTT.on('connect', function () {
// 接続時にログ
console.log('MQTT Connected!');
// M5Stack からのデータ受信を待ちます
// M5Stack の A B C ボタンを押したときに送られてきます
clientMQTT.subscribe('/dhw/pp2/mqtt/YOURNAME/publish');
こちらのコードに M5Stack からのデータ受信を待つ MQTT トピック '/dhw/pp2/mqtt/YOURNAME/publish' の YOURNAME のところに自分の名前を入れます。
半角英数字です。自分の名前は hogehoge の場合は '/dhw/pp2/mqtt/hogehoge/publish' となります。
M5Stack から LINE BOT へやり取りするイメージです。
M5Stack にデータを送る MQTT トピックに自分の名前を入れる
// M5Stack が待っているトピックにデータを送る
clientMQTT.publish('/dhw/pp2/mqtt/YOURNAME/subscribe', jsonString);
こちらのコードに、M5Stack にデータを送る MQTT トピック '/dhw/pp2/mqtt/YOURNAME/subscribe' の YOURNAME に自分の名前を入れます。
半角英数字です。自分の名前は hogehoge の場合は '/dhw/pp2/mqtt/hogehoge/subscribe' となります。
LINE BOT から M5Stack へやり取りするイメージです。
本カリキュラム完了まで使えます、以後は自分でつくりましょう
本カリキュラムが終わるまで、使えるようにしているので、制作のためにお使いください。
もし、自分でつくって使いたくなったら、私のブログ記事を参考に作ってみましょう。
app.js を起動してみる
これで準備完了です。
node app.js
こちらのコマンドで app.js を起動してみます。
ポートタブをクリックします。
いま app.js で開いている LINE BOT サーバーの状態が表示されます。
ローカルアドレス項目の、こちらのアイコンをクリックすると別のタブが開いて、サーバーから応答されて動作確認ができます。
このように表示されます。
サーバー URL の公開
表示範囲が Private のままだと、自分の GitHub アカウントでログインした状態でないと見ることができるないので LIBE BOT サーバーが外部から動かせないので、公開します。
表示範囲のところで右クリックして ポートの表示範囲 > Public とクリックします。
表示範囲が Public になっていることを確認します。
今回のサーバー URL をメモ
ポートのローカルアドレス項目のこちらのボタンをクリックすると URL がコピーできます。
ブラウザのアドレスを見て今回のサーバー URL をコピーしておきましょう。
Webhook URL の更新
https://developers.line.biz/ja/ こちらから、
今回使っている BOT の Messaging API 設定に移動します。
Webhook URL の項目に移動して以下の手順を行います。（大事な設定なので、一息タイミングを置いています）
さきほどの URL に /webhook をつけて反映
さきほどの URL https://**********.github.dev に /webhook をつけて Webhook URL の項目に入力して更新ボタンをクリックします。
同時に Webhook の利用がオンになっていることも確認しましょう。
BOT に返答が来るか確認しましょう
一旦ここで、以下のように動作するか確認してみましょう。
送る文字列は、M5Stack で表示できる半角英数字を試してみましょう。
次にすすみましょう
左のナビゲーションから次の教材にすすみましょう。