はじめに

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側の準備
Node.js側の準備
コードの作成
応答テスト
本番環境(heroku)にデプロイ
参考文献

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

その後、以下のコードをコピペします

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側の準備で取得したチャネルシークレットとチャネルアクセストークンを用意し、以下のコードに貼り付けてください

.env

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ファイルを作成し、
以下のように記述しておきましょう

.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内は以下のように記します

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でテストしたときと同じ返答が帰ってくれば成功です

参考文献