晩ご飯を決めてくれるボットをnode-red+linebotでつくった

### つくったわけ
普段暮らしていると「どっちでもいいなぁ」みたいな選択が必要なシーンって結構ありますよね。
僕としては毎日の「晩御飯を決める」って作業がまさにそれです。
~~一緒にご飯を食べる相手でもいれば決めてもらうのですが~~
ちょうどnode-redつかって何かしたいなぁっていうのと、なにかボット作ってみようかな、と思ってたので、つくりました。

### つくったもの
なにかしら話かけると、事前に登録したごはん屋さんのどれかを返信してくるBOTです。
「飯どこにしよっかなぁ～」の若干の面倒くささを感じなくなるので、けっこう気に入っています。
<img width="375" alt="IMG_0690.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/333df3b0-124b-baa4-79f9-cac7f7bc99a1.jpeg">


### はじめに
本記事は、使用している各技術群についての詳細は記載しません。
記事を読んでいただいて、自分も作ってみようかな、と思っていただいた方のハウツーになればよいかなと思います。

### 本題にはいりまして
ibmcloudのライトアカウント（無料）でnode-redのサーバをたてて、そこにlinebotを組み込んだ処理を構築します。
node-redをご存じない方もいらっしゃると思いますので、概要だけ記載しておきます。
qiitaの記事はじめ、日本語情報がけっこうあるので、この記事を読んで気になった方はググってみてください。
>([Node-RED User Group Japan](https://nodered.jp/about/)）
> Node-REDはフローベースドプログラミング(flow-based programming)ツールであり、 元はIBM Emerging Technology Servicesチームによって開発され、 現在ではJS Foundationのひとつになっています。
>Node-REDは、フローエディタにアクセスするためにウェブブラウザを指定するNode.js上の実行環境に構築されています。 ブラウザでは、パレットからワークスペースへとノードをドラッグし、自分のアプリケーションを作成します。 そしてシングルクリックで、アプリケーションを実行状態にある実行環境へとデプロイします。

### 環境をととのえる
#### ibmcloud
ibmcloudへの登録とnode-redのインストールはこちらの記事を参照してください。
[node-red環境の作成手順（ibmcloud）](https://qiita.com/koan_u/items/045d7bbc2fe288deba7b)

上記でnode-redを使用することは可能になりますが、linebot連携を行うために、linebotのmoduleを使用できるように設定を変更します。。
(nodejsのrequire()をしたときと同じ状態になるように設定変更するイメージです。）

今回は、ブラウザ上で作業を完結させたいので、ibmcloudのツール群を使用します。
node-redのエディタ画面から離れ、先ほどのアプリ管理画面下部の「継続的デリバリー」パネルの「有効化」ボタンをクリックして、継続的デリバリーを有効化します。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/4ab42420-01b8-e52d-63ec-62814d5444df.png)

継続的デリバリー用の各種設定画面が開きます。
基本的にすべてデフォルトで問題ありませんが、「ツール統合」部分の「Delivery Pipeline」のみAPIキーの発行が必要なので、「Delivery Pipeline」をクリックして、APIキーの発行を行ってください。
それが完了したら「作成」をクリックしてください。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/17294442-c24a-451f-3628-242ce45a51e3.png)

作成が完了すると、以下の画面が表示されます。
設定変更用のエディタには「Eclipse Orion Web IDE」を使用しますので、「Eclipse Orion Web IDE」をクリックしてください。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/c4b4bb7c-0d34-2ed6-db1c-b1d88f445913.png)

そうすると以下のようなエディタが開きます。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/44b96c8e-1f8b-ef12-215f-1b1ed0c44ec2.png)


エディタ上で各ファイルをそれぞれ修正します。
●package.json
「dependencies」に以下を追加します。

``` javascript
"@line/bot-sdk": "*"
```

●bulemix-setting.js
「functionGlobalContext」に以下を追加します。

``` javascript
linebot: require('@line/bot-sdk')
```

編集が終わったら、左側のメニューからgitを選択して、コミット/プッシュします。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/833352b0-f1ca-50d9-8a7d-9f09ea27803a.png)


