IBM Bluemix ハンズオン・セミナー Node-RED 初級編 1

IBM Bluemix
ハンズオン・セミナー
Node-RED 初級編
1
© 2016 IBM Corporation
[ハンズオン]
Node-REDで
アプリケーションを
作成する
2
© 2016 IBM Corporation
ハンズオン⼿順
n Bluemixへのアクセス
n ボイラープレートでアプリケーションを作成す
る
n Hello Node-RED
n Node-RED で Internet of Things アプリケー
ションを作成する
3
© 2016 IBM Corporation
ハンズオンの概要
n Bluemix上でNode-REDを⽤いて簡単なアプリケーションを作成できるように
なります。
• Node-RED Starterボイラープレートを⽤いてアプリケーションを作成しま
す
• クラウド上のセンサー・シミュレーターから取得できるデータを活⽤した
アプリケーションを作成します。
n ボイラープレートに含まれるNode-REDというツールを⽤いて、センサー・
データ(温度、湿度など)を活⽤する IoT アプリをノンプログラミングで作成
します。
センサー・
シミュレータ
ー
4
© 2016 IBM Corporation
Node－REDとは？ (1)
n Node-REDとは、デバイス、API、オンラインサービスなどの機能を
繋げてアプリケーションを作成していくプラットフォーム
• IBMのEmerging Technology Teamが開発したソフトウェア
• 元々はIoTデバイスの活⽤に特化したビジュアルツールだが現在は汎⽤的
• オープンソフトウェアでありNode.jsが動く環境なら何処でも動かせる
（Bluemix環境ではなくても使⽤可能）
5
© 2016 IBM Corporation
Node－REDとは？ (2)
n 処理フローはブラウザベースのUIで作成
• 機能がカプセル化された「Node」を繋げていく（データの流れをデザイン）
• 汎⽤的な機能のほか、Bluemixのサービス機能も「Node」として提供
• 独⾃にNodeを作成して追加することも可能
シートにドラッグ＆ドロッ
プし処理順にノードを結合
Deployボタンのクリッ
クで実⾏環境へ反映
各ノードの
動作を設定
処理ノードを
パレットから選択
6
© 2016 IBM Corporation
Node－REDとは？ (3)
n Bluemix上ではNode.jsランタイム上で稼働します。
• ボイラープレートのうち、Internet of Thingsボイラー
プレートとNode-REDボイラープレートからアプリケー
ションを作成すると利⽤可能
• ボイラープレート作成時に⽣成されるCloudantデータベ
ースにノードの構成情報が保管
Node-REDアプリケーション
Node.js ランタイム
7
Cloudant
NoSQL
データベース
© 2016 IBM Corporation
Node－REDとは？ (4)
Node-REDで提供される代表的なNode
カテゴリ
説明
Input
処理フローのトリガとなるイベント機能を提供
（時間トリガ、IoTデバイス、mqttサブスクライバ、httpリクエスト、websocket受信など）
Output
外部へのデータ連携機能を提供
（IoTデバイス、mqttパブリッシュ、httpレスポンス、websocket送信など）
Function
分岐、データ加⼯、フォーマット変換、⼀時停⽌などのロジック機能を提供
Social
メールやTwitterなどの送受信機能を提供
Storage
各種データベースとのI/O機能を提供
（mongodb、cloudant、sqldb、dashdbなど）
Analysis
分析機能を提供
Advanced
RSSやatomなどのフィード更新時のイベント機能を提供
Watson
⾔語翻訳、画像認識、⾳声テキスト相互変換などおWatson機能を提供
8
© 2016 IBM Corporation
Node－REDとは？ (5)
n データの処理ロジックはFunction NodeにJavaScriptで記述します
• 複雑なロジックになる場合は独⾃にノードを作成したほうが記述が簡単に
なることもあります
9
© 2016 IBM Corporation
ハンズオン⼿順
n Bluemixへのアクセス
n ボイラープレートでアプリケーションを作成す
る
n Hello Node-RED
n Node-RED で Internet of Things アプリケー
ションを作成する
10
© 2016 IBM Corporation
Bluemix へログイン
Bluemix にログインします。
n Webブラウザを起動し、Bluemix にアクセスします。下記URLを⼊⼒します。
https://console.au-syd.bluemix.net/
英国: https://console.au-syd.bluemix.net/ ⽶国南部: https://console.ng.bluemix.net/
n 表⽰された画⾯上の「ログイン」 をクリックします。
n 表⽰された画⾯上でIBM ID、パスワードを⼊⼒して「Sign in」ボタンをクリ
ックします。
à ログインが成功すると Bluemix の
ダッシュボード画⾯が表⽰されます
11
© 2016 IBM Corporation
作業する地域を確認する
Bluemixは、「⽶国南部」「英国」「シドニー」の3地域で稼動しています。
上部メニューの 「プロファイル設定
」 をクリックすることで、稼動する環
境を選択することができます。
n 今回は「シドニー」を利⽤します。
n 地域が「シドニー」になっていることを確認してください。
n それ以外の場合は、「地域」をクリックして、「シドニー」を
選択してください
12
© 2016 IBM Corporation
[補⾜] 地域選択時のポップアップへの対応⽅法
n Bluemixへのログインもしくは地域でシドニーを選択した際に、スペ
ースを作成するように指⽰するポップアップ・ウィンドウが表⽰され
た場合は、任意の名前（今回の演習ではなるべくdevとしてください
）を⼊⼒し、作成をクリックしてください。
13
© 2016 IBM Corporation
Bluemix画⾯操作 (1)
n 画⾯上部にはいくつかのメニューが並びます。
• ダッシュボード
ü 作成されたアプリケーション、サービスに関する情報を表⽰します
• カタログ
ü Bluemix上で使⽤できるボイラープレート、ランタイム、サービスに関
する情報を表⽰します
• 料⾦
ü 使⽤料⾦の⽬安を⾒積もるためのツールなどを提供します
• 資料
ü Bluemixに関するヘルプ⽂書を提供します
à インターネット上に様々な情報もございますが、こちらで情報を確
認いただくのがベストです
14
© 2016 IBM Corporation
Bluemix画⾯操作 (2)
n 画⾯を有効に活⽤するために表⽰と⾮表⽰を切り替えるアイコンがあ
ります
• 画⾯解像度によりメニューが省略されることがありますので、ご注
意ください
• 幅が⼩さいブラウザーでのメニューの表⽰・⾮表⽰の切り替え例
15
© 2016 IBM Corporation
ハンズオン⼿順
n Bluemixへのアクセス
n ボイラープレートでアプリケーションを作成す
る
n Hello Node-RED
n Node-RED で Internet of Things アプリケー
ションを作成する
16
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (1)
n Bluemix には予めランタイムやサービスを組み合わせたボイラープレート と
いうテンプレートが⽤意されています。
これを利⽤することで、簡単に Bluemix アプリケーションを開発することが
できます。
n Bluemix の カタログメニューにボイラープレートを確認してください。
各ボイラープレートをクリックすると、それがどのランタイム、サービスを組
み合わせたものか説明されています。
17
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (2)
n Node-RED Starterをクリックします。このボイラープレートは、以下のコン
ポーネントから構成されていることが分かります。
- SDK for Node.js
- Cloudant NoSQL DB
n 次のように⼊⼒し、 「作成」ボタンをクリックします。
名前: noderedapp+末尾に任意の⽂字列 (固有の⽂字列となる必要)
ホスト: 上記の名前がコピーされる
18
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (3)
n アプリケーションの作成が開始されます。
• Node.jsランタイムのアプリケーション上にNode-REDを含むアプリケ
ーションが作成されます
• Cloudant NoSQLデータベースのインスタンスが作成され、Node-RED
のノード情報を含むデータベースが作成されます
• Node.jsランタイムとデータベースのバインドが実施され、アプリケー
ション上からデータベースを利⽤可能にします
• 指定したホスト名でアプリケーションが公開されます
ü アプリケーションが公開されるホスト名のFQDN
(指定したホスト名).au-syd.mybluemix.net
19
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (4)
n 左上の、「’dev’のダッシュボードに戻る」をクリックします。
• スペース名が表⽰されるため ‘dev’ではない⽂字列の可能性もあります
n ダッシュボードに Node.jsアプリケーションと Cloudant NoSQL DB のサ
ービスが追加されることを確認します。
n noderedapp アプリケーションの状態が⻘信号になるのを待ち、下部の右
から2番⽬のリンク・アイコンをクリックします。
⻘信号になるまでに数分かかることがあります
⾚信号が表⽰されたり、いつまでもステージング中の
場合、ブラウザーを再読み込みしてみてください
20
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (5)
n このような画⾯が表⽰されれば、アプリケーションの作成はひとまず成功
です。
21
© 2016 IBM Corporation
ハンズオン⼿順
n Bluemixへのアクセス
n ボイラープレートでアプリケーションを作成す
る
n Hello Node-RED
n Node-RED で Internet of Things アプリケー
ションを作成する
22
© 2016 IBM Corporation
Hello Node－RED (1)
n ここからは実際にNode-REDを使ってアプリケーションを開発してい
きます
n アプリケーションの画⾯を表⽰し、「Go to your Node-RED flow
editor」ボタンをクリックします
23
© 2016 IBM Corporation
Hello Node－RED (2)
このような画⾯が表⽰されます
24
© 2016 IBM Corporation
Hello Node－RED (3)
n まずは簡単なフローから作成してみましょう
n 作成する処理フロー
• 定期的に時刻を取得して、出⼒する
n 使⽤するNode
時刻の取得
25
→
injectノード
年⽉⽇時分への変換 →
functionノード
出⼒処理
debugノード
→
© 2016 IBM Corporation
Hello Node－RED (4)
n 処理フローを以下の要領で作成します。
n 使⽤するノードを左側のリソースから真ん中のフローエディター内に
ドラッグ＆ドロップします
• injectノードはInputカテゴリーに、functionノードはfunctionカ
テゴリーに、debugノードはoutputカテゴリーにあります。
n ノードの右側からノード左側の間をドラッグして線でつなぎます。
• injectノード→functionノード、functionノード→debugノード
26
© 2016 IBM Corporation
Hello Node－RED (5)
n injectノードの設定
n injectノードをダブルクリックすると、属性の編集画⾯が表⽰
• Payloadには「timestamp」
• Repeatには「interval」、every「2」seconds
• その他は初期の設定値のままとします
• 編集後は「Ok」をクリックします
27
© 2016 IBM Corporation
Hello Node－RED (6)
n functionノードの設定
n functionノードもダブルクリックすると編集画⾯となります
• Nameには「timestampを⽂字列に変換」
• FunctionにはJavaScriptのコードを記述（次ページ参照）
• Outputsは1のまま「Ok」をクリック
28
© 2016 IBM Corporation
Hello Node－RED (7)
n コードの記述例
// 前ノードからのデータ取得
var serialDate = msg.payload;
// シリアル値からDateオブジェクトへの変換
var date = new Date();
date.setTime(serialDate);
// データの設定
msg.payload = date.toString();
// 次ノードへのデータ連携
return msg;
29
© 2016 IBM Corporation
Hello Node－RED (8)
n debugノードの設定は不要です
n これでノードの設定ができたのでアプリケーションを稼働させてみます
n 画⾯右上のDeployボタンをクリックします。クリックするとフローの設定が
アプリケーション上に反映され実⾏可能となります。
30
© 2016 IBM Corporation
Hello Node－RED (9)
n ここからは稼働確認をしてきます。
n debugノードの右側にあるボタンをクリックして、debugタブへの出⼒を有効
化します。（すでに有効化されている場合、この操作は不要です）
n injectノード（timestamp）の左にあるボタンを1回だけクリックします
• debugタブには以下のようなメッセージが2秒おきに表⽰されます。
2016年3月13日 17:39:55 JSTc0635d48.3f9ca
msg.payload : string [39]
Sun Mar 13 2016 8:39:55 GMT+0000 (UTC)
• injectノードの繰り返し間隔を変更してメッセージが表⽰される間隔を変更
してください
ü ノードの設定を変更したのちにはDeployが必要となります。
31
© 2016 IBM Corporation
ハンズオン⼿順
n Bluemixへのアクセス
n ボイラープレートでアプリケーションを作成す
る
n Hello Node-RED
n Node-RED で Internet of Things アプリケー
ションを作成する
32
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (1)
n ここからは本格的なアプリケーションを作成していきます
。
n IoT (Internet of Things) は家電、⾃動⾞、ウェラブル・
デバイスなどあらゆる「モノ」をインターネットに接続し
、お互いに情報をやりとりすることで新しい価値を⽣み出
す概念です。
n ここでは、温度センサーにより取得したデータによって処
理を変えるような IoT システムを作成していきます。
33
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (2)
n さきほど作成したフローとは別のフローを作成します
n フローエディター上部にある「＋」アイコンをクリックします
新しいフローのタブが表⽰されます。
34
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (3)
n ここでは、Node-REDで接続するセンサーの情報を取得します
n Webブラウザーの新しいタブを開き、 ibm.biz/IoTsensor に接続します
• IoT Sensorシミュレータは、IoT Cloud に接続するデバイスをエミュ
レートし、気温、湿度、物体温度の情報を発信 (publish) することがで
きます
n 右上に当デバイスの MAC アドレスが表⽰されるので、メモしておきます
。
シミュレータの画⾯は開いた
ままにしておいてください。
後ほど使⽤します。
35
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (4)
n 温度データの⼊⼒元である IoT Sensor のノードを定義します
n 左側のリソース・パレットの inputカテゴリ内のibmiotノードをフロー・
エディター中央ののキャンバスにドラッグ&ドロップし、ダブルクリック
します。
n 「Edit ibmiot in node」で以下のように⼊⼒します。
Authentication: Quickstart
Input Type: Device Event
Device Id: xxxxxxxxxxx
(ここで、xxxxxxxxxxxは IoT Sensor の MAC アドレス）
Name: IoT Sensor
「Ok」ボタンをクリックします
36
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (5)
n IoT Sensorから温度データを取り出す function ノードを定義します
n 左側のリソース・パレットの functionsカテゴリ内のfunctionノードをフ
ロー・エディター中央のキャンバスにドラッグ&ドロップし、ダブルクリ
ックします
n 「Edit function node」で以下のように⼊⼒します
Name: temp
Function: return {payload:msg.payload.d.temp};
n IoT Sensor と temp をマウスでつないでリンクします
37
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (6)
n 次に、温度データの条件分岐を指定する switch ノードを定義します。
ここでは、温度40度以下と40度超で分岐するよう設定します。
n リソースのfunctionカテゴリー内のswitchノードを
中央のキャンバスにドラッグ&ドロップし、
ダブルクリックします。
n Edit switch node のダイアログ・ボックスで以下のように⼊⼒します。
Name: temp thresh
分岐条件に以下のようになるように追加
（ +rule ボタンをクリックして追加）：
Property msg.payload
<= 40
>
40
checking all rules
n 「Ok」ボタンをクリックします。
n temp と temp thresh をリンクします。
38
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (7)
n 次に、条件ごとの処理を指定する template ノードを定義します。ここで
はメッセージ出⼒をそれぞれ設定します。
n リソースのfunctionカテゴリー内の
templateノードを２つ、キャンバスにドラ
ッグ&ドロップします。
n 2つを以下のように編集します
• 1つ⽬
Name: safe
Template:
Temperature ({{payload}}) within
safe limits
• 2つ⽬
Name: danger
Template:
Temperature ({{payload}}) critical
n 右図のようにリンクします。
39
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (8)
n 処理結果をモニター出⼒するための debug ノードを定義します
n リソースのoutputカテゴリー内のdebugノードを
キャンバスにドラッグ&ドロップし、ダブルクリックします
n Edit debug node のダイアログ・ボックスで以下のように⼊⼒します
Output: message property
msg.payload
to: debug tab
Name: cpu status
「Ok」ボタンをクリックします
n template と cpu status を右図のようにリンクします
40
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (9)
n これまでのステップで下図のようなフローができあがります。右上の「
Deploy」ボタンをクリックし、アプリケーションをデプロイします。
上部に “Successfully deployed” と表⽰されれば、Bluemix 上でのアプリケ
ーションのデプロイは成功です。
n 右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィ
ンドウが表⽰されるよう操作します)
41
© 2016 IBM Corporation
デプロイしたアプリケーションを確認する
n IoT Sensor のウィンドウで⽮印ボタンをクリックし、温度を変更します。
n IoT Sensor の温度が debug タブに出⼒され、40度以下のときは、
”Temperature (xx) within safe limits” と出⼒されることを確認します。
n IoT Sensor の温度を上げて、40度を超えると “Temperature (xx)
critical” と出⼒されることを確認します。
42
© 2016 IBM Corporation
オプション演習
n 今度はご⾃⾝のスマートフォンのセンサー情報を取得してみましょう
• スマートフォンやタブレットから、以下のURLにアクセスしてみてくだ
さい。
https://phonesensor.mybluemix.net
• センサーが利⽤できない端末もありますので、利⽤できない場合にはイ
ンストラクターにお声がけください。
n 先ほどのIoT Sensorシミュレータと同じようにMACアドレスを⽤いてセン
サー情報をibmiotノードで利⽤できます。
デバイスからは以下の情報が取得できます。
• 端末の向き(Direction)
• 傾き(Tilt Left/Right, Tilt Front/Back)
• 加速度
これらを使ってIoTアプリケーションを作りましょう
43
© 2016 IBM Corporation
IoTアプリの拡張を考える
ハンズオンではモニター⽤に画⾯出⼒し稼動を確認するまでにとどめていますが
、Node-RED を使⽤して様々に変更することが可能です。
Input/outputを組み合わせ、特定の条件を満たすデ
ータを受け取ったら、担当者に通知するといったもの
から、コーディングを追加してより⾼度なものにする
ことも可能です。
詳細は以下のサイトをご覧ください。
http://nodered.org/docs/
チュートリアル
Arduino Uno と IBM IoT Foundation を利⽤してク
ラウド対応の温度センサーを作成する（全4回）
http://www.ibm.com/developerworks/jp/cloud/li
brary/cl-bluemix-arduino-iot1/index.html
44
© 2016 IBM Corporation
ハンズオンのまとめ
n Bluemix上でNode-REDを⽤いて簡単なアプリケーションを作成しました
• Bluemix上にNode-REDアプリケーションを作成できるようになりました
• Node-REDを使って簡単なロジックを実現できるようになりました
• IoTアプリケーションを作ることができるようになりました
45
© 2016 IBM Corporation
Bluemix User Group (BMXUG：ビーザグ)
n Bluemixの利⽤促進や情報交換を⽬的としたコミュニティ
n ユーザー様主体、有志による運営
Bluemixのユーザー会が設⽴されました！
ぜひご参加ください！
• BMXUG facebookで「グループに参加」
をクリック！
http://ibm.biz/bmxug-facebook
⼥⼦部もありますの
でお気軽にどうぞ
または
• Doorkeeperからご登録ください！（ニックネームだけでの登録も可能です）
http://bmxug.doorkeeper.jp
46
© 2016 IBM Corporation
47
© 2016 IBM Corporation