Node-RED ハンズオン@PaaS勉強会

2015年8月26日

© 2015 @ibmamnt

自己紹介 ~名前： 天野 武彦

所属：IBM 東京ソフトウェア開発研究所

主な活動： 先端開発技術の推進・啓蒙

（エリア： Cloud Foundry, DevOps DevOps 等)

趣味： 目下のところ育児に没頭

Twitter: @ibmamnt

ブログ： http://amanoblog.wordpress.com

Cloud Foundry 百⽇⾏参加しています！

© 2015 @ibmamnt

本資料について注意

本資料は、⼀部⽇本アイ・ビー・エム株式会社にて作成された内本資料は、⼀部⽇本アイ・ビー・エム株式会社にて作成された内

容を含みます。著作権は日本アイ・ビー・エムにあるので、複製の許可などは天野までご連絡ください。

© 2015 @ibmamnt

お願い

• 質問は以下のURLに書き込んでください

https://etherpad.mozilla.org/fSOxhPPUUD

© 2015 @ibmamnt

Node-RED について

• IBM 英国Hursley研究所の Emerging Technology Teamで開発されたソフトウェア

– 2013年、社内ハッカソンで堂々⼀位、GitHub に登録

– 2014年 Qconで発表してからブレーク

© 2015 @ibmamnt

ハンズオン学習＆演習もくじ

1. いきなり演習– 演習1.1 - Hello World

– 演習1.2 - Twitter メッセージを拾う

– 演習1.3 - Twitter メッセージを表示するアプリケーションの作成

2. Node-RED のキホン– 演習 2.1 -既存 nodeの追加

3. Internet of Things と PaaSとの連携– 演習 3.1 - IoTデバイスからのメッセージを受け取る

4. おまけ– 宿題：出席簿を作成しましょう

– Appendix: node を作ろう

© 2015 @ibmamnt

Twitter メッセージを表示するアプリケーションの作成

いきなり演習！

© 2015 @ibmamnt

1.1 Hello World

• input/inject と output/debug node を配置しつなぎます

• inject node をダブルクリックして、Payload に

– string

– Hello World

を⼊⼒し、OK ボタンをクリックします

• “Deploy” ボタンをクリックします

• “inject” node の左をクリックします

• Debug タブを確認します

ここをクリック

© 2015 @ibmamnt

1.2 Twitterメッセージを拾う

• social/twitter, output/debugnode を配置してつなぎます

• twitter node をダブルクリックして自twitter アカウントを設定します

• フォローしたい人、ハッシュタ

グ等を⼊⼒します

• Deploy ボタンをクリックします

• Debug タブを確認します

© 2015 @ibmamnt

なにかでましたか？

© 2015 @ibmamnt

1.3 Twitter メッセージを表示するアプリケーションの作成①• https://gist.github.com/

ibmamnt/ba7a4343ba9bd79433ccからコードを取得し

index.html として保存します

• wsUrl 変数を変更しま

す。

– <change-this-url> をNode-RED が稼働しているホスト名に変更し

てください

var wsUri = "ws://<change-this-url>/ws/twitter"

例：

var wsUri = "ws://localhost:1880/ws/twitter"

© 2015 @ibmamnt

1.3 Twitter メッセージを表示するアプリケーションの作成②• function/function ,

output/websocket を配置して、右図のようにつなぎます（twitter/debug node はfunction につなぎ直し）

• function に以下のコードを入れます

• “websocket” node を設定します

Type: Listen onPath: /ws/twitter

• DEPLOYボタンをクリックします

msg.payload = msg.tweet;return msg;

© 2015 @ibmamnt

簡単なWEBアプリケーションできましたか？

• index.html ファイルをひらいてみてください

© 2015 @ibmamnt

このアプリケーションの動作

Node-RED

検索 送信

websockettwitterAPI

websocket作成

onmessage() で処理

html の作成とレンダリング

index.html

© 2015 @ibmamnt

Node-REDのキホン

© 2015 @ibmamnt

Node-REDの特徴

• ブラウザベース UI

• node.js で動作– 軽量

