　本記事は「Node-REDのGit機能を学ぶハンズオン(第1回)」で紹介した内容です。

　前回の記事では下の図を用いて、Node-REDのGit機能の概要を紹介しました。

本記事では、Node-REDのGit機能のうち赤色でハイライトした「フローを切り替える機能」を紹介します。はじめに概要の記事で紹介したフロー開発での問題をもう少し深掘りして解説します。

フロー開発での問題

[問題1] グローバル変数の衝突

Node-REDは、複数のノードの間で値を共有できるコンテキスト機能を備えています。これは一般的なプログラミング言語ではグローバル変数と呼ばれる機能です。このコンテキストを利用する際、フロー開発者は変数名が重複しないよう、慎重に変数名を割り当てるでしょう。しかし、多数のフローが存在する場合、変数名の管理が難しくなります。もし変数名が衝突した場合、フローは予期しない動作をすることがあります。

[問題2] HTTPエンドポイント同士の衝突

　Node-REDは、REST APIの開発でよく使われます。URLのパスは短めにしがちのため、多くのフロー開発者がエンドポイントの開発に関わると、パスが衝突することがあります。もし衝突した場合、アクセスすると、1つのエンドポイントのフローのみが使われます。別のフローを開発した開発者は、自分のフローが実行されない理由を調査するのに多くの時間を要してしまうでしょう。

[問題3] ダッシュボードに多くのユーザインターフェイスが混在

　Node-REDダッシュボードにも競合の問題があります。ダッシュボード画面は1つのURLからアクセスするため、異なるアプリのユーザインターフェイスが1つのダッシュボードに存在している状況が発生することがあります。この場合、アプリの目的ごとに異なるフローを開発する必要があります。

　フロー開発者は、Git機能のフローを切り替える機能を利用することで、これらの問題を解決できます。また1つのNode-RED環境上でさまざまなフローを並行して開発できるのも利点の一つです。

　ここからフローを切り替える手順を「PCバッテリの電力可視化ダッシュボード」と「PCのCPU利用情報ダッシュボード」の2つのダッシュボードアプリの例を用いて説明します。本説明の動作環境は、バッテリが搭載されたWindowsとmacOSのノートPCを対象としています。

1つ目のフローを作成

　前回記事の手順でGit機能を有効にした後、ブラウザから「http://localhost:1880」にアクセスしてフローエディタを開くと、以下の様なGit機能のダイアログが表示されます。

　このダイアログ上にある「プロジェクトの作成」ボタンをクリックします。

バージョン管理クライアントの設定

　次のダイアログでは、誰がフローを変更したかを識別するために使用されるフロー開発者の名前とメールアドレスを入力します。

プロジェクトの作成

　次のダイアログ画面では、次の様にフローの情報を入力します。

プロジェクト名
開発するアプリケーションの名前です。Gitリポジトリ名となるため、名前は小文字か数字で記載し、区切り文字はハイフン「-」を用いるのが一般的です。ここではフロー名として「power-monitoring」と入力しました。
説明
フローの説明を入力するための任意の入力欄です。日本語も使えるため「電力可視化ダッシュボード」と入力しました。

プロジェクト関連ファイルの作成

　次の画面では、フローファイル名を指定します。

　デフォルトの「flows.json」のままにしておきます。

認証情報ファイルの暗号化設定

　次の画面は、フローのクレデンシャルを暗号化するかどうかを選択する設定です。

　GitHubにフローを共有する際は、プライベートリポジトリの利用を推奨しています。リポジトリのアクセス制御はGitHubに任せるため、「暗号化を無効にする」のラジオボタンを選択します。

最後に「最初のプロジェクトの作成が完了しました!」というダイアログが出ます。「完了」ボタンを押すとワークスペースが表示されます(もし、Git機能を有効化する前に既にフローが存在していた場合は、フローが引き継がれているはずです。Git機能を無効にするとフローを復旧できるため、不要な場合はフローを削除しても問題ありません)。

ダッシュボードノードのインストール

　本フローでは、データの可視化を行うNode-REDダッシュボードを利用します。まず、フローエディタ右上のメニューから「パレットの管理」を選択します。

