PowerPoint プレゼンテーション

IBM Bluemix の Node-RED を使って簡単アプリ作成を体験する 2015 年 8 月 20 日 1

Node-RED について IBM 英国 Hursley 研究所の Emerging Technology Team で開発されたソフトウェア 2013 年 社内ハッカソンで堂々一位 GitHub に登録 2014 年 Qcon で発表 オープンソースプロジェクトとして提供 2

Node-RED の特徴 ハードウェアデバイス,API, オンラインサービスが画期的な方法で結合された " 仮想環境をブラウザ上で実現 ブラウザベース UI node.js で動作 軽量 Bluemix でなくても使用可能です 機能をカプセル化して Node として利用 独自 Node を作成 追加可能 Bluemix の様々なサービスを簡単に利用可能 3

Node-RED 画面 シート 実装 UI 表示情報の切り替え デプロイ実行 ノード 処理フロー ノードパレット Node Infomation またはデバッグコンソール 4

Node-RED 実装方法 Node-RED 画面 4Deploy を選択 1 ノードを選択しドラッグ & ドロップ 2 ノード間を接続 3 ノードプロパティ設定 5

Node-RED 搭載ノードの紹介 ( 代表的なもの ) Node 分類 Input Output Function Social Storage Analysis Advanced 機能イベントの起動条件の設定外部アプリへの送信イベント分岐 受信データの変換 一時停止等 Twitter/Mail/ircの送受信 DBへの保存 DB 検索分析 RSS/atomの更新受信時にイベント起動 コネクタが右側に存在 1 イベントの起動イベント起動条件を満たしたとき その情報を送信する コネクタが左右に存在 2 データ変換 / 分岐左からデータ受信 それを変換 / 分岐させ 右側に結果を返す コネクタが左側に存在 3 外部アプリ起動 /DB 保存左からデータを受信し それを送信 / 保存 6

1 イベントの起動 Node 名称イベント開始条件後続フローに送信する内容 Inject 定期起動 orノードのクリック 指定文字列 or 現在時刻 or 情報なし ( 起動のみ ) デバック向けの機能 http Mail Twitter コネクタが右側に存在するもの http://[xxxxxxx].mybluemix.net/[ ノードの URL] リクエスト送信時 メール受信時 または未読メール存在時定期起動 指定メッセージの Tweet 時に自動起動 Feedparse RSS/atom の更新受信時 - リクエスト情報 メール本文 (text/plain) Tweet 情報 ( 本文 発言場所 国 ) 7

2 データ変換 / 分岐 コネクタが左右に存在するもの Node 名称 機能 後続フローに送信する内容 Function 受領データの更新 更新済データ Switch 条件に応じて フローを分岐させる 受信データ Delay フローを待機受信データ http request 指定サイトに接続接続サイトのソース Cloudant DB 検索 DB の検索結果 Sentiment 受信データをセンチメント分析評価情報を追加した受信データ Html HTML ソースのうち 指定タグをすべて取得 指定したタグの情報 8

3 外部アプリ起動 /DB 保存 コネクタが左側に存在するもの Node 名称 Debug http response Cloudant Mail 機能フロー上に流れている情報を画面表示 http requestを返す DBへのデータ保存メール送信 9

プログラミング JavaScript で記述します 簡易エディターが付属 非同期処理も可能 より複雑な処理は node の作成をお勧めします function は最後に return msg; をいれると次の node に送信してくれます 詳細ドキュメント : http://nodered.org/docs/writing-functions.html 10

覚えておく Node-RED 固有変数 context.global context msg msg オブジェクト : node 間を流れるメッセージを表す JSON オブジェクト msg.payload はかならず存在する msg.<string> で新しい属性を追加できる context オブジェクト : node 内部で保存される任意の JSON オブジェクト context.global オブジェクト : node 間で共有されるグローバルオブジェクト 11

1. コードを書かずにソーシャルデータを分析する ハンズオン概要 Twitter 情報の取得 センチメント分析結果の追加 必要なデータだけに絞込み データを DB に保管 DB コンソールで簡易分析 Node-RED 12

Node-RED Starter をデプロイする Bluemix にログインします ログイン後 カタログ をクリック 画面上部 ボイラープレート のセクションの Node-RED Starter をクリック 名前のフィールドにアプリの名前を入力 (URL の一部となるので他と重複しないように指定します ) 例 : 日付 + 名前 + 何か文字列 = 0820taroabc 作成 をクリック ここをクリック Node-RED Starter が起動します 若干時間がかかります 13

データベースのバインド (1) Node-RED Starter が起動したら データ保管用の dashdb をバインドします ( データ確認用に Cloudant を使用しますがデフォルトでバインド済み ) 画面左側の 概要 をクリック 14

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