• 機能を node packagemanager (npm) で簡単に追加できるようにした

© 2015 @ibmamnt

Node-RED 画面

Node Infomation またはデバッグコンソール

デプロイ実⾏

シート

ノード

ノードパレット

表示情報の切り替え実装UI

処理フロー

© 2015 @ibmamnt

①ノードを選択しドラッグ&ドロップ

Node-RED実装方法

②ノード間を接続

④Deployを選択Node-RED画面

③ノードプロパティ設定

© 2015 @ibmamnt

ノード紹介

© 2015 @ibmamnt

Node分類 機能

Input イベントの起動条件の設定

Output 外部アプリへの送信

Function イベント分岐、受信データの変換、一時停止 等

Social Twitter/Mail/ircの送受信

Storage DBへの保存、DB検索

Analysis 分析

Advanced RSS/atomの更新受信時にイベント起動

コネクタが右側に存在⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する

コネクタが左右に存在⇒②データ変換/分岐左からデータ受信。それを変換/分岐させ、右側に結果を返す

コネクタが左側に存在⇒③外部アプリ起動/DB保存左からデータを受信し、それを送信/保存

Node-RED標準搭載ノードの紹介

© 2015 @ibmamnt

①イベントの起動

Node名称 イベント開始条件 後続フローに送信する内容

Inject 定期起動orノードのクリック 指定⽂字列or現在時刻or情報なし(起動のみ)デバック向けの機能。

http http://[xxxxxxx].mybluemix.net/[ノードのURL]リクエスト送信時

リクエスト情報

Mail メール受信時、または未読メール存在時定期起動

メール本文(text/plain)

Twitter 指定メッセージのTweet時に自動起動

Tweet情報(本文、発言場所、国…)

Feedparse RSS/atomの更新受信時 -

コネクタが右側に存在するもの

© 2015 @ibmamnt

Node名称 機能 後続フローに送信する内容

Function 受領データの更新 更新済データ

Switch 条件に応じて、フローを分岐させる

受信データ

Delay フローを待機 受信データ

http request 指定サイトに接続 接続サイトのソース

Cloudant DB検索 DBの検索結果

Sentiment 受信データをセンチメント分析 評価情報を追加した受信データ

Html HTMLソースのうち、指定タグをすべて取得

指定したタグの情報

コネクタが左右に存在するもの

②データ変換/分岐

© 2015 @ibmamnt

Node名称 機能

Debug フロー上に流れている情報を画⾯表⽰

http response http requestを返す

Cloudant DBへのデータ保存

Mail メール送信

コネクタが左側に存在するもの

③外部アプリ起動/DB保存

© 2015 @ibmamnt

プログラミング

JavaScriptで記述します

• 簡易エディターが付属

• 非同期処理も可能

※より複雑な処理は node の作成をお勧めします（おまけ参照）。

詳細ドキュメント： http://nodered.org/docs/writing-functions.html

function は最後に return msg; をいれると次のnode に送信してくれます。

© 2015 @ibmamnt

覚えておくNode-RED固有変数

“msg”

“msg” オブジェクト： node 間を流れるメッセージを表す JSON オブジェクト。msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。

“context” オブジェクト： node 内部で保存される任意の JSON オブジェクト

“context.global” オブジェクト： node 間で共有されるグローバルオブジェクト

“context”

“context.global”

© 2015 @ibmamnt

一般のWEBサービスの呼び出し

• “http request” node を利⽤する

• 事前に呼び出しパラメータを設定する

– msg.url : WEBサービスURL

– msg.method: ‘GET’, ‘PUT’ 等

– msg.header: 必要があればヘッダーセット

– msg.payload: リクエストの body

– msg.topic: URL の <url>?<params> ? 以下のパラメータ

© 2015 @ibmamnt

例：楽天トラベル施設検索API

https://webservice.rakuten.co.jp/api/simplehotelsearch/

© 2015 @ibmamnt

https://github.com/node-redhttp://flows.nodered.org

• 様々な node や flow が公開されています

© 2015 @ibmamnt

