PowerPoint プレゼンテーション

© 2015 IBM Corporation 1

IBM Bluemixの

Node-REDを使って

簡単アプリ作成を

体験する

2015年8月20日

Node-RED について

 IBM 英国Hursley 研究所の Emerging Technology Teamで開発されたソ フトウェア

• 2013年、社内ハッカソンで堂々一位、GitHub に登録 • 2014年 Qcon で発表

© 2015 IBM Corporation 3

Node-REDの特徴

 ブラウザベース UI

 node.js で動作

• 軽量

 機能をカプセル化してNodeと

して利用

 独自Nodeを作成・追加可能

 Bluemixの様々なサービスを

簡単に利用可能

ハードウェアデバイス，API，オンラインサービスが画期的な

方法で結合された"仮想環境をブラウザ上で実現

Bluemixでなくて も使用可能です

Node-RED 画面

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

© 2015 IBM Corporation 5 ①ノードを選択し ドラッグ&ドロップ

Node-RED実装方法

②ノード間を 接続 ④Deployを選択 Node-RED画面 ③ノードプロパティ設定

Node分類 機能 Input イベントの起動条件の設定 Output 外部アプリへの送信 Function イベント分岐、受信データの変換、一時停止 等 Social Twitter/Mail/ircの送受信 Storage DBへの保存、DB検索 Analysis 分析 Advanced RSS/atomの更新受信時にイベント起動 コネクタが右側に存在 ⇒①イベントの起動 イベント起動条件を満たし たとき、その情報を送信す る コネクタが左右に存在 ⇒②データ変換/分岐 左からデータ受信。 それを変換/分岐させ、右側に結果を 返す コネクタが左側に存在 ⇒③外部アプリ起動/DB保存 左からデータを受信し、それを送 信/保存

Node-RED搭載ノードの紹介 (代表的なもの)

© 2015 IBM Corporation 7

①イベントの起動

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ソースのうち、指定タグをすべ て取得 指定したタグの情報 コネクタが左右に存在するもの

②データ変換/分岐

© 2015 IBM Corporation 9 Node名称 機能 Debug フロー上に流れている情報を画面表示 http response http requestを返す Cloudant DBへのデータ保存 Mail メール送信 コネクタが左側に存在するもの

③外部アプリ起動/DB保存

プログラミング

JavaScriptで記述します

• 簡易エディターが付属

• 非同期処理も可能

※より複雑な処理は node の作

成をお勧めします。

詳細ドキュメント： http://nodered.org/docs/writing-functions.html function は最後に return msg; をいれる と次のnode に送信してくれます。

© 2015 IBM Corporation 11

覚えておくNode-RED固有変数

“msg” “msg” オブジェクト： node 間を流れるメッセージを表す JSON オブジェクト。 msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。 “context” オブジェクト： node 内部で保存される任意の JSON オブジェクト

“context.global” オブジェクト： node 間で共有されるグローバルオブジェクト “context”

1. コードを書かずにソーシャルデータを分析する

DBコンソー ルで簡易 分析

ハンズオン概要

Node-RED

Twitter 情報の取得 センチメント 分析結果の 追加 必要なデータ だけに絞込み データを DBに保管

© 2015 IBM Corporation 13

Node-RED Starterをデプロイする

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

データベースのバインド (1)

 Node-RED Starterが起動したら、データ保管用のdashDBをバインドします （データ確認用にCloudantを使用しますがデフォルトでバインド済み）

© 2015 IBM Corporation 15

データベースのバインド (2)

データベースのバインド (3)

 カタログから「データ&分析」セクションまで下にスクロールし、dashDBをクリックします ■アプリ名が作成したものと同じことを 確認して「使用」をクリックします ■すぐに再ステージングしますか？というダイアログ ボックスで、「再ステージ」をクリックします。 ステージングの間にdashDBの設定を開始します

© 2015 IBM Corporation 17

dashDBの起動 (1)

dashDBの起動 (2)

© 2015 IBM Corporation 19

dashDBの設定 (1)

 dashDBのウェルカム画面が表示されます。  ここからTwitterデータを保管するテーブルを作成します  左ペインの「Tables」をクリックします  新しくテーブルを作成するため、「Add Table」をクリックします

dashDBの設定 (2)

 テーブル作成のためのSQL 文を以下のように入力して、 「Run DDL」をクリックし テーブルを作成します ※TweetのIDとセンチメント の値を保管する列を作成し ます

CREATE TABLE "TWEETS" ( "TWEETID" VARCHAR(50), "SENTIMENT" INT );  テーブル作成が終了したら 右上の「×」でウィンドウを閉 じます

