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