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

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

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

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

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

```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`します。

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

```js: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を配置します。

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

```css:style.css
.test { color: red; }
```

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

<img width="379" alt="スクリーンショット 2015-12-09 16.34.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/9e192456-453a-ec4c-0c25-85b87527518f.png">

## 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が表示されました。

<img width="1187" alt="スクリーンショット 2015-12-09 16.46.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/aab19ae1-6217-94aa-756a-d79dabf7ee28.png">

これで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](https://github.com/enebular/enebular-agent)は作られています。参考にしてみてください。