herokuとNode-REDでLINEボットをつくろう

## はじめに
- プログラミング初心者向きです
- オウム返しをする簡単なLINEボットがつくれます（所要時間50分程度）
- LINEのアカウントが必要
- herokuのアカウントが必要（登録方法は後述します）

-----
## システム構成
完成するとこんな感じになります。
![プレゼンテーション1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/ea9c4b2e-df55-38a9-8ba1-79579b5ad65a.png)

- スマホのLINEアプリからLINE Messaging APIを経由して、HerokuにたてたNode-REDでプログラムを動かします。
- 余裕があれば外部のAPIサービスもNode-REDから利用してみましょう。

-----
## herokuとは？
- herokuとは「アプリケーションを実行するための環境」を提供してくれるサービスです。
- アプリケーションを実行するためには、データを登録するデータベースや、画面で操作した処理を動かすためのサーバーなどの環境が必要で、それらを簡単に利用することができます。
- 無料枠が用意されており、クレジットカードの登録がなくても利用可能です。

https://jp.heroku.com/

-----
## herokuのアカウントを作成します
はじめて利用する方はアカウントを作成します。
https://signup.heroku.com/login

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/461bade2-28c1-9ee2-e489-7eb63b1d046f.png)

登録したメールアドレスに本人確認のリンクが送られます。
![スクリーンショット 2021-11-20 064717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/c7ed1b6f-cb69-009a-9530-1c2fba9a5468.png)

8文字以上で数字と記号を含むパスワードを設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/08858f66-8a91-d447-4bd9-fe75e954c598.png)

セキュリティの設定が表示されたら「Later」でスキップします。
![スクリーンショット 2021-11-22 044913.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/dffd7e03-645b-8fb0-abee-2d74330b323c.png)

Acceptを押します。
![スクリーンショット 2021-11-22 045120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/d0fad888-3933-6f21-1bf5-252c45a03ac3.png)

このような画面が表示されたらherokuのアカウント作成は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/ee3f0043-bf17-d18b-4356-608bccae644d.png)



-----
## LINEボットとは？
「ボット」というのは特定の処理をしてくれるプログラムのことを指します。
LINEの「ボット」であれば質問や問いかけに対して、自動で応答してくれるプログラムとなります。

-----
## LINEボットをつかってみよう
世の中には様々なLINEボットがあります。まずは使ってみましょう

[LINE英語通訳](https://guide.line.me/ja/services/line-interpretation.html)・・・英語を日本語に変換してくれる公式ボット
[ヤマト運輸](https://www.kuronekoyamato.co.jp/ytc/campaign/renkei/LINE/)・・・荷物の配達指定ができるボット。ネコ語で話しかけるとネコ語で返答してくれる

他にも便利なLINEボットがないか探してみてください

-----
## どんなLINEボットがあるとうれしい？
自分でつくりたいLINEボットをイメージしてみましょう。
![プレゼンテーション1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/bbaceb5e-da0e-f827-1200-9125df07fe21.png)


-----
## herokuにNode-REDをデプロイする
- herokuにNode-REDのアプリをデプロイします。以下のURLをクリックしてください。

[herokuにNode-RED](https://heroku.com/deploy?template=https://github.com/joeartsea/node-red-heroku)

アプリ名を英字でつけます。このアプリ名がURLの一部となります。他の方と重複しているとエラーとなるので気を付けてください。
![スクリーンショット 2021-11-22 051037.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/224a49ad-a18a-01f4-51e4-8bd56c26733a.png)

Node-REDに接続する際のパスワードとアカウントを設定します。パスワードから設定するので注意してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/50b18dc8-9425-9716-fa54-69a595e26953.png)

「Deploy app」ボタンを押します。2～3分ぐらいでデプロイされます。

-----
## Node-REDを立ち上げる
デプロイしたアプリを起動します。「Open app」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/1dd2e365-08c5-4120-b67a-bbe10c9f81a4.png)

こちらのボタンを押します。
![スクリーンショット 2021-11-22 052217.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/606dc9d1-a802-85ce-cb9b-bf429c4a63c9.png)

デプロイ時に設定したアカウントとパスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/29198aaf-3eec-7702-f515-d729c2b7d6e4.png)

こちらの画面が表示されればオーケーです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/97b07316-c878-8306-fe1b-621af57cb93a.png)

-----
## Node-REDでWebhookを準備する
LINEからの接続先（Webhook）を用意します。

ネットワーク＞http inノードをドラッグ＆ドロップします。
![スクリーンショット 2021-11-22 053226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/dfce4c87-0a8d-0532-4ee4-87a7154fde78.png)

http inノードをダブルクリックしてプロパティを開き、以下のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/7bc77b61-5219-ab8d-e1ef-a1ef668b0dda.png)

