Node-RED×LINE botでお天気通知botを作る

#概要

この記事は2020/10/20に開催される「[Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交流会 コラボ](https://visualprogramming.connpass.com/event/188685/)」の資料です。

次の三つの要素を使用し、お天気通知LINE botを作ります！

- [Node-RED](https://nodered.jp/docs/user-guide/)
- [LINE bot](https://developers.line.biz/ja/docs/messaging-api/building-bot/)
- お天気API

完成すると次のように一定時間間隔でお天気を通知するLINE botが作れます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/48778774-0b4d-9b6b-5be0-e0f219cc3df2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/bf862d75-92a7-e333-f503-224e00e9d07b.png)

##ハンズオンの流れ

1. お天気APIから気象情報を取得
2. LINE botの準備
3. お天気情報をLINEに通知

#システム構成
enebularの上でNode-REDをうごかします。Node-REDでは一定周期で気象データをOpenWeatherMap APIを利用し取得します。取得したデータはNode-REDのフローで定型文にフォーマットします。フォーマットされたデータをLINE Messaging APIを利用してLINEアプリに通知する仕組みです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/aa301d67-c3bb-b970-187a-71abaeabcace.png)

#1. お天気APIから気象情報を取得
###1-1. お天気APIの準備

今回は気象情報取得のために「[OpenweatherMap API](hhttps://openweathermap.org/api)」を利用します。

サインイン後、「**API keys**」のタブを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/547c12cc-03c1-a2ac-ea0e-c4c1e8524f12.png)

API key を控えておきます。（コピー）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/d8aca4c2-e2e2-5173-6464-3dc6e03336c7.png)

###1-2. 気象データを取得する
ここまでに他のフローを作成していた場合、フローが混同しないように新しいワークスペースを作成します。何も作っていない場合はこの手順を省力できます。

enebularのNode-REDで新しいフワークスペースを作成します。
Node-REDエディタの右上にある**+**マークをクリックすると、作成する事ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/c0d4f3fa-510c-ab9b-99d0-28aa3e0985ee.png)

次に気象データを取得するためにOpenWeatherMapノードを追加します。
（OpenWeatherMap APIにはhttpリクエストで取得する方法もありますが、専用ノードがあるのでそちらを使用します。）

次の図の①→②の順にクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/6612c68c-ade2-23c6-ec36-05f90829cc8c.png)

ノード管理画面が表示されますので、次の図の①～③のように進めます。
①ノードを追加タブを選択。
②検索欄に”openwe”と入力。
③ノード名 **node-red-node-openweathermap** のノードを追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/2b40a666-ef3c-ab6c-8a23-edb2c2346c3a.png)

ノードの追加が完了すると、ノードパレットにOpenWeatherapノードが追加されます。
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/8fc3a966-9e1a-b51d-2e10-98fe41425000.png)

###1-3. 気象データ取得のフローを作成
気象データを取得して確認するには次の3つのノードを使用します。

- injectノード
- openweather mapノード（ノード両端に端子があるノード）
- debugノード 

これら3つのノードを次のように接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/fa3159f8-1d22-5d2b-4808-0aaebe66c2ac.png)

次にopenweather mapノードの設定を開き、必要事項を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/dedef3df-c596-6678-8bc0-ae4db5ffae4c.png)

- API key :　OpenWeatherMap APIのAPI keyを入力します。
- Language :　Japaneseを選択します。
- Current weather for :　そのままにします。
- Location :　City, Countryのままにします。
- 　City :　Tokyoにします。（後ほど変えて遊んでみてください!）
- 　Country :　Japanにします。（後ほど変えて遊んでみてください!）

設定ができたらフローのデプロイを行い、injectノードのボタンを押してみましょう。
ボタンを押す度、デバッグ画面にデータが表示されれば気象データの取得に成功しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/23c9bab2-d3c2-f1f9-48a4-8f7e5d9894d1.png)

データはjson形式となっており、ツリーを開くと様々なデータのまとまりであることが分かります。代表的なデータを次の表に示します。

|データ名|概要|
|----|----|
|weather|天気（英語）|
|detail|詳細天気（日本語）|
|tempc|気温（摂氏）|
|humidity|湿度|
|pressure|気圧|

ここまでで気象データの取得は完了です！

