Gitpod で今回の LINE BOT の仕組みをはじめてみる
大事なこと
- Chrome ブラウザのなるべく最新版でアクセスしましょう
今回作る仕組み
まず、シンプルに Gitpod で LINE BOT のサーバーを立てることで、ユーザーから見た LINE BOT でオウム返しができています。
使う Git リポジトリ
すでに、今回の LINE BOT をはじめる環境は作ってあります。
https://github.com/1ft-seabass/dhw-pp2-m5stack-linebot-gitpod-2021
こちらを使います。
Gitpod で構築開始
Gitpod は GitHub 公開されたリポジトリであれば、すぐに https://www.gitpod.io/# のあとに GitHub リポジトリのある URL をつけた状態でアクセスすると構築できます。
ということで、以下にアクセスします。
https://www.gitpod.io/#https://github.com/1ft-seabass/dhw-pp2-m5stack-linebot-gitpod-2021
構築がはじまります。
すすんでいきます
ここまですすむとだいぶ良い感じです。
しばらく待つと、このようにブラウザ上で Visual Studio Code が起動し、さきほどの GitHub の Git リポジトリにあるファイルが移植されています。
このあとは、このブラウザ上で Visual Studio Code で作業を進めていきましょう。
npm install する
package.json に、すでに今回使う express や @line/bot-sdk ライブラリについて登録されているので、 npm i することでインストールを開始します。
npm i
コマンドでインストールをはじめます。
はじめてコピーアンドペーストするとブラウザ上で、許可するか聞かれるので、許可しましょう。
無事インストールされました。
作成した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で書き換えます。
ここまで設定出来たらファイルを保存します。
app.js を起動してみる
これで準備完了です。
node app.js
こちらのコマンドで app.js を起動してみます。
このように起動します。
すぐに新しいブラウザがもうひとつ開いて、今回起動したサーバーのルートアドレスが表示されます。
今回のサーバー URL をメモ
ブラウザのアドレスを見て今回のサーバー URL をメモしておきましょう。
Webhook URL の更新
LINE Developer コンソールの自分の LINE BOT 設定に戻ります。
今回使っている BOT の Messaging API 設定に移動します。
Webhook URL の項目に移動して以下の手順を行います。（大事な設定なので、一息タイミングを置いています）
さきほどの URL に /webhook をつけて反映
さきほどの URL https://**********.gitpod.io に /webhook をつけて Webhook URL の項目に入力して更新ボタンをクリックします。
同時に Webhook の利用がオンになっていることも確認しましょう。
BOT にオウム返しが来るか確認しましょう
一旦ここでちゃんと動いているかオウム返しを確認してみましょう。
こちらで設定は出来ました。
LINE BOT のプレゼンテーション時に便利なPC版アプリ
LINE BOT のプレゼンテーション時に便利なPC版アプリを紹介します。画面共有時にも状況が見せやすくなるのでおススメです。
- パソコンでLINEを利用する｜LINEみんなの使い方ガイド
こちらをみつつ、インストールしていきましょう。
QR コードログインがおススメです。
次にすすみましょう
左のナビゲーションから「M5Stack + LINE BOT 連携」にすすみましょう。