つづいてhttp responseノードをドラッグ＆ドロップします。
![スクリーンショット 2021-11-22 053620.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/b205f6d2-1c88-71b9-5903-53083a93b86c.png)

ノードを線でつないで、「デプロイ」ボタンを押します。
![スクリーンショット 2021-11-22 054441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/c05c939f-1120-fc09-16bc-21ebdb63d8bb.png)

とりあえず動くか確認します。
「https://（自分で設定したapp name).herokuapp.com/webhook」とブラウザからアクセスしてみてください。ブラウザに「{}」と表示されれば接続できています。
こちらのURLはLINEで設定しますので、メモしておいてください。

動作が確認できたら、http inノードのプロパティを開いてメソッドを「POST」に変更します。
![スクリーンショット 2021-11-22 061839.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/4c94233b-3362-f06d-3f3c-2c026d448081.png)

変更したら「デプロイ」ボタンを押してください。

-----
## LINE Developersでチャネルを作成する
- LINEアカウントからMessaging APIを利用できるようにします。
- LINE Developersの公式ドキュメントを参考にしてください。

[Messaging APIを始めよう](https://developers.line.biz/ja/docs/messaging-api/getting-started/)

「4. チャネルを確認する」まで実施してください。


-----
## チャネルにWebhookを設定する

チャネルの「Messaging API設定」を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/bd6fefdc-ff1e-e95d-263c-1de3aa9b2fe0.png)

Webhook URLの「編集」ボタンでメモしたURLを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/dbe10a1f-3b6f-838e-755c-52be872dca40.png)

Webhook URLを更新したら「検証」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/486f1b30-5010-df57-c6a6-caa73f530868.png)

以下のようなメッセージが表示されたら、URLやNode-REDのhttp inノードの設定を確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/ca4a923d-1f48-53b4-2b32-469c8258ea8a.png)

Webhookの利用をONにして、応答メッセージとあいさつメッセージを「無効」にしておきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/f8830fa3-04b0-c494-5ee4-5a1f14a15ebc.png)

-----
## アクセストークンとシークレットをコピペします
Webhookの設定が完了したら、アクセストークンを発行してコピペします。
Messaging API設定＞チャネルアクセストークン
![スクリーンショット 2021-11-22 065836.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/9493972f-c7c1-b0d1-f838-800e353e5880.png)

チャネル基本設定＞チャネルシークレット
![スクリーンショット 2021-11-22 070344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/14294880-daab-4f24-751c-be36d81fed18.png)

Node-REDのプログラムに利用するのでメモ帳等にコピーしておいてください。


-----
## Node-REDからLINE Messaging APIを利用する
Node-REDの右上のメニューから「パレット管理」を選択します。
![スクリーンショット 2021-11-22 063324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/7133ca79-16f9-79d7-2b97-555132569812.png)

「ノードの追加」タブで、「node-red-contrib-line-messaging-api」を検索して追加します。
![スクリーンショット 2021-11-22 063642.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/eb796e86-6745-8825-73d2-3338715d0fe6.png)

「追加」ボタンを押します
![スクリーンショット 2021-11-22 063712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/a16c189b-f609-69c6-ce28-545262369d67.png)

-----
## オウム返しのボットを作成する

ReplyMessageノードをドラッグ＆ドロップして、線をつなぎ変えます。
![スクリーンショット 2021-11-22 065211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/2e66b9ce-5680-e9f0-3ebb-cb218e4f98cc.png)

LINE Developersでコピーしたチャネルシークレットとアクセストークンを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/a0d9d341-ebea-648f-f5b8-8e557abf9078.png)

設定を変更したら「デプロイ」ボタンを押してください。

-----
## LINEボットを試してみよう

LINE Developers のMessaging API設定のQRコードをスマホのLINEアプリから読み取り、友達追加をしてください。メッセージをオウム返ししてくれるボットが試してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/73b7862a-bcad-f33b-6f36-34f923917a11.png)


-----
## Node-REDで動作を確認する
LINE Messaging APIとのやり取りの内容を確認します。
debugノードを追加して線をつなぎ、デプロイしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/a678c3a4-7ba4-5781-576a-9d56c213c179.png)

LINEアプリでメッセージを送信すると、コンソールに送信されたメッセージの中身が確認できます。

eventsの中身

| プロパティ | 値 |
|:-:|:-:|
| type  |  イベントの種別が入ります |
| message  |  入力されたメッセージが入ります |
| timestamp  | メッセージのtimestampです  |
| source  |  ユーザー情報等が設定されます |
| replyToken |  返信用のトークンです。この値を使ってトークを分けます |
| mode |  現在の状態を示します |

