ここでは、Node-REDエディタの基本的使い方を説明します。Node-REDエディタはとても多機能ですので、ここでは基本的な操作だけを紹介します。その他の機能は、おいおい実際のアプリケーションフローの作成をしていく中で、おぼえていってください。

Node-RED User Group JapanのWebサイトには、より詳細のエディタガイドが掲載されています。是非これも参照してください。

https://nodered.jp/docs/user-guide/editor/

なお、以下の説明で出てくるスクリーンショットや動画は、旧バージョンのNode-REDエディタを使用している部分がありますが、最新バージョンと詳細部分で異なるところがあります。理解の妨げにはならないと思います。ご了承ください。

Node-REDエディタ各部の名称と基本操作

node-REDエディタの起動画面の各部の名称をもう一度確認しておきましょう。

基本の作業は、パレットから希望するノードをドラッグして、ワークスペース上にドロップします。各ノードには左側に入力メッセージを受けるポートが一つ、右側にメッセージを出力するポートが一つあるいは複数あります。（ノードの仕様により、入出力ポートのないノードもあります。）Node-REDは、各ノードの入出力メッセージをつなげて、メッセージの受け渡しのリレーでフローを作りアプリケーションを作成します。各ポートからつなぎたいポートへマウスドラッグするとノード同士をつなぐことができます。ドラッグの方向はどちらからでも同じで、メッセージのフローは、必ず左の入力ポートから入り、右の出力ポートから出力されます。ノードやノード間のリンクを選択しキーボードの「DEL」キーで削除ができます。編集結果は右上の［デプロイ］ボタンを押すまで有効になりません。デプロイは忘れがちですので要注意です。また、［デプロイ］せずに終了したりすると編集結果がクリアされてしまいます。

ワークスペース上のノードをダブルクリックすると、そのノードのプロパティの設定画面が表示されます。ノードの機能説明や、各プロパティに関する説明が、後ほど説明するサイドパーのヘルプタブに表示されます。

プロパティには必須項目のものがあり、このプロパティが設定されていない場合、ノードには赤い△マークがつき、デプロイする際に警告が出ます。新しくドロップされたノードやプロパティを編集したノード、ワークスペースでの位置が変更されたノードには青い丸印がつき、有効化するにはデプロイを実行する必要があることを表示してくれます。

ワークスペースのタブ

ワークスペースは、複数のタブを持つことでき、それぞれにフローを作成することができます。また、タブ間でメーッセージをやりとりができますので、複雑なフローを作成する際は、複数のタブに分けて作成できます。タブは＋ボタンで追加できます。タブをダブルクリックすると、タブ名称を変更できる他、詳細説明を記述する（あまり使いませんが・・・）ことができます。重要なのは、このフローの編集画面の最下部に無効・有効ボタンです。これでフローを一時的に無効化（存在はするが動作はしない状態に）したり、有効に戻したりできます。無効化すると、対象のタブのワーススペースが薄く表示され、ノード間の接続が破線に変わります。

ノードパレット

フロー作成に使用するノードは、ノードパレットから選択します。多くのノードが登録されると、目的のノードを探すのが難しくなりますが、パレットにはカテゴリーをたたむ機能と検索機能がありますので、上手く使うと効率よく目的のノードを見つけられます。

パレット下部のある二重のｖと＾に火カーソルを入れると、

  • 全カテゴリーを折り畳む
  • 全カテゴリーを展開

という表示が出ます。このボタンでカテゴリーの展開と折りたたみができます。折り畳まれたカテゴリーをクリックするとそのカテゴリーのみ展開されるので、探しやすくなります。また、パレット上部のカテゴリーを検索ウインドウに、目的のノード名称の１部を入力すると該当するノードがパレットに表示されます。

サイドバー

サイドバーには色々な情報が表示される以下のタブがあります。右上の下向き三角マークを押すと一覧が見られます。

  • ノードの情報を表示
  • ヘルプ
  • デバッグメッセージ
  • ノードの設定を表示
  • コンテキストデータ
  • ダッシュボード2.0

古いダッシュボードパッケージ、node-red-dashboardが使用されていると、ここに

  • Dashboard

も表示されます。ダッシュボード2.0と間違わないようにしてください。

