ibm bluemixの · 1 © 2015 ibm corporation ibm bluemixの node-redを使って...

© 2015 IBM Corporation1

IBM BluemixのNode-REDを使って簡単アプリ作成を体験する

2015年8月20日


Node-RED について

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

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

• 2014年 Qcon で発表

オープンソースプロジェクトとして提供


Node-REDの特徴

ブラウザベース UI

node.js で動作

• 軽量

機能をカプセル化してNodeとして利用

独自Nodeを作成・追加可能

Bluemixの様々なサービスを簡単に利用可能

ハードウェアデバイス，API，オンラインサービスが画期的な方法で結合された"仮想環境をブラウザ上で実現

Bluemixでなくても使用可能です


Node-RED 画面

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

デプロイ実行

シート

ノード

ノードパレット

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

処理フロー


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

Node-RED実装方法

②ノード間を接続

④Deployを選択Node-RED画面

③ノードプロパティ設定


Node分類機能

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

Output 外部アプリへの送信

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

Social Twitter/Mail/ircの送受信

Storage DBへの保存、DB検索

Analysis 分析

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

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

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

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

Node-RED搭載ノードの紹介 (代表的なもの)


①イベントの起動

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

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

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

リクエスト情報

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

メール本文(text/plain)

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

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

Feedparse RSS/atomの更新受信時 -

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


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

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

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

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

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

Cloudant DB検索 DBの検索結果

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

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

指定したタグの情報

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

②データ変換/分岐


Node名称機能

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

http response http requestを返す

Cloudant DBへのデータ保存

Mail メール送信

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

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


プログラミング

JavaScriptで記述します

• 簡易エディターが付属

• 非同期処理も可能

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

詳細ドキュメント：

http://nodered.org/docs/writing-functions.htmlfunction は最後に return msg; をいれると次のnode に送信してくれます。


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

“msg”

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

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

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

“context”

“context.global”


1. コードを書かずにソーシャルデータを分析する

DBコンソールで簡易分析

ハンズオン概要

Node-RED

Twitter情報の取得

センチメント分析結果の追加

必要なデータだけに絞込み

データをDBに保管


Node-RED Starterをデプロイする

ここをクリック

Bluemixにログインします

ログイン後、「カタログ」をクリック

画面上部「ボイラープレート」のセクションの「Node-RED Starter」をクリック

名前のフィールドにアプリの名前を入力（URLの一部となるので他と重複しないように指定します）例：日付＋名前＋何か文字列= 0820taroabc

「作成」をクリック

Node-RED Starterが起動します

※若干時間がかかります


データベースのバインド (1)

Node-RED Starterが起動したら、データ保管用のdashDBをバインドします（データ確認用にCloudantを使用しますがデフォルトでバインド済み）

画面左側の「概要」をクリック



「サービスまたはAPIの追加」をクリックしてdashDBをバインドします



カタログから「データ&分析」セクションまで下にスクロールし、dashDBをクリックします

■アプリ名が作成したものと同じことを確認して「使用」をクリックします

■すぐに再ステージングしますか？というダイアログボックスで、「再ステージ」をクリックします。

ステージングの間にdashDBの設定を開始します


dashDBの起動 (1)

左ペインで概要をクリックしdashDBをクリックします


dashDBの起動 (2)

dashDB左ホーム画面で「LAUNCH」をクリックしdashDBコンソールを起動します


dashDBの設定 (1)

dashDBのウェルカム画面が表示されます。

ここからTwitterデータを保管するテーブルを作成します

左ペインの「Tables」をクリックします

新しくテーブルを作成するため、「Add Table」をクリックします


dashDBの設定 (2)

テーブル作成のためのSQL

文を以下のように入力して、「Run DDL」をクリックしテーブルを作成します※TweetのIDとセンチメントの値を保管する列を作成します

CREATE TABLE "TWEETS" (

"TWEETID" VARCHAR(50),"SENTIMENT" INT

);

テーブル作成が終了したら右上の「×」でウィンドウを閉じます


dashDBの設定 (3)

自動的にScheme名が設定され、テーブルが作成されたことを確認します

保管用DBの設定はこれで終了です。Bluemixの画面に戻ります。dashDBのタブは開いたままにしておいてください


Node-RED フローエディターの起動

Bluemix画面で左側の「概要」をクリックします

アプリ名の下にある「経路」のURLをクリックし、Node-REDフローエディターを起動します

フローエディター画面が表示されます


Twitterデータを取得する

画面左側のノード一覧のSocialの欄にあるTwitterと、 output欄にあるdebugを右側のワークスペースにドラッグ&ドロップし、マウスでつなぎます。

twitter node をダブルクリックし、Twitter ID欄の右側の鉛筆マークをクリックして自分のtwitter アカウントを設定します。Twitter連携が終わったらAdd をクリック。

For欄に検索したいキーワードを入れます。今回はcloudと設定します。OKをクリック

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

右側のDebug タブに表示されることを確認します


取得したTwitterデータを加工してDBに保管する (1)

画面左側のノード一覧のfunction欄にある function、analysis欄のsentiment、storage欄のcloudant、dashDB