#2. LINE botの準備
###2-1.LINE botの作成
メッセージを通知させるLINE botを作成します。次のURLにアクセスしてLINE Developersのサイトを開きます。
https://developers.line.biz/console/?status=success

Providersを作成していない場合は、
[Line Messaging APIで簡単Line Bot作成（超初心者向け](https://qiita.com/YSFT_KOBE/items/8dc62ac40c5112df2ed3)
を参考にプロバイダの作成を行います。

プロバイダー名を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/13c00028-aa62-5fcf-cb66-ca8fdcb6bdf2.png)

プロバイダを作成後、画面を下にスクロースしていくと、
Create Messaging API channelとあるので選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/22aa0bf2-7f57-625d-10cd-c06e880590a1.png)

LINE botの初期設定画面が表示されます。
アイコンも設定できますが、今回は必須事項のみ設定します。

|項目|概要|
|---|---|
|Channel name|Messaging APIのチャンネル名|
|Channel description|チャンネルの説明|
|Category|このチャンネルのカテゴリ|
|Subcategory|カテゴリの詳細|

設定例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/c1ce74a5-4677-0771-d77f-ce2e1a6d0a5f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/447a3057-ce5f-961e-efb1-c590827de983.png)

ここまで設定できたら画面を下にスクロールし、許諾にチェックを入れて作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/8873dd2a-5cb1-2fc7-fdc9-edb88745eef0.png)


###2-2.LINE Messaging APIを利用したフローを作成
LINEのメッセージ通知にはおまじないのようなコードが必要ですが、専用のノードがありますので活用します。
パレットの管理からノードの追加で、次の名称のノードを追加します。

```
node-red-contrib-line-messaging-api
```

次のように検索すると引っかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/f1267dbe-31ea-1be1-2652-cbaf7fff8ea3.png)

LINE messaging APIノードの追加が完了すると、ノードパレットに次の3つのノードが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/743b476c-f426-44bf-eff9-b4310a24dbbf.png)

この中の**Push Messagieノード**を次のようにフローへ接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/0c6afcd1-faea-b6f3-1273-cc7343d743ed.png)

次にPush Messageノードの設定をします。
ここで、LINE Developersで作成したLINE botの情報を入力します。
必要な情報は次の3つです。

- Channel Secret
- Access Token
- Channel ID

上述の3項目は、LINE Developersで作成したLINE botのページに記載があります。

SecretはBasic settingsタブの最も下にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/9e75f3bf-17ac-f722-ff87-e768339ef8a5.png)

Channel IDはBasic settingsのタブににあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/eac94d4d-aadf-fb8d-7d4b-c6b1ba707d16.png)

Access TokenはMessaging APIタブの最も下にあります。
**ISSUE**と書かれた黒井ボタンをクリックすると発行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/c72c78f3-78e0-50f3-0721-09e1a777f151.png)

設定が完了したらデプロイします。

###2-3.LINE botへの通知を試す
LINE DevelopersのLINE botの画面に戻り、Messaging APIタブを開きます。
下にスクロースしていくと**QRコード**が表示されていますので読み取ります。
これにより、作成したLINE botを友達追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/a343c3da-2ca4-526c-b489-e7c710b527e6.png)


Node-REDの画面に戻りinjectノードのボタンをクリックすると、作成したLINE botからメッセージが通知されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/1a963cc3-4122-fe4f-2de6-0d5bea0149f4.png)


#3. お天気情報をLINEに通知
#3-1.通知文の定型フォーマットを作成する
今回は取得したお天気情報の中から、現在の気温を抜き出します。
定型フォーマットにするため、**templateノード**を使用します。

次のようにtemplateノードを、openweather mapノードの後に接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/e94f3b82-877f-80f3-ef2f-ac14553f30ef.png)

templateノードの設定を次のようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/f21411ea-847c-7cf0-823a-22aad2aae999.png)

```
ただ今の気温は {{payload.tempc}} ℃です！
```

これにより、openweather mapノードで取得したデータの中から、気温（摂氏）を抜き出して定型文を作成します。

以上で、injectノードのボタンをクリックすると、現在の東京の気温が通知されるLINE botの完成です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/8a1e0c80-63e4-fbc1-23b3-d4f46aac4dfe.png)


#おわりに
現状だとinjectノードのボタンを押す必要があったり、東京の気温だけなので、まだまだ拡張することができます！

皆さんの想像力を膨らませてアレンジしてみましょう！