ibm bluemix ハンズオン・セミナー node-red初級編2016/03/15 · node－redとは？(3) n...

© 2016 IBM Corporation1

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


[ハンズオン]Node-REDで

アプリケーションを作成する


ハンズオン⼿順

n Bluemixへのアクセス

n ボイラープレートでアプリケーションを作成する

n Hello Node-RED

n Node-RED で Internet of Things アプリケーションを作成する


ハンズオンの概要n Bluemix上でNode-REDを⽤いて簡単なアプリケーションを作成できるように

なります。• Node-RED Starterボイラープレートを⽤いてアプリケーションを作成しま

す• クラウド上のセンサー・シミュレーターから取得できるデータを活⽤した

アプリケーションを作成します。n ボイラープレートに含まれるNode-REDというツールを⽤いて、センサー・

データ(温度、湿度など)を活⽤する IoT アプリをノンプログラミングで作成します。

センサー・シミュレータ

ー


n Node-REDとは、デバイス、API、オンラインサービスなどの機能を繋げてアプリケーションを作成していくプラットフォーム• IBMのEmerging Technology Teamが開発したソフトウェア• 元々はIoTデバイスの活⽤に特化したビジュアルツールだが現在は汎⽤的• オープンソフトウェアでありNode.jsが動く環境なら何処でも動かせる

（Bluemix環境ではなくても使⽤可能）

Node－REDとは？ (1)



処理ノードをパレットから選択

Deployボタンのクリックで実⾏環境へ反映

各ノードの動作を設定

シートにドラッグ＆ドロップし処理順にノードを結合

n 処理フローはブラウザベースのUIで作成• 機能がカプセル化された「Node」を繋げていく（データの流れをデザイン）• 汎⽤的な機能のほか、Bluemixのサービス機能も「Node」として提供• 独⾃にNodeを作成して追加することも可能


Node－REDとは？ (3)n Bluemix上ではNode.jsランタイム上で稼働します。

• ボイラープレートのうち、Internet of ThingsボイラープレートとNode-REDボイラープレートからアプリケーションを作成すると利⽤可能

• ボイラープレート作成時に⽣成されるCloudantデータベースにノードの構成情報が保管

Node.js ランタイム

Node-REDアプリケーション

CloudantNoSQLデータベース



カテゴリ説明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機能を提供

Node-REDで提供される代表的なNode


Node－REDとは？ (5)n データの処理ロジックはFunction NodeにJavaScriptで記述します

• 複雑なロジックになる場合は独⾃にノードを作成したほうが記述が簡単になることもあります





n Hello Node-RED



Bluemix へログインBluemix にログインします。n Webブラウザを起動し、Bluemix にアクセスします。下記URLを⼊⼒します。

https://console.au-syd.bluemix.net/

n 表⽰された画⾯上の「ログイン」をクリックします。

n 表⽰された画⾯上でIBM ID、パスワードを⼊⼒して「Sign in」ボタンをクリックします。

à ログインが成功すると Bluemix のダッシュボード画⾯が表⽰されます

英国: https://console.au-syd.bluemix.net/ ⽶国南部: https://console.ng.bluemix.net/


作業する地域を確認するBluemixは、「⽶国南部」「英国」「シドニー」の3地域で稼動しています。上部メニューの「プロファイル設定」をクリックすることで、稼動する環

境を選択することができます。n 今回は「シドニー」を利⽤します。n 地域が「シドニー」になっていることを確認してください。n それ以外の場合は、「地域」をクリックして、「シドニー」を

選択してください


[補⾜] 地域選択時のポップアップへの対応⽅法n Bluemixへのログインもしくは地域でシドニーを選択した際に、スペ

ースを作成するように指⽰するポップアップ・ウィンドウが表⽰された場合は、任意の名前（今回の演習ではなるべくdevとしてください）を⼊⼒し、作成をクリックしてください。


Bluemix画⾯操作 (1)n 画⾯上部にはいくつかのメニューが並びます。

• ダッシュボードü 作成されたアプリケーション、サービスに関する情報を表⽰します

• カタログü Bluemix上で使⽤できるボイラープレート、ランタイム、サービスに関

する情報を表⽰します• 料⾦