を右側のワークスペースにドラッグ&ドロップし、下図のようにマウスでつなぎます。

左側だけに接点があるものを選択します



Cloudantのノードをダブルクリックします

サービスにバインドされているサービスを選択しデータを保管するデータベース名にcloudtweetsと指定して、OKをクリックします。

画面右上のをクリックします

ある程度時間が経ったら twitterとsentiment

の接続を削除して、再度をクリックします

では Cloudantに保管されたデータを見てみましょう

Bluemixのタブに移動します


取得したTwitterデータ内容を確認する (1)

アプリの概要の画面でCloudantをダブルクリックします

Cloudantのホーム画面が表示されたら、右上の LAUNCH をクリックしてCloudantのコンソールを起動します



CloudantのDB一覧から、cloudtweetsをクリックします

ドキュメント一覧が表示されるので、どれか1つを選んで鉛筆マークをクリックします



保管された内容が表示されます。

今回は TweetのIDと、センチメント・スコアを使用して分析を行います

確認したらNode-REDの画面（タブ）に移動します



Twitterとsentimentのノードを接続し、sentimentとcloudantの接続を削除し、下図のようにします。

functionノードをダブルクリックします

function欄に以下を入力してOKをクリックします（IDとスコアだけを次のフローに送る）

msg.payload =

{

"TWEETID": msg.tweet.id,

"SENTIMENT": msg.sentiment.score

};

return msg;



dashDBノードをダブルクリックします

Service欄に既定のものを選択し、Table名に作成したテーブル TWEETS と入力し、OKをクリックします

これで、Twitter からデータを取得、センチメント・スコアを追加、DBのデータ保管、までのステップが完了しました。をクリックしてデプロイします。

次はdashDBで簡易分析を行います。 dashDBの画面（タブ）に移動します。



Browse Dataをクリックし、IDとスコアが保管されていることを確認します


dashDBで簡易分析する (1)

Browse Dataをクリックし、IDとスコアが保管されていることを確認します



SQLでセンチメント・スコアごとのTweet数を調べます

左側のペインで、Run SQL をクリック

SELECT SENTIMENT, COUNT(TWEETID) from TWEETS

GROUP BY SENTIMENT ORDER BY SENTIMENT DESC;

以下のSQL分を入力し、Run をクリック



センチメント・スコアごとのTweet数の分布が表示されました※数字が大きいほどポジティブ、小さいほどネガティブ


まとめ: コードを書かずにソーシャルデータを分析する

Twitterデータを簡単に取得

簡単なセットアップとワイヤリングだけで、データをNoSQL、SQLのデータベースに保存することが可能さまざまな応用が可能

dashDBの Analyticsの機能を使えば（Rなど）、より高度な分析が可能

保管先には、MongoDBやHDFSなども選択でき、用途にあわせて使用可能

どんどんデータが取得されていくので、Twiiterのノードを削除して、再度 Deploy してください


2. すばやくチャット・アプリを作る


既存のフローをインポートする (1)

公開されているフローをインポートします

• https://ibm.biz/BdX3Hr にアクセス

• 「ログインして DevOps Servicesの使用を開始」をクリック

• Bluemixのログインに使用したIDとパスワードでサインイン

公開プロジェクトが開くので、nodechat.json をクリックして開き、その内容をすべてコピーする

https://ibm.biz/BdX3Hr



Node-REDの画面に移動し、右肩の＋をクリックして新しいシートを作成します

画面右側のメニューをクリックし、Import → Clipboardをクリックします



先ほどコピーしたフロー（JSONテキスト）をペーストし、OKをクリックします

フローがインポートされます


デプロイして実行する

右上のをクリックしてデプロイします

Node-RED画面のURLをコピーします

ブラウザーの新しいタブを開きます

新しいタブで、コピーしたURLをペーストし、最後の mybluemix.net/red/# の部分をmybluemix.net/chat に変更し、Enterを押します

チャットルームが表示されるので名前とメッセージを入れて、チャットを行ってみましょう（近くの人とURLを共有することも

できます）


フローとノードの内容を確認する

１つ目のフロー：WebSocketプロトコルを使用した通信チャネルの作成

中央のfunctionノードで session情報を削除し、接続している全クライアントにメッセージをブロードキャストするように設定

2つ目のフロー：クライアント・サイドのコード

• 左のノード：GET リクエストを受信するエンドポイント

• 中央のノード(テンプレート)：ページ構造、メッセージ処理、ビジュアルの3つからなる構成

• ページ構造：チャット・メッセージを受け取る div と、メッセージを送信するためのフィールドを保持するフッターが含まれるだけの単純な HTML

• メッセージ処理：JavaScriptによる、WebSocket接続、イベント処理


3. IoTアプリを作成：モバイルのセンサーデータを取得する


Node-REDでIoTアプリを作成

IBM IoTFoundation

デバイス IBM Bluemix

■全体像アプリケーション

スマホのセンサーで計測したデータをクラウドサービスに送信

サービス

アプリはサービスからセンサーデータを取得して処理する