演習 2.1 -既存 node の追加

1. node-red が起動している場合には停止します

(control+c)

2. 次のコマンドをNode-RED を導入したディレクトリで実⾏します

$ npm install node-red-node-web-nodes

3. Node-REDを再開します

$ node red.js

© 2015 @ibmamnt

左のパレットを探索してみてください• node を配置して、info をみる

© 2015 @ibmamnt

似てる？？http://mythings.yahoo.co.jp

https://ifttt.com/wtf

© 2015 @ibmamnt

ここまでのまとめ

• Node-RED は様々な情報源からの情報を取得して、加工するのが得意

• 世の中にある様々な API を “node” という単位でカプセル化してくれる

– コードを書かなくても簡単に呼び出せる！

• JavaScript によるプログラミングができる

– Function node

– 自作の node もあり

© 2015 @ibmamnt

3. Internet of Things と PaaSとの連携

© 2015 @ibmamnt

3.1 Internet of Things対応

• IoT 機器に Node-RED を導入するシリアルポートアクセスRaspberry PI 等の機器のシリアルにアクセス

© 2015 @ibmamnt

例えば、Twitter のメッセージで LED をチカチカさせる

© 2015 @ibmamnt

Hue のランプをチカチカさせたり

https://www.npmjs.com/package/node-red-contrib-hue

© 2015 @ibmamnt

i-remocon を操作する？？

http://i-remocon.com/ ページから抜粋

© 2015 @ibmamnt

具体的なDEMOは番組の

後半で（次回以降・・・）

© 2015 @ibmamnt

3. Internet of ThingsとPaaSの連携

• イベントを処理するバックエンドシステムをPaaSに構築するpub/sub モデルが一般的に使われています。

MQTT ブローカーGoogle pub/sub も処理できるかも？

Node-RED ではイベント処理のブローカー情報にアクセスして、加工。

© 2015 @ibmamnt

IoTシステムの典型的アーキテクチャ

デバイスMQTT, websocket

pub/sub システム

イベントストリームシステム

PaaS

様々な IoT デバイス情報を受け取りイベント保管するシステム

イベントと様々なAPI を組み合わせたアプリケーショ

ンが動作するPaaS環境

典型的アーキテクチャNode-RED

Node-RED

© 2015 @ibmamnt

myThings でのアーキテクチャ例：

http://www.idcf.jp/cloud/iot/

© 2015 @ibmamnt

Pub/Sub型のアーキテクチャ

Pub/Subモデルはパブリッシュ・サブスクライブ方式でメッセージを送受信するためのモデル

プロバイダ

Sub Sub

Pub Sub Pub

概略図 パブリッシャー：メッセージを作成して送信する送信側のクライアントサブスクライバー：メッセージを受信する側のクライアントトピック：Pubからのメッセージはトピックという送信先に登録され、トピックに対して配信を申し込んでいた一つまたは複数のサブスクライバーに配信されるトピック トピックトピック トピックトピックPubとSubは動的に追加・削除可能→使用状況に応じてシステムを拡張，縮小可能

複数のパブリッシャーから同じトピックにメッセージを送信可能

複数のサブスクライバーから同じトピックに接続可能

システムの特徴

© 2015 @ibmamnt

pub/sub システム例

• MQTT