データベースのバインド (3) カタログから データ & 分析 セクションまで下にスクロールし dashdb をクリックします アプリ名が作成したものと同じことを確認して 使用 をクリックします 16 すぐに再ステージングしますか? というダイアログボックスで 再ステージ をクリックします ステージングの間に dashdb の設定を開始します

dashdb の起動 (1) 左ペインで概要をクリックし dashdb をクリックします 17

dashdb の起動 (2) dashdb 左ホーム画面で LAUNCH をクリックし dashdb コンソールを起動します 18

dashdb の設定 (1) dashdbのウェルカム画面が表示されます ここからTwitterデータを保管するテーブルを作成します 左ペインの Tables をクリックします 新しくテーブルを作成するため Add Table をクリックします 19

dashdb の設定 (2) テーブル作成のための SQL 文を以下のように入力して Run DDL をクリックしテーブルを作成します Tweet の ID とセンチメントの値を保管する列を作成します CREATE TABLE "TWEETS" ( "TWEETID" VARCHAR(50), "SENTIMENT" INT ); テーブル作成が終了したら右上の でウィンドウを閉じます 20

dashdb の設定 (3) 自動的に Scheme 名が設定され テーブルが作成されたことを確認します 保管用 DB の設定はこれで終了です Bluemix の画面に戻ります dashdb のタブは開いたままにしておいてください 21

Node-RED フローエディターの起動 Bluemix 画面で左側の 概要 をクリックします アプリ名の下にある 経路 の URL をクリックし Node-RED フローエディターを起動します フローエディター画面が表示されます 22

Twitter データを取得する 画面左側のノード一覧の Social の欄にある Twitter と output 欄にある debug を右側のワークスペースにドラッグ & ドロップし マウスでつなぎます twitter node をダブルクリックし Twitter ID 欄の右側の鉛筆マークをクリックして自分の twitter アカウントを設定します Twitter 連携が終わったら Add をクリック For 欄に検索したいキーワードを入れます 今回は cloud と設定します OK をクリック Deploy ボタンをクリックします 右側の Debug タブに表示されることを確認します 23

取得した Twitter データを加工して DB に保管する (1) 画面左側のノード一覧の function 欄にある function analysis 欄の sentiment storage 欄の cloudant dashdb を右側のワークスペースにドラッグ & ドロップし 下図のようにマウスでつなぎます 左側だけに接点があるものを選択します 24

取得した Twitter データを加工して DB に保管する (2) Cloudant のノードをダブルクリックします サービスにバインドされているサービスを選択しデータを保管するデータベース名に cloudtweets と指定して OK をクリックします 画面右上の をクリックします ある程度時間が経ったら twitterとsentiment の接続を削除して 再度をクリックします では Cloudant に保管されたデータを見てみましょう Bluemix のタブに移動します 25

取得した Twitter データ内容を確認する (1) アプリの概要の画面で Cloudant をダブルクリックします Cloudant のホーム画面が表示されたら 右上の LAUNCH をクリックして Cloudant のコンソールを起動します 26

取得した Twitter データ内容を確認する (2) Cloudant の DB 一覧から cloudtweets をクリックします ドキュメント一覧が表示されるので どれか 1 つを選んで鉛筆マークをクリックします 27

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

取得した Twitter データを加工して DB に保管する (1) Twitter と sentiment のノードを接続し sentiment と cloudant の接続を削除し 下図のようにします function ノードをダブルクリックします function 欄に以下を入力して OK をクリックします (ID とスコアだけを次のフローに送る ) msg.payload = { "TWEETID": msg.tweet.id, "SENTIMENT": msg.sentiment.score }; return msg; 29

取得した Twitter データを加工して DB に保管する (2) dashdb ノードをダブルクリックします Service 欄に既定のものを選択し Table 名に作成したテーブル TWEETS と入力し OK をクリックします これで Twitter からデータを取得 センチメント スコアを追加 DBのデータ保管 までのステップが完了しました をクリックしてデプロイします 次は dashdb で簡易分析を行います dashdb の画面 ( タブ ) に移動します 30

取得した Twitter データを加工して DB に保管する (3) dashdb ノードをダブルクリックします Service 欄に既定のものを選択し Table 名に作成したテーブル TWEETS と入力し OK をクリックします これで Twitter からデータを取得 センチメント スコアを追加 DBのデータ保管 までのステップが完了しました をクリックしてデプロイします 次は dashdb で簡易分析を行います dashdb の画面 ( タブ ) に移動します 31

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

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

dashdb で簡易分析する (2) SQL でセンチメント スコアごとの Tweet 数を調べます 左側のペインで Run SQL をクリック 以下の SQL 分を入力し Run をクリック SELECT SENTIMENT, COUNT(TWEETID) from TWEETS GROUP BY SENTIMENT ORDER BY SENTIMENT DESC; 34

