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を使用しますがデフォルトでバインド済み）
 画面左側の「概要」をクリック

 「サービスまたは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 をクリックして開き、その
内容をすべてコピーする

 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 IoT
Foundation
デバイス
IBM Bluemix
■全体像
アプリケーション
スマホのセンサーで計測した
データをクラウドサービスに送信
サービス
アプリはサービスからセンサー
データを取得して処理する
IoT Foundationサービスは
センサーデータを仲介する

■スマートフォンをお持ちの方は、スマホのブラウザで下記URLに
アクセスしてください。
http://phonesensor.mybluemix.net
PhoneSensorが起動します。スマホに内蔵された各種センサーの
情報を取得し、BluemixのIoT Foundationサービスに送信して
います。
■このセンサー情報を受け取って処理するアプリをBluemix上の
Node-REDで作ってみましょう。
Node-REDの画面で、新しいシートを追加します（Page39の手順参照）

■スマホのセンサー情報を、クラウド上の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-red
http://flows.nodered.org
 様々な node や flow が公開されています

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

Similaire à IBM Bluemix Node-REDを使って簡単アプリ作成を体験する (20)

Plus de Masaya Fujita

Plus de Masaya Fujita (6)

Dernier

Dernier (14)

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