Node-REDの画面カスタマイズ方法

Node-REDの画面をカスタマイズする方法です。

Node-REDを別のExpressアプリケーションに組込む

Node-REDは別のExpressアプリケーションに埋め込むことが可能です。

やり方は別のExpressアプリケーションのpackage.jsonのdependenciesにnode-redを追加して以下のようにExpressアプリケーションを動かします。これをapp.jsとします。

app.js

var http = require('http');
var express = require("express");
var RED = require("node-red");

// Create an Express app
var app = express();

// Add a simple route for static content served from 'public'
app.use("/",express.static("public"));

// Create a server
var server = http.createServer(app);

// Create the settings object - see default settings.js file for other options
var settings = {
  httpAdminRoot:"/red",
  httpNodeRoot: "/api",
  functionGlobalContext: { }    // enables global context
};

// Initialise the runtime with a server and settings
RED.init(server,settings);

// Serve the editor UI from /red
app.use(settings.httpAdminRoot,RED.httpAdmin);

// Serve the http nodes UI from /api
app.use(settings.httpNodeRoot,RED.httpNode);

server.listen(8000);

// Start the runtime
RED.start();

ちなみにsetting.jsで設定していた内容はRED.initで渡さなければいけません。したがって上記のようにベタに書くか以下のようにsetting.jsをmodule.exportsしてrequireします。

setting.js

module.exports = {
  httpAdminRoot:"/red",
  httpNodeRoot: "/api",
  functionGlobalContext: { }    // enables global context
};

app.js

var http = require('http');
var express = require("express");
var settings = require("./settings"); // <- require
var RED = require("node-red");

// Create an Express app
var app = express();

// Add a simple route for static content served from 'public'
app.use("/",express.static("public"));

// Create a server
var server = http.createServer(app);

// Initialise the runtime with a server and settings
RED.init(server,settings);

// Serve the editor UI from /red
app.use(settings.httpAdminRoot,RED.httpAdmin);

// Serve the http nodes UI from /api
app.use(settings.httpNodeRoot,RED.httpNode);

server.listen(8000);

// Start the runtime
RED.start();

あとはapp.use("/",express.static("public"))と指定している通りapp.js同階層のpublicディレクトリで/（ルート）へのアクセスで表示するHTMLやCSSを配置します。

index.html

<link rel="stylesheet" href="style.css" />
<p class="test">Node-REDを組込んだExpressアプリケーション</p>

style.css

.test { color: red; }

これでnode app.jsをしてExpressアプリケーションを起動すると/は以下が表示され/redはNode-REDのEditorが表示されます。

Node-REDのEditor画面をカスタマイズする

試しにapp.use("/",express.static("public"))をapp.use("/red",express.static("public"))にしてみますと/はCannot GET /となって/redに上記で作成したHTMLが表示されます。

続いてpublic/index.htmlを削除してpublic/style.cssをpublic/red/style.min.cssに移動すると以下のようなEditorが表示されました。

これでEditor画面のカスタマイズのやり方がわかりました。Expressアプリケーションで静的コンテンツの場所を指定するapp.use("/",express.static("public"))とNode-REDでEditor画面を指定するhttpAdminRootを同じ場所にすると、そこに配置したHTMLやCSS、javascriptなどでEditorを描写してくれます。

ということはpublicにnode_modules/node-red/publicを丸っとコピーしてpublic/index.htmlにデフォルトのEditorのHTMLにして色々と修正してみると画面がカスタマイズできるはずです。

このようにしてenebular-agentは作られています。参考にしてみてください。