dashdb で簡易分析する (3) センチメント スコアごとの Tweet 数の分布が表示されました 数字が大きいほどポジティブ 小さいほどネガティブ 35

まとめ : コードを書かずにソーシャルデータを分析する Twitter データを簡単に取得 簡単なセットアップとワイヤリングだけで データをNoSQL SQLのデータベースに保存することが可能さまざまな応用が可能 dashdb の Analytics の機能を使えば (R など ) より高度な分析が可能 保管先には MongoDB や HDFS なども選択でき 用途にあわせて使用可能 どんどんデータが取得されていくので Twiiter のノードを削除して 再度 Deploy してください 36

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

既存のフローをインポートする (1) 公開されているフローをインポートします https://ibm.biz/bdx3hr にアクセス ログインして DevOps Services の使用を開始 をクリック Bluemix のログインに使用した ID とパスワードでサインイン 公開プロジェクトが開くので nodechat.json をクリックして開き その内容をすべてコピーする 38

既存のフローをインポートする (2) Node-RED の画面に移動し 右肩の + をクリックして新しいシートを作成します 画面右側のメニューをクリックし Import Clipboard をクリックします 39

既存のフローをインポートする (3) 先ほどコピーしたフロー (JSON テキスト ) をペーストし OK をクリックします フローがインポートされます 40

デプロイして実行する 右上の をクリックしてデプロイします Node-RED 画面の URL をコピーします ブラウザーの新しいタブを開きます 新しいタブで コピーした URL をペーストし 最後の mybluemix.net/red/# の部分を mybluemix.net/chat に変更し Enter を押します チャットルームが表示されるので名前とメッセージを入れて チャットを行ってみましょう ( 近くの人と URL を共有することもできます ) 41

フローとノードの内容を確認する 1 つ目のフロー :WebSocket プロトコルを使用した通信チャネルの作成 中央のfunctionノードで session 情報を削除し 接続している全クライアントにメッセージをブロードキャストするように設定 2 つ目のフロー : クライアント サイドのコード 42 左のノード :GET リクエストを受信するエンドポイント 中央のノード ( テンプレート ): ページ構造 メッセージ処理 ビジュアルの 3 つからなる構成 ページ構造 : チャット メッセージを受け取る div と メッセージを送信するためのフィールドを保持するフッターが含まれるだけの単純な HTML メッセージ処理 :JavaScript による WebSocket 接続 イベント処理

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

Node-RED で IoT アプリを作成 全体像 サービス アプリケーション IoT Foundation サービスはセンサーデータを仲介する IBM IoT Foundation デバイス IBM Bluemix スマホのセンサーで計測したデータをクラウドサービスに送信 アプリはサービスからセンサーデータを取得して処理する 44

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

Node-RED で IoT アプリを作成 スマホのセンサー情報を クラウド上の IoT Foundation サービスから受け取ってみましょう 左側のパレットから ibmiot ノードを中央のキャンバスにドラッグ & ドロップします ドラッグ & ドロップ キャンバスにドロップした IBM IoT App In ノードをダブルクリックして設定画面を開きます Authentication は Quickstart を選択 Device Id に先程の PhoneSensor に表示されている文字列の末尾 12 桁の数字を入力 46

Node-RED で IoT アプリを作成 受け取ったデータを表示するノードを用意します 左側のパレットから debug ノードを中央のキャンバスにドラッグ & ドロップします ドラッグ & ドロップ ノードの横にあるコネクタをクリック & ホールドし ibmiot ノードと debug ノードを線で繋ぎます この部分を掴んで引っ張る 47

Node-RED で IoT アプリを作成 これでデータの入力と出力の定義ができました それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 画面上部に Successfully Deployed の文字が表示されれば OK です ( この文字はすぐに消えます ) 実行結果を確認してみましょう 右上の debug タブを選択します debug ノードに流れてきたデータはここに表示されます 先程の PhoneSensor を動かします スマホのセンサー情報が debug 画面に表示されれば成功です 48 取得できる情報はスマホの機種によって異なる場合があります

Node-RED で IoT アプリを作成 debug 画面にセンサーデータがうまく表示されない場合のチェックポイント -PhoneSensor が正しく稼動しているかどうかを確認してください スリープ状態でアプリが停止していないでしょうか -PhoneSensor の接続ステータスが Connected になっていることを確認してください 例えば 誤って PhoneSensor 画面下部の Register をタップしてしまうと ステータスが Disconnected になります - ibmiot ノードの Device Id が正しく設定されているかどうかをご確認ください 例えば スマホの Web ブラウザで PhoneSensor を再読み込みすると Device Id が変わってしまいます その場合は再度 ibmiot ノードの定義情報を PhoneSensor 側と同じになるよう変更してください 49

