RenderとJavaScriptでLINE BOTを作る

# 概要
LINE BOT を作った(作っている)ので備忘録としてまとめました.
これまでは `Heroku` というサービスがよく使われていたようですが、
有料化されてしまったので、`Render` を使います.
また、言語は JavaScript (Node) を使用します

# 作成
## プロジェクトのセットアップ
### init
```shell
mkdir linebot
cd linebot
npm init -y
```

### ライブラリのインストール
```shell
npm i @line/bot-sdk express
```

### index.js ファイルを作成
```shell
touch index.js
```

### package.jsonの変更
以下の一行を追加してください.
```json:package.json
    "type": "module"
```

これでプロジェクトの準備ができました.

GitHub にプッシュするところまでやってください.
このページ上でのリポジトリ名は `linebot-oumu` とします

## LINE Developers に登録
続いて LINE Developers に登録します
[LINE Developers](https://developers.line.biz/ja/)

手順は [「LINE Bot作成時のLINE Developers設定の備忘録」](https://qiita.com/kuma_ssss/items/71ed5ffb3596abffbb29) を参考にしてください

## Render に登録
[Render](https://dashboard.render.com/) に登録します
GitHub アカウントで認証するととても楽になるのでおすすめです.

## Renderプロジェクトの設定
### 新規プロジェクトの作成
`New` を押して `Web Service` を選択します.
![render-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/59ecc7df-866a-abfc-4388-af071795522a.png)

作成した `linebot-oumu` で `Connect` を押します
![render-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/59a13005-d4b5-1b1b-69b0-50ee76a17441.png)

プロジェクトの設定は以下の通りにしてください.
`Name` は一意である必要はありませんが、
既に使われている場合は url に数字が付け足されたりします
![render-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/9e37ce4e-9702-7aac-3ea6-6de7683c889b.png)

下に移動して `Free` のまま `Create Web Service` を押します
![render-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/b7e50fa2-40ab-1601-10d3-21306cb7560b.png)

すると以下のようにビルドが始まりますが、`index.js`にはなにもないので `Cancel deploy` を押して止めましょう.
![render-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/78cfd8ba-6773-f365-aa29-dc5fe1fa4c29.png)

### 環境変数の指定
##### チャネルシークレット
`チャンネル基本設定`を開き、スクロールすると `チャネルシークレット` があります.
![line-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/3021b81a-526d-c8d4-71c0-392527641cf4.png)

#### チャネルアクセストークン
`Massaging API設定` を開き、スクロールすると `チャネルアクセストークン` があります
![lin-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/7476a950-7515-6693-2dc5-4077fd5f2c5a.png)


#### 環境変数を追加
左のリストから `Enviroment` を選択し、`Add Environment Variable` を押します.
`key` には `CHANNEL_SECRET` と `CHANNEL_ACCESS_TOKEN` の2つを入力します.
入力したら `Save Changes` を押して保存します
![render-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/c8fabafa-f9d3-180c-8bbd-ea7a937a5668.png)

また、左上には `https://xxx.onrender.com` と URL があるので、コピーしておきます.

### Massaging API の設定
以下のように `Webhook URL` には先ほどの `https://xxx.onrender.com` を登録し、
`Webhookの利用` をオンにします.
![line-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/a2780b19-478b-67b1-d0ae-54b754eb2bd1.png)

以上で設定は完了です.
あとはコードを書いていくだけです!

## おうむ返しを実装する
### ライブラリをインポート
```js:index.js
import express from "express";
import { Client, middleware } from "@line/bot-sdk";
```

### トークンの設定
```js:index.js
const config = {
  channelSecret: process.env.CHANNEL_SECRET,
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
};
const client = new Client(config);
```

### エントリーポイントの設定
以下のコードでは `https://xxx.xxx/` にアクセスした場合に 
`handleEvent関数`を呼び出すようになっています.
```js:index.js
const PORT = process.env.PORT || 3000;
const app = express();

app.post("/", middleware(config), (req, res) => {
  Promise.all(req.body.events.map(handleEvent)).then((result) =>
    res.json(result)
  );
});

app.listen(PORT);
```

`events` は配列になっており、連続でメッセージが来た場合には1回のリクエストでまとめて来ます.
`map` で回すことで全ての `event` に対して反応するようにしています.

### おうむ返しする
`event.message.text` には送られてきたテキストメッセージが入っています.
なので `event.message.text` をそのまま返せばおうむ返しできるわけです
```js:index.js
function handleEvent(event) {
  return client.replyMessage(event.replyToken, {
    type: "text",
    text: event.message.text,
  });
}
```

しかし、ユーザーから送られてくるメッセージはテキスト以外にもいろいろあります.
- スタンプ
- 画像
- ファイル etc.

なので return する前に 送られてきたメッセージが テキストであるかを判断させ、
テキスト以外の場合は返信しないようにします.
```js:index.js
  if (event.type !== "message" || event.message.type !== "text") {
    return Promise.resolve(null);
  }
```

GitHub にプッシュすると　Render では自動でフェッチし、ビルドされます

## BOTを友達登録する
`Messaging API設定`　を開くと QRコードがあります.
読み込むと友達登録することができます
![line-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/9a3254ca-28b9-1422-8008-dff58ff7f835.png)

BOTにメッセージを送るとおうむ返ししてくるのを確認できると思います!!
![line-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727329/e908552f-37a7-6907-1b0d-83e272599df7.png)


# 終わりに
今回は単におうむ返しするBOTを作りました. 
ぜひ様々な処理を組み込んで便利なBOTにしてみてください!

`Render` では `PostgreSQL` なども使用できるので DBと連携させてみてもいいかもしれません

また、`Render` は 15分間アクセスがなかった場合スリープしてしまいます.
Google Apps Script などでいい感じにしましょう!!