© 2015 IBM Corporation 21

dashDBの設定 (3)

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

Node-RED フローエディターの起動

 Bluemix画面で左側の「概要」をクリックします

 アプリ名の下にある「経路」のURLをクリックし、Node-REDフローエディターを起動します

 フローエディター画面が 表示されます

© 2015 IBM Corporation 23

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 を右側のワークスペースにドラッグ&ドロップし、下図 のようにマウスでつなぎます。 左側だけに 接点がある ものを選択 します

© 2015 IBM Corporation 25

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

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

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

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

© 2015 IBM Corporation 27

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

 CloudantのDB一覧から、cloudtweetsをクリックします

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

 保管された内容が表示されます。

 今回は TweetのIDと、センチメント・スコアを使用して分析を行います  確認したらNode-REDの画面（タブ）に移動します

© 2015 IBM Corporation 29

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

 Twitterとsentimentのノードを接続し、sentimentとcloudantの接続を削除し、下図のよう にします。  functionノードをダブルクリックします  function欄に以下を入力してOKをクリック します（IDとスコアだけを次のフローに送る） msg.payload = { "TWEETID": msg.tweet.id, "SENTIMENT": msg.sentiment.score }; return msg;

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

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

© 2015 IBM Corporation 31

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

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

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

© 2015 IBM Corporation 33

dashDBで簡易分析する (1)

dashDBで簡易分析する (2)

 SQLでセンチメント・スコアごとのTweet数を調べます  左側のペインで、Run SQL をクリック

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

© 2015 IBM Corporation 35

dashDBで簡易分析する (3)

 センチメント・スコアごとのTweet数の分布が表示されました ※数字が大きいほどポジティブ、小さいほどネガティブ

まとめ: コードを書かずにソーシャルデータを分析する

 Twitterデータを簡単に取得  簡単なセットアップとワイヤリングだけで、データをNoSQL、SQLのデータベースに保存するこ とが可能 さまざまな応用が可能  dashDBの Analyticsの機能を 使えば（Rなど）、より高度な分析が可能  保管先には、MongoDBやHDFSなども選択でき、用途にあわせて使用可能

どんどんデータが取得されていくので、Twiiterのノード

を削除して、再度 Deploy してください

© 2015 IBM Corporation 37

既存のフローをインポートする (1)

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

© 2015 IBM Corporation 39

既存のフローをインポートする (2)

 Node-REDの画面に移動し、右肩の ＋ をクリックして新しいシートを作成します

既存のフローをインポートする (3)

 先ほどコピーしたフロー（JSONテキスト）をペーストし、OKをクリックします

© 2015 IBM Corporation 41

デプロイして実行する

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

フローとノードの内容を確認する

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

© 2015 IBM Corporation 43

Node-REDでIoTアプリを作成 IBM IoT Foundation デバイス

IBM Bluemix

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

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

■スマホのセンサー情報を、クラウド上のIoT Foundation サービスから受け取ってみましょう。

左側のパレットから「ibmiot」ノードを中央のキャンバスに ドラッグ＆ドロップします。

■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。 Authentication は「Quickstart」を選択。

Device Id に先程のPhoneSensorに表示されている 文字列の末尾12桁の数字を入力。

Node-REDでIoTアプリを作成

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

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

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

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

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

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

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

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

© 2015 IBM Corporation 55 ■「Successfully Deployed」のメッセージが表示されれば 成功です。 PhoneSensorを稼動させたスマホを左右に傾けて 指定したメッセージが表示されることを確認してください。 Node-REDでIoTアプリを作成

お疲れ様でした！

IBM Bluemix と Node-RED によって、ほぼノンプログラミングで

IoTデバイスから収集したデータを処理するアプリが作れました。

まとめ

 Node-RED は様々な情報源からの情報を取得して、加工するのが得意 • Web API

• IoT (IoT Foundation/MQTT)

 世の中にある様々な API を “node” という単位でカプセル化してくれる • コードを書かなくても簡単に呼び出せる！

 JavaScript によるプログラミングができる • Function node

© 2015 IBM Corporation 57

一般のWEBサービスの呼び出し

 “http request” node を利用する  事前に呼び出しパラメータを設定する • msg.url : WEBサービスURL • msg.method: ‘GET’, ‘PUT’ 等

• msg.header: 必要があればヘッダーセット • msg.payload: リクエストの body

例：楽天トラベル施設検索API

© 2015 IBM Corporation 59 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

作成、デプロイ

© 2015 IBM Corporation 61

（参考）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