【Node-RED】LineMessagingAPIとBluemix Node-REDでお天気LineBotを作ってみた。【LineBot】

# はじめに
* LambdaとLineMessagingAPIを使ってお天気Botを作ってみたのですが、自然言語処理を入れたくてWatsonを調べてみるとNode−Redを使うと便利とのこと。Node-Redを使ったことがなかったのですが、使ってみるとlambdaと同じことができるなということでまずはLambda部分をNode-Redで作り変えてみることで練習をしてみました。
    * Lambda版Qiita： http://qiita.com/hironaito/items/9d4d56acbdca2d985b04
* Bluemix関連の本ということで以下を読むと色々載っていてよかったです。
    * [IBM Bluemixクラウド開発入門――Webから拡張知能Watsonまで実践解説 (Software Design plus)](https://www.amazon.co.jp/dp/4774190845)
* watsonはまだ実装していません。次の機会に投稿します。

![line](https://qiita-image-store.s3.amazonaws.com/0/41761/ba72ca2e-880d-8b8b-e359-57e09b1600c2.gif)


* Node-Redはこんな感じで画面上にパーツを配置していきつつプログラミングする。
    * APIだけでなくHTMLなどを直接出力もできるらしい。
 
![Node-RED](https://qiita-image-store.s3.amazonaws.com/0/41761/f7964475-233f-c30a-14b1-b3f045dfdf25.png)


# 利用する物
* LineMessagingAPI
* Bluemix
    * Node−Red
* livedoorお天気API

# LineMessagingAPI
* Lambda版と同様なため登録などは割愛

# Bluemix Node-Red
* Bluemixは1ヶ月は無料で利用できるのでテストで利用するのは気軽に使える。
    * 一ヶ月すぎるとクレジットカードの登録が必要だけど無料枠もあるので継続利用が可能
    * ただしWatsonの一部のものや起動時間で課金されるものもあるので料金には注意が必要。
    * 無料期間内でも金額は表示されるので参考にするとよい。

## Node-Red作成
* https://console.bluemix.net/catalog/
    * 上記のNode-RED Starterからインスタンスを立ち上げる。
        *  各サービスへの画面遷移が分かりづらいので上記URLのカタログというリンクを覚えておくとよい
    * ![カタログ - IBM Bluemix](https://qiita-image-store.s3.amazonaws.com/0/41761/186a0b03-33dc-af9b-c802-708b8211477b.png)
* アプリ名・ホスト名を記入し(URLの一部になる)SDK for Node.jsで作成を押す。
* 開始中から実行中になればインスタンスが起動されている。
    * 起動するまで結構時間がかかるのと、開始中のまま止まることもあるのでその際はページをリロードするとよい。
* Node−REDの設定を行う。Nextと進みUsernameとpasswordを入力する。
    * ![Node-RED in IBM Bluemix](https://qiita-image-store.s3.amazonaws.com/0/41761/c2f13376-1f3a-59d8-42f8-c375e6d79944.png)
    * Finish the installでFinishを押して完了。



## Node-Red設定とお天気API実装

* livedoorお天気API
    * http://weather.livedoor.com/weather_hacks/webservice

* Node-Red設定を下記のような感じに（適当に作ったのであれですが）
![Node-RED](https://qiita-image-store.s3.amazonaws.com/0/41761/f7964475-233f-c30a-14b1-b3f045dfdf25.png)


```text:LineBotReply・入力/http
メソッド：POST
URL：/linebot/reply
```

```js:msgPayload・機能/function
return msg;
```

```text:Response・出力/http

```

```js:copyLineBotPayload・機能/function
msg.lineReplyPayload = msg.payload;
return msg;
```

* お天気とエリア情報のIDを紐付け。詳細情報はlambda版に記載しているため割愛

```json:setWeatherData・機能/function
msg.weatherID = {
  "北海道" : "016010",

・・・

  "沖縄" : "471010",
  "那覇" : "471010",
  "名護" : "471020",
  "久米島" : "471030",
  "南大東" : "472000",
  "宮古島" : "473000",
  "石垣島" : "474010",
  "与那国島" : "474020"
};
return msg;
```

```js:setWeatherAPI・機能/function
// 地域名のみにテキストを出来る限り削除する（自然言語理解に置き換えたい）
let cityName = msg.lineReplyPayload.events[0].message.text.replace( /[あ-ん]/g , "" ).replace( /天気/g , "" ).replace( /今日/g , "" )
.replace( /明日/g , "" ).replace( /明後日/g , "" ).replace( /教/g , "" )
.replace( /県/g , "" ).replace( /府/g , "" ).replace( /東京都/g , "東京" )
.replace( /？/g , "" ).replace( /\u\l\d/g , "" ).replace( /\s/g , "" ).replace( /\n/g , "" );

msg.url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=' + msg.weatherID[cityName];
return msg;
```


```text:weatherRequest・機能/http&nbsp;request
メソッド：GET
URL：未記入
出力形式：文字列
```

```js:createLineReplyPayload・機能/function
// LineBot用メッセージ整形
msg.weatherPayload = JSON.parse(msg.payload);
msg.payload = {
    "replyToken": msg.lineReplyPayload.events[0].replyToken,
    "messages": [
        {
            "type": "text",
            "text": msg.weatherPayload.location.city + 'の' + msg.weatherPayload.forecasts[0].dateLabel + 'の天気は' + msg.weatherPayload.forecasts[0].telop
        }
    ]
};
return msg;
```

```js:createSendHeader・機能/function
// LineBot用ヘッダー整形
msg.headers = {
    "Authorization" : "Bearer ■Channel Access Token■",
    "Content-Type": "application/json",
};
    
msg.url = "https://api.line.me/v2/bot/message/reply";
return msg;
```

```text:LineBotSend・機能/http&nbsp;request
メソッド：POST
URL：未記入
出力形式：文字列
```

デバッグ用

```text:msg.payload
対象：msg.payload
```

```text:msg
対象：msg
```

* Channel Access Tokenはべた書きしてますが、環境変数を設定できるらしいのでそちらに記載がよいかも。
    * ![環境変数.png](https://qiita-image-store.s3.amazonaws.com/0/41761/c6244cd7-31fe-3576-6b19-49824b65d6c9.png)


## LineDevelopers Webhook URL
* LineDevelopersのWebhook URLにNode-REDのAPIを記載
* Node-RedのURLは下記部分を合わせた物
    * Node-RedのURLとhttp in ノードのURL部分
    * ![IBM Bluemix](https://qiita-image-store.s3.amazonaws.com/0/41761/e104ce32-88ea-640e-ff09-598ad25200d5.png)
* 上記URLをLineDevelopersに記載
    * ![webhook.png](https://qiita-image-store.s3.amazonaws.com/0/41761/929b2d59-ee54-e571-07ec-7714eefda623.png)


# 動作確認
* メッセージを送ってみて、お天気が帰ってきたらOK。(明日などの判別部分は割愛してます）

![line](https://qiita-image-store.s3.amazonaws.com/0/41761/ba72ca2e-880d-8b8b-e359-57e09b1600c2.gif)

# 感想
* lambdaと同じことをNode-Redでも簡単に作成することが可能でした。
* lambdaと違い起動時間で課金されるので不要なインスタンスは起動しないように注意。
* どちらも便利。Node−Redでこんな作り方があるんだと驚き。