-----
## メッセージの内容によって返信内容を変える
LINEから受け取ったメッセージの内容によって処理を変えます。

functionノードをドラッグ＆ドロップします。つないでいる線の上に置くと勝手につながります。
![スクリーンショット 2021-11-23 144936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/bd191373-3b03-a0ab-6a05-9bce7f9cadf9.png)

functionノードの内容を以下のように記述します。

```javascript:function
//入力された文字を取得
const receive_msg = msg.payload.events[0].message.text;
//入力された文字を判断する
if (receive_msg == "かわいい") {
    let message = {
        type:'text',
        text:"ありがとう"
    };
    //
    msg.payload.events[0].message = message;
} 
return msg;
```

LINEから「かわいい」とメッセージを送信すると「ありがとう」と返します。

-----
## APIを利用してみる

Node-REDからいろいろなAPIを利用することで、様々機能を追加することもできます。
例えばNHKの番組表を取得するAPIを利用して、「NHK」とメッセージを送信すると番組内容を返すこともできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151569/c7a706bc-5145-0918-175d-62571cb1bb7a.png)
以下の内容をコピペして、メニューから「読み込み」で読み込みできます。

```
[{"id":"9320f61c.2faff8","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"fdfc2f8e.7e4f6","type":"http in","z":"9320f61c.2faff8","name":"webhook","url":"/webhook","method":"post","upload":false,"swaggerDoc":"","x":100,"y":160,"wires":[["9ca3dc6a.f550f","1bf5325b.e5aaae"]]},{"id":"7848fdc1.060c94","type":"ReplyMessage","z":"9320f61c.2faff8","name":"","replyMessage":"","x":860,"y":440,"wires":[]},{"id":"9ca3dc6a.f550f","type":"debug","z":"9320f61c.2faff8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":390,"y":160,"wires":[]},{"id":"c7d47538.fe7f18","type":"function","z":"9320f61c.2faff8","name":"","func":"//入力された文字を取得\nconst receive_msg = msg.payload.events[0].message.text;\n//入力された文字を判断する\nif (receive_msg == \"かわいい\") {\n    let message = {\n        type:'text',\n        text:\"ありがとう\"\n    };\n    //\n    msg.payload.events[0].message = message;\n} \nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":400,"y":440,"wires":[["7848fdc1.060c94"]]},{"id":"ccb68a3d.370668","type":"debug","z":"9320f61c.2faff8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":730,"y":260,"wires":[]},{"id":"1bf5325b.e5aaae","type":"switch","z":"9320f61c.2faff8","name":"","property":"payload.events[0].message.text","propertyType":"msg","rules":[{"t":"eq","v":"NHK","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":170,"y":260,"wires":[["c734f322.02cac"],["c7d47538.fe7f18"]]},{"id":"342a957d.2dfeaa","type":"http request","z":"9320f61c.2faff8","name":"NHKのAPI","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://api.nhk.or.jp/v2/pg/now/230/g1.json?key=（取得したkey）","tls":"","persist":false,"proxy":"","authType":"","x":430,"y":340,"wires":[["ccb68a3d.370668","b8b1be1a.2a2b3"]]},{"id":"b8b1be1a.2a2b3","type":"function","z":"9320f61c.2faff8","name":"番組を取得","func":"\nlet title = msg.payload.nowonair_list.g1.present.title;\nlet subtitle = msg.payload.nowonair_list.g1.present.subtitle;\n\nlet text = title + \"\\n\\n\" + subtitle;\n\nlet message = {\n    type:\"text\",\n    text:text\n}\nmsg.event.message = message;\nmsg.payload.events = [msg.event];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":340,"wires":[["bc55c771.5b4388","7848fdc1.060c94"]]},{"id":"bc55c771.5b4388","type":"debug","z":"9320f61c.2faff8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":850,"y":340,"wires":[]},{"id":"c734f322.02cac","type":"function","z":"9320f61c.2faff8","name":"LINEの設定を保存","func":"let event = msg.payload.events[0];\nmsg.event = event;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":260,"wires":[["342a957d.2dfeaa"]]}]
```
APIのプロパティを開き、取得したAPIキーを設定すると現在放送されているNHK名古屋の番組内容を返します。

参考
[NHK番組表API](https://api-portal.nhk.or.jp/)
※別途、ユーザー登録が必要です。APIの使い方については解説しません。

-----
## 参考リンク
https://qiita.com/juicy/items/b4c97f75418d189f45a7

https://qiita.com/youtoy/items/287a0782fdd185fc2004

https://qiita.com/ueponx/items/ab3ea656516c734e3cba

https://developers.line.biz/ja/docs/messaging-api/getting-started/