ü 使⽤料⾦の⽬安を⾒積もるためのツールなどを提供します• 資料

ü Bluemixに関するヘルプ⽂書を提供しますà インターネット上に様々な情報もございますが、こちらで情報を確認いただくのがベストです


Bluemix画⾯操作 (2)n 画⾯を有効に活⽤するために表⽰と⾮表⽰を切り替えるアイコンがあ

ります• 画⾯解像度によりメニューが省略されることがありますので、ご注

意ください• 幅が⼩さいブラウザーでのメニューの表⽰・⾮表⽰の切り替え例





n Hello Node-RED



ボイラープレートでアプリケーションを作成する (1)n Bluemix には予めランタイムやサービスを組み合わせたボイラープレートと

いうテンプレートが⽤意されています。これを利⽤することで、簡単に Bluemix アプリケーションを開発することができます。

n Bluemix のカタログメニューにボイラープレートを確認してください。各ボイラープレートをクリックすると、それがどのランタイム、サービスを組み合わせたものか説明されています。


ボイラープレートでアプリケーションを作成する (2)n Node-RED Starterをクリックします。このボイラープレートは、以下のコン

ポーネントから構成されていることが分かります。- SDK for Node.js - Cloudant NoSQL DB

n 次のように⼊⼒し、「作成」ボタンをクリックします。名前: noderedapp+末尾に任意の⽂字列 (固有の⽂字列となる必要)ホスト: 上記の名前がコピーされる


ボイラープレートでアプリケーションを作成する (3)n アプリケーションの作成が開始されます。

• Node.jsランタイムのアプリケーション上にNode-REDを含むアプリケーションが作成されます

• Cloudant NoSQLデータベースのインスタンスが作成され、Node-REDのノード情報を含むデータベースが作成されます

• Node.jsランタイムとデータベースのバインドが実施され、アプリケーション上からデータベースを利⽤可能にします

• 指定したホスト名でアプリケーションが公開されますü アプリケーションが公開されるホスト名のFQDN

(指定したホスト名).au-syd.mybluemix.net


ボイラープレートでアプリケーションを作成する (4)n 左上の、「’dev’のダッシュボードに戻る」をクリックします。

• スペース名が表⽰されるため ‘dev’ではない⽂字列の可能性もありますn ダッシュボードに Node.jsアプリケーションと Cloudant NoSQL DB のサ

ービスが追加されることを確認します。

n noderedapp アプリケーションの状態が⻘信号になるのを待ち、下部の右から2番⽬のリンク・アイコンをクリックします。

⻘信号になるまでに数分かかることがあります⾚信号が表⽰されたり、いつまでもステージング中の場合、ブラウザーを再読み込みしてみてください


ボイラープレートでアプリケーションを作成する (5)

n このような画⾯が表⽰されれば、アプリケーションの作成はひとまず成功です。





n Hello Node-RED



Hello Node－RED (1)n ここからは実際にNode-REDを使ってアプリケーションを開発してい

きますn アプリケーションの画⾯を表⽰し、「Go to your Node-RED flow

editor」ボタンをクリックします


Hello Node－RED (2)

このような画⾯が表⽰されます


n まずは簡単なフローから作成してみましょう

n 作成する処理フロー• 定期的に時刻を取得して、出⼒する

n 使⽤するNode


時刻の取得 → injectノード

年⽉⽇時分への変換 → functionノード

出⼒処理 → debugノード


n 処理フローを以下の要領で作成します。n 使⽤するノードを左側のリソースから真ん中のフローエディター内に

ドラッグ＆ドロップします• injectノードはInputカテゴリーに、functionノードはfunctionカ

テゴリーに、debugノードはoutputカテゴリーにあります。n ノードの右側からノード左側の間をドラッグして線でつなぎます。

• injectノード→functionノード、functionノード→debugノード



n injectノードの設定n injectノードをダブルクリックすると、属性の編集画⾯が表⽰

• Payloadには「timestamp」• Repeatには「interval」、every「2」seconds• その他は初期の設定値のままとします• 編集後は「Ok」をクリックします



n functionノードの設定n functionノードもダブルクリックすると編集画⾯となります