以下の動画にあるように、サイドバーは折り畳むことができます。サイドバーで通常よく使う機能は、ヘルプとデバッグメッセージ、Dashboardです。ダッシュボードは、ダッシュボードのレイアウトを決める機能で、ダッシュボードアプリ作成入門編のところで紹介しますので、ここではヘルプとデバッグメッセージについて説明しましょう。ヘルプは選択したノードの機能やプロパティの設定に関するヘルプが表示されます。使用するノードの開発者によって、記述内容や順番が異なるので注意が必要です。ia-cloud関連ノードは、ノード機能概要・プロパティ・入力メッセージ・出力メッセージの順に説明し、最後に詳細機能を説明するのを原則としています。サイドバーの幅も変えられるので広げて読むことができます。

デバッグメッセージは、デバッグノードを使ってノード間でやり取りされるメッセージをモニタする時、メッセージの内容が表示されるものです。またノードでなんらかのエラーが発生した場合も、このデバッグメッセージエリアにエラーメッセージや警告が表示されることがあります。デバッグノード右端には、出力を有効化・無効化するボタンがあり、このボタンだけは操作後デプロイを行わなくてもすぐに有効となります。

フローの書き出し

作成したフローは、外部へ書き出すことができます。［メインメニュー］ー＞［書き出し］で、選択した一部分・タブ全体・全てのタブのいずれかを書き出すことができます。書き出し先は、ラズパイ上のライブラリー（/home/pi/.node-red/lib/flows/にあります。）かクロームブラウザのクリップボードないしは、クロームブラウザのダウンロードです。クリップボードに書き出した場合は、メモ帳やテキストエディタに貼り付け保存します。ダウンロードした場合は、クロームブラウザの設定によるダウンロードフォルダーに保存されます。書き出し形式として、

  • インデントのないJSONフォーマット
  • インデント付きのJSONフォーマット

が選択できます。インデントをつけると、読みやすくなりますが、コンピュータにとってはどちらも同じです。

最新バージョンのNode-RED4では、書き出すフローの内容をノード単位で確認できますが、書き出されるデータはJSON形式のデータで全く同じです。また、書き出し先の表示[クリップボード][ライブラリ]が、[クリップボード][ローカル]と変わっていますし、多少ボタンの位置が異なりますが、動作に違いはありません。

フローの読み込み

書き出したフローは、読み込むことができます。［メインメニュー］ー＞［読み込み］で、読み込みのウインドウが開きます。読み込み元は、クリップボード・ラズパイ上のユーザライブラリー・Node-REDエディタの持つサンプルライブラリーのいずれかです。PCやMac上でフローをクリップボードにコピーし、フローデータの貼り付け欄にペーストします。読み込み先を現在のタブか新規のタブか選択できます。ユーザライブラリーには、先に書き出したフローがあり、サンプルライブラリーには、色々なサンプルフローがありますので、読み込んで使用することができます。

最新バージョンのNode-RED4では、読み込み元の表示[クリップボード][ライブラリ]が、[クリップボード][ローカル][サンプル]と変わっていますし、多少ボタンの位置が異なりますが、動作に違いはありません。[サンプル]には色々なサンプルフローが格納されていますので、参考にすることができます。

ノードの入出力メッセージ

Node-REDノードは入力メッセージを受け、そのメッセージを処理して出力メッセージを出力するのが基本機能です。そのメッセージの構造はJavascriptのオブジェクトとして構造化されています。メッセージ直下の項目としては、payload（ペイロード）やtopic（トピック）が一般的によく使われていて、通常はこのpayloadに出力データが格納されるノードが多いです。

  • メッセージ（msg）
    • payload（一般的に使用される項目名）
    • topic（一般的に使用される項目名）

msg.payload、msg.topic と表記されます。

このメッセージが次のNode-REDノードへの入力メッセージとなります。メッセージが入力されるノードの多くは、同じくpayload（ペイロード）やtopic（トピック）を処理対象としますが、各ノードの入力仕様を確認ください。処理対象のメッセージ構造が異なる場合は、[change]ノードなどを使用してメッセージ項目の変更などが必要になることがあります。この入出力メッセージは[debug]ノードを使うとサイドバーのデバッグタブ（虫のアイコン）にTree表示され、右三角をクリックすることで、順次展開され内容を確認できます。

ia-cloud・Node-REDプラットフォームで提供される各ノードは、payload（ペイロード）やtopic（トピック）の他に、ia-cloudオブジェクトメッセージを入出力します。ia-cloudオブジェクトの基本構造は、以下のようになります。詳細は次章で説明します。

  • request（ia-cloudオブジェクトのリクエスト内容）
    • dataObject（ia-cloudデータオブジェクト）
      • contentType（データオブジェクトのモデルタイプ）
      • objectContent（ia-cloudオブジェクトデータの内容）