node red hands on - public
TRANSCRIPT
Node-RED ハンズオン@PaaS勉強会
2015年8月26日
© 2015 @ibmamnt
自己紹介 ~名前: 天野 武彦
所属:IBM 東京ソフトウェア開発研究所
主な活動: 先端開発技術の推進・啓蒙
(エリア: Cloud Foundry, DevOps DevOps 等)
趣味: 目下のところ育児に没頭
Twitter: @ibmamnt
ブログ: http://amanoblog.wordpress.com
Cloud Foundry 百⽇⾏参加しています!
© 2015 @ibmamnt
本資料について注意
本資料は、⼀部⽇本アイ・ビー・エム株式会社にて作成された内本資料は、⼀部⽇本アイ・ビー・エム株式会社にて作成された内
容を含みます。著作権は日本アイ・ビー・エムにあるので、複製の許可などは天野までご連絡ください。
© 2015 @ibmamnt
お願い
• 質問は以下のURLに書き込んでください
https://etherpad.mozilla.org/fSOxhPPUUD
© 2015 @ibmamnt
Node-RED について
• IBM 英国Hursley研究所の Emerging Technology Teamで開発されたソフトウェア
– 2013年、社内ハッカソンで堂々⼀位、GitHub に登録
– 2014年 Qconで発表してからブレーク
© 2015 @ibmamnt
ハンズオン学習&演習もくじ
1. いきなり演習– 演習1.1 - Hello World
– 演習1.2 - Twitter メッセージを拾う
– 演習1.3 - Twitter メッセージを表示するアプリケーションの作成
2. Node-RED のキホン– 演習 2.1 -既存 nodeの追加
3. Internet of Things と PaaSとの連携– 演習 3.1 - IoTデバイスからのメッセージを受け取る
4. おまけ– 宿題:出席簿を作成しましょう
– Appendix: node を作ろう
© 2015 @ibmamnt
Twitter メッセージを表示するアプリケーションの作成
いきなり演習!
© 2015 @ibmamnt
1.1 Hello World
• input/inject と output/debug node を配置しつなぎます
• inject node をダブルクリックして、Payload に
– string
– Hello World
を⼊⼒し、OK ボタンをクリックします
• “Deploy” ボタンをクリックします
• “inject” node の左をクリックします
• Debug タブを確認します
ここをクリック
© 2015 @ibmamnt
1.2 Twitterメッセージを拾う
• social/twitter, output/debugnode を配置してつなぎます
• twitter node をダブルクリックして自twitter アカウントを設定します
• フォローしたい人、ハッシュタ
グ等を⼊⼒します
• Deploy ボタンをクリックします
• Debug タブを確認します
© 2015 @ibmamnt
なにかでましたか?
© 2015 @ibmamnt
1.3 Twitter メッセージを表示するアプリケーションの作成①• https://gist.github.com/
ibmamnt/ba7a4343ba9bd79433ccからコードを取得し
index.html として保存します
• wsUrl 変数を変更しま
す。
– <change-this-url> をNode-RED が稼働しているホスト名に変更し
てください
var wsUri = "ws://<change-this-url>/ws/twitter"
例:
var wsUri = "ws://localhost:1880/ws/twitter"
© 2015 @ibmamnt
1.3 Twitter メッセージを表示するアプリケーションの作成②• function/function ,
output/websocket を配置して、右図のようにつなぎます(twitter/debug node はfunction につなぎ直し)
• function に以下のコードを入れます
• “websocket” node を設定します
Type: Listen onPath: /ws/twitter
• DEPLOYボタンをクリックします
msg.payload = msg.tweet;return msg;
© 2015 @ibmamnt
簡単なWEBアプリケーションできましたか?
• index.html ファイルをひらいてみてください
© 2015 @ibmamnt
このアプリケーションの動作
Node-RED
検索 送信
websockettwitterAPI
websocket作成
onmessage() で処理
html の作成とレンダリング
index.html
© 2015 @ibmamnt
Node-REDのキホン
© 2015 @ibmamnt
Node-REDの特徴
• ブラウザベース UI
• node.js で動作– 軽量
• 機能を node packagemanager (npm) で簡単に追加できるようにした
© 2015 @ibmamnt
Node-RED 画面
Node Infomation またはデバッグコンソール
デプロイ実⾏
シート
ノード
ノードパレット
表示情報の切り替え実装UI
処理フロー
© 2015 @ibmamnt
①ノードを選択しドラッグ&ドロップ
Node-RED実装方法
②ノード間を接続
④Deployを選択Node-RED画面
③ノードプロパティ設定
© 2015 @ibmamnt
ノード紹介
© 2015 @ibmamnt
Node分類 機能
Input イベントの起動条件の設定
Output 外部アプリへの送信
Function イベント分岐、受信データの変換、一時停止 等
Social Twitter/Mail/ircの送受信
Storage DBへの保存、DB検索
Analysis 分析
Advanced RSS/atomの更新受信時にイベント起動
コネクタが右側に存在⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する
コネクタが左右に存在⇒②データ変換/分岐左からデータ受信。それを変換/分岐させ、右側に結果を返す
コネクタが左側に存在⇒③外部アプリ起動/DB保存左からデータを受信し、それを送信/保存
Node-RED標準搭載ノードの紹介
© 2015 @ibmamnt
①イベントの起動
Node名称 イベント開始条件 後続フローに送信する内容
Inject 定期起動orノードのクリック 指定⽂字列or現在時刻or情報なし(起動のみ)デバック向けの機能。
http http://[xxxxxxx].mybluemix.net/[ノードのURL]リクエスト送信時
リクエスト情報
Mail メール受信時、または未読メール存在時定期起動
メール本文(text/plain)
Twitter 指定メッセージのTweet時に自動起動
Tweet情報(本文、発言場所、国…)
Feedparse RSS/atomの更新受信時 -
コネクタが右側に存在するもの
© 2015 @ibmamnt
Node名称 機能 後続フローに送信する内容
Function 受領データの更新 更新済データ
Switch 条件に応じて、フローを分岐させる
受信データ
Delay フローを待機 受信データ
http request 指定サイトに接続 接続サイトのソース
Cloudant DB検索 DBの検索結果
Sentiment 受信データをセンチメント分析 評価情報を追加した受信データ
Html HTMLソースのうち、指定タグをすべて取得
指定したタグの情報
コネクタが左右に存在するもの
②データ変換/分岐
© 2015 @ibmamnt
Node名称 機能
Debug フロー上に流れている情報を画⾯表⽰
http response http requestを返す
Cloudant DBへのデータ保存
Mail メール送信
コネクタが左側に存在するもの
③外部アプリ起動/DB保存
© 2015 @ibmamnt
プログラミング
JavaScriptで記述します
• 簡易エディターが付属
• 非同期処理も可能
※より複雑な処理は node の作成をお勧めします(おまけ参照)。
詳細ドキュメント: http://nodered.org/docs/writing-functions.html
function は最後に return msg; をいれると次のnode に送信してくれます。
© 2015 @ibmamnt
覚えておくNode-RED固有変数
“msg”
“msg” オブジェクト: node 間を流れるメッセージを表す JSON オブジェクト。msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。
“context” オブジェクト: node 内部で保存される任意の JSON オブジェクト
“context.global” オブジェクト: node 間で共有されるグローバルオブジェクト
“context”
“context.global”
© 2015 @ibmamnt
一般のWEBサービスの呼び出し
• “http request” node を利⽤する
• 事前に呼び出しパラメータを設定する
– msg.url : WEBサービスURL
– msg.method: ‘GET’, ‘PUT’ 等
– msg.header: 必要があればヘッダーセット
– msg.payload: リクエストの body
– msg.topic: URL の <url>?<params> ? 以下のパラメータ
© 2015 @ibmamnt
例:楽天トラベル施設検索API
https://webservice.rakuten.co.jp/api/simplehotelsearch/
© 2015 @ibmamnt
https://github.com/node-redhttp://flows.nodered.org
• 様々な node や flow が公開されています
© 2015 @ibmamnt
演習 2.1 -既存 node の追加
1. node-red が起動している場合には停止します
(control+c)
2. 次のコマンドをNode-RED を導入したディレクトリで実⾏します
$ npm install node-red-node-web-nodes
3. Node-REDを再開します
$ node red.js
© 2015 @ibmamnt
左のパレットを探索してみてください• node を配置して、info をみる
© 2015 @ibmamnt
似てる??http://mythings.yahoo.co.jp
https://ifttt.com/wtf
© 2015 @ibmamnt
ここまでのまとめ
• Node-RED は様々な情報源からの情報を取得して、加工するのが得意
• 世の中にある様々な API を “node” という単位でカプセル化してくれる
– コードを書かなくても簡単に呼び出せる!
• JavaScript によるプログラミングができる
– Function node
– 自作の node もあり
© 2015 @ibmamnt
3. Internet of Things と PaaSとの連携
© 2015 @ibmamnt
3.1 Internet of Things対応
• IoT 機器に Node-RED を導入するシリアルポートアクセスRaspberry PI 等の機器のシリアルにアクセス
© 2015 @ibmamnt
例えば、Twitter のメッセージで LED をチカチカさせる
© 2015 @ibmamnt
Hue のランプをチカチカさせたり
https://www.npmjs.com/package/node-red-contrib-hue
© 2015 @ibmamnt
i-remocon を操作する??
http://i-remocon.com/ ページから抜粋
© 2015 @ibmamnt
具体的なDEMOは番組の
後半で(次回以降・・・)
© 2015 @ibmamnt
3. Internet of ThingsとPaaSの連携
• イベントを処理するバックエンドシステムをPaaSに構築するpub/sub モデルが一般的に使われています。
MQTT ブローカーGoogle pub/sub も処理できるかも?
Node-RED ではイベント処理のブローカー情報にアクセスして、加工。
© 2015 @ibmamnt
IoTシステムの典型的アーキテクチャ
デバイスMQTT, websocket
pub/sub システム
イベントストリームシステム
PaaS
様々な IoT デバイス情報を受け取りイベント保管するシステム
イベントと様々なAPI を組み合わせたアプリケーショ
ンが動作するPaaS環境
典型的アーキテクチャNode-RED
Node-RED
© 2015 @ibmamnt
myThings でのアーキテクチャ例:
http://www.idcf.jp/cloud/iot/
© 2015 @ibmamnt
Pub/Sub型のアーキテクチャ
Pub/Subモデルはパブリッシュ・サブスクライブ方式でメッセージを送受信するためのモデル
プロバイダ
Sub Sub
Pub Sub Pub
概略図 パブリッシャー:メッセージを作成して送信する送信側のクライアントサブスクライバー:メッセージを受信する側のクライアントトピック:Pubからのメッセージはトピックという送信先に登録され、トピックに対して配信を申し込んでいた一つまたは複数のサブスクライバーに配信されるトピック トピックトピック トピックトピックPubとSubは動的に追加・削除可能→使用状況に応じてシステムを拡張,縮小可能
複数のパブリッシャーから同じトピックにメッセージを送信可能
複数のサブスクライバーから同じトピックに接続可能
システムの特徴
© 2015 @ibmamnt
pub/sub システム例
• MQTT
– IoT Eclipse (http://iot.eclipse.org/ )
– Mosquitto (http://mosquitto.org/ )
– IBM IoT Foundation (https://internetofthings.ibmcloud.com )
• Google pub/sub
– https://cloud.google.com/pubsub/
• Amazon SNS
– https://aws.amazon.com/jp/sns/
© 2015 @ibmamnt
利⽤例:ブローカー
MQTT
サーバー
センサー
Node-RED
Node-RED
フロー
MQTT
MQTT
HTTPWebsocket
環境情報(気温や湿度
など)を収集。
パブリッシュサブスクライブ
MQTTクライアント
MQTTクライアント
ブラウザー
WEB
自作アプリ
PaaSアプリ
© 2015 @ibmamnt
演習3.1 : IoTデバイスからのメッセージを受け取る
• スマートホンで得られる情報を送信す
る
– 位置情報 (html5)
– スマートホン・センサー情報• 振動、加速度
© 2015 @ibmamnt
演習のアーキテクチャ
Node-RED
フロー
MQTTクライアント
ブローカー
MQTT
サーバー
センサー情報、位置情報を“iot/paas-study“ topic としてpublish
“iot/paas-study“ topic をsubscribe
iot.eclipse.org
© 2015 @ibmamnt
スマホアプリの作成
• 今回は既定のものにアクセスします。スマート
フォンから次の URL にアクセスしてください。
http://iot-phone.bluehub.tk(※※※※ IBM Bluemix 上で稼働しています)
IDに自由な文字(Alphabet)を入れてください。位置情報はONにしてください。
ソースコードはこちらhttp://iot-phone.bluehub.tk/iot-phone.zip
<any-alphabet>
© 2015 @ibmamnt
Node-RED のフロー作成
• input/mqtt と output/debug を配置します
• mqtt の設定は次のようにします(それ以外はデフォルト)Broker: iot.eclipse.org
Port: 1883
• 次の Topic の設定は次のようにしますTopic: iot/paas-study
• Deployボタンをクリックして Debug 画面を眺めます
© 2015 @ibmamnt
ものすごいトピック
の嵐みえましたか?
© 2015 @ibmamnt
mqttクライアントコード
• Paho (http://www.eclipse.org/paho/) を利⽤
クライアント作成
ブローカーに接続
publish
スマホセンサー内容
送信
© 2015 @ibmamnt
応⽤例 - ⾞からの情報を受け取る
• http://connected-car.mybluemix.net/
© 2015 @ibmamnt
アイデア例:
• 今どこにいる? 待ち合わせアプリ
• Google Now 的なアプリとか
は様々なアイデアをすNode-RED は様々なアイデアをすぐに実践できるツールです。ぜひ
社内ハッカソンイベントでも活用
してみましょう!
© 2015 @ibmamnt
IoTと PaaSの関係まとめ
デバイスMQTT, websocket
pub/sub システム
イベントストリームシステム
PaaS
様々な IoT デバイス情報を受け取りイベント保管するシステム
イベントと様々なAPI を組み合わせたアプリケーショ
ンが動作するPaaS環境
典型的アーキテクチャNode-RED
Node-RED
© 2015 @ibmamnt
お疲れ様でした!
© 2015 @ibmamnt
おまけ
© 2015 @ibmamnt
宿題:セミナー出欠確認アプリ
• スマートホン向け WEB アプリケーション
– ⽒名⼊⼒と出席ボタンだけ
• 位置情報、氏名を websocketで送信
• Node-RED 内部でカウント
– セミナー会場位置を予め入れておく
– 半径100m以内にいればカウント
• context 変数を使う
• 重複カウント防止
氏名
出席!
© 2015 @ibmamnt
Node-REDでは作成したフローを別 Node-RED 環境に簡単に移すことができます。
別 Node-RED 環境に処理記述を移す手順
①画面右上からExportを選択 ②ポップアップのコードをコピー⇒Node-REDでは実装内容をText形式で保持
③画面右上からImportを選択 ④ ②でコピーしたTextを貼り付ける
【参考】フローのImport/Export
© 2015 @ibmamnt
Appendix - Nodeの追加• 独自Nodeの追加
– 既存のノードでは機能が不⾜する場合、独⾃のノードも容易に追加可能
– 記述ルールに従い、nodesディレクトリ配下にHTMLファイルとjsファイル作成しデプロイ
• HTMLファイル:Nodeの体裁を定義(⾊やアイコン、⼊⼒項目など)
• jsファイル:Nodeでの処理内容を記述
– 記述ルールやサンプル
• http://nodered.org/docs/creating-nodes/first-node.html
作成、デプロイ
© 2015 @ibmamnt
(参考)lower-case.html, lower-case.js
lower-case.html
lower-case.js
http://nodered.org/docs/creating-nodes/first-node.html
© 2015 @ibmamnt
資料のおわり