Node-REDのNode作成2歩目 #Node.js

前回に引き続き公式ドキュメントにあるNode作成のHTML Fileを読み解きます。

Nodeの.htmlファイルにはNodeのEditorでの描写を定義します。これは3つの<script>タグで構成されます。

Editorに登録されている主Node定義。パレットのカテゴリ、編集可能なプロパティ（デフォルト）やアイコンを定義します。通常のJavascriptのScriptタグ内にあります。
Nodeの編集ダイアログの内容を定義。typeにtext/x-red、data-template-nameにNodeのタイプ名を持つScriptタグで定義されています。
サイドバーのinfoタブに表示されるヘルプテキスト。typeにtext/x-red、data-help-nameにNodeのタイプ名を持つScriptタグで定義されています。

Nodeの定義

NodeはRED.nodes.registerType関数を使用してEditorに登録する必要があります。この関数にはNodeのタイプとその定義の2つの引数があります。

<script type="text/javascript">
  RED.nodes.registerType('Nodeのタイプ', {
    // Nodeの定義
  });
</script>

Nodeのタイプ

NodeタイプはEditor全体でNodeを識別するために使用されます。これは対応する.jsファイルとRED.nodes.registerTypeへの呼び出しで使用される値が一致する必要があります。

タイプはパレット内のNodeのラベルとして使用されます。タイプが"in"または"out"で終わる場合は"in/out"部分はラベルから消去されます。たとえば、"mqtt in"や"mqtt out"の場合はラベルに"mqtt"と表示されます。

Node定義

Node定義はEditorで必要なNodeに関するすべての情報が含まれています。それは次のプロパティを持つオブジェクトです。

category: (string) Nodeを配置するパレットのカテゴリ
defaults: (object) Nodeの編集可能なプロパティ
credentials: (object) Nodeの認証系プロパティ
inputs: (number) Nodeのインプットコネクタ数（0か1が指定可能）
outputs: (number) Nodeのアウトプットコネクタ数（0かそれ以上指定可能）
icon: (string) Nodeのアイコン
color: (string) Nodeの背景色
label: (string|function) Nodeのラベル
paletteLabel: (string|function) Nodeのパレット上のラベル
labelStyle: (string|function) ラベルのスタイル
align: (string) アイコンとラベルの位置
oneditprepare: (function) 編集ダイアログを開く時のイベント
oneditsave: (function) 編集ダイアログを保存する時のイベント
oneditcancel: (function) 編集ダイアログをキャンセルする時のイベント
oneditdelete: (function) 編集ダイアログの削除ボタンが押された時のイベント
onpaletteadd: (function) Nodeタイプがパレットに追加された時のイベント
`onpaletteremove: (function) Nodeタイプがパレットから削除された時のイベント

編集ダイアログ

Nodeの編集ダイアログの内容を定義しています。

<script type="text/x-red" data-template-name="node-type">
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
  </div>
</script>

このテンプレートには以下の規則があります。

form-rowクラスを持つ<div>要素は編集ダイアログのひとつの行を表します
典型的な行はアイコンを持つラベルと対応する<input>要素を持ちます
アイコンは<i>要素のクラスにAwesomeフォントを指定します

ヘルプテキスト

Nodeが選択されるとサイドバーのinfoタブにテキストが表示されます。ここで、Nodeへの入力メッセージと出力メッセージのプロパティの解説など、Nodeの内容について解説する必要があります。

パレット内のNodeをマウスオーバーすると<p>タグの内容がツールチップとして使用されます。

<script type="text/x-red" data-help-name="node-type">
   <p>Some useful help text about the node.</p>
   <p>Outputs an object called <b>msg</b> containing <b>msg.topic</b> and
   <b>msg.payload</b>. msg.payload is a String.</p>
</script>