【enebular（Node-RED）】天気情報を API で取得してダッシュボード上でテーブル表示

## はじめに
この記事は、2020年に書いていた以下の enebular（Node-RED）の記事にも登場している、 __「天気情報の取得（[OpenWeatherMap](https://openweathermap.org/) の API を利用）」__ と、 __「Node-RED のダッシュボード上での情報表示」__ に関するものです。
以下の記事では、[Node-RED](https://nodered.org/) を用いていましたが、今回はそれをオンライン上で利用できる [enebular](https://www.enebular.com/ja/) を使って実装します。

●【Node-RED 2020】ダッシュボードで LED表示と表組みでの情報提示（天気情報の表示も） - Qiita
　https://qiita.com/youtoy/items/0f04ff829fb21e79892d

上記の記事の最後で軽く触れていた __応用事例「node-red-node-ui-table を試す： その2」の詳細については、もし余裕があれば記事にできたらと思っています。__ と書いていたのですが、それからずいぶんと時間が経過してしまいました...

## 表示結果とフロー
今回作る内容の詳細は後で補足する形で、まずはダッシュボード上での天気情報の表示結果と、その処理に利用したフロー・大まかな流れを記載します。

### ダッシュボード上での表示結果
ダッシュボード上で表示した結果は、以下の通りです。
![ダッシュボード上での表示結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fc8c8b29-a6f3-5b12-310f-91d09a322efc.png)
今回、「仙台・東京・さいたま」の 3箇所の天気情報を API 経由で取得し、都市ごとの API のレスポンスに含まれる情報のうち、3つを取り出してテーブルで表示しています。

### 利用したフロー
enebular（Node-RED）を使うと、ビジュアルプログラミングで処理を作成できます。

今回、お試し用に実装した処理（フロー）は、デバッグ用の情報表示の処理も含め、以下のとおりです。
![利用したフロー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d93b6846-c677-6892-a3b2-940952c22bf9.png)
上記の処理のおおまかな流れは、以下となっています。

- 処理の流れ
   1. 処理実行用のinjectノードを準備（※ ボタン押下で処理を実行）
   1. Changeノードを複数用いて天気情報を取得する国・都市を指定
   1. [node-red-node-openweathermapノード](https://flows.nodered.org/node/node-red-node-openweathermap)で天気情報を取得
   1. API のレスポンスで得られた情報の一部を特定の JSON形式に整形して取り出し
   1. 上記のレスポンスの整形データが 3つ得られるので配列にまとめる（※ この後に使う処理の仕様に合わせる）
   1. [node-red-node-ui-tableノード](https://flows.nodered.org/node/node-red-node-ui-table)を使い入力データ（JSON の配列）をテーブル形式で表示

## 処理の内容の補足1：天気情報の取得まで
ここから、上記の処理の内容を　「1〜3」と「4〜6」の部分の 2つに分けて補足していきます。まずは、上記3 の「天気情報の取得まで」の話です。

### 説明する部分
フローの中で「天気情報の取得まで」に関わる主な部分は、以下の赤枠で囲んだ部分です。なお、フローの最初に置いている injectノードは、特別な設定変更は必要ないため、説明は省略します。
![天気情報の取得](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/19dae45b-aac9-9d5e-7cad-81b6acf2a7d9.png)

この赤枠で囲んだ部分について、「後段の部分（API利用）」⇒「前段の部分（API に設定する国・都市の設定）」という順で説明していきます。

### node-red-node-openweathermapノード関連
後段の処理の「node-red-node-openweathermapノード」を用いた天気情報API の利用について、まずは下準備について触れます。

#### 利用にあたっての準備
天気情報の取得に APIキーが必要になるので、 https://openweathermap.org/ でキーの取得を行ってください（※ キーの取得の方法は、検索すると参考になる記事がいろいろ出てきます）。

また、このノードは、enebular のデフォルトに含まれてないノードなので、「パレットの管理」からノードの追加を行ってください。そして、2つ追加されるノードのうち、片方（「openweathermap」という名前のもの）を使います。

#### node-red-node-openweathermapノードの設定
node-red-node-openweathermapノードの設定について、デフォルトの設定を修正するのは 2箇所のみです。
![node-red-node-openweathermapノード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5d0585b2-677a-12ee-01ab-107b6d7c0651.png)
具体的には以下です。

- 「API Key」に APIキーの情報を入力
- 「Language」を Japanese に変更

設定項目に City・Country という欄がありますが、これらは前段の処理で指定する形になるため、空欄のままで大丈夫です。

### 国・都市の指定
node-red-node-openweathermapノードの入力にあたる、前段の処理について説明します。

ここでは、Changeノードを使い、国と 3つの都市を指定しています。
injectノードの直後の Changeノードの設定は以下のとおりです。国の指定は、 `msg.location.country` に `japan` を指定しています。
![国の指定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b69ac114-acb3-e228-1281-ff23a2bd8437.png)

次は、上記の Changeノードから 3つに分岐した後の Changeノード（都市を指定するもの）についての説明です。以下の画像は　`msg.location.city` に `sendai` を指定している例です。この他の 2つは、都市名の部分が `saitama` ・ `tokyo` になっています。
![都市の指定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/980e4d85-4e0a-b7c3-38e4-5028b0053ec9.png)

ここで説明した Changeノードを組み合わせた内容の出力を、先ほど説明した node-red-node-openweathermapノードに入力することで、3回の API 呼び出しを行えます。

### API で取得できる天気情報について
上記の処理の流れでAPI を使うことにより、天気情報が取得できます。その API のレスポンスの 1つをサンプルで示します。
![東京の天気情報（API で取得したもの）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/35687feb-e950-97f3-ae6c-fe7226073973.png)
API のレスポンスは、様々な項目を中に含むオブジェクトです。最終的には、この中の一部の情報のみを取り出して利用します。

## 処理の内容の補足2：天気情報をテーブル表示
ここからは処理の後半の部分（API で取得した情報の整形〜テーブル表示）について説明します。

### 説明する部分
説明対象となるのは、フローの以下の部分です。
![天気情報をテーブル表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/af8967ba-0b5a-cce8-5dc8-1fc63db38efe.png)

### 処理の流れ
処理の流れは、上で書いていたとおり、以下となります。

「API のレスポンスで得られた情報の一部を整形」 ⇒ 「3つの都市について、それぞれ整形後のデータが得られるので配列にまとめる（※ この後に使う処理の仕様に合わせるため）」 ⇒ 「入力データをテーブル形式で表示」

#### templateノードを用いた整形
「API のレスポンスで得られた情報の一部を整形」という部分を説明します。

今回、API で得られた情報の中で、以下を抜粋して表示対象とします。

- 場所
- 天気の詳細
- 気温

APIレスポンスとして得られたオブジェクトのキーでいうと、「location・detail・tempc」の 3つです。

これを、以下の設定を行った templateノードで JSON形式にまとめます。
![templateノードの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5cb2e2c8-038e-2c1a-11a8-8aa760fdc2ec.png)

テンプレートの中で指定した内容を、コピペできるように以下に抜粋します。

```json
{
  "場所": "{{payload.location}}",
  "天気": "{{payload.detail}}",
  "気温": "{{payload.tempc}}"
}
```

#### joinノードでデータをまとめる
次に joinノードを用いた処理です。

この joinノードの後に使うテーブル表示を行うためのノードは、規定のフォーマットに従った入力を受け付ける仕様です。そのため、その仕様に合わせたデータのまとめを行います。
※ 仕様については、[冒頭で掲載した記事内の「node-red-node-ui-table を試す： その1」](https://qiita.com/youtoy/items/0f04ff829fb21e79892d#node-red-node-ui-table-%E3%82%92%E8%A9%A6%E3%81%99-%E3%81%9D%E3%81%AE1)で触れていますので、そちらをご参照ください

joinノードでは、3つの入力を配列としてまとめるよう、以下の設定を行います。
![joinノードの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5e43e6a3-c60a-e902-289f-0f4923f60551.png)
この joinノードの具体的な出力例は、以下のとおりです。配列の中に 3つのオブジェクトが含まれる形になっているのが分かります。
![joinノードの出力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e62acf02-03b3-c216-afc9-eefc8e0a341d.png)

#### ダッシュボード上でのテーブル表示
最後に node-red-node-ui-tableノードを用いた、ダッシュボードでのテーブル表示について説明します。

node-red-node-ui-tableノードに関連して、ダッシュボードの設定（グループ・タブの設定）を行う必要があります。これについては、[過去に書いた Qiita の記事](https://qiita.com/youtoy/items/61e4a6c9061d68f09e3b)で説明していますので、そちらをご参照ください。

グループ・タブの設定を行った後、tableノードを以下のように設定してください。
![tableノード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4686f049-00d8-c6f4-9541-c76d58e67e6d.png)
Size の項目は、実際の表示を確かめながら「6x3」という値にしました。

## 処理の実行
ここまでの手順を進めたら、後は「フローの保存」と処理の実行を残すのみです。

フローを保存した後、injectノードのボタンを押して処理を実行してみてください。その後、ダッシュボードを開いてみます。

そうすると上で示したように、ダッシュボード上で東京都・さいたま・仙台の天気がテーブル形式で表示されます。
![ダッシュボード上での表示結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fc8c8b29-a6f3-5b12-310f-91d09a322efc.png)

## おわりに
今回、 __「天気情報の取得（[OpenWeatherMap](https://openweathermap.org/) の API を利用）」__ と、 __「Node-RED のダッシュボード上での情報表示」__ を行いました。そこで enebular を用いることで、Node-RED の開発環境を用意することなく、ビジュアルプログラミングによる API利用・情報の可視化を行うことができました。

今回の内容は、API の部分を他のものに変更して活用することもできます。ぜひ、今回の内容や、別の API との組み合わせを試してみてください。

## 追記： 新機能でフローの見た目をスッキリさせる
この記事を Facebookグループで共有したところ、[@wyamazak](https://twitter.com/wyamazak)さんから __「enebular で Node-RED 3.0 が使えるようになっているので、Node-RED 3.0 の新機能の "線の分岐" を使うと良い」__ というコメントをもらえました。

その「線の分岐」をさっそく試してみたところ、こんな感じで流れをスッキリした感じにできました。
![線の分岐を適用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c7ec6274-4094-620c-8137-8bda6d21bfaa.png)
線の分岐を利用するための操作方法について、[Qiita にやり方が説明されている記事がありましたので、具体的な操作方法はそちらをご参照ください](https://qiita.com/HiroyasuNishiyama/items/bf31b87977a7d929a932#%E3%83%8E%E3%83%BC%E3%83%89%E9%96%93%E3%83%AF%E3%82%A4%E3%83%A4%E3%81%AE%E5%90%88%E6%B5%81%E7%82%B9-%E3%82%B8%E3%83%A3%E3%83%B3%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)。