まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

Node-RED は GUI で便利にデータの流れを定義することができるビジュアルデータフローエディタです。HTTP(S) や MQTT など多くのプロトコルにも対応しており、これまでプログラミングを記述しないと実現できなかったようなデータの流れを、個別の機能を持ったノードを組み合わせることで、ほぼコーディングレスで実現できるという点が画期的なツールです。このブログでも何度か紹介してきました。

このエントリで紹介した時のデータフロー。これだけでデータベース入出力を行うウェブアプリケーションを作ってます)
2018031301


さてそんな簡単で便利な Node-RED ですが、「Node-RED だと(一般的なプログラミングと比較して)処理が複雑になるケース」もあります。こういう視点で語られているドキュメントを目にすること-がなかったこともありますが、Node-RED がより多くの現場で使われていく上での適材適所を考える上では必要になってくると思っていることもあり、そんな例を紹介しようと思いました。

今回、Node-RED と比較するプログラミング環境はサーバーサイド JavaScript である Node.js とします。もともと Node-RED 自体が Node.js 上で動くアプリケーションであり、Node-RED の function ノード内では JavaScript を直接記述することもできるという点で、比較対象としては相応しいのではないかと思っています。

で、この「Node-RED での処理が複雑になるケース」の典型例の1つが if 分岐処理だと自分の拙い経験上で思っています。if 分岐はプログラミング言語を学ぶ中でのかなり早い段階で遭遇することになる基本的な処理ですが、Node-RED では必ずしも基本的とは言えない内容だと感じています。

例を挙げて説明します。例えばこんな処理を行うケース:
・気温(temp)と湿度(humid)という2つの変数値から「不快」か「不快ではない」かを判断する。
・気温が 30 以上で、かつ humid が 50 以上だと不快
・気温が 30 未満で、かつ humid が 80 以上だと不快
・それ以外は不快ではない

よくあるレベルのシンプルな分岐処理ですよね(湿度は%単位で与えられるものとします)。この処理を Node.js (や他の一般的なプログラミング言語)の if 分岐で行おうとすると、こんなシンプルな感じになると思います:
if( ( temp >= 30 && humid >= 50 ) || ( temp < 30 && humid >= 80 ) ){
  //. 不快と判断

}else{
  //. 不快ではないと判断

}

では同じ処理を Node-RED で実現しようとするとどうなるでしょうか?仮に msg.payload.temp と msg.payload.humid にそれぞれ温度と湿度の値が入っているという前提で作ることを考えてみます。

Node-RED で条件分岐を行うノードは "switch" ノードです。機能カテゴリ内にある switch ノードをキャンバスにドラッグ&ドロップします:
2018031302


ドロップした switch ノードをダブルクリックして、処理内容を設定する画面に切り替えます:
2018031303


このノードでは温度(msg.payload.temp)に関する条件分岐を行うことにします。今回は30度以上か、30度未満かで処理を分岐する必要があります。というわけで、プロパティの値を (msg.)payload.temp にして、その条件を指定する部分では「30以上の数値」となるように指定します。またノードの表示用の名前を「温度」と設定します:
2018031304


今回の処理では温度が「30 以上の場合」と「30 未満の場合」の2つの条件に分岐する必要があります。前者は上記で指定したので後者を追加します。この画面内の「追加」ボタンをクリックします:
2018031305


すると条件部分が1行追加され、もう1つの条件を指定できるようになりました。ここでは「 30 未満の数値」となるような条件を指定します(下図のようにするか、または後述のように"otherwise"(その他)という選択肢でも同じ結果になります)。 これで msg.payload.temp の値が 30 以上であれば1へ、30 未満であれば 2 へ行く、という分岐処理が定義できたことになります。ここまでできていることを確認して「完了」ボタンをクリック:
2018031306


すると switch ノードに指定した名前が表示されるのと同時に、ノード右側の出口が2つに増えていることが分かります。上側の接続子が1、下側の接続子が2を意味しており、ここから条件を分岐して処理できるようになりました:
2018031307



続けて湿度の条件を追加します。温度 switch ノードの①に別の switch ノードを追加して接続します:
2018031308


追加した switch ノードをダブルクリックして編集ダイアログを出し、以下のように設定します。 名前は「湿度」、プロパティは湿度の値である (msg.)payload.humid 、ここは温度が 30 度以上の場合に処理されるノードなので、分岐の条件は「 50 以上の数値」か「otherwise(それ以外)」として、最後に「完了」をクリックします:
2018031309


この時点でキャンバス上は以下のような2つのノードが設定されているはずです。③は温度が30度以上で、湿度は50以上なので「不快」、④は温度は30度以上ですが、湿度は50未満なので「不快ではない」という分岐がされたことになります:
2018031310


