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

はじめに

この記事は、2020年に書いていた以下の enebular（Node-RED）の記事にも登場している、 「天気情報の取得（OpenWeatherMap の API を利用）」 と、 「Node-RED のダッシュボード上での情報表示」 に関するものです。
以下の記事では、Node-RED を用いていましたが、今回はそれをオンライン上で利用できる enebular を使って実装します。

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

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

表示結果とフロー

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

ダッシュボード上での表示結果

ダッシュボード上で表示した結果は、以下の通りです。

今回、「仙台・東京・さいたま」の 3箇所の天気情報を API 経由で取得し、都市ごとの API のレスポンスに含まれる情報のうち、3つを取り出してテーブルで表示しています。

利用したフロー

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

今回、お試し用に実装した処理（フロー）は、デバッグ用の情報表示の処理も含め、以下のとおりです。

上記の処理のおおまかな流れは、以下となっています。

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

処理の内容の補足1：天気情報の取得まで

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

説明する部分

フローの中で「天気情報の取得まで」に関わる主な部分は、以下の赤枠で囲んだ部分です。なお、フローの最初に置いている injectノードは、特別な設定変更は必要ないため、説明は省略します。

この赤枠で囲んだ部分について、「後段の部分（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箇所のみです。

具体的には以下です。

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

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

国・都市の指定

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

ここでは、Changeノードを使い、国と 3つの都市を指定しています。
injectノードの直後の Changeノードの設定は以下のとおりです。国の指定は、 msg.location.country に japan を指定しています。

次は、上記の Changeノードから 3つに分岐した後の Changeノード（都市を指定するもの）についての説明です。以下の画像は　msg.location.city に sendai を指定している例です。この他の 2つは、都市名の部分が saitama ・ tokyo になっています。

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

API で取得できる天気情報について

上記の処理の流れでAPI を使うことにより、天気情報が取得できます。その API のレスポンスの 1つをサンプルで示します。

API のレスポンスは、様々な項目を中に含むオブジェクトです。最終的には、この中の一部の情報のみを取り出して利用します。

処理の内容の補足2：天気情報をテーブル表示

ここからは処理の後半の部分（API で取得した情報の整形〜テーブル表示）について説明します。

説明する部分

説明対象となるのは、フローの以下の部分です。

処理の流れ

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

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

templateノードを用いた整形

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

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

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

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

これを、以下の設定を行った templateノードで JSON形式にまとめます。

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

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

joinノードでデータをまとめる

次に joinノードを用いた処理です。

この joinノードの後に使うテーブル表示を行うためのノードは、規定のフォーマットに従った入力を受け付ける仕様です。そのため、その仕様に合わせたデータのまとめを行います。
※ 仕様については、冒頭で掲載した記事内の「node-red-node-ui-table を試す： その1」で触れていますので、そちらをご参照ください

joinノードでは、3つの入力を配列としてまとめるよう、以下の設定を行います。

この joinノードの具体的な出力例は、以下のとおりです。配列の中に 3つのオブジェクトが含まれる形になっているのが分かります。

ダッシュボード上でのテーブル表示

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

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

グループ・タブの設定を行った後、tableノードを以下のように設定してください。

Size の項目は、実際の表示を確かめながら「6x3」という値にしました。

処理の実行

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

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

そうすると上で示したように、ダッシュボード上で東京都・さいたま・仙台の天気がテーブル形式で表示されます。

おわりに

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

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

追記： 新機能でフローの見た目をスッキリさせる

この記事を Facebookグループで共有したところ、@wyamazakさんから 「enebular で Node-RED 3.0 が使えるようになっているので、Node-RED 3.0 の新機能の "線の分岐" を使うと良い」 というコメントをもらえました。

その「線の分岐」をさっそく試してみたところ、こんな感じで流れをスッキリした感じにできました。

線の分岐を利用するための操作方法について、Qiita にやり方が説明されている記事がありましたので、具体的な操作方法はそちらをご参照ください。