最近、Node-Redを利用しています。

ワークフローシステムはn8nを今まで利用してきましたが、n8nとはまた違った使い方ができるので、面白いですね。

慣れると結構、奥深い感じがします。

node-redはコマンドが使えるので、結構、便利ですね。（n8nは使えないようなので。）

で、知らなかったのですが、ダッシュボードという機能を作ることが出来るらしいです。
（これもn8nは機能として無いのだよなぁ。結構、node-redって優秀。）

ダッシュボードは要するにWebページですね。

Node-Redと連動するので、非常に便利ですよね。

で、今回、そのダッシュボードを使ってみよう。と言う回です。

これが出来上がったページなのですが、ローカル環境でのみの表示なので、皆さんが実際には見ることが出来ないのですが。

JSONをダウンロードできるようにしましたので、興味あればダウンロードして試してみてください。

天気予報の情報に関して

サンプルで作ったのは、天気予報の画面です。

元となった情報は以下のサイトから情報を頂いております。

大変便利です。有難いです。

こちら↑のヘッダーページの説明から、調べると埼玉県熊谷の気象台情報が以下になります↓ので、その情報をNode-Redで加工して表示しているということです。

もし、ご自身で作る時は上のWebアドレスの（上記リンクの）最後の数字部分がお住まいの近くの気象台がありますので、それに変更すると良いということになります。

このサンプルワークフローをダウンロードできるようにしておきましたので、最後のリンクからご利用ください。

この中で利用しているダッシュボードは以下です。

ダッシュボードもいくつか種類があるので、ご注意ください。

ワークフローの説明

Injectノードを使って、最初はタイムスタンプとして使いました。

内容は以下です。

次はHttp requestノードですね。

メソッドにGETとURLに先述した熊谷気象台のURLを入力して終了、細かい所は気にせずOKです。

次はjsonノードですね。

繋げるだけだと思います。

ここから先はダッシュボードの設定です。

まず、グループを3つ用意して、その中にお天気アイコンや温度ゲージや、降水確率の表示などを作成していきます。

ここから先はノードの抜粋です。

初めにお天気アイコンの表示ですね。

templateノード（ダッシュボード）を使います。

テンプレートに以下を書きます。

<div style="text-align:center;">
  <img :src="msg.payload.forecasts[0].image.url" width="80" height="60">
</div>

明日、明後日の時は、配列を意味する[0]を[1][2]に変更してくださいね。

続いて温度はゲージを利用しました。

gaugeノードを選択してください。

Valueの値は以下です。

payload.forecasts[0].temperature.max.celsius

調整が結構、面倒かもしれません。

ここでも[0]を訂正して、明日、明後日の情報とします。

次は降水確率の文字を表示しますので、textノードを利用します。

Valueの値は以下です。

payload.forecasts[0].chanceOfRain.T00_06

こんな感じでやって行けばできるかと思います。

最後に、出来上がった、ワークフローを置いておきます。

Zipファイルの中身はjsonで、それをNode-Redで読み込んで貰えれば、表示できると思います。

ただ、クレーム等は受け付けませんので、ご自身で解決してください。

あくまで、勉強の資料程度だと思ってご利用くださいね。