– IoT Eclipse (http://iot.eclipse.org/ )

– Mosquitto (http://mosquitto.org/ )

– IBM IoT Foundation (https://internetofthings.ibmcloud.com )

• Google pub/sub

– https://cloud.google.com/pubsub/

• Amazon SNS

– https://aws.amazon.com/jp/sns/

© 2015 @ibmamnt

利⽤例：ブローカー

MQTT

サーバー

センサー

Node-RED

Node-RED

フロー

MQTT

MQTT

HTTPWebsocket

環境情報（気温や湿度

など）を収集。

パブリッシュサブスクライブ

MQTTクライアント

MQTTクライアント

ブラウザー

WEB

自作アプリ

PaaSアプリ

© 2015 @ibmamnt

演習3.1 : IoTデバイスからのメッセージを受け取る

• スマートホンで得られる情報を送信す

る

– 位置情報 (html5)

– スマートホン・センサー情報• 振動、加速度

© 2015 @ibmamnt

演習のアーキテクチャ

Node-RED

フロー

MQTTクライアント

ブローカー

MQTT

サーバー

センサー情報、位置情報を“iot/paas-study“ topic としてpublish

“iot/paas-study“ topic をsubscribe

iot.eclipse.org

© 2015 @ibmamnt

スマホアプリの作成

• 今回は既定のものにアクセスします。スマート

フォンから次の URL にアクセスしてください。

http://iot-phone.bluehub.tk(※※※※ IBM Bluemix 上で稼働しています）

IDに自由な文字(Alphabet)を入れてください。位置情報はONにしてください。

ソースコードはこちらhttp://iot-phone.bluehub.tk/iot-phone.zip

<any-alphabet>

© 2015 @ibmamnt

Node-RED のフロー作成

• input/mqtt と output/debug を配置します

• mqtt の設定は次のようにします(それ以外はデフォルト）Broker: iot.eclipse.org

Port: 1883

• 次の Topic の設定は次のようにしますTopic: iot/paas-study

• Deployボタンをクリックして Debug 画面を眺めます

© 2015 @ibmamnt

ものすごいトピック

の嵐みえましたか？

© 2015 @ibmamnt

mqttクライアントコード

• Paho (http://www.eclipse.org/paho/) を利⽤

クライアント作成

ブローカーに接続

publish

スマホセンサー内容

送信

© 2015 @ibmamnt

応⽤例 - ⾞からの情報を受け取る

• http://connected-car.mybluemix.net/

© 2015 @ibmamnt

アイデア例：

• 今どこにいる？ 待ち合わせアプリ

• Google Now 的なアプリとか

は様々なアイデアをすNode-RED は様々なアイデアをすぐに実践できるツールです。ぜひ

社内ハッカソンイベントでも活用

してみましょう！

© 2015 @ibmamnt

IoTと PaaSの関係まとめ

デバイスMQTT, websocket

pub/sub システム

イベントストリームシステム

PaaS

様々な IoT デバイス情報を受け取りイベント保管するシステム

イベントと様々なAPI を組み合わせたアプリケーショ

ンが動作するPaaS環境

典型的アーキテクチャNode-RED

Node-RED

© 2015 @ibmamnt

お疲れ様でした！

© 2015 @ibmamnt

おまけ

© 2015 @ibmamnt

宿題：セミナー出欠確認アプリ

• スマートホン向け WEB アプリケーション

– ⽒名⼊⼒と出席ボタンだけ

• 位置情報、氏名を websocketで送信

• Node-RED 内部でカウント

– セミナー会場位置を予め入れておく

– 半径１００m以内にいればカウント

• context 変数を使う

• 重複カウント防止

氏名

出席！

© 2015 @ibmamnt

Node-REDでは作成したフローを別 Node-RED 環境に簡単に移すことができます。

別 Node-RED 環境に処理記述を移す手順

①画面右上からExportを選択 ②ポップアップのコードをコピー⇒Node-REDでは実装内容をText形式で保持

③画面右上からImportを選択 ④ ②でコピーしたTextを貼り付ける

【参考】フローのImport/Export

© 2015 @ibmamnt

Appendix - Nodeの追加• 独自Nodeの追加

– 既存のノードでは機能が不⾜する場合、独⾃のノードも容易に追加可能

– 記述ルールに従い、nodesディレクトリ配下にHTMLファイルとjsファイル作成しデプロイ

• HTMLファイル：Nodeの体裁を定義（⾊やアイコン、⼊⼒項目など）

• jsファイル：Nodeでの処理内容を記述

– 記述ルールやサンプル

• http://nodered.org/docs/creating-nodes/first-node.html

作成、デプロイ

© 2015 @ibmamnt

（参考）lower-case.html, lower-case.js

lower-case.html

lower-case.js

http://nodered.org/docs/creating-nodes/first-node.html

© 2015 @ibmamnt

資料のおわり