はじめてのNode-RED（2）

投稿日:

Node-REDの起動から、はじめてのアプリ開発まで手順を紹介します

Node-REDはブラウザで動きます。起動させてみましょう。

1.PCのブラウザで、リモートのラズパイに接続できるか検査

自分のラズパイ番号でアクセスします。WEBページが表示されたら成功。

2. Node-RED起動コマンド

$ node-red start
9 Aug 17:39:13 - [info] サーバは http://127.0.0.1:1880/ で実行中です

3. PCのブラウザで、Node-REDにログインする

Node-RED 開発画面が表示されたら成功。

アプリ開発してみる

はじめてのNode-REDアプリは、現在の東京の天気を表示する「天気アプリ」を作ってみよう。

1. [フロー1]が、プログラムコードを書くところ。フロー名を変更する

2. お天気APIを試してみる［Open-Meteo API］

Open-Meteo APIは、無料で使えて、アカウント登録が不要な、いつでも使えるWEBサービス（API）です。
APIとは、Application Programming Interface（アプリケーション・プログラミング・インターフェース）の略で、「アプリやプログラム同士が会話するためのルール」です。

ブラウザで下記URLにアクセスする。
東京の位置は、緯度 35.68, 経度 139,76 です。今の天気を取得します。

https://api.open-meteo.com/v1/forecast?latitude=35.68&longitude=139.76&current_weather=true

下記のようなデータを取得できたら成功。よく読むと、温度や風速などが記載されています。最後の[weathercode]が天気コードです。0, 1が快晴。2, 3が曇り。45は霧など。

{"latitude":35.7,"longitude":139.75,"generationtime_ms":0.0463724136352539,"utc_offset_seconds":0,"timezone":"GMT","timezone_abbreviation":"GMT","elevation":12,"current_weather_units":{"time":"iso8601","interval":"seconds","temperature":"°C","windspeed":"km/h","winddirection":"°","is_day":"","weathercode":"wmo code"},"current_weather":{"time":"2025-08-09T10:00","interval":900,"temperature":27.4,"windspeed":5.4,"winddirection":172,"is_day":0,"weathercode":1}}

3. 使うフローを並べる。ノード同士は線でつなぐ。

［inject］［http request］［json］［function］［text］

4.［http request］に天気APIを設定する

1から4まで入力し［完了］を押す

5.［Function］にJavaScriptコードを書く

名前とJavaScriptコードを書いて［完了］する。

const weather = msg.payload.current_weather;
msg.payload = `現在の気温は ${weather.temperature}℃、風速は ${weather.windspeed}m/s です。`;
return msg;

6.［Text］にJavaScriptコードを書く

グループの新規ui_group、タブの新規ui_tab、そして名前の３つを選び、[追加]ボタンを押す。たぶん３回。

7.［デプロイ］する。フローを、ラズパイに書き込む。

8. PCのブラウザで、Node-REDのダッシュボード（UI）を表示する

自分のラズパイ番号です。

9. 動作をテストする。[タイムスタンプ]の左ボタンを押す。

10. デバッグを表示する。温度を読めないというエラー

10.5. Functionのエラーのないコード

// JSON文字列をオブジェクトに変換
const data = JSON.parse(msg.payload);

// 天気情報を取り出す
const weather = data.current_weather;
const temp = weather.temperature;
const wind = weather.windspeed;
const code = weather.weathercode;

// 天気コードを日本語に変換（任意）
const weatherNames = {
  0: "快晴 ☀️",
  1: "晴れ 🌤️",
  2: "曇り ☁️",
  3: "雨 🌧️",
  45: "霧 🌫️",
  61: "小雨 🌦️",
  80: "にわか雨 ⛈️"
};

const name = weatherNames[code] || "不明な天気";

// 表示用の文字列を設定
msg.payload = `現在の天気は ${name}、気温は ${temp}℃、風速は ${wind}km/h です`;

return msg;

11. APIの結果を検査する。[debug]ノードを追加する

12. デプロイしたら、タイムスタンプのボタンを再実行する

13. ダッシュボードに天気が表示される（はず）

ブラウザでダッシュボードを表示します。

14. ダッシュボードにボタンを表示してみる。［ui_button］を追加

ダッシュボードを表示してみる。横長の緑色のボタンが表示されます。ボタンには「天気API更新」と表示されているはず。

15. [天気API更新]ボタンの見た目をレイアウト変更する

天気アプリのレイアウトを変更し、横幅を小さい［2］にして、ブラウザで変化したことを確認します。

16. [function]を追加し、JSONノードにつなぐ。chartを追加する。

17. ２つめのfunctionノードには下記を追加します。名前は「気温と風速を抽出」

const data = JSON.parse(msg.payload).current_weather;

const tempMsg = {
  topic: "気温（℃）",
  payload: data.temperature
};

const windMsg = {
  topic: "風速（km/h）",
  payload: data.windspeed
};

return [tempMsg, windMsg];

18. 風速を追加する。[function]の出力を[2]にする

まとめ

■できたこと

1.ダッシュボード作成とレイアウト変更

2.ノードの設定とデバッグ

3.ノードでのJavaScriptプログラミング

■作ったアプリ

1.天気, 気温, 風速を表示する

2.ボタンで更新し、温度と風速のグラフを表示する

コメントを残す