IBM 製のオープンソース・フローエディタ "Node-RED" に、オリジナルのノードを追加してフローエディタ内で使えるようなカスタマイズをしてみます。

今回追加するノードは、機能そのものは「入力されたテキストを逆順にして返す」と(例えば "ABC" と入力されたら "CBA" と出力する)いうシンプルなものにして、そのカスタマイズ方法を紹介します。


準備として、まず Node-RED の環境が必要です。ここでは IBM Bluemix の "NodeRED スターター" ボイラープレートから Node-RED 環境を用意するものとします。下図の例ではアプリに dotnsf-nodered-20150824 という名称をつけています。またデータセンターは米国を使っています。以下はこの前提で紹介を続けます:
2015082401


次に、カスタマイズするコードをマージして Node-RED 環境にデプロイすることになるため、Node-RED のスターターコードが必要です。Bluemix 上の Node-RED プロジェクトの「コーディングの開始」から、cf ツールとスターターコードをダウンロードしておきます。cf ツールはダウンロード後にインストールまで済ませておきます:
2015082402


ダウンロードしたスターターコードをローカルで展開し、専用のフォルダ(図では C:\tmp\nodered\)に保存しておきます:
2015082403


このフォルダにカスタマイズするノードの情報を追加していきます。最低限必要なファイルはノードの処理内容を記述する JavaScript ファイルと、フローエディタ上での表示内容を定義する HTML ファイルと、パッケージング情報を変更する package.json ファイルの3つです。まずはノード内の処理内容を reverse.js というファイル名の JavaScript で以下のように記述します:
(reverse.js の中身)

module.exports = function(RED) { //. ノードの処理内容 function ReverseNode(config) { RED.nodes.createNode(this,config); var node = this; this.on('input', function(msg) { //. 入力文字列を逆順にする var str1 = msg.payload, str2 = ""; for( i = 0; i < str1.length; i ++ ){ str2 = str1.charAt( i ) + str2; } msg.payload = str2; node.send(msg); }); } //. ReverseNode 関数を実行する reverse ノードとして登録 RED.nodes.registerType("reverse",ReverseNode); }

最低限必要なもう1つのファイルを reverse.html として、以下の内容で記述します:
(reverse.html の中身)

<script type="text/javascript"> RED.nodes.registerType('reverse',{ category: 'function', color: '#a6bbcf', defaults: { name: {value:""} }, inputs:1, outputs:1, icon: "file.png", label: function() { return this.name||"reverse"; } }); </script> <script type="text/x-red" data-template-name="reverse"> <div class="form-row"> <label for="node-input-name"><i class="icon-tag"></i> Name</label> <input type="text" id="node-input-name" placeholder="Name"> </div> </script> <script type="text/x-red" data-help-name="reverse"> <p>メッセージのペイロードを逆順にするノード</p> </script>

これら2つのファイルを、先程展開したスターターコード内の nodes フォルダにコピーします:
2015082404


最後にこの reverse ノードを Node-RED 環境に追加するためのパッケージング設定を追加します。スターターコードを展開したディレクトリの直下ににある package.json ファイルをテキストエディタで開き、以下の赤字部分を追加します:
(package.json ファイルをカスタマイズ)

{ "name" : "node-red-bluemix", "version" : "0.4.20", "dependencies": { "when": "~3.x", : : }, "keywords":[ "node-red" ], "node-red": { "nodes":{ "reverse": "nodes/reverse.js" } }, "engines": { "node": "0.10.x" } }

この状態で、スターターコードの展開ディレクトリ(この例では C:\tmp\nodered\)以下を cf ツールで自分のアプリ(この例では "dotnsf-nodered-20150824")にプッシュします:
> cd c:\tmp\nodered
> cf login -a https://api.ng.bluemix.net/ (米国データセンターにログイン)
> cf push dotnsf-nodered-20150824 (アプリ名(この例では dotnsf-nodered-20150824)を指定してプッシュ)

プッシュが成功したら Node-RED フローエディタを開きます。Bluemix からであればアプリの URL にアクセスします:
2015082405


成功していれば function カテゴリの中に "reverse" ノードが追加されていることが確認できるはずです。カスタマイズ成功!:
2015082406


このノードにマウスを重ねると、HTML 内に用意された内容の HELP 情報がポップされるはずです:
2015082401



では最後に、設定した内容がどのように反映されているのかを確認する意味でも動作確認してみましょう。今回追加したノードは「文字列を逆順にする」ノードなので、単純に文字列をインプットする仕組みを用意します。"input" カテゴリ内の "inject" ノードをローエディタのキャンバス内にドラッグ&ドロップします:
2015082407


ドロップした "inject" ノードをダブルクリックして属性を変更します。Payload の種類を "string" にして、その下にインプットしたい文字列(この例では「今日はいい天気ですね」)を指定して "OK" をクリックします:
2015082408


reverse ノードを追加する前に、一度この状態で動作を確認してみましょう。"output" カテゴリから "debug" ノードをドラッグ&ドロップで追加してノード同士を結びつけます。そして "Deploy" します:
2015082409


Deploy が成功したら、"inject" ノードの左にあるボタンをクリックします。クリックするごとに指定した文字列が次のノードに渡されるので、debug ノードによって debug タブに指定した文字列が表示されるはずです:
2015082410


では改めて追加した "reverse" ノードの動作確認です。"function" カテゴリ内の "reverse" ノードをドラッグ&ドロップして追加し、以下のように線を繋ぎ直します:
2015082411


"reverse" ノードをダブルクリックすると属性設定画面が表示されます(reverse.html 内に定義されています)。属性値は Name だけで、実はここの値は挙動には何の影響も及ぼさないのですが、見た目が変わることを確認したいので「逆順」などの名前を指定します:
2015082412


フローエディタ上での表記が指定した Name になることが確認できます。そしてこの状態で Deploy して "inject" の左ボタンをクリックすると、今度は指定された文字列が "reverse" ノードによって逆順にされた結果が debug タブに表示されるはずです。期待通りに動いてくれました:
2015082413



今回は(アイコンも既存のものを流用するような)最小限のカスタマイズ内容だったため、シンプルな内容の新ファイル2つと、package.json の変更だけで済みましたが、変更内容によっては更に複雑な記述を行ったり、画像ファイルを別途用意したりする必要もあります。この辺りのより詳しい情報については NodeRED の公式ドキュメントを参照してください:
http://nodered.org/docs/creating-nodes/