ibm bluemix node-redを使って簡単アプリ作成を体験する

© 2015 IBM Corporation1

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

2015 年 10 月 01 日


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.html

function は最後に 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 を使用しますがデフォルトでバインド済み）

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


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


データベースのバインド (3) カタログから「データ & 分析」セクションまで下にスクロール

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

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


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

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

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

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

ある程度時間が経ったら twitter とsentiment の接続を削除して、再度　　　　　　　　をクリックします

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

Bluemix のタブに移動します


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

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

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


取得した Twitter データ内容を確認する (2) Cloudant の DB 一覧から、 cloudtweets をクリックします

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


取得した Twitter データ内容を確認する (3) 保管された内容が表示されます。今回は Tweet の ID と、センチメント・スコアを使用して分析を行います確認したら Node-RED の画面（タブ）に移動します


取得した Twitter データを加工して DB に保管する (1) 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 の画面（タブ）に移動します。


取得した Twitter データを加工して DB に保管する (4) Browse Data をクリックし、 ID とスコアが保管されていることを確認します


dashDB で簡易分析する (1) Browse Data をクリックし、 ID とスコアが保管されていることを確認します


dashDB で簡易分析する (2) SQL でセンチメント・スコアごとの Tweet 数を調べます左側のペインで、 Run SQL をクリック

SELECT SENTIMENT, COUNT(TWEETID) from TWEETS GROUP BY SENTIMENT ORDER BY SENTIMENT DESC;

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


dashDB で簡易分析する (3)

センチメント・スコアごとの 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

https://ibm.biz/BdX3Hr


既存のフローをインポートする (2) Node-RED の画面に移動し、右肩の＋をクリックして新しいシートを作成

します

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


既存のフローをインポートする (3) 先ほどコピーしたフロー（ 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 IoT Foundation

デバイス 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.jslower-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

https://github.com/node-red