はじめに
Qiita初投稿になります
Node.jsによるLINEbot製作を行ってみたく、自学のために行った流れをまとめていきます
Node.js、npmのインストール、Herokuのアカウント登録などは省きます
成果物としては、「ありがとう」と送信すると、「どういたしまして」、それ以外は「こんにちは」と返ってくるLINEbotを制作します
#動作環境
・MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports)
・mac OS Catalina バージョン 10.15.7
・node v15.3.0
・npm 7.0.14
・git 2.23.0
目次
LINE側の準備
この見出しでは、LINE側で行うことをまとめていきます。
##LINE Developerアカウントの作成
まずはこちらのURLからLINE Developerのアカウントを作成します
普段使用されているLINEアカウントがあればすぐに作成できます
https://developers.line.biz/ja/
##プロバイダーの作成
次にプロバイダーの作成を行います。トップページにある以下の作成ボタンを押します。
ここでは新しく作るプロバイダーをtestとしておきます。
##チャネルの作成
新しくプロバイダを作成すると以下の画面に移行します。ここでは「Messaging API」を選択します。
その後、チャネルの種類を「Messaging API」に指定し、プロバイダーを先ほど作成した「test」に指定します。その後
・チャネルアイコン ※一度変更すると、１日経過しなければ変更することができません
・チャネル名 ※一度変更すると、７日経過しなければ変更することができません
・チャネル説明
・大業種
・小業種
・メールアドレス
・プライバシーポリシーURL（任意）
・サービス利用規約URL（任意）
を入力し、利用規約にチェックを入れ、作成ボタンを押します
##チャネルシークレットとチャネルアクセストークンの取得
次に外部からLINE APIにアクセスするためのチャネルシークレットとチャネルアクセストークン(長期)を取得します。
こちらの情報は外部に漏れないように気を付けましょう。それぞれの場所は
・チャネルシークレット
チャネル基本設定の下部にあります
・チャネルアクセストークン(長期)
Messaging API設定の下部にあり、発行ボタンを押すと表示されます
上記二つが取得できたら、とりあえずはメモ帳等に記録しておきましょう。
##その他設定
Messaging API設定タブの応答メッセージ、編集、にて応答設定の中の詳細設定の、応答メッセージを以下の画像のようにオフ、Webhookをオンにしましょう。あいさつメッセージはオフにしていますが、オンでも構いません。
※Webhook URLに関しては後ほど入力します
こちらで一旦LINE側の準備は終わりになります。
Node.js側の準備
##npm init
任意のフォルダ（ここではlinebot_test）を作成し、そのフォルダ内で、npmのイニシャライズを実行します
mkdir linebot_test
cd linebot_test
npm init
npm init実行後、いろいろ聞かれますが、全て空のままEnterで構いません
##モジュールのインストール
LINEbotを動かすために必要なnpmモジュールをそれぞれインストールします
npm install express @line/bot-sdk dotenv --save
##ローカルでテストするためのトンネリングツールをインストール
ngrokというトンネリングツールを使用することで、簡単にテストが行えます。
npm install -g ngrok
Node側の準備はこのぐらいです、次からコードを書いていきます。
コードの作成
先ほど作成したフォルダ内で以下を実行し、index.jsを作成します
touch index.js
その後、以下のコードをコピペします
// モジュールのインポート
const server = require('express')();
const line = require('@line/bot-sdk'); // Messaging APIのSDKをインポート
require('dotenv').config();
// -----------------------------------------------------------------------------
// パラメータ設定
const lineConfig = {
channelAccessToken: process.env.LINE_ACCESS_TOKEN, // 環境変数からアクセストークンをセットしています
channelSecret: process.env.LINE_CHANNEL_SECRET, // 環境変数からChannel Secretをセットしています
};
// -----------------------------------------------------------------------------
// Webサーバー設定
server.listen(process.env.PORT || 3000);
// -----------------------------------------------------------------------------
// ルーター設定
const bot = new line.Client(lineConfig); // APIコールのためのクライアントインスタンスを作成
server.post('/webhook', line.middleware(lineConfig), async (req, res) => {
res.sendStatus(200); // 先行してLINE側にステータスコード200でレスポンスする。
const [lineEvent] = req.body.events; // events配列から配列の0番目の要素だけを変数に代入
const inputMessage = lineEvent.message.text; //入力された文字を代入
if (!lineEvent) {
return;
}
if (lineEvent.type !== 'message' || lineEvent.message.type !== 'text') {
return;
}
if (inputMessage === 'ありがとう') { //「ありがとう」と入力された場合
bot.replyMessage(lineEvent.replyToken, {
type: 'text',
text: 'どういたしまして',
});
} else { //それ以外の文字が入力された場合
bot.replyMessage(lineEvent.replyToken, {
type: 'text',
text: 'こんにちは',
});
}
});
そして環境変数のため、.envファイルを作成します。
touch .env
.envファイル内は、LINE側の準備で取得したチャネルシークレットとチャネルアクセストークンを用意し、以下のコードに貼り付けてください
LINE_ACCESS_TOKEN='メモしたチャネルアクセストークン'
LINE_CHANNEL_SECRET='メモしたチャネルシークレット'
フォルダ構成は以下のようになります
応答テスト
いよいよテストになります。
##LINEbotの友達登録
LINE DevelopeのMessaging API設定のボット情報にある「ボットのベーシックID」をコピーして、自分のLINEの友達検索、にてIDで検索すると作成したbotが出てくるので、そちらを友達にします
このボット情報の下にQRコードが表示されているので、そちらから友達になっても構いません
##ngrokの起動
コンソールを二つ立ち上げ、片方では
ngrok http 3000
とすると、以下のようになるので
https://~~~~.ngrok.io の部分をコピーし
LINE DevelopeのMessaging API設定のWebhook設定、webhook URLに貼り付け、後ろに「/webhook」を記入します
##index.jsの起動
もう一方のコンソールにて、
node index.js
としてサーバーを起動します
##応答テスト
いよいよテストです。
botに対して「ありがとう」と入力しましょう
すると、「どういたしまして」と返ってきます
それ以外の言葉を入力すると、「こんにちは」と返ってくるはずです。
#本番環境(heroku)にデプロイ
##git init
herokuにデプロイする際はgitを使用するので、まずgit initを行います
git init
##git ignore
その後、チャネルアクセストークンなどが外部に漏れてしまわないように.gitignoreファイルを作成し、
以下のように記述しておきましょう
npm-debug.log
node_modules
.env
こうしておくことで、pushしても.envファイルが外部に漏れることはなくなります
また、node_modules npm-debug.logに関してもプッシュする必要がないのでignoreしておきましょう
##heroku create
その後、herokuにログインし、heroku createを実施して新たにサーバーを作成しましょう
その後、herokuに環境変数を読ませるため、heroku config:setにて環境変数を定義しましょう
heroku login
heroku create
heroku config:set LINE_ACCESS_TOKEN='メモしたチャネルアクセストークン'
heroku config:set LINE_CHANNEL_SECRET='メモしたチャネルシークレット'
##Procfileの作成
次に、herokuがまず何を実行すればいいかを記したファイル「Procfile」を作成します
touch Procfile
Procfile内は以下のように記します
web: node index.js
##デプロイ
いよいよデプロイです、以下のようにgit addを行い、git commitを行って、herokuにプッシュしましょう
git add -A
git commit -m "コミット名"
git push heroku master
##デプロイ後、LINE Developersのwebhook URLを変更
コンソールからherokuにデプロイを行うと、以下のようなログが流れます
https://~~~~~.herokuapp.com/ の部分をコピーして、webhook URLに張り付けます
この後、再度LINEbotにメッセージを送ってみましょう、localでテストしたときと同じ返答が帰ってくれば成功です