• Nameには「timestampを⽂字列に変換」• FunctionにはJavaScriptのコードを記述（次ページ参照）• Outputsは1のまま「Ok」をクリック



// 前ノードからのデータ取得var serialDate = msg.payload;

// シリアル値からDateオブジェクトへの変換var date = new Date();date.setTime(serialDate);

// データの設定msg.payload = date.toString();

// 次ノードへのデータ連携return msg;

Hello Node－RED (7)n コードの記述例


Hello Node－RED (8)n debugノードの設定は不要です

n これでノードの設定ができたのでアプリケーションを稼働させてみますn 画⾯右上のDeployボタンをクリックします。クリックするとフローの設定が

アプリケーション上に反映され実⾏可能となります。


Hello Node－RED (9)n ここからは稼働確認をしてきます。n debugノードの右側にあるボタンをクリックして、debugタブへの出⼒を有効

化します。（すでに有効化されている場合、この操作は不要です）

n injectノード（timestamp）の左にあるボタンを1回だけクリックします• debugタブには以下のようなメッセージが2秒おきに表⽰されます。

• injectノードの繰り返し間隔を変更してメッセージが表⽰される間隔を変更してくださいü ノードの設定を変更したのちにはDeployが必要となります。

2016年3月13日 17:39:55 JSTc0635d48.3f9camsg.payload : string [39]

Sun Mar 13 2016 8:39:55 GMT+0000 (UTC)





n Hello Node-RED



Node-RED で IoT アプリを作成する (1)n ここからは本格的なアプリケーションを作成していきます

。n IoT (Internet of Things) は家電、⾃動⾞、ウェラブル・

デバイスなどあらゆる「モノ」をインターネットに接続し、お互いに情報をやりとりすることで新しい価値を⽣み出す概念です。

n ここでは、温度センサーにより取得したデータによって処理を変えるような IoT システムを作成していきます。


Node-RED で IoT アプリを作成する (2)n さきほど作成したフローとは別のフローを作成しますn フローエディター上部にある「＋」アイコンをクリックします

新しいフローのタブが表⽰されます。


Node-RED で IoT アプリを作成する (3)n ここでは、Node-REDで接続するセンサーの情報を取得しますn Webブラウザーの新しいタブを開き、 ibm.biz/IoTsensor に接続します

• IoT Sensorシミュレータは、IoT Cloud に接続するデバイスをエミュレートし、気温、湿度、物体温度の情報を発信 (publish) することができます

n 右上に当デバイスの MAC アドレスが表⽰されるので、メモしておきます。

シミュレータの画⾯は開いたままにしておいてください。

後ほど使⽤します。


Node-RED で IoT アプリを作成する (4)n 温度データの⼊⼒元である IoT Sensor のノードを定義しますn 左側のリソース・パレットの inputカテゴリ内のibmiotノードをフロー・

エディター中央ののキャンバスにドラッグ&ドロップし、ダブルクリックします。