では続けて②のノードの続きの処理を追加します。更にもう1つの switch ノードをキャンバスに追加し、温度 switch ノードの②と接続します。そしてノードの設定内容を以下のようにします。先程の湿度ノードに近い内容ですが、このノードは温度が 30 度未満の場合に処理されるので、湿度が 80 以上だった場合に不快、それ以外であれば不快ではないと分岐するノードにしています:
2018031301


ここまでの作業でキャンバスには以下のように3つの switch ノードが用意されているはずです。そして③と⑤が不快、④と⑥が不快ではない場合の処理を行う流れになります:
2018031302


後はこの分岐した条件にあわせて処理を繋げていけばよいので、例えばこんなフローになっていくんでしょうかね:
2018031303


というわけで、目的の条件分岐を Node-RED で実現することはできました。 ただ Node.js では以下のような超シンプルな分岐処理だった割にはフローが複雑になってしまっている面は否めません。これが更に複雑な分岐処理だった場合、Node-RED ではどれだけ switch ノードを並べないと行けなくなるのか・・・:
if( ( temp >= 30 && humid >= 50 ) || ( temp < 30 && humid >= 80 ) ){
  //. 不快と判断

}else{
  //. 不快ではないと判断

}

原因というわけではないのですが、Node-RED の switch ノードは単一のプロパティに対する条件分岐しか行えないため、複数の値を元に条件を分岐するようなケースではどうしてもノードを多用する必要が出てきてしまいます。この部分だけを切り取って結論にはできないと思いますが、Node-RED では if 文による分岐処理は必ずしも簡単ではないということだと思います。



Chart.js は棒グラフや折れ線グラフなどの各種グラフやチャートを描画するための JavaScript ライブラリです。グラフを描くだけならかなり簡単に使うことができて便利です。また MIT ライセンスが採用されており、商用を含めた柔軟な利用が可能になっています。

今回はこの Chart.js を使って「ポーラーチャート」を作る例を紹介します:
ogp


ポーラーチャートは円グラフやドーナツグラフに似ています。円グラフやドーナツグラフでは円全体を 100% と見なして、その中の割合を(色別などに)分類表示する、というものです。 一方ポーラーチャートでは量が多いほど大きな面積で表示されます。存在している要素が全て同じ角度を持ったパイの形で表示されるため、仮に特定の要素の値がゼロでもゼロであることがわかりやすくなっている(※)という特徴があります。

※上図の例だと左上に紫色っぽい部分がほんの少しだけ存在しています。量が少なくてグラフ上ではほぼ見えていないのですが、ここに空間ができることで少なくともここにデータが存在していることが明確になっています。


このポーラーチャートを Chart.js で表示するには以下のようなコードを記述します。Chart 作成時の type 属性に 'polarArea' を指定することでポーラーチャートを描画します:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

  :
  :

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart( ctx, {
  type: 'polarArea',
  data: {
    labels: [ "Red", "Yellow", "Green", "Cyan", "Blue", "Magenta" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#ffff00",
        "#00ff00",
        "#00ffff",
        "#0000ff",
        "#ff00ff"
      ],
      data: [ 150, 100, 20, 80, 40, 5 ]
    }]
  }
});
</script>

  :
  :


この内容を実際にこのページ内に埋め込むと以下のようになります:


縦や横の積み上げ式の棒グラフに近い用途で使え、かつ最小値が小さくて、積み上げた時に潰れてしまうようなケースでもデータとしての存在を明確にできる、という特徴を持ったチャートだと思っています。

Chart.js は棒グラフや折れ線グラフなどの各種グラフやチャートを描画するための JavaScript ライブラリです。グラフを描くだけならかなり簡単に使うことができて便利です。また MIT ライセンスが採用されており、商用を含めた柔軟な利用が可能になっています。

今回はこの Chart.js を使って円グラフを作る例を紹介します:
2018030900


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

  :
  :

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart( ctx, {
  type: 'pie',
  data: {
    labels: [ "Red", "Green", "Blue" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#00ff00",
        "#0000ff"
      ],
      data: [ 150, 100, 20 ]
    }]
  }
});
</script>

  :
  :

キャンバスの 2D コンテキストを取得し、グラフ種類、ラベル、色、そして数値データを指定して描画しています。上記コードの "pie" という部分が円グラフを指定しており、ここを変更することで円グラフ以外のチャートを作ることもできます。

この内容を実際にこのページ内に埋め込むと以下のようになります: 




なんとなく直感的にというか、 ウェブで簡単に使えるグラフ描画ライブラリだと思ってます。

このページのトップヘ