Comments
Description
Transcript
IBM Bluemix ハンズオン・セミナー Node-RED 初級編 1
IBM Bluemix
ハンズオン・セミナー
Node-RED 初級編
1
© 2016 IBM Corporation
ハンズオンの概要
Bluemix上でノンプログラミングのNode-REDを使用して簡単なアプリケーション
を作成できるようになります。
• Bluemixにおける、Node-REDの開発/実行環境の作成方法を学びます。
• Bluemix上でNode-REDのサンプルアプリケーションを作成することで、Node-REDに
おける開発方法を学びます。
• センサーシミュレーターから取得した、各種センサーデータ（温度、湿度など）を活用
したIoTアプリケーションを作成します。
• Webアプリケーションを作成します。
• Watson機能を使用したWebアプリケーションを作成します。
センサーシミュレーター
ブラウザ
2
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
3
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
4
© 2016 IBM Corporation
Node－REDとは？ (1)
Node-REDとは、デバイス、API、オンラインサービスなどの機能を
繋げてアプリケーションを作成していくプラットフォームです。
• IBMのEmerging Technology Teamが開発したソフトウェア
• 元々はIoTデバイスの活用に特化したビジュアルツールだが現在は汎用的
• オープンソフトウェアでありNode.jsが動く環境なら何処でも動かせる
（Bluemix環境ではなくても使用可能）
5
© 2016 IBM Corporation
Node－REDとは？ (2)
処理フローはブラウザベースのUIで作成
• 機能がカプセル化された「Node」を繋げていく（データの流れをデザイン）
• 汎用的な機能のほか、Bluemixのサービス機能も「Node」として提供
• 独自にNodeを作成して追加することも可能
Deployボタンのクリックで
実行環境へ反映
各ノードの
動作を個別に設定
シートにドラッグ＆ドロップし
処理順にノードを結合
Debug出力画面。
処理ノードを
パレットから選択
6
© 2016 IBM Corporation
Node－REDとは？ (3)
Node-REDで提供される代表的なNode（2016年3月31日現在）
カテゴリ
説明
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機能を提供
7
© 2016 IBM Corporation
Node－REDとは？ (4)
データの処理ロジックはJavaScriptで記述します
• 複雑なロジックになる場合は独自のノードを作成したほうが記述が簡単になる
こともあります。
8
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
9
© 2016 IBM Corporation
Bluemix へログイン
Bluemix にログインします。
Webブラウザを起動し、Bluemix にアクセスします。下記URLを入力します。
https://console.au-syd.bluemix.net/
表示された画面上の「ログイン」 をクリックします。
表示された画面上でIBM ID/パスワードを入力して「Sign in」ボタンをクリックします。
ログインが成功すると Bluemix の
ダッシュボード画面が表示されます
10
© 2016 IBM Corporation
[補足]コンソールのタイプ
今回のハンズオンでは、現行コンソールを利用いたします。
現行コンソール
11
NEWコンソール
© 2016 IBM Corporation
作業する地域を確認する
Bluemixは、「米国南部」「英国」「シドニー」の3地域で稼動しています。上部メニューの
「プロファイル設定
」 をクリックすることで、稼動する環境を選択することができます。
今回は「シドニー」を利用します。
地域が「シドニー」になっていることを確認してください。
それ以外の場合は、「地域」をクリックして、「シドニー」を選択してください
12
© 2016 IBM Corporation
[補足] 地域選択時のポップアップへの対応方法
Bluemixへのログイン時、もしくは地域でシドニーを選択した場合に、
スペースを作成するように指示するポップアップ・ウィンドウが表示された
ときは、任意の名前（今回の演習ではなるべくdevとしてください）を
入力し、作成をクリックしてください。
13
© 2016 IBM Corporation
Bluemix画面操作 (1)
画面上部にはいくつかのメニューが並びます。
• ダッシュボード
作成されたアプリケーション、サービスに関する情報を表示します
• カタログ
Bluemix上で使用できるボイラープレート、ランタイム、サービスに関する情報を表
示します
• 料金
使用料金の目安を見積もるためのツールなどを提供します
• 資料
Bluemixに関するヘルプ文書を提供します
インターネット上に様々な情報もございますが、こちらで情報を確認いただくのが
ベストです
14
© 2016 IBM Corporation
Bluemix画面操作 (2)
ブラウザ画面を有効に活用するために、表示と非表示を切り替える
アイコンがあります
• 画面解像度によりメニューが省略されることがありますので、ご注意ください
• 幅が小さいブラウザーでのメニューの表示・非表示の切り替え例
15
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
16
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (1)
Bluemixでは、幾つかのランタイムやサービスを組み合わせたボイラー
プレートというテンプレートを提供しています。これを利用することで
簡単にBluemixアプリケーションを開発することができます。
Bluemixのカタログメニューにボイラープレートを確認してください。
各ボイラープレートをクリックすることで、それが、どのランタイム、
サービスを組み合わせたものかを確認できます。
17
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (2)
Node-RED Starterをクリックします。このボイラープレートは、以下の
コンポーネントから構成されていることが分かります。
- SDK for Node.js
- Cloudant NoSQL DB
次のように入力し、 「作成」ボタンをクリックします。
名前: noderedapp+末尾に任意の文字列 (固有の文字列となる必要)
ホスト: 上記の名前がコピーされる
18
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (3)
アプリケーションの作成が開始されます。
• Node.jsランタイムのアプリケーション上にNode-REDを含むアプリケーションが
作成されます。
• Cloudant NoSQLデータベースのインスタンスが作成されて、Node-REDの
ノード情報を含むデータベースが作成されます。
• Node.jsランタイムとデータベースのバインドが実施されて、アプリケーション上
からデータベースを利用可能にします。
• 指定したホスト名でアプリケーションが公開されます。
アプリケーションが公開されるホスト名のFQDN
(指定したホスト名).au-syd.mybluemix.net
19
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (4)
左上の、「’dev’のダッシュボードに戻る」をクリックします。
• スペース名が表示されるため ‘dev’ではない文字列の可能性もあります
ダッシュボードに Node.jsアプリケーションと Cloudant NoSQL DB のサービスが追
加されることを確認します。
noderedapp アプリケーションの状態が青信号になるのを待ち、下部の右から2番
目のリンク・アイコンをクリックします。
※青信号になるまでに数分かかることがあります。
赤信号が表示されたり、いつまでもステージング中の場合、
ブラウザーを再読み込みしてみてください。
20
© 2016 IBM Corporation
ボイラープレートでアプリケーションを作成する (5)
このような画面が表示されれば、
アプリケーションの作成はひとまず成功です。
21
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
22
© 2016 IBM Corporation
Node-REDに挨拶しよう (1)
ここからは実際にNode-REDを使ってアプリケーションを
開発していきます
アプリケーションの画面を表示し、「Go to your NodeRED flow editor」ボタンをクリックします
23
© 2016 IBM Corporation
Node-REDに挨拶しよう (2)
このような画面が表示されます
24
© 2016 IBM Corporation
Node-REDに挨拶しよう (3)
まずは簡単なフローから作成してみましょう
作成する処理フロー
• クリックすると時刻を取得して、出力する
使用するNode
25
クリック時刻の取得
→ injectノード
年月日時分への変換
→ functionノード
出力処理
→ debugノード
© 2016 IBM Corporation
Node-REDに挨拶しよう (4)
処理フローを以下の要領で作成します。
使用するノードを左側のリソースから真ん中のフローエディター内に
ドラッグ＆ドロップします。
• Injectノードは Inputカテゴリーに、functionノードは function
カテゴリーに、debugノードはoutputカテゴリーにあります。
ノードの右側からノード左側の間をドラッグして線でつなぎます。
• injectノード→functionノード、functionノード→debugノード
各ノードの動作は、
ダブルクリックして表示される
画面で設定する。
この中から、使用するノードを選択して、
シートにドラッグ＆ドロップし処理順にノードを結合
26
© 2016 IBM Corporation
Node-REDに挨拶しよう (5)
injectノードの設定
injectionノードをダブルクリックすると、属性を編集する
画面が表示されます。
Payloadにtimestampを
設定します。
この設定により、
ノードをクリックすると
Payloadにtimestampが
設定されます。
27
© 2016 IBM Corporation
Node-REDに挨拶しよう (6)
functionノードの設定
functionノードをダブルクリックすると、属性を編集する
画面が表示されます。
各属性を設定します。
「OK」ボタンをクリックします。
28
© 2016 IBM Corporation
Node-REDに挨拶しよう (7)
funcitonノードのコード記述例
// 前ノードからのデータ取得
var serialDate = msg.payload;
// シリアル値からDateオブジェクトへの変換
var date = new Date();
date.setTime(serialDate);
// データの設定
msg.payload = date.toString();
// 次ノードへのデータ連携
return msg;
29
© 2016 IBM Corporation
Node-REDに挨拶しよう (8)
debugノードの設定は不要です
これまで作成した各ノードを繋ぎます。
画面右上のDeployボタンをクリックします。クリックする
とフローの設定がアプリケーションサーバに反映され実行
可能となります。
30
© 2016 IBM Corporation
Node-REDに挨拶しよう (9)
ここからは稼働確認をしてきます。
debugノードの右側にあるボタンをクリックして、debug
タブへの出力を有効化します。
Injectノードの左側にあるボタンをクリック
debugタブに以下のようなメッセージが表示されます。
31
© 2016 IBM Corporation
[補足] Node-REDで作成したフローのエクスポート
左クリックしてドラッグすることにより、エクスポートする
ノードを範囲選択します。
右のメニューから[Export]-[Clipboard]を選択します。表示
されたダイアログのテキストをコピーします（これがエクス
ポートデータとなります）。
テキストをコピー
32
© 2016 IBM Corporation
[補足] ハンズオンで使用するコード
当該ハンズオンの資料、およびNode-REDのコードは、
以下のURLからダウンロードできます
http://httpserver.mybluemix.net/
33
© 2016 IBM Corporation
[補足] Node-REDで作成したフローのインポート
インポートするタブを選択して、右のメニューから
[Import]-[Clipboard]を選択します。表示されたダイアロ
グにインポートするデータをコピーします。
テキストをペースト
34
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
35
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (1)
ここからは本格的なアプリケーションを作成していきます。
IoT (Internet of Things) は、家電、自動車、ウェラブル・
デバイスなどあらゆる「モノ」をインターネットに接続し、
お互いに情報をやりとりすることで、新しい価値を生み出す
概念です。
ここでは、温度センサーにより取得したデータによって処理
を変えるような IoT システムを作成していきます。
（温度センサーはシミュレーターを使用します）
36
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (2)
さきほど作成したフローとは別のフローを作成します。
フローエディター上部にある「＋」アイコンをクリックします。
新しいフローのタブが表示されます。
37
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (3)
ここでは、Node-REDで接続するセンサーの情報を取得します。
ブラウザーの新しいタブを開き、 ibm.biz/IoTsensor に接続します。
• IoT Sensorシミュレータは、インターネットに接続するデバイスを
エミュレートし、気温、湿度、物体温度の情報を発信 (publish) する
ことができます。
画面右上に当デバイスの MAC アドレスが表示されるので、
メモしておきます。
シミュレータの画面は開いた
ままにしておいてください。
後ほど使用します。
38
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (4)
IoT Sensor のノードを定義します。
左側のリソースパレットの inputカテゴリ内にあるibmiotノードをフロー
エディターのキャンバスにドラッグ&ドロップしてダブルクリックします。
各属性を修正します。Device Id 属性には先ほどメモしたIoT Sensorの
MACアドレスを設定します。
「OK」ボタンをクリックします。
※ 前回使用したDebugノードを
使用することで疎通確認できます。
39
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (5)
センサーデータを取り出すfunctionノードを定義します。
左側のリソースパレットの functions カテゴリ内の function ノードを
フローエディター中央のキャンバスにドラッグ&ドロップして、ダブル
クリックします。
各属性を設定します。
Name:
temp
Function:
return {payload:msg.payload.d.temp};
「OK」ボタンをクリックします。
Iot Sensorと線を繋ぎます。
40
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (6)
次に、温度データの条件分岐を指定する switch ノードを定義します。
ここでは、温度40度以下と40度超で分岐するよう設定します。
リソースのfunctionカテゴリー内のswitchノードを
中央のキャンバスにドラッグ&ドロップしてダブルクリックします。
Edit switch node のダイアログ・ボックスで以下のように入力します。
Name: temp thresh
分岐条件に以下のようになるように追加
（ +rule ボタンをクリックして追加）：
Property msg.payload
<= 40
>= 40
checking all rules
「Ok」ボタンをクリックします。
temp と temp thresh をリンクします。
41
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (7)
次に、条件ごとの処理を指定する template ノードを定義します。
ここではメッセージ出力をそれぞれ設定します。
リソースのfunctionカテゴリー内のtemplateノードを２つ、
キャンバスにドラッグ&ドロップします。
2つを以下のように編集します。
• 1つ目
Name: safe
Template:
Temperature ({{payload}}) within safe limits
• 2つ目
Name: danger
Template:
Temperature ({{payload}}) critical
右図のようにノードをリンクします。
42
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (8)
処理結果をモニター出力するための debug ノードを定義します。
リソースのoutputカテゴリー内のdebugノードを
キャンバスにドラッグ&ドロップし、ダブルクリックします
Edit debug node のダイアログ・ボックスで以下のように入力します。
Output: message property
msg.payload
to: debug tab
Name: cpu status
「OK」ボタンをクリックします。
template と cpu status を
以下のようにリンクします。
43
© 2016 IBM Corporation
Node-RED で IoT アプリを作成する (9)
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ
クし、アプリケーションをデプロイします。
上部に “Successfully deployed” と表示されれば、Bluemix 上でのアプリケーションの
デプロイは成功です。
右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィンドウが表示
されるよう操作します)
44
© 2016 IBM Corporation
デプロイしたアプリケーションを確認する
IoT Sensor のウィンドウで矢印ボタンをクリックし、温度を変更します。
IoT Sensor の温度が debug タブに出力され、40度以下のときは、
”Temperature (xx) within safe limits” と出力されることを確認します。
IoT Sensor の温度を上げて、40度を超えると “Temperature (xx)
critical” と出力されることを確認します。
45
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
46
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (1)
ここではNode-REDを使用して、Webアプリケーションを
作成していきます。
• HTMLフォームの出力
ブラウザからのHTTPリクエストに対して
HTTPレスポンスを返す方法を学びます。
• HTMLフォームで入力された値の取得
HTTPリクエストのパラメータを取得して、
HTTPレスポンスに出力する方法を学びます。
ブラウザ
HTTPリクエスト
http://xxx.mybluemix.net/...
Bluemix
Node-REDアプリケーション
HTTPレスポンス
47
<html>
<head>
<title>Hello Bluemix!</title>
</head>
・・・
Node.js ランタイム
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (2)
～ HTMLフォームを出力
HTTPリクエストを受ける HTTP in ノードを定義します。
左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正して、「Ok」ボタンをクリックします。
Method: GET
URL: /hello
48
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (3)
～ HTMLフォームを出力
HTMLを定義するtemplateノードを定義します。
左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー
エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。
各属性を修正します。
Name: 入力画面
Set property: msg.payload
Syntax Highlight: HTML
Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。
HTTP inノードと線を繋ぎます。
49
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (3)
～ HTMLフォームを出力
templateノードのコード記述例
<html>
<head>
<title>Web Application on Node-RED</title>
</head>
<body>
<h1>Hello World on Node-RED</h1>
<h2>Input your name!</h2>
<form action="/hello" method="POST">
<input type="text" name="name">
<input type="submit">
</form>
</body>
</html>
50
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (4)
～ HTMLフォームを出力
HTTPレスポンスとなるHTTP responseノードを定義します。
左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正します。
Name: HTTP出力
「OK」ボタンをクリックします。
入力画面と線を繋ぎます。
51
Z
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (5)
～ HTMLフォームを出力
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ
クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ
ば、Bluemix 上でのアプリケーションのデプロイは成功です。
ブラウザから確認
Node-REDのボイラーテンプレートの名前と
http in ノードで指定したURLをもとにアクセス。
ブラウザからアクセス。
例）http://XXX.mybluemix.net/webtest
52
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (6)
～ HTMLフォームで入力された値の取得
HTTPリクエストを受ける HTTP in ノードを定義します。
左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正して、「Ok」ボタンをクリックします。
Method: POST
URL: /hello
53
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (7)
～ HTMLフォームで入力された値の取得
HTMLを定義するtemplateノードを定義します。
左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー
エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。
各属性を修正します。
Name: 結果画面
Set property: msg.payload
Syntax Highlight: HTML
Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。
HTTP inノードと線を繋ぎます。
54
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (7)
～ HTMLフォームで入力された値の取得
templateノードのコード記述例
<html>
<head>
<title>Web Application on Node-RED</title>
</head>
<body>
<h1>Hello World on Node-RED</h1>
<h2>
Your name is {{payload.name}}
</h2>
</body>
</html>
55
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (8)
～ HTMLフォームで入力された値の取得
HTTPレスポンスとなるHTTP responseノードを定義します。
左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正します。
Name: HTTP出力
「OK」ボタンをクリックします。
入力画面と線を繋ぎます。
56
Z
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (9)
～ HTMLフォームで入力された値の取得
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ
クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ
ば、Bluemix 上でのアプリケーションのデプロイは成功です。
57
© 2016 IBM Corporation
Node-REDでWebアプリを作成する (10)
～ HTMLフォームで入力された値の取得
HTMLフォームにデータを入力
最初に作成したHTMLフォームを出力するURLへアクセスして、
データを入力して送信ボタンをクリック。
例）http://XXX.mybluemix.net/hello
/helloにHTTPリクエストが送信され、
以下の画面が表示されます。
58
© 2016 IBM Corporation
ハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
59
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (1)
ここでは、ブラウザベースの Watson アプリケーションを
作成していきます。
具体的には、ブラウザから入力された画像URLをもとに、
WatsonのVisual Recognition機能で画像を解析した結果を
出力します。
ブラウザ
HTTPリクエスト
Bluemix
http://xxx.mybluemix.net/...
Node-REDアプリケーション
Visual
Recognition
Node.js ランタイム
HTTPレスポンス
<html>
<head>
<title>Hello Bluemix!</title>
</head>
・・・
60
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (2)
～ Visual Recognitionの追加①
ボイラーテンプレートで作成したランタイムに、画像分析を
行うためのVisual Recognitionサービスを追加します。
61
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (3)
～ Visual Recognitionの追加②
スペース・アプリを確認して、「作成」ボタンをクリックし
ます（サービス名は既定のままでかまいません）。
62
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (4)
～ HTMLフォームを出力
HTTPリクエストを受ける HTTP in ノードを定義します。
左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正して、「Ok」ボタンをクリックします。
Method: GET
URL: /recognize
63
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (5)
～ HTMLフォームを出力
HTMLを定義するtemplateノードを定義します。
左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー
エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。
各属性を修正します。
Name: 入力画面
Set property: msg.payload
Syntax Highlight: HTML
Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。
HTTP inノードと線を繋ぎます。
64
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (5)
～ HTMLフォームを出力
templateノードのコード記述例
<html>
<head>
<title>Web Application on Node-RED</title>
</head>
<body>
<h1>画像のURLを入力してください。</h1>
<form action="/recognize" method="POST">
<input type="text" name="imageurl">
<input type="submit">
</form>
</body>
</html>
65
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する(6)
～ HTMLフォームを出力
HTTPレスポンスとなるHTTP responseノードを定義します。
左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正します。
Name: HTTP出力
「OK」ボタンをクリックします。
入力画面と線を繋ぎます。
66
Z
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (7)
～ HTMLフォームを出力
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ
クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ
ば、Bluemix 上でのアプリケーションのデプロイは成功です。
ブラウザから確認
Node-REDのボイラーテンプレートの名前と
http in ノードで指定したURLをもとにアクセス。
ブラウザからアクセス。
例）http://XXX.mybluemix.net/recognized
67
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (8)
～ HTMLフォームで入力された値の取得
HTTPリクエストを受ける HTTP in ノードを定義します。
左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正して、「Ok」ボタンをクリックします。
Method: POST
URL: /recognize
68
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (9)
～ 画像URLを抽出するノードの追加
入力画面から画像URLを抽出する changeノードを定義します。
左側のリソースパレットの functionカテゴリ内のchangeノードをフロー・
エディタ中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正します。
Name: 画像URLの抽出
Set: msg.payload
to: msg.payload.imageurl
「OK」ボタンをクリックします。
HTTP inノードと線を繋ぎます。
69
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (10)
～ 画像を解析するノードの追加
Visual Recgnitionノードを定義します。
左側のリソースパレットの IBM_Watsonカテゴリ内のvisual recognition
ノードをフローエディタ中央のキャンバスにドラッグ&ドロップします。
先ほど作成したchangeノードとvisual recognitionを結びます。
（visual recognitionでは属性の定義は必要ありません）
70
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (11)
～ 結果画面を定義するノードの追加
HTMLを定義するtemplateノードを定義します。
左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー
エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。
各属性を修正します。
Name: 結果画面
Set property: msg.payload
Syntax Highlight: HTML
Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。
先ほどのノードと線を繋ぎます。
71
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (11)
～ 結果画面を定義するノードの追加
templateノードのコード記述例
<html>
<head>
<title>Watson Visual Recognition on Node-RED</title>
</head>
<body>
<h1>Node-RED Watson Visual Recognition 認識結果</h1>
<h2>解析対象イメージ image: {{payload}}<br/>
<img src="{{payload}}" height='100'/></h2>
<table border='1'>
<thead><tr><th>名称</th><th>スコア(一致度)</th></tr></thead>
<tbody>
{{#labels}}
<tr>
<td><b>{{label_name}}</b></td><td><i>{{label_score}}</i></td>
</tr>
{{/labels}}
</tbody>
</table>
<hr/>
<form action="/recognize">
<input type="submit" value="もう一度解析"/>
</form>
</body>
</html>
72
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (12)
～ 結果画面の出力
HTTPレスポンスとなるHTTP responseノードを定義します。
左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ
中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。
各属性を修正します。
Name: HTTP出力
「OK」ボタンをクリックします。
入力画面と線を繋ぎます。
73
Z
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (13)
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ
クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ
ば、Bluemix 上でのアプリケーションのデプロイは成功です。
74
© 2016 IBM Corporation
Node-REDでWatsonアプリを作成する (14)
HTMLフォームにデータを入力
最初に作成したHTMLフォームにて、
画像を表わすURLを入力して送信ボタンをクリック。
例）http://XXX.mybluemix.net/recognize
画像URLを入力
Visual Recognitionでの
画像解析結果が表示されます。
75
© 2016 IBM Corporation
オプション：200を超えるBluemixのチュートリアル！
IBM Bluemix テーマ別チュートリアル
http://www.ibm.com/developerworks/jp/bluemix/tutorial.html
おすすめチュートリアル！
●Node-REDを使用してリアルタイムのチャット・アプリケーションを 5 分で作成する
http://www.ibm.com/developerworks/jp/cloud/library/cl-rtchat-app/
●Node-REDとIBM BluemixのPushサービスを利用してプッシュ通知を自動送信す
http://www.ibm.com/developerworks/jp/web/library/wa-nodered-push-app/
●IoT サービスと GPS サービスを Bluemix で統合して健康のために役立てる
http://www.ibm.com/developerworks/jp/cloud/library/cl-getmoarsteps-app/
76
© 2016 IBM Corporation
ハンズオンのまとめ
Bluemix上でノンプログラミングのNode-REDを使用して簡単なアプリ
ケーションを作成できるようになりました。
• Bluemixにおける、Node-REDの開発/実行環境を作成できるようになりました。
• Bluemix上でNode-REDのサンプルアプリケーションを作成することで、NodeREDにおける開発方法を学びました。
• センサーシミュレーターから取得した、各種センサーデータ（温度、湿度など）を
活用したIoTアプリケーションを作成できるようになりました。
• Webアプリケーションを作成できるようになりました。
• Watson機能を使用したWebアプリケーションを作成できるようになりました。
77
© 2016 IBM Corporation
Bluemix User Group (BMXUG：ビーザグ)
Bluemixの利用促進や情報交換を目的としたコミュニティ
ユーザー様主体、有志による運営
Bluemixのユーザー会が設立されました！
ぜひご参加ください！
• BMXUG facebookで「グループに参加」をクリック！
http://ibm.biz/bmxug-facebook
または
女子部もありますのでお気軽にどうぞ
• Doorkeeperからご登録ください！（ニックネームだけでの登録も可能です）
http://bmxug.doorkeeper.jp
78
© 2016 IBM Corporation
最後に：アンケート
ibm.biz/bluemixq
アンケート記入にご協力ください
3分ほどで入力いただける内容です。
79
© 2016 IBM Corporation
80
© 2016 IBM Corporation