Node-RED使用箇所の解説 : Node-REDとクラウドを用いたセンシングデータのAR可視化サンプル

#Node-RED使用箇所の解説
[Node-REDとクラウドを用いたセンシングデータのAR可視化サンプル](https://qiita.com/kolinz/items/6501caa4174d64b56edb) で扱っているサンプルについて解説します。

Node-REDでは、ノード(箱上のブロック)をつなげて出来たプログラムを「フロー」と言います。また各ノードをダブルクリックすることで、各ノードの編集画面が開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b76ddf3f-99c2-572b-7008-f69fe12557a6.png)

## ① IBM IoT
「ibmiot in」ノードを使用しています。仮想センサーを使用している場合は、デバイスIDを入れるだけです。実物のセンサーを使用している場合は、「Authentication」などを変更する必要があります。

![ibmiot in ノード編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/22f9c842-d549-ada3-4de9-94c0fa2902d6.png)

## ② Insert Sensor data to Flow variable
「change」ノードを使用。フロー変数を使用し、①で取得したセンシングデータをフロー変数「temp」に代入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/cf98be8f-8b6d-61c4-fd3a-238931129dab.png)

## ③ Flow variable
「function」ノードを使用。フロー変数「temp」の値を、「Debug: Flow variable」に渡します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/67abaf0c-6667-a8f0-ce91-b56cd2b5811a.png)

## ④ Debug: Flow variable
「Debug」ノードを使用。フロー変数「temp」の値を、Node-REDのデバッグタブで表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/5da19960-611f-b798-debb-f96ac0477323.png)

## ⑤ [get]/aframe
「http in」ノードを使用。AR表示の際に利用するAR表示用URLについて定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/a380b94e-d58b-91ed-eddf-7288950b2b57.png)

Node-REDのURLのうち、mybluemix.netの手前の/(スラッシュ)までを削除し、末尾に上図のようにURLに記述した、/aframeを追加します。
たとえば、https://node-red-xxxx.mybluemix.net/aframe といったようになるはずです。xxxx の部分は各自で異なりますのでご注意ください。この/aframeで終わるURLに、PCやスマートフォンのWebブラウザからアクセスすることで、Webブラウザ経由でカメラがARマーカーを認識し、ARコンテンツを表示することができます。

## ⑥ Get Flow variable
「function」ノードを使用。フロー変数「temp」の値を取り出し、次の「switch」に渡します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/02392ed1-9663-7d37-d4bd-94944027123f.png)

## ⑦ switch
「switch」ノードを使用。「Get Flow variable」から受け取ったフロー変数「temp」の値に対して、30℃以上と29℃以下で、処理を分ける定義を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/fec9e1b0-9499-43b6-ac6d-dfb45a8ab749.png)

この設定により、30℃以上なら、「Set Color: over 30 degrees Celsius」へ、29℃以下なら「Set Color: under 29 degrees Celsius」に処理が引き継がれます。

## ⑧ Set Color: over 30 degrees Celsius
「function」ノードを使用。30℃以上の場合、ARとして表示するコンテンツは、立方体を縦に3つ積み重ねたものに、下から、黄色、オレンジ色、赤色を表示します。
ここでは、次の「A-Frame」に引き渡す色コードを呼び出しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/94cdb000-4b3b-884f-1504-0aa0bf313185.png)

## ⑨ Set Color: under 20 degrees Celsius
「function」ノードを使用。29℃以下の場合、ARとして表示するコンテンツは、立方体を縦に3つ積み重ねたものに、下から、黄色、オレンジ色、グレー系の色を表示します。
ここでは、次の「A-Frame」に引き渡す色コードを呼び出しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/967770dc-af17-a25d-aecd-5a3ac88b9411.png)

## ⑩ A-Frame
「template」ノードを使用。前の処理で指定した色を用いて、ARコンテンツとして、VR/ARフレームワークの「A-Frame」を用いて生成しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/bc6049b7-9415-b55a-8113-35393a55a761.png)

A-FrameにおけるARの実装については、詳しくは下記をご確認ください。
https://aframe.io/blog/arjs/

## ⑪ http
「http response」ノードを使用。「[get]/aframe」で「http in」ノードを使用していますので、「http in」ノード使用時にペアで必要になる「http response」ノードを配置しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/bec99085-f62d-4efb-2d66-31c529286767.png)