FlowEditorをカスタマイズ (settings.jsで指定)

目的

Node-REDを自前で複数運用すると、いまどの環境で作業しているかがわからなくなることがあります。Flow Editorをカスタマイズすることで

• どの環境向けにFlowを書いているか分かる
• 自社のロゴによる自前感

というメリットがあります。

カスタマイズ方法

Flow EditorはMustache.jsが使われており、見た目は /usr/local/lib/node-red/editor/templates/indes.mst をさわれば変更可能ですが、簡単な方法としてsettings.jsのeditorThemeで指定することができます。

たとえば、Version 0.15.1 以降で使える「Manage palette」（Nodeのパレットを編集したり、Node-RED Libraryから新しいCustom Nodeをインストールする機能）を無効にするには

settings.js

editorTheme: {
  menu: { 
    "menu-item-edit-palette": false,
  }
},

をsettings.jsに記載することで実現できます。

カスタマイズできる項目

本家Node-REDのGithubのIssue #610
Editor Theming #610
https://github.com/node-red/node-red/issues/610
及び、Configuration
http://nodered.org/docs/configuration.html
の「Editor Themes」項に情報があります。

FlowEditor

settings.js

page: {
    title: "Node-RED",
    favicon: "/absolute/path/to/theme/icon",
    css: "/absolute/path/to/custom/css/file",
    scripts: [ "/absolute/path/to/custom/script/file", "/another/script/file"]
},
header: {
    title: "Node-RED",
    image: "/absolute/path/to/header/image", // or null to remove image
    url: "http://nodered.org" // optional url to make the header text/image a link to this url
},
deployButton: {
    type:"simple",
    label:"Save",
    icon: "/absolute/path/to/deploy/button/image" // or null to remove image
},

MainMenu のカスタマイズ

MainMenu については、以下の項目を true / false で 表示 / 非表示 可能です。(1.0.6現在)

"menu-item-projects-menu"
"menu-item-projects-new"
"menu-item-projects-open"
"menu-item-projects-settings"
"menu-item-view-menu"
"menu-item-palette"
"menu-item-sidebar"
"menu-item-event-log"
"menu-item-action-list"
"menu-item-import-library"
"menu-item-export-library"
"menu-item-search"
"menu-item-config-nodes"
"menu-item-workspace"
"menu-item-workspace-add"
"menu-item-workspace-edit"
"menu-item-workspace-delete"
"menu-item-subflow"
"menu-item-subflow-create"
"menu-item-subflow-convert"
"menu-item-edit-palette"
"menu-item-user-settings"
"menu-item-keyboard-shortcuts"
"menu-item-help"
"menu-item-node-red-version"

MainMenu への追加

"menu-item-help"に"label"と"url"を追加することで、任意のWebページへのリンクを追加できます。

settings.js

editorTheme: {
  menu: { 
    "menu-item-help": {
      label: "Node-RED Library",
      url: "https://flows.nodered.org/"
    }
  }
},

Loginダイアログのカスタマイズ

ログイン画面のロゴは256x256pxで指定できます。イメージファイルのパスを以下のように指定します。

settings.js

login: {
    image: "/absolute/path/to/login/page/big/image" // a 256x256 image
},

Logout後にページ遷移

ログアウトした後に特定のページに遷移するには、logout:redirectに遷移先URLを記載します。

settings.js

logout: {
    redirect: "http://example.com"
},