Node-RED で IoT アプリを作成 正しくセンサー情報が取得できたので この情報に応じて何らかの処理を行うフローを作ってみましょう tiltlr というデータ項目に着目します これはスマホ端末の左右の傾きを測定しているようです 実際に端末を動かして 値の変化を確認してください この傾き度合いによって表示メッセージを変えてみましょう センサー情報から tiltlr の値だけを抽出します 左側のパレットから function ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き Function の内容を以下のように書き換えて OK をクリックします return {payload:msg.payload.d.tiltlr}; 50

Node-RED で IoT アプリを作成 正しく動くかどうか確認してみましょう ibmiot と debug との間に 今作成した function ノードを挟むように線を繋ぎ変えます 線はクリックで選択した状態で Delete キーで削除できます 右上の Deploy ボタンをクリックします 不要な情報が削除されて tiltlr の値だけが表示されれば OK です 51

Node-RED で IoT アプリを作成 tiltlr の値によって処理を分岐させます 左側のパレットから switch ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き 分岐条件を指定します 左に 5 度以上傾いた場合 = 左に傾いてます 右に 5 度以上傾いた場合 = 右に傾いてます 傾きが 5 度未満の場合 = ほぼフラットです 上記のような条件設定をするには右図のように指定して OK をクリックします 条件を追加するには +rule ボタンをクリックします 傾きが -5 度以上 ( 左 ) なら 1 番へ 傾きが 5 度以上 ( 右 ) なら 2 番へ どちらでもない ( フラット ) なら 3 番へ 52

Node-RED で IoT アプリを作成 条件分岐された後の処理を作成します 左側のパレットから template ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き 表示するメッセージを定義します メッセージの内容は自由に変更してください {{payload}} と指定すると 先程 debug 画面で確認した傾きデータの値が表示されます 1 番 ( 左 ) 2 番 ( 右 ) 3 番 ( フラット ) 53 同様に 2 番 3 番のノードも作成し それぞれメッセージを定義します 最後に switch ノードのコネクタと 1 番 2 番 3 番のノードを線で繋げます

Node-RED で IoT アプリを作成 キャンバスの中を整理して 各ノードを以下の図のように接続してください 正しく線が繋がっていれば ノード自体はキャンバス内のどこに置かれていても動作に影響はありません 処理フローが完成しました! それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 54

Node-RED で IoT アプリを作成 Successfully Deployed のメッセージが表示されれば成功です PhoneSensor を稼動させたスマホを左右に傾けて指定したメッセージが表示されることを確認してください お疲れ様でした! IBM Bluemix と Node-RED によって ほぼノンプログラミングで IoT デバイスから収集したデータを処理するアプリが作れました 55

まとめ Node-RED は様々な情報源からの情報を取得して 加工するのが得意 Web API IoT (IoT Foundation/MQTT) 世の中にある様々な API を node という単位でカプセル化してくれる コードを書かなくても簡単に呼び出せる! JavaScript によるプログラミングができる Function node 自作の node もあり 56

一般の WEB サービスの呼び出し http request node を利用する 事前に呼び出しパラメータを設定する msg.url : WEBサービスURL msg.method: GET, PUT 等 msg.header: 必要があればヘッダーセット msg.payload: リクエストの body msg.topic: URL の <url>?<params>? 以下のパラメータ 57

例 : 楽天トラベル施設検索 API https://webservice.rakuten.co.jp/api/simplehotelsearch/ 58

参考 フローの Import/Export Node-RED では作成したフローを別 Node-RED 環境に簡単に移すことができます 別 Node-RED 環境に処理記述を移す手順 1 画面右上から Export を選択 2 ポップアップのコードをコピー Node-RED では実装内容を Text 形式で保持 59 3 画面右上から Import を選択 4 2 でコピーした Text を貼り付ける

Appendix - Node の追加 独自 Node の追加 既存のノードでは機能が不足する場合 独自のノードも容易に追加可能 記述ルールに従い nodesディレクトリ配下にhtmlファイルとjsファイル作成しデプロイ HTMLファイル :Nodeの体裁を定義( 色やアイコン 入力項目など ) jsファイル :Nodeでの処理内容を記述 記述ルールやサンプル http://nodered.org/docs/creating-nodes/first-node.html 作成 デプロイ 60

( 参考 )lower-case.html, lower-case.js lower-case.html lower-case.js http://nodered.org/docs/creating-nodes/first-node.html 61

https://github.com/node-red http://flows.nodered.org 様々な node や flow が公開されています 62