Node-REDをアプリケーションに組み込む（Electron、Express）

2024年1月9日 2024年1月9日

管理人

はじめに

　今回はElectronで作成しているアプリケーションに、Node-REDを組み込んでみました。

　Node-REDのユーザーガイドに、Expressアプリケーションへの組み込みのサンプルがあったのでお試しです。

▼こちらのページに書かれていました。

https://nodered.jp/docs/user-guide/runtime/embedding

　Electronと同様に、ExpressもNode.js用のフレームワークです。両者ともnpmコマンドを使うので、すんなり組み込むことができました。

▼Electronの環境構築についてはこちら。

▼作成中のデスクトップアプリケーションはこちら。いろいろ入っています。

https://github.com/404background/code-planner

Expressのアプリケーションに組み込む

Node-REDを起動する

　プログラムは上述した、ユーザーガイドの「既存アプリケーションへの組み込み」のページのものを使用します。node-red.jsとして保存しておきます。

　あとでElectronで表示する場合は、package.jsonがあるディレクトリに保存してください。

　ExpressとNode-REDをインストールします。


 npm install express && npm install node-red

　以下のコマンドを実行すると、Node-REDが起動します。


 node ./node-red.js

　別のコマンドプロンプトで起動させたい場合は、startをつけて実行します。


 start node ./node-red.js

エディタ画面を表示する

　Expressでの起動方法だとNode-REDのsetting.jsが利用されないので、設定はnode-red.js内に記述する必要があります。サンプルプログラムでは書かれています。

　それに伴い、通常はhttp://127.0.0.1:1880/やhttp://localhost:1880のアドレスでエディタ画面を開くのですが、今回はアドレスが違います。

　server.listen(8000);となっているので、ポート番号は8000です。また、settingsで設定されているhttpAdminRootは/redになっているので、http://localhost:8000/redにブラウザでアクセスするとエディタ画面が開きます。

　settingsをもう少し見てみます。

var settings = {
    httpAdminRoot:"/red",
    httpNodeRoot: "/api",
    userDir:"/home/nol/.nodered/",
    functionGlobalContext: { }    // グローバルコンテキストを有効化
};

　userDirは/home/nol/.noderedとなっています。Windowsの場合は、C:\home\nol\.noderedフォルダが作成されて、その中にフローが保存されます。

　相対パスを指定することができるので、Electronアプリケーションのディレクトリに保存するのが分かりやすいかと思います。私は"./.node-red/"にしました。

ダッシュボード画面を表示する

　node-red-dashboardをよく使うのですが、これもアドレスが違います。

▼node-red-dashboardのページはこちら

node-red-dashboard (node) - Node-RED (nodered.org)

　Settingsのところに書かれているのですが、http Rootに/uiを付け加えたアドレスにアクセスすると、ダッシュボード画面が表示されます。

　http Rootのアドレスは、サンプルプログラムのsettingsで設定されているように"/api"です。つまり、http://localhost:8000/api/uiにアクセスすると表示されます。

Electronのアプリケーション内で表示する

　ElectronでWebページを埋め込む方法として、iframe、WebView、BrowserViewの3つがあります。今回はWebViewを使います。

▼詳しくはこちらをご覧ください。

https://www.electronjs.org/ja/docs/latest/tutorial/web-embeds

　なお、ElectronではWebViewは推奨されていません。Chromiumのwebviewタグに基づいているからだそうです。

▼こちらに書かれています。

https://www.electronjs.org/ja/docs/latest/api/webview-tag#warning

　私のアプリケーションにはwebviewで書いてしまったのですが、特に問題なく動作しています。

　HTMLで以下の要素を書くだけなので、iframeでもほとんど変わらないと思います。

<webview src="表示したいURL" id="要素のID"><webview>

　あとで「ボタンを押したときにURLを変更する」といった動作にするため、IDを指定しています。URLにはNode-REDのエディタ画面などを指定してください。

▼実際にアプリケーションに組み込んだ状態がこちら。

最後に

　フローを保存するディレクトリを指定できるので、アプリケーション毎に保存できるようになりました。フローが増えすぎると管理が大変なので、便利になりそうです。

　作成中のアプリケーション内では、Jupyter Labも表示できます。これでJavaScriptとPythonを実行できるというわけです。

　npm run setupだけで必要なものがインストールされるようになっています。ご興味があれば、GitHubのリポジトリをご覧ください。package.jsonのscriptsに用意しています。WindowsでNode-RED MCUの環境を構築できるように、バッチファイルも用意しました。ユーザーの環境に左右されそうですが...