hi, hikaru

『駅すぱあと』でお馴染みヴァル研究所で、テクニカルエバンジェリストとして働いている丸山が綴るブログです。

自作ノード開発中にハマったあれこれ #nodered

Node-RED

先日駅すぱあとノードを作った話をしましたが、その開発で色々とハマりましたので、知見を共有しようと思います。

作り方は、色々な方がまとめられていますが@zuhitoさんの記事が一番詳細に書かれていてとても参考になりました。これがなかったらノードを公開できてなかったです。

qiita.com

が、それでも賄えなかった細かいハマりポイントがいくつかありました。

すでに存在するノードと名前が被ってると、パレットに現れない

ローカルのNode-REDにノードをインストール(npm link)のところで、

$ npm link

して、Node-REDを立ち上げ直して、ブラウザも再読み込みして・・でも、パレットに自作ノードが現れない！

原因はすでに存在するノードと名前が被っていたからでした。

例えば、機能カテゴリに『range』という自作ノードを追加したいとします。 ですが、機能カテゴリにはすでに同じ名前の『range』ノードがデフォルトで存在しているんですね。そうなると、自作のrangeノードはパレットに出てこないです。『rangeA』のように、他に存在しない名前に変更すると出てきます。

入力項目の値が消える

自作ノードがパレットに表示されるようになりました。次は、作ったノードを触ってみようと思います。

パレットから自作ノードをワークスペースにドラッグアンドドロップして、ダブルクリックして編集画面を出します。

いくつかの入力項目を埋めて、右上の完了ボタンを押して、編集画面を閉じます。閉じた後に、また編集画面を開いてみましょう。あら不思議、さっき入力したものが消えてる！

原因は、htmlファイル内で定義するdefaultsの要素名とid属性の値node-input-xxxのxxxが一致していなかったからでした。

以下のコードのように、defaultsの中でstationNameと名付けたなら、id属性の値はnode-input-stationNameにしなければなりません。

RED.nodes.registerType('station',{
  category: 'function',
  color: '#e49190',
  defaults: {
    stationName: { value: "" }
  },

// 中略

  <div class="form-row">
    <label for="node-input-stationName"><i class="icon-tag"></i>name</label>
    <input type="text" id="node-input-stationName" placeholder="高円寺">
  </div>

「labelタグのfor属性とid属性の値を一致させればそれでいんでしょ？」と思い込んでいたので、まさかid属性とdefaultsと結びついていたとは思いもよらずorz

一向にフローライブラリに登録されない

最初に原因を書いておきますが、問題は二つありました。

  • README.mdの分量が少なすぎた
  • バージョンダウンさせていて、README.mdを修正したのにLibraries.ioに最新の状態が反映されていなかった

資料によれば、

15分～1時間ほど待つと、フローライブラリのクローラが新規にnpmに登録されたノード見つけ出し、フローライブラリにも登録されます。

と、書いてあるのですが、私の場合は8時間くらい待っても一向にフローライブラリには追加されませんでした。

よくよく調べてみたら、README.mdの分量を見ているらしい。確かに私が書いたREADME.mdは、タイトルと少しの文章しかなく、明らかに少なかった。

README.mdを修正して、package.jsonのバーションを書き換えて、npm publish...これでどうだ！

npmには即時反映されていました。
Libraries.ioにも反映されて・・ん？反映・・・されていない！

私、とってもおバカなことをしていまして。

package.jsonで設定するノードのバージョンなのですが、デフォルト値1.0.0そのままで最初npm publishしてて。

「こんな中途半端な状態で1系は名乗っちゃいけないよね・・。ベータ版ってことで0系にもーどそ⭐️ お、npm publishうまく行った！同じ数字じゃなけりゃ大丈夫なんだな💡」と、あろうことか途中からバージョンダウンさせていたのが原因でした。

Libraries.ioをよくよく見てみたら、最初に反映させていた1.0.0のままで、途中で修正したREADME.mdが反映されていなかったので気がつきました。

バージョンを1.0.1にしてnpm publishして数分後にフローライブラリに反映されました。

まだわからないことがいくつか

誰か教えてぇー。

終わりに

しんどかったけど公開できてよかった。