その後「ノードを追加」タブを開き、検索欄に「@flowfuse/node-red-dashboard」と入力し、ダッシュボードノードをインストールします。

下記ダイアログでは「追加」ボタンをクリックします。

　また、システム情報を取得できるWMIノードを利用するため「node-red-contrib-wmi」も同じ方法でインストールします。

電力可視化ダッシュボードのフローを読み込み

　次に「バッテリ電圧の時系列データ」をダッシュボードに表示するフローを読み込みましょう。フローエディタ右上のメニューから「読み込み」を選択します。

すると「フローを読み込み」ダイアログが表示されます。

　このダイアログの「サンプル」タブ内に、node-red-contrib-wmiというフォルダがあり、その中にWMIノードのサンプルフローが表示されているはずです。このサンプルの中から「電力可視化ダッシュボード」を読み込み、フローをデプロイします。

　このフローでは、左上の「10秒毎に定期実行」という名前のinjectノードがフローを定期実行しています。赤い「バッテリ情報取得」という名前を持つWMIノードは、injectノードからメッセージを受信するとPCのシステム情報を問い合わせ、バッテリ情報を取得します。このWMIノードはバッテリ関連の情報をメッセージとして次のノードに渡します。この中からバッテリ電圧の値のみに絞り込むため、黄色の「電圧値を代入」という名前のchangeノードを用いています。最後に「電圧(mv)」という名前のchartノードがバッテリ電圧の値を、ダッシュボード上に時系列グラフとして出力します。

電力可視化ダッシュボードの画面を表示

　ダッシュボードの画面を開くために、右側のダッシュボード2.0タブ内の「ダッシュボードを開く」ボタンをクリックします。ダッシュボード2.0のタブがない場合は、右端にある逆三角のボタンをクリックすると表示されます。

すると次の様な時系列グラフが表示されます。時間が経過したり、ACアダプタを抜き差ししたりすると、電圧の変化が見られるでしょう。

2つ目のフローを作成

　次に、ダッシュボードにPCのCPUの使用状況を表示する別のフローを作成しましょう。新規にフローを作成したい場合、フローエディタ右上のメニューにある「プロジェクト」から「新規」を選択します。

　すると「プロジェクトを作成」のダイアログが表示されるでしょう。

　このダイアログに、スクリーンショットの様に情報を入力して「プロジェクトを作成」ボタンをクリックします。すると、空の新しいワークスペースが表示されます。

ここに「フローを読み込み」ダイアログのWMIノードのサンプルから「PC使用状況ダッシュボード」のフローを読み込みます。

すると、以下の様な前とほぼ同じフローが表示されます。

　このフローでは、赤の「CPU情報取得」という名前のWMIノードがCPU関連の情報を取得する様になっています。黄色の「CPU使用率を代入」という名前のchangeノードがCPUの使用率のみに絞り込んだ後、「CPU使用率」という名前のgaugeノードが次の様なグラフで値をダッシュボードに表示します。

PC使用状況ダッシュボードの画面を表示

ダッシュボードを表示すると次のように、CPU負荷によって値が変化する様子を観察できるでしょう。

　もし、サンプルとして読み込んだ2つのフローが同じワークスペースに存在すると、バッテリ電圧値の時系列グラフと、このCPU利用率のグラフの両方が同じダッシュボード画面に表示されてしまいます。

　これらのアプリは利用目的が異なっており、各ダッシュボードを適切なユーザに表示するため、今回の様にフローを分けて開発する必要があります。

元のフローに戻る方法

前のフローを開きたい場合は、まずプロジェクトのメニューから「開く」を選択します。

　現れたダイアログには、Node-REDが管理している全てのフローが一覧表示されます。

最初に作成した「power-monitoring」を選択すると前のフローに戻ることができます。
　紹介した「フローを切り替える機能」を活用することで、フロー開発者は異なるフローの干渉を受けることなく、別々のフローとして並行して開発できる様になるでしょう。

次の記事では「フローの変更履歴の管理」について解説します。