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