読者です 読者をやめる 読者になる 読者になる

鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

さくらIot+Bluemix(Node-RED)+Ambientでグラフを描写するまで

http://sssslide.com/www.slideshare.net/sakura_pr/iot-platform-20161201

Node-REDアプリの作成

BlueMixへログイン、カタログからNode-REDスターターで
アプリ名を入力して、作成ボタンを押す
起動されるので
あとはhttpでアクセスするだけ。簡単ですね。

Node-RED エディタ

WebSocketをドラッグ&ドロップする
PathへさくらのIotのWebSocketのパスを入力
f:id:kechiya:20161224081720p:plain
とりあえず、WebSocketノードとデバッグノードをGUIでつなぎこむだけでNode-RED上で値の取得が確認できた。

次はグラフ化してみましょう

グラフ表示する外部サービスAmbientへ登録
https://ambidata.io

BlueMixからAmbientノードを作るために

qiita.com

Ambientで表示するためには

Ambientで描写するためには、チャンネルの値をd1,d2…と言う値に変えて
あげる必要がある。ここはNode-Redでのコーディングが必要になります。

さくらのデータからAmbientノード用のJSONへ変換するときに

JSONが文字列なので、そのままでは値が取り出せません。オブジェクトに変換する必要ありはまりました。
qiita.com

JSONノードの後段にfunctionノードを配置して以下のように変換関数を
コーディングしてみました。

var payload = msg.payload.payload;

var data = {
    "d1" : payload.channels[0].value,
    "d2" : payload.channels[1].value,
    "d3" : payload.channels[2].value
};
msg.payload = data;
return msg;

ジャジャジャーン。表示できました。

f:id:kechiya:20161224162329p:plain

JSONノード、Functionノードをつなげるだけで、ほぼコーディングレスでグラフ化までできることが証明されたのでありました。
以下のような感じ。

f:id:kechiya:20161224163840p:plain

あとは、本物のセンサーが届くのを待つのみ!!