n 「Edit ibmiot in node」で以下のように⼊⼒します。Authentication: QuickstartInput Type: Device EventDevice Id: xxxxxxxxxxx(ここで、xxxxxxxxxxxは IoT Sensor の MAC アドレス）Name: IoT Sensor「Ok」ボタンをクリックします


Node-RED で IoT アプリを作成する (5)n IoT Sensorから温度データを取り出す function ノードを定義しますn 左側のリソース・パレットの functionsカテゴリ内のfunctionノードをフ

ロー・エディター中央のキャンバスにドラッグ&ドロップし、ダブルクリックします

n 「Edit function node」で以下のように⼊⼒しますName: tempFunction: return {payload:msg.payload.d.temp};

n IoT Sensor と temp をマウスでつないでリンクします


Node-RED で IoT アプリを作成する (6)n 次に、温度データの条件分岐を指定する switch ノードを定義します。

ここでは、温度40度以下と40度超で分岐するよう設定します。n リソースのfunctionカテゴリー内のswitchノードを

中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。

n Edit switch node のダイアログ・ボックスで以下のように⼊⼒します。Name: temp thresh分岐条件に以下のようになるように追加（ +rule ボタンをクリックして追加）：Property msg.payload<= 40> 40checking all rules

n 「Ok」ボタンをクリックします。

n temp と temp thresh をリンクします。


Node-RED で IoT アプリを作成する (7)n 次に、条件ごとの処理を指定する template ノードを定義します。ここで

はメッセージ出⼒をそれぞれ設定します。n リソースのfunctionカテゴリー内の

templateノードを２つ、キャンバスにドラッグ&ドロップします。

n 2つを以下のように編集します• 1つ⽬

Name: safeTemplate: Temperature ({{payload}}) within safe limits

• 2つ⽬Name: dangerTemplate:Temperature ({{payload}}) critical

n 右図のようにリンクします。


Node-RED で IoT アプリを作成する (8)n 処理結果をモニター出⼒するための debug ノードを定義しますn リソースのoutputカテゴリー内のdebugノードを

キャンバスにドラッグ&ドロップし、ダブルクリックしますn Edit debug node のダイアログ・ボックスで以下のように⼊⼒します

Output: message propertymsg.payloadto: debug tabName: cpu status「Ok」ボタンをクリックします

n template と cpu status を右図のようにリンクします


Node-RED で IoT アプリを作成する (9)n これまでのステップで下図のようなフローができあがります。右上の「

Deploy」ボタンをクリックし、アプリケーションをデプロイします。上部に “Successfully deployed” と表⽰されれば、Bluemix 上でのアプリケーションのデプロイは成功です。

n 右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィンドウが表⽰されるよう操作します)


デプロイしたアプリケーションを確認するn IoT Sensor のウィンドウで⽮印ボタンをクリックし、温度を変更します。n IoT Sensor の温度が debug タブに出⼒され、40度以下のときは、

”Temperature (xx) within safe limits” と出⼒されることを確認します。n IoT Sensor の温度を上げて、40度を超えると “Temperature (xx)

critical” と出⼒されることを確認します。


オプション演習n 今度はご⾃⾝のスマートフォンのセンサー情報を取得してみましょう

• スマートフォンやタブレットから、以下のURLにアクセスしてみてください。https://phonesensor.mybluemix.net

• センサーが利⽤できない端末もありますので、利⽤できない場合にはインストラクターにお声がけください。

n 先ほどのIoT Sensorシミュレータと同じようにMACアドレスを⽤いてセンサー情報をibmiotノードで利⽤できます。

デバイスからは以下の情報が取得できます。• 端末の向き(Direction)• 傾き(Tilt Left/Right, Tilt Front/Back)• 加速度これらを使ってIoTアプリケーションを作りましょう


IoTアプリの拡張を考えるハンズオンではモニター⽤に画⾯出⼒し稼動を確認するまでにとどめていますが、Node-RED を使⽤して様々に変更することが可能です。

Input/outputを組み合わせ、特定の条件を満たすデータを受け取ったら、担当者に通知するといったものから、コーディングを追加してより⾼度なものにすることも可能です。詳細は以下のサイトをご覧ください。http://nodered.org/docs/

チュートリアルArduino Uno と IBM IoT Foundation を利⽤してクラウド対応の温度センサーを作成する（全4回）http://www.ibm.com/developerworks/jp/cloud/library/cl-bluemix-arduino-iot1/index.html


ハンズオンのまとめn Bluemix上でNode-REDを⽤いて簡単なアプリケーションを作成しました

• Bluemix上にNode-REDアプリケーションを作成できるようになりました• Node-REDを使って簡単なロジックを実現できるようになりました• IoTアプリケーションを作ることができるようになりました


Bluemix User Group (BMXUG：ビーザグ)n Bluemixの利⽤促進や情報交換を⽬的としたコミュニティn ユーザー様主体、有志による運営

Bluemixのユーザー会が設⽴されました！ぜひご参加ください！

⼥⼦部もありますのでお気軽にどうぞ

• BMXUG facebookで「グループに参加」をクリック！

http://ibm.biz/bmxug-facebook

• Doorkeeperからご登録ください！（ニックネームだけでの登録も可能です）http://bmxug.doorkeeper.jp

または

ibm bluemix ハンズオン・セミナー node-red初級編2016/03/15 · node－redとは？(3) n...

Documents