Node.jsでLINEBOTを作ってみた③　〜フォローしたら挨拶するBOTまで〜

#はじめに

前回までのあらすじは下記を参照してください。

パート①は[こちら](https://qiita.com/hidesan4869/items/5f0e6bad6105cf7a742c)

今回の目標はLINE公式アカウントをフォローしたら
挨拶が返ってくるまでの実装を目指します！！

##@line/bot-sdkのインストール
LINEBOTをnode.jsで使うには、@line/bot-sdkというライブラリが必要となります。

**「SDK」**とは？
→ソフトウェア開発キットのことで、少ない労力でソフトを開発できるように
プログラムやサンプルコードなどをパッケージ化したものです。

開発をよりスムーズにしてくれるものだと思ってください。

**step1：ターミナルで@line/bot-sdkをインストール**

```ターミナル.
$ npm i @line/bot-sdk
```
package.jsonのdependenciesに以下のように@line/bot-sdkがあればおけい！！

```package.json
"dependencies": {
    "@line/bot-sdk": "^7.2.0",
    "express": "^4.17.1",
```

**step2：package.jsonを修正していきます。**

```package.json
{
  "name": "hogemarukun",
  "version": "1.0.0",
  "description": "hogemarukun",
  "engines": {
    "node": "12.x",
    "npm": "6.x"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "node test.js"
  },
  "author": "hogemaruchan",
  "license": "ISC",
  "dependencies": {
    "@line/bot-sdk": "^7.2.0",
    "express": "^4.17.1",
  }
}
```

enginesの追加とscriptsの中身を変え、
nodeやnpmは指定のバージョンで使いますよ〜という宣言です。
バージョンの確認はターミナルで以下のように確認してください。

```ターミナル.
$ node -v
  v12.18.1

$ npm -v
  6.14.7
```
私が使用したバージョンがnode v12.18.1 npm 6.14.7なので
node 12.x npm 6.xと宣言しました。

##コーディング
**step1：ディレクトリ直下にindex.jsを作成！**

**step2：コードの追加**

```index.js
const express = require('express');
const app = express();
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 5000

const config = {
   channelAccessToken:process.env.ACCESS_TOKEN,
   channelSecret:process.env.CHANNEL_SECRET
};

const client = new line.Client(config);

app
   .post('/hook',line.middleware(config),(req,res) => lineBot(req,res))
   .listen(PORT,() => console.log(`Listening on ${ PORT }`));
```
グローバル変数で"express"と"@line/bot-sdk"のライブラリを読み込み、expressは"app"という命名でしておきます。

次のconfigオブジェクトは@line/bot-sdkに渡してあげる設定値のようなものです。

LINE公式アカウントを作成した時に**チャンネルアクセストークン**と**チャンネルシークレット**をここで使います。

この2点はそのまま記述するとセキュリティ上NGなので**Herokuの環境変数**に書き込みを行います。

**step3：Heroku環境変数への書き込み**

```ターミナル.

$ heroku config:set ACCESS_TOKEN=xxx --app 作成したアプリ名
$ heroku config:set CHANNEL_SECRET=yyy --app 作成したアプリ名
```
xxxにチャンネルアクセストークン
yyyにチャンネルシークレット
アプリ名にはHerokuアプリ名を入力してください。

これで環境変数の設定は完了です！

##lineBot関数のコーディング
**step1：コードの追加**

```index.js
const lineBot = (req, res) => {
  res.status(200).end();
  const events = req.body.events;
  const promises = [];
  for (let i = 0; i < events.length; i++) {
    const ev = events[i];
    switch (ev.type) {
      case 'follow':
        promises.push(greeting_follow(ev));
        break;
    };
     console.log(ev);
  };
   Promise
       .all(promises)
       .then(console.log('all promises passed'))
       .catch(e=>console.error(e.stack));
}
```

eventsをfor文でevに分解しておりますが、実際のevの中身は下記のようになります。

**step2：heroku logs --tailで状況確認**

```ターミナル.
$ heroku logs --tail  //====ターミナルにこのコマンドを入力====//

```
**step3：events内容の確認**
ここで作成した公式LINEアカウントを自身のスマートフォンでフォローしてみてください。
すると以下のように表示されると思います。

```ターミナル.
{
type: 'follow',
replyToken: 'xxxxxxxxxxxxx',
source: { userId: 'yyyyyyyyyyyy', type: 'user'},
timestamp: 1616834333031,
mode: 'active'
}
```

typeはイベントの種類を表し、今回は公式アカウントをフォローされた事を意味するfollowです。他にも、messageやpostbackなどあります。[公式ドキュメント](https://developers.line.biz/ja/reference/messaging-api/#message-event)

**switch文でev.type**を分けています。現在はフォローされた時のイベントしか実装していませんが、今後追加していきます。

確認がとれたら、せっかくフォローしたのに申し訳ないのですが**アカウントをブロック**しておいて下さい。次のフォローされた際のメッセージを返すイベントの時に必要になります。

##greeting_follow関数のコーディング
**step1：コードの追加**

```index.js
const greeting_follow = async (ev) => {
  const profile = await client.getProfile(ev.source.userId);
    return client.replyMessage(ev.replyToken, 
     {
       "type": "text",
       "text": `ういー、${ profile.displayName }さん、フォローあざまーすっ！\uDBC0\uDC84`,
  });
}
```
非同期通信でprofileを取得していくので**async/await**を使います。

"text"の**\uDBC0\uDC84**はちょっとした遊びで付けてみました！！参考にした記事は[こちら](https://www.pre-practice.net/2017/10/line-botline_21.html)

##Herokuへデプロイ

前回に私はhogemarukunというHerokuアプリ名を作成しました。
このアプリをデプロイしたいと思います。

**step1：Herokuへログインからリポジトリの紐付け**

```ターミナル.

$ heroku login  //=====このコマンドでHerokuへログインできる=====//

$ git init  //=====リポジトリの初期化と新規作成=====//

$ heroku git:remote -a 作成したHerokuアプリ名
```
私の場合アプリ名は、hogemarukunです。



**step2：Herokuへデプロイ**

```ターミナル.
$ git add .

$ git commit -m "initial commit"

$ git push heroku master
```

デプロイに成功すると以下のような表示がされると思います。

```ターミナル.
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 23.1M
remote: -----> Launching...
remote:        Released v8
```

**step3：メッセージの確認**

表示の確認がとれたら、先ほどブロックした公式アカウントの**ブロックを解除**してみてください。

するとメッセージが返ってきているのではないでしょうか？

もし返ってこなければ、自身のスマートフォンから公式アカウントを削除して再度LINEDeveloperからQRコードを読み取ってみましょう。

#おわりに
ここまででフォローから挨拶を返すまでのBOTの作成となります！
参考になれば幸いです。
ありがとうございました！！！