プッシュまで完了したら、ツールチェーン画面から「Delivery Pipeline」を選択します。
deployまで、ステージングが完了するのを待ちます。
※ステージングが動いていない場合は、各ステージの再生ボタンをクリックして、ステージングを行ってください。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/573e29d9-9fc9-b83b-912e-9a2ceaa7ed69.png)

これでnode-red側は準備OKです。
つぎにlinebotの登録を行います。


#### linebot
[LINE developers](https://developers.line.biz/ja/)でログインします。
アカウント登録も右上のログインボタンから行えます。
（余談ですが、LINE debelopersさんのヘッダー画像すごくいいですよね。）
![l1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/08b12d41-9789-7310-e66c-5661007c0587.png)


ログイン後の画面で新規プロバイダを作成してください。
プロバイダを作成した後に、以下のようなチャンネル作成画面が表示されるので、
Messaging APIを選択します。
![l2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/75a9b85a-860e-e721-42ab-0dd0395e462a.png)

初期設定画面に遷移するので、必要な項目を入力して作成してください。
![l3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/67a59bfb-9398-3855-d460-6c7d88c84398.png)

チャンネルを作成したら、チャンネルの設定画面に遷移してください。
![l4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/ef3670c4-c9af-892e-d666-7e2412e5aab9.png)

設定項目は基本的にデフォルトで問題ありませんが、以下の項目だけ設定変更してください。
・Webhook送信 →「利用する」に変更
・Webhook URL
　→ node-redのアプリURL + 末尾に「/webhook」をつけたもの

・Channel Secret
・アクセストークン（ロングターム）
ついてはそれぞれ発行して、値をメモしておいてください。

また、作成したBOTはQRコードなどからLINEで友達追加をしておきます。


#### いよいよnode-redで処理をつくる
といっても、ここは一瞬で終わっちゃいます。

まずはnode-redにアクセスして、左側の「入力」にあるhttpノードを選択し、
・メソッド → POST
・URL →　/webhook
と設定し、後続ノードに「出力」のなかにあるdebugノードを接続して「デプロイ」をクリックします。

![r1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/33aa7838-27aa-3ef3-599e-ce519173c230.png)


デプロイしたら、メッセージはなんでもよいので、BOTに対してLINEで話しかけます。
正常にBOTからのwebhookを受信できるとログが表示されます。
ログが出ない場合はBOTの設定などをもう一度確認してください。
![r2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/b7a4a0c5-2d76-0e22-49f7-499af65370e7.png)


ログが表示されたら、いよいよ晩御飯をきめてもらいます。
先ほどのログを確認したときのdebugノードを消して、
下のイメージのように、
[入力]http(先ほどのまま) - [機能]function - [出力]http response とノードを接続します。

![r3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/822cd0a6-02f8-89fc-48e5-fa664e8690e1.png)


そして、functionには以下のコードを記載します。
(http responseノードは特に編集しなくて大丈夫です。）

```javascript
const line = global.get('linebot');

// クライアントの生成
const client = new line.Client({
  channelAccessToken: '先ほどメモしたアクセストークン',
  channelSecret: '先ほどメモした channel secret',
});

// イベントとメッセージの取得
const event = msg.payload.events[0];
const received_msg = event.message.text;

// ごはん屋さんの定義
restaurants = [
    '松屋',
    '大戸屋',
    'マクドナルド',
    'ケンタッキー',
    '駅前のラーメン屋',
]

// ランダムにきめる
idx = Math.floor( Math.random() * restaurants.length );

// 返信するメッセージの設定
// text:''が送信する内容
var massage = { type: 'text', text: restaurants[idx] };

// 返信
client.replyMessage(event.replyToken, massage);

return msg;
```

デプロイしたら、LINEで話しかけてみてください。
そうすると、以下のように晩御飯を食べるお店をきめてくれます！！
<img width="375" alt="IMG_0690.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483835/333df3b0-124b-baa4-79f9-cac7f7bc99a1.jpeg">

これで「どっちでもいいなぁ」から一つを選ぶストレスから解放されました。最高！
みなさんもぜひオリジナルのBOT作成を試してみてください！