IoT Foundationサービスはセンサーデータを仲介する


■スマートフォンをお持ちの方は、スマホのブラウザで下記URLにアクセスしてください。

http://phonesensor.mybluemix.net

PhoneSensorが起動します。スマホに内蔵された各種センサーの情報を取得し、BluemixのIoT Foundationサービスに送信しています。

■このセンサー情報を受け取って処理するアプリをBluemix上のNode-REDで作ってみましょう。

Node-REDの画面で、新しいシートを追加します（Page39の手順参照）


http://bluemix.net/


■スマホのセンサー情報を、クラウド上のIoT Foundationサービスから受け取ってみましょう。

左側のパレットから「ibmiot」ノードを中央のキャンバスにドラッグ＆ドロップします。

■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。

Authentication は「Quickstart」を選択。Device Id に先程のPhoneSensorに表示されている文字列の末尾12桁の数字を入力。


ドラッグ＆ドロップ


■受け取ったデータを表示するノードを用意します。

左側のパレットから「debug」ノードを中央のキャンバスにドラッグ＆ドロップします。

■ノードの横にあるコネクタをクリック＆ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。


ドラッグ＆ドロップ

この部分を掴んで引っ張る


■これでデータの入力と出力の定義ができました。

それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。

■画面上部に「Successfully Deployed」の文字が表示されればOKです。（この文字はすぐに消えます）

■実行結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはここに表示されます。

先程のPhoneSensorを動かします。スマホのセンサー情報がdebug画面に表示されれば成功です。


取得できる情報はスマホの機種によって異なる場合があります。


■debug画面にセンサーデータがうまく表示されない場合のチェックポイント

-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが停止していないでしょうか。

-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが「Disconnected」になります。

-「ibmiot」ノードのDevice Idが正しく設定されているかどうかをご確認ください。

例えば、スマホのWebブラウザでPhoneSensorを再読み込みするとDevice Idが変わってしまいます。

その場合は再度「ibmiot」ノードの定義情報をPhoneSensor側と同じになるよう変更してください。



■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を行うフローを作ってみましょう。

「tiltLR」というデータ項目に着目します。これはスマホ端末の左右の傾きを測定しているようです。実際に端末を動かして、値の変化を確認してください。

この傾き度合いによって表示メッセージを変えてみましょう。

■センサー情報から「tiltLR」の値だけを抽出します。

左側のパレットから「function」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、Functionの内容を以下のように書き換えて「OK」をクリックします。

return {payload:msg.payload.d.tiltLR};



■正しく動くかどうか確認してみましょう。

「ibmiot」と「debug」との間に、今作成した「function」ノードを挟むように線を繋ぎ変えます。

■右上の「Deploy」ボタンをクリックします。

■不要な情報が削除されて、「tiltLR」の値だけが表示されればOKです。


線はクリックで選択した状態でDeleteキーで削除できます。


■「tiltLR」の値によって処理を分岐させます。

左側のパレットから「switch」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、分岐条件を指定します。

左に5度以上傾いた場合＝「左に傾いてます」右に5度以上傾いた場合＝「右に傾いてます」傾きが5度未満の場合＝「ほぼフラットです」

上記のような条件設定をするには右図のように指定して「OK」をクリックします。


条件を追加するには、「+rule」ボタンをクリックします。

傾きが-5度以上(左)なら1番へ

傾きが5度以上(右)なら2番へ

どちらでもない(フラット)なら3番へ


■条件分岐された後の処理を作成します。

左側のパレットから「template」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、表示するメッセージを定義します。メッセージの内容は自由に変更してください。

同様に2番、3番のノードも作成し、それぞれメッセージを定義します。最後にswitchノードのコネクタと1番、2番、3番のノードを線で繋げます。


{{payload}} と指定すると、先程debug

画面で確認した傾きデータの値が表示されます。

1番(左)

2番(右)

3番(フラット)


■キャンバスの中を整理して、各ノードを以下の図のように接続してください。

■処理フローが完成しました！

それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。


正しく線が繋がっていれば、ノード自体はキャンバス内のどこに置かれていても動作に影響はありません。


■「Successfully Deployed」のメッセージが表示されれば成功です。

PhoneSensorを稼動させたスマホを左右に傾けて指定したメッセージが表示されることを確認してください。


お疲れ様でした！

IBM Bluemix と Node-RED によって、ほぼノンプログラミングでIoTデバイスから収集したデータを処理するアプリが作れました。


まとめ

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

• Web API

• IoT (IoT Foundation/MQTT)

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

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

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

• Function node

• 自作の node もあり


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

“http request” node を利用する

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

• msg.url : WEBサービスURL

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

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

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

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


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

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


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

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

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

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

【参考】フローのImport/Export


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

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

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

HTMLファイル：Nodeの体裁を定義（色やアイコン、入力項目など）

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

• 記述ルールやサンプル

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

作成、デプロイ


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

lower-case.html

lower-case.js

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


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

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

https://github.com/node-red

ibm bluemixの · 1 © 2015 ibm corporation ibm bluemixの node-redを使って...

Documents