初めてのLINEbot作成【Node.js + heroku】

# はじめに
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

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [LINE側の準備](#Chapter1)
1. [Node.js側の準備](#Chapter2)
1. [コードの作成](#Chapter3)
1. [応答テスト](#Chapter4)
1. [本番環境(heroku)にデプロイ](#Chapter5)
1. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# LINE側の準備
この見出しでは、LINE側で行うことをまとめていきます。
##LINE Developerアカウントの作成
まずはこちらのURLからLINE Developerのアカウントを作成します
普段使用されているLINEアカウントがあればすぐに作成できます
https://developers.line.biz/ja/
##プロバイダーの作成
次にプロバイダーの作成を行います。トップページにある以下の作成ボタンを押します。
![スクリーンショット 2021-03-19 17.28.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/aec0d53e-a3ff-8a64-935f-b45b814736e7.png)
ここでは新しく作るプロバイダーをtestとしておきます。
![スクリーンショット 2021-03-19 17.29.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/35570628-778d-cbeb-8553-6070b6dd5c1c.png)
##チャネルの作成
新しくプロバイダを作成すると以下の画面に移行します。ここでは「Messaging API」を選択します。
![スクリーンショット 2021-03-19 17.30.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/fa93af45-0aa1-d688-bf05-56c5c5fc476f.png)
その後、チャネルの種類を「Messaging API」に指定し、プロバイダーを先ほど作成した「test」に指定します。その後
・チャネルアイコン　※一度変更すると、１日経過しなければ変更することができません
・チャネル名　※一度変更すると、７日経過しなければ変更することができません
・チャネル説明
・大業種
・小業種
・メールアドレス
・プライバシーポリシーURL（任意）
・サービス利用規約URL（任意）
を入力し、利用規約にチェックを入れ、作成ボタンを押します
![スクリーンショット 2021-03-19 17.32.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/1432ab4c-019f-dca5-2d11-7d697476fd65.png)
##チャネルシークレットとチャネルアクセストークンの取得
次に外部からLINE APIにアクセスするためのチャネルシークレットとチャネルアクセストークン(長期)を取得します。
こちらの情報は外部に漏れないように気を付けましょう。それぞれの場所は
・チャネルシークレット
　チャネル基本設定の下部にあります
・チャネルアクセストークン(長期)
　Messaging API設定の下部にあり、発行ボタンを押すと表示されます
上記二つが取得できたら、とりあえずはメモ帳等に記録しておきましょう。
##その他設定
Messaging API設定タブの応答メッセージ、編集、にて応答設定の中の詳細設定の、応答メッセージを以下の画像のようにオフ、Webhookをオンにしましょう。あいさつメッセージはオフにしていますが、オンでも構いません。
※Webhook URLに関しては後ほど入力します
![スクリーンショット 2021-03-19 17.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/b44c7e4f-311a-38e6-5dee-27166f935170.png)
こちらで一旦LINE側の準備は終わりになります。







<a id="#Chapter2"></a>
# Node.js側の準備
##npm init
任意のフォルダ（ここではlinebot_test）を作成し、そのフォルダ内で、npmのイニシャライズを実行します

```console:コンソール
mkdir linebot_test
cd linebot_test
npm init
```
npm init実行後、いろいろ聞かれますが、全て空のままEnterで構いません

##モジュールのインストール
LINEbotを動かすために必要なnpmモジュールをそれぞれインストールします

```console:コンソール
npm install express @line/bot-sdk dotenv --save
```

##ローカルでテストするためのトンネリングツールをインストール
ngrokというトンネリングツールを使用することで、簡単にテストが行えます。

```console:コンソール
npm install -g ngrok
```

Node側の準備はこのぐらいです、次からコードを書いていきます。


<a id="#Chapter3"></a>
# コードの作成
先ほど作成したフォルダ内で以下を実行し、index.jsを作成します

```console:コンソール
touch index.js
```

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

```javascript: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ファイルを作成します。

```console:コンソール
touch .env
```
.envファイル内は、LINE側の準備で取得したチャネルシークレットとチャネルアクセストークンを用意し、以下のコードに貼り付けてください

```console:.env
LINE_ACCESS_TOKEN='メモしたチャネルアクセストークン'
LINE_CHANNEL_SECRET='メモしたチャネルシークレット'
```

フォルダ構成は以下のようになります
![スクリーンショット 2021-03-19 18.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/f3bab5ed-e1d0-5911-ca96-e2c7dfb076b1.png)



<a id="#Chapter4"></a>
# 応答テスト
いよいよテストになります。
##LINEbotの友達登録
LINE DevelopeのMessaging API設定のボット情報にある「ボットのベーシックID」をコピーして、自分のLINEの友達検索、にてIDで検索すると作成したbotが出てくるので、そちらを友達にします


![スクリーンショット 2021-03-19 23.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/35a43898-45cf-2102-a9aa-e4628f4dd3e6.png)

このボット情報の下にQRコードが表示されているので、そちらから友達になっても構いません


##ngrokの起動
コンソールを二つ立ち上げ、片方では

```console:コンソール
ngrok http 3000
```

とすると、以下のようになるので

![スクリーンショット 2021-03-19 18.58.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/df064086-9132-dd47-bcf4-28f75e6fee94.png)

http<b>s</b>://~~~~.ngrok.io の部分をコピーし

LINE DevelopeのMessaging API設定のWebhook設定、webhook URLに貼り付け、後ろに「/webhook」を記入します


![スクリーンショット 2021-03-19 19.02.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/5f0de2ae-4bce-e4a2-8fde-21a07db7ce1b.png)


##index.jsの起動
もう一方のコンソールにて、

```console:コンソール
node index.js
```

としてサーバーを起動します

##応答テスト
いよいよテストです。
botに対して「ありがとう」と入力しましょう

すると、「どういたしまして」と返ってきます

それ以外の言葉を入力すると、「こんにちは」と返ってくるはずです。
![スクリーンショット 2021-03-19 23.35.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/d973d4d5-d67b-6bb5-f62d-73359e493ae5.png)

#本番環境(heroku)にデプロイ
##git init
herokuにデプロイする際はgitを使用するので、まずgit initを行います

```console:コンソール
git init
```
##git ignore
その後、チャネルアクセストークンなどが外部に漏れてしまわないように.gitignoreファイルを作成し、
以下のように記述しておきましょう

```console:.gitignore
npm-debug.log
node_modules
.env
```

こうしておくことで、pushしても.envファイルが外部に漏れることはなくなります
また、node_modules npm-debug.logに関してもプッシュする必要がないのでignoreしておきましょう

##heroku create
その後、herokuにログインし、heroku createを実施して新たにサーバーを作成しましょう
その後、herokuに環境変数を読ませるため、heroku config:setにて環境変数を定義しましょう

```console:コンソール
heroku login
heroku create
heroku config:set LINE_ACCESS_TOKEN='メモしたチャネルアクセストークン'
heroku config:set LINE_CHANNEL_SECRET='メモしたチャネルシークレット'
```
##Procfileの作成
次に、herokuがまず何を実行すればいいかを記したファイル「Procfile」を作成します

```console:コンソール
touch Procfile
```
Procfile内は以下のように記します

```console:Procfile
web: node index.js
```

##デプロイ
いよいよデプロイです、以下のようにgit addを行い、git commitを行って、herokuにプッシュしましょう

```console:コンソール
git add -A
git commit -m "コミット名"
git push heroku master
```

##デプロイ後、LINE Developersのwebhook URLを変更
コンソールからherokuにデプロイを行うと、以下のようなログが流れます
![スクリーンショット 2021-03-20 0.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/c2999f06-d547-6d3e-4225-63e607fd70a6.png)
https://~~~~~.herokuapp.com/　の部分をコピーして、webhook URLに張り付けます

![スクリーンショット 2021-03-20 0.16.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545590/e4df0dc0-20f0-d2fd-c372-4ed52298880c.png)

この後、再度LINEbotにメッセージを送ってみましょう、localでテストしたときと同じ返答が帰ってくれば成功です



<a id="#reference"></a>
# 参考文献
- [1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)
- [
【HEROKUとは】これを読めばOK!デプロイの仕方まで徹底](https://tech-camp.in/note/technology/16108/)