© 2015 IBM Corporation2
Node-RED について
IBM 英国Hursley 研究所の Emerging Technology Teamで開発されたソフトウェア
• 2013年、社内ハッカソンで堂々一位、GitHub に登録
• 2014年 Qcon で発表
オープンソースプロジェクトとして提供
© 2015 IBM Corporation3
Node-REDの特徴
ブラウザベース UI
node.js で動作
• 軽量
機能をカプセル化してNodeとして利用
独自Nodeを作成・追加可能
Bluemixの様々なサービスを簡単に利用可能
ハードウェアデバイス,API,オンラインサービスが画期的な方法で結合された"仮想環境をブラウザ上で実現
Bluemixでなくても使用可能です
© 2015 IBM Corporation4
Node-RED 画面
Node Infomation またはデバッグコンソール
デプロイ実行
シート
ノード
ノードパレット
表示情報の切り替え実装UI
処理フロー
© 2015 IBM Corporation6
Node分類 機能
Input イベントの起動条件の設定
Output 外部アプリへの送信
Function イベント分岐、受信データの変換、一時停止 等
Social Twitter/Mail/ircの送受信
Storage DBへの保存、DB検索
Analysis 分析
Advanced RSS/atomの更新受信時にイベント起動
コネクタが右側に存在⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する
コネクタが左右に存在⇒②データ変換/分岐左からデータ受信。それを変換/分岐させ、右側に結果を返す
コネクタが左側に存在⇒③外部アプリ起動/DB保存左からデータを受信し、それを送信/保存
Node-RED搭載ノードの紹介 (代表的なもの)
© 2015 IBM Corporation7
①イベントの起動
Node名称 イベント開始条件 後続フローに送信する内容
Inject 定期起動orノードのクリック 指定文字列or現在時刻or情報なし(起動のみ)デバック向けの機能。
http http://[xxxxxxx].mybluemix.net/[ノードのURL]リクエスト送信時
リクエスト情報
Mail メール受信時、または未読メール存在時定期起動
メール本文(text/plain)
Twitter 指定メッセージのTweet時に自動起動
Tweet情報(本文、発言場所、国…)
Feedparse RSS/atomの更新受信時 -
コネクタが右側に存在するもの
© 2015 IBM Corporation8
Node名称 機能 後続フローに送信する内容
Function 受領データの更新 更新済データ
Switch 条件に応じて、フローを分岐させる 受信データ
Delay フローを待機 受信データ
http request 指定サイトに接続 接続サイトのソース
Cloudant DB検索 DBの検索結果
Sentiment 受信データをセンチメント分析 評価情報を追加した受信データ
Html HTMLソースのうち、指定タグをすべて取得
指定したタグの情報
コネクタが左右に存在するもの
②データ変換/分岐
© 2015 IBM Corporation9
Node名称 機能
Debug フロー上に流れている情報を画面表示
http response http requestを返す
Cloudant DBへのデータ保存
Mail メール送信
コネクタが左側に存在するもの
③外部アプリ起動/DB保存
© 2015 IBM Corporation10
プログラミング
JavaScriptで記述します
• 簡易エディターが付属
• 非同期処理も可能
※より複雑な処理は node の作成をお勧めします。
詳細ドキュメント:
http://nodered.org/docs/writing-functions.htmlfunction は最後に return msg; をいれると次のnode に送信してくれます。
© 2015 IBM Corporation11
覚えておくNode-RED固有変数
“msg”
“msg” オブジェクト: node 間を流れるメッセージを表す JSON オブジェクト。msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。
“context” オブジェクト: node 内部で保存される任意の JSON オブジェクト
“context.global” オブジェクト: node 間で共有されるグローバルオブジェクト
“context”
“context.global”
© 2015 IBM Corporation12
1. コードを書かずにソーシャルデータを分析する
DBコンソールで簡易分析
ハンズオン概要
Node-RED
Twitter情報の取得
センチメント分析結果の追加
必要なデータだけに絞込み
データをDBに保管
© 2015 IBM Corporation13
Node-RED Starterをデプロイする
ここをクリック
Bluemixにログインします
ログイン後、「カタログ」をクリック
画面上部「ボイラープレート」のセクションの「Node-RED Starter」をクリック
名前のフィールドにアプリの名前を入力(URLの一部となるので他と重複しないように指定します)例:日付+名前+何か文字列= 0820taroabc
「作成」をクリック
Node-RED Starterが起動します
※若干時間がかかります
© 2015 IBM Corporation14
データベースのバインド (1)
Node-RED Starterが起動したら、データ保管用のdashDBをバインドします(データ確認用にCloudantを使用しますがデフォルトでバインド済み)
画面左側の「概要」をクリック
© 2015 IBM Corporation16
データベースのバインド (3)
カタログから「データ&分析」セクションまで下にスクロールし、dashDBをクリックします
■アプリ名が作成したものと同じことを確認して「使用」をクリックします
■すぐに再ステージングしますか?というダイアログボックスで、「再ステージ」をクリックします。
ステージングの間にdashDBの設定を開始します
© 2015 IBM Corporation19
dashDBの設定 (1)
dashDBのウェルカム画面が表示されます。
ここからTwitterデータを保管するテーブルを作成します
左ペインの「Tables」をクリックします
新しくテーブルを作成するため、「Add Table」をクリックします
© 2015 IBM Corporation20
dashDBの設定 (2)
テーブル作成のためのSQL
文を以下のように入力して、「Run DDL」をクリックしテーブルを作成します※TweetのIDとセンチメントの値を保管する列を作成します
CREATE TABLE "TWEETS" (
"TWEETID" VARCHAR(50),"SENTIMENT" INT
);
テーブル作成が終了したら右上の「×」でウィンドウを閉じます
© 2015 IBM Corporation21
dashDBの設定 (3)
自動的にScheme名が設定され、テーブルが作成されたことを確認します
保管用DBの設定はこれで終了です。Bluemixの画面に戻ります。dashDBのタブは開いたままにしておいてください
© 2015 IBM Corporation22
Node-RED フローエディターの起動
Bluemix画面で左側の「概要」をクリックします
アプリ名の下にある「経路」のURLをクリックし、Node-REDフローエディターを起動します
フローエディター画面が表示されます
© 2015 IBM Corporation23
Twitterデータを取得する
画面左側のノード一覧のSocialの欄にあるTwitterと、 output欄にあるdebugを右側のワークスペースにドラッグ&ドロップし、マウスでつなぎます。
twitter node をダブルクリックし、Twitter ID欄の右側の鉛筆マークをクリックして自分のtwitter アカウントを設定します。Twitter連携が終わったらAdd をクリック。
For欄に検索したいキーワードを入れます。今回はcloudと設定します。OKをクリック
Deploy ボタンをクリックします
右側のDebug タブに表示されることを確認します
© 2015 IBM Corporation24
取得したTwitterデータを加工してDBに保管する (1)
画面左側のノード一覧のfunction欄にある function、analysis欄のsentiment、storage欄のcloudant、dashDB
を右側のワークスペースにドラッグ&ドロップし、下図のようにマウスでつなぎます。
左側だけに接点があるものを選択します
© 2015 IBM Corporation25
取得したTwitterデータを加工してDBに保管する (2)
Cloudantのノードをダブルクリックします
サービスにバインドされているサービスを選択しデータを保管するデータベース名にcloudtweetsと指定して、OKをクリックします。
画面右上の をクリックします
ある程度 時間が経ったら twitterとsentiment
の接続を削除して、再度 をクリックします
では Cloudantに保管されたデータを見てみましょう
Bluemixのタブに移動します
© 2015 IBM Corporation26
取得したTwitterデータ内容を確認する (1)
アプリの概要の画面でCloudantをダブルクリックします
Cloudantのホーム画面が表示されたら、右上の LAUNCH をクリックしてCloudantのコンソールを起動します
© 2015 IBM Corporation27
取得したTwitterデータ内容を確認する (2)
CloudantのDB一覧から、cloudtweetsをクリックします
ドキュメント一覧が表示されるので、どれか1つを選んで鉛筆マークをクリックします
© 2015 IBM Corporation28
取得したTwitterデータ内容を確認する (3)
保管された内容が表示されます。
今回は TweetのIDと、センチメント・スコアを使用して分析を行います
確認したらNode-REDの画面(タブ)に移動します
© 2015 IBM Corporation29
取得したTwitterデータを加工してDBに保管する (1)
Twitterとsentimentのノードを接続し、sentimentとcloudantの接続を削除し、下図のようにします。
functionノードをダブルクリックします
function欄に以下を入力してOKをクリックします(IDとスコアだけを次のフローに送る)
msg.payload =
{
"TWEETID": msg.tweet.id,
"SENTIMENT": msg.sentiment.score
};
return msg;
© 2015 IBM Corporation30
取得したTwitterデータを加工してDBに保管する (2)
dashDBノードをダブルクリックします
Service欄に既定のものを選択し、Table名に作成したテーブル TWEETS と入力し、OKをクリックします
これで、Twitter からデータを取得、センチメント・スコアを追加、DBのデータ保管、までのステップが完了しました。 をクリックしてデプロイします。
次はdashDBで簡易分析を行います。 dashDBの画面(タブ)に移動します。
© 2015 IBM Corporation31
取得したTwitterデータを加工してDBに保管する (3)
dashDBノードをダブルクリックします
Service欄に既定のものを選択し、Table名に作成したテーブル TWEETS と入力し、OKをクリックします
これで、Twitter からデータを取得、センチメント・スコアを追加、DBのデータ保管、までのステップが完了しました。 をクリックしてデプロイします。
次はdashDBで簡易分析を行います。 dashDBの画面(タブ)に移動します。
© 2015 IBM Corporation34
dashDBで簡易分析する (2)
SQLでセンチメント・スコアごとのTweet数を調べます
左側のペインで、Run SQL をクリック
SELECT SENTIMENT, COUNT(TWEETID) from TWEETS
GROUP BY SENTIMENT ORDER BY SENTIMENT DESC;
以下のSQL分を入力し、Run をクリック
© 2015 IBM Corporation36
まとめ: コードを書かずにソーシャルデータを分析する
Twitterデータを簡単に取得
簡単なセットアップとワイヤリングだけで、データをNoSQL、SQLのデータベースに保存することが可能 さまざまな応用が可能
dashDBの Analyticsの機能を使えば(Rなど)、より高度な分析が可能
保管先には、MongoDBやHDFSなども選択でき、用途にあわせて使用可能
どんどんデータが取得されていくので、Twiiterのノードを削除して、再度 Deploy してください
© 2015 IBM Corporation38
既存のフローをインポートする (1)
公開されているフローをインポートします
• https://ibm.biz/BdX3Hr にアクセス
• 「ログインして DevOps Servicesの使用を開始」をクリック
• Bluemixのログインに使用したIDとパスワードでサインイン
公開プロジェクトが開くので、nodechat.json をクリックして開き、その内容をすべてコピーする
© 2015 IBM Corporation39
既存のフローをインポートする (2)
Node-REDの画面に移動し、右肩の + をクリックして新しいシートを作成します
画面右側のメニューをクリックし、Import → Clipboardをクリックします
© 2015 IBM Corporation41
デプロイして実行する
右上の をクリックしてデプロイします
Node-RED画面のURLをコピーします
ブラウザーの新しいタブを開きます
新しいタブで、コピーしたURLをペーストし、最後の mybluemix.net/red/# の部分をmybluemix.net/chat に変更し、Enterを押します
チャットルームが表示されるので名前とメッセージを入れて、チャットを行ってみましょう(近くの人とURLを共有することも
できます)
© 2015 IBM Corporation42
フローとノードの内容を確認する
1つ目のフロー:WebSocketプロトコルを使用した通信チャネルの作成
中央のfunctionノードで session情報を削除し、接続している全クライアントにメッセージをブロードキャストするように設定
2つ目のフロー:クライアント・サイドのコード
• 左のノード:GET リクエストを受信するエンドポイント
• 中央のノード(テンプレート):ページ構造、メッセージ処理、ビジュアル の3つからなる構成
• ページ構造:チャット・メッセージを受け取る div と、メッセージを送信するためのフィールドを保持するフッターが含まれるだけの単純な HTML
• メッセージ処理:JavaScriptによる、WebSocket接続、イベント処理
© 2015 IBM Corporation44
Node-REDでIoTアプリを作成
IBM IoTFoundation
デバイス IBM Bluemix
■全体像アプリケーション
スマホのセンサーで計測したデータをクラウドサービスに送信
サービス
アプリはサービスからセンサーデータを取得して処理する
IoT Foundationサービスはセンサーデータを仲介する
© 2015 IBM Corporation45
■スマートフォンをお持ちの方は、スマホのブラウザで下記URLにアクセスしてください。
http://phonesensor.mybluemix.net
PhoneSensorが起動します。スマホに内蔵された各種センサーの情報を取得し、BluemixのIoT Foundationサービスに送信しています。
■このセンサー情報を受け取って処理するアプリをBluemix上のNode-REDで作ってみましょう。
Node-REDの画面で、新しいシートを追加します(Page39の手順参照)
Node-REDでIoTアプリを作成
© 2015 IBM Corporation46
■スマホのセンサー情報を、クラウド上のIoT Foundationサービスから受け取ってみましょう。
左側のパレットから「ibmiot」ノードを中央のキャンバスにドラッグ&ドロップします。
■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。
Authentication は「Quickstart」を選択。Device Id に先程のPhoneSensorに表示されている文字列の末尾12桁の数字を入力。
Node-REDでIoTアプリを作成
ドラッグ&ドロップ
© 2015 IBM Corporation47
■受け取ったデータを表示するノードを用意します。
左側のパレットから「debug」ノードを中央のキャンバスにドラッグ&ドロップします。
■ノードの横にあるコネクタをクリック&ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。
Node-REDでIoTアプリを作成
ドラッグ&ドロップ
この部分を掴んで引っ張る
© 2015 IBM Corporation48
■これでデータの入力と出力の定義ができました。
それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。(この文字はすぐに消えます)
■実行結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはここに表示されます。
先程のPhoneSensorを動かします。スマホのセンサー情報がdebug画面に表示されれば成功です。
Node-REDでIoTアプリを作成
取得できる情報はスマホの機種によって異なる場合があります。
© 2015 IBM Corporation49
■debug画面にセンサーデータがうまく表示されない場合のチェックポイント
-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが停止していないでしょうか。
-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが「Disconnected」になります。
-「ibmiot」ノードのDevice Idが正しく設定されているかどうかをご確認ください。
例えば、スマホのWebブラウザでPhoneSensorを再読み込みするとDevice Idが変わってしまいます。
その場合は再度「ibmiot」ノードの定義情報をPhoneSensor側と同じになるよう変更してください。
Node-REDでIoTアプリを作成
© 2015 IBM Corporation50
■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を行うフローを作ってみましょう。
「tiltLR」というデータ項目に着目します。これはスマホ端末の左右の傾きを測定しているようです。実際に端末を動かして、値の変化を確認してください。
この傾き度合いによって表示メッセージを変えてみましょう。
■センサー情報から「tiltLR」の値だけを抽出します。
左側のパレットから「function」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、Functionの内容を以下のように書き換えて「OK」をクリックします。
return {payload:msg.payload.d.tiltLR};
Node-REDでIoTアプリを作成
© 2015 IBM Corporation51
■正しく動くかどうか確認してみましょう。
「ibmiot」と「debug」との間に、今作成した「function」ノードを挟むように線を繋ぎ変えます。
■右上の「Deploy」ボタンをクリックします。
■不要な情報が削除されて、「tiltLR」の値だけが表示されればOKです。
Node-REDでIoTアプリを作成
線はクリックで選択した状態でDeleteキーで削除できます。
© 2015 IBM Corporation52
■「tiltLR」の値によって処理を分岐させます。
左側のパレットから「switch」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、分岐条件を指定します。
左に5度以上傾いた場合=「左に傾いてます」右に5度以上傾いた場合=「右に傾いてます」傾きが5度未満の場合=「ほぼフラットです」
上記のような条件設定をするには右図のように指定して「OK」をクリックします。
Node-REDでIoTアプリを作成
条件を追加するには、「+rule」ボタンをクリックします。
傾きが-5度以上(左)なら1番へ
傾きが5度以上(右)なら2番へ
どちらでもない(フラット)なら3番へ
© 2015 IBM Corporation53
■条件分岐された後の処理を作成します。
左側のパレットから「template」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、表示するメッセージを定義します。メッセージの内容は自由に変更してください。
同様に2番、3番のノードも作成し、それぞれメッセージを定義します。最後にswitchノードのコネクタと1番、2番、3番のノードを線で繋げます。
Node-REDでIoTアプリを作成
{{payload}} と指定すると、先程debug
画面で確認した傾きデータの値が表示されます。
1番(左)
2番(右)
3番(フラット)
© 2015 IBM Corporation54
■キャンバスの中を整理して、各ノードを以下の図のように接続してください。
■処理フローが完成しました!
それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
Node-REDでIoTアプリを作成
正しく線が繋がっていれば、ノード自体はキャンバス内のどこに置かれていても動作に影響はありません。
© 2015 IBM Corporation55
■「Successfully Deployed」のメッセージが表示されれば成功です。
PhoneSensorを稼動させたスマホを左右に傾けて指定したメッセージが表示されることを確認してください。
Node-REDでIoTアプリを作成
お疲れ様でした!
IBM Bluemix と Node-RED によって、ほぼノンプログラミングでIoTデバイスから収集したデータを処理するアプリが作れました。
© 2015 IBM Corporation56
まとめ
Node-RED は様々な情報源からの情報を取得して、加工するのが得意
• Web API
• IoT (IoT Foundation/MQTT)
世の中にある様々な API を “node” という単位でカプセル化してくれる
• コードを書かなくても簡単に呼び出せる!
JavaScript によるプログラミングができる
• Function node
• 自作の node もあり
© 2015 IBM Corporation57
一般のWEBサービスの呼び出し
“http request” node を利用する
事前に呼び出しパラメータを設定する
• msg.url : WEBサービスURL
• msg.method: ‘GET’, ‘PUT’ 等
• msg.header: 必要があればヘッダーセット
• msg.payload: リクエストの body
• msg.topic: URL の <url>?<params> ? 以下のパラメータ
© 2015 IBM Corporation59
Node-REDでは作成したフローを別 Node-RED 環境に簡単に移すことができます。
別 Node-RED 環境に処理記述を移す手順
①画面右上からExportを選択 ②ポップアップのコードをコピー⇒Node-REDでは実装内容をText形式で保持
③画面右上からImportを選択 ④ ②でコピーしたTextを貼り付ける
【参考】フローのImport/Export
© 2015 IBM Corporation60
Appendix - Nodeの追加 独自Nodeの追加
• 既存のノードでは機能が不足する場合、独自のノードも容易に追加可能
• 記述ルールに従い、nodesディレクトリ配下にHTMLファイルとjsファイル作成しデプロイ
HTMLファイル:Nodeの体裁を定義(色やアイコン、入力項目など)
jsファイル:Nodeでの処理内容を記述
• 記述ルールやサンプル
http://nodered.org/docs/creating-nodes/first-node.html
作成、デプロイ
© 2015 IBM Corporation61
(参考)lower-case.html, lower-case.js
lower-case.html
lower-case.js
http://nodered.org/docs/creating-nodes/first-node.html
© 2015 IBM Corporation62
https://github.com/node-redhttp://flows.nodered.org
様々な node や flow が公開されています