はじめに
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
その後、以下のコードをコピペします
// モジュールのインポートconstserver=require('express')();constline=require('@line/bot-sdk');// Messaging APIのSDKをインポートrequire('dotenv').config();// -----------------------------------------------------------------------------// パラメータ設定constlineConfig={channelAccessToken:process.env.LINE_ACCESS_TOKEN,// 環境変数からアクセストークンをセットしていますchannelSecret:process.env.LINE_CHANNEL_SECRET,// 環境変数からChannel Secretをセットしています};// -----------------------------------------------------------------------------// Webサーバー設定server.listen(process.env.PORT||3000);// -----------------------------------------------------------------------------// ルーター設定constbot=newline.Client(lineConfig);// APIコールのためのクライアントインスタンスを作成server.post('/webhook',line.middleware(lineConfig),async(req,res)=>{res.sendStatus(200);// 先行してLINE側にステータスコード200でレスポンスする。const[lineEvent]=req.body.events;// events配列から配列の0番目の要素だけを変数に代入constinputMessage=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でテストしたときと同じ返答が帰ってくれば成功です