IBM Bluemix
ハンズオン・セミナー
Node-RED 初級編
ハンズオンの概要
Bluemix上でノンプログラミングのNode-REDを使用して簡単なアプリケーション
を作成できるようになります。
• Bluemixにおける、Node-REDの開発/実行環境の作成方法を学びます。 • Bluemix上でNode-REDのサンプルアプリケーションを作成することで、Node-REDに おける開発方法を学びます。 • センサーシミュレーターから取得した、各種センサーデータ（温度、湿度など）を活用 したIoTアプリケーションを作成します。 • Webアプリケーションを作成します。 • Watson機能を使用したWebアプリケーションを作成します。 センサーシミュレーター ブラウザハンズオン手順
1. Node-REDとは？
2. Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
ハンズオン手順
1. Node-REDとは？
2.
Bluemixへのアクセス
3.
ボイラープレートでアプリケーションを作成する
4.
Node-REDに挨拶しよう
5.
Node-REDでIoTアプリケーションを作成する
6.
Node-REDでWebアプリケーションを作成する
7.
Node-REDでWatsonアプリケーションを作成する
Node-REDとは、デバイス、API、オンラインサービスなどの機能を
繋げてアプリケーションを作成していくプラットフォームです。
• IBMのEmerging Technology Teamが開発したソフトウェア
• 元々はIoTデバイスの活用に特化したビジュアルツールだが現在は汎用的
• オープンソフトウェアでありNode.jsが動く環境なら何処でも動かせる
（Bluemix環境ではなくても使用可能）
処理フローはブラウザベースのUIで作成
• 機能がカプセル化された「Node」を繋げていく（データの流れをデザイン）
• 汎用的な機能のほか、Bluemixのサービス機能も「Node」として提供
• 独自にNodeを作成して追加することも可能
Node－REDとは？ (2)
処理ノードを パレットから選択 Deployボタンのクリックで 実行環境へ反映 各ノードの 動作を個別に設定 シートにドラッグ＆ドロップし 処理順にノードを結合 Debug出力画面。Node－REDとは？ (3)
カテゴリ 説明 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（2016年3月31日現在）
Node－REDとは？ (4)
データの処理ロジックはJavaScriptで記述します
• 複雑なロジックになる場合は独自のノードを作成したほうが記述が簡単になる
こともあります。
ハンズオン手順
1.
Node-REDとは？
2. Bluemixへのアクセス
3.
ボイラープレートでアプリケーションを作成する
4.
Node-REDに挨拶しよう
5.
Node-REDでIoTアプリケーションを作成する
6.
Node-REDでWebアプリケーションを作成する
7.
Node-REDでWatsonアプリケーションを作成する
Bluemix へログイン
Bluemix にログインします。
Webブラウザを起動し、Bluemix にアクセスします。下記URLを入力します。
https://console.au-syd.bluemix.net/
表示された画面上の「ログイン」 をクリックします。
表示された画面上でIBM ID/パスワードを入力して「Sign in」ボタンをクリックします。
ログインが成功すると Bluemix の
ダッシュボード画面が表示されます
[補足]コンソールのタイプ
今回のハンズオンでは、現行コンソールを利用いたします。
作業する地域を確認する
Bluemixは、「米国南部」「英国」「シドニー」の3地域で稼動しています。上部メニューの
「プロファイル設定
」 をクリックすることで、稼動する環境を選択することができます。
今回は「シドニー」を利用します。
地域が「シドニー」になっていることを確認してください。
それ以外の場合は、「地域」をクリックして、「シドニー」を選択してください
[補足] 地域選択時のポップアップへの対応方法
Bluemixへのログイン時、もしくは地域でシドニーを選択した場合に、
スペースを作成するように指示するポップアップ・ウィンドウが表示された
ときは、任意の名前（今回の演習ではなるべくdevとしてください）を
入力し、作成をクリックしてください。
Bluemix画面操作 (1)
画面上部にはいくつかのメニューが並びます。
• ダッシュボード
作成されたアプリケーション、サービスに関する情報を表示します• カタログ
Bluemix上で使用できるボイラープレート、ランタイム、サービスに関する情報を表 示します• 料金
使用料金の目安を見積もるためのツールなどを提供します• 資料
Bluemixに関するヘルプ文書を提供します インターネット上に様々な情報もございますが、こちらで情報を確認いただくのが ベストですBluemix画面操作 (2)
ブラウザ画面を有効に活用するために、表示と非表示を切り替える
アイコンがあります
• 画面解像度によりメニューが省略されることがありますので、ご注意ください
• 幅が小さいブラウザーでのメニューの表示・非表示の切り替え例
ハンズオン手順
1.
Node-REDとは？
2.
Bluemixへのアクセス
3. ボイラープレートでアプリケーションを作成する
4.
Node-REDに挨拶しよう
5.
Node-REDでIoTアプリケーションを作成する
6.
Node-REDでWebアプリケーションを作成する
7.
Node-REDでWatsonアプリケーションを作成する
ボイラープレートでアプリケーションを作成する (1)
Bluemixでは、幾つかのランタイムやサービスを組み合わせたボイラー
プレートというテンプレートを提供しています。これを利用することで
簡単にBluemixアプリケーションを開発することができます。
Bluemixのカタログメニューにボイラープレートを確認してください。
各ボイラープレートをクリックすることで、それが、どのランタイム、
サービスを組み合わせたものかを確認できます。
ボイラープレートでアプリケーションを作成する (2)
Node-RED Starterをクリックします。このボイラープレートは、以下の
コンポーネントから構成されていることが分かります。
- SDK for Node.js
- Cloudant NoSQL DB
次のように入力し、 「作成」ボタンをクリックします。
名前: noderedapp+末尾に任意の文字列 (固有の文字列となる必要)
ホスト: 上記の名前がコピーされる
ボイラープレートでアプリケーションを作成する (3)
アプリケーションの作成が開始されます。
• Node.jsランタイムのアプリケーション上にNode-REDを含むアプリケーションが
作成されます。
• Cloudant NoSQLデータベースのインスタンスが作成されて、Node-REDの
ノード情報を含むデータベースが作成されます。
• Node.jsランタイムとデータベースのバインドが実施されて、アプリケーション上
からデータベースを利用可能にします。
• 指定したホスト名でアプリケーションが公開されます。
アプリケーションが公開されるホスト名のFQDN
(指定したホスト名).au-syd.mybluemix.net
ボイラープレートでアプリケーションを作成する (4)
左上の、「’dev’のダッシュボードに戻る」をクリックします。
• スペース名が表示されるため ‘dev’ではない文字列の可能性もあります
ダッシュボードに Node.jsアプリケーションと Cloudant NoSQL DB のサービスが追
加されることを確認します。
noderedapp アプリケーションの状態が青信号になるのを待ち、下部の右から2番
目のリンク・アイコンをクリックします。
※青信号になるまでに数分かかることがあります。 赤信号が表示されたり、いつまでもステージング中の場合、 ブラウザーを再読み込みしてみてください。ボイラープレートでアプリケーションを作成する (5)
このような画面が表示されれば、
ハンズオン手順
1.
Node-REDとは？
2.
Bluemixへのアクセス
3.
ボイラープレートでアプリケーションを作成する
4. Node-REDに挨拶しよう
5.
Node-REDでIoTアプリケーションを作成する
6.
Node-REDでWebアプリケーションを作成する
7.
Node-REDでWatsonアプリケーションを作成する
Node-REDに挨拶しよう (1)
ここからは実際にNode-REDを使ってアプリケーションを
開発していきます
アプリケーションの画面を表示し、「Go to your
Node-RED flow editor」ボタンをクリックします
Node-REDに挨拶しよう (2)
まずは簡単なフローから作成してみましょう
作成する処理フロー
• クリックすると時刻を取得して、出力する
使用するNode
Node-REDに挨拶しよう (3)
クリック時刻の取得
→ injectノード
年月日時分への変換
→ functionノード
出力処理
→ debugノード
処理フローを以下の要領で作成します。
使用するノードを左側のリソースから真ん中のフローエディター内に
ドラッグ＆ドロップします。
• Injectノードは Inputカテゴリーに、functionノードは function
カテゴリーに、debugノードはoutputカテゴリーにあります。
ノードの右側からノード左側の間をドラッグして線でつなぎます。
• injectノード→functionノード、functionノード→debugノード
Node-REDに挨拶しよう (4)
この中から、使用するノードを選択して、 シートにドラッグ＆ドロップし処理順にノードを結合 各ノードの動作は、 ダブルクリックして表示される 画面で設定する。 injectノードの設定
injectionノードをダブルクリックすると、属性を編集する
画面が表示されます。
Payloadにtimestampを
設定します。
この設定により、
ノードをクリックすると
Payloadにtimestampが
設定されます。
Node-REDに挨拶しよう (5)
functionノードの設定
functionノードをダブルクリックすると、属性を編集する
画面が表示されます。
各属性を設定します。
「OK」ボタンをクリックします。
Node-REDに挨拶しよう (6)
// 前ノードからのデータ取得 var serialDate = msg.payload;
// シリアル値からDateオブジェクトへの変換 var date = new Date();
date.setTime(serialDate); // データの設定 msg.payload = date.toString(); // 次ノードへのデータ連携 return msg;
Node-REDに挨拶しよう (7)
funcitonノードのコード記述例
Node-REDに挨拶しよう (8)
debugノードの設定は不要です
これまで作成した各ノードを繋ぎます。
画面右上のDeployボタンをクリックします。クリックする
とフローの設定がアプリケーションサーバに反映され実行
可能となります。
Node-REDに挨拶しよう (9)
ここからは稼働確認をしてきます。
debugノードの右側にあるボタンをクリックして、debug
タブへの出力を有効化します。
Injectノードの左側にあるボタンをクリック
debugタブに以下のようなメッセージが表示されます。
[補足] Node-REDで作成したフローのエクスポート
左クリックしてドラッグすることにより、エクスポートする
ノードを範囲選択します。
右のメニューから[Export]-[Clipboard]を選択します。表示
されたダイアログのテキストをコピーします（これがエクス
ポートデータとなります）。
テキストをコピー[補足] ハンズオンで使用するコード
当該ハンズオンの資料、およびNode-REDのコードは、
以下のURLからダウンロードできます
[補足] Node-REDで作成したフローのインポート
インポートするタブを選択して、右のメニューから
[Import]-[Clipboard]を選択します。表示されたダイアロ
グにインポートするデータをコピーします。
ハンズオン手順
1.
Node-REDとは？
2.
Bluemixへのアクセス
3.
ボイラープレートでアプリケーションを作成する
4.
Node-REDに挨拶しよう
5. Node-REDでIoTアプリケーションを作成する
6.
Node-REDでWebアプリケーションを作成する
7.
Node-REDでWatsonアプリケーションを作成する
Node-RED で IoT アプリを作成する (1)
ここからは本格的なアプリケーションを作成していきます。
IoT (Internet of Things) は、家電、自動車、ウェラブル・
デバイスなどあらゆる「モノ」をインターネットに接続し、
お互いに情報をやりとりすることで、新しい価値を生み出す
概念です。
ここでは、温度センサーにより取得したデータによって処理
を変えるような IoT システムを作成していきます。
（温度センサーはシミュレーターを使用します）
Node-RED で IoT アプリを作成する (2)
さきほど作成したフローとは別のフローを作成します。
フローエディター上部にある「＋」アイコンをクリックします。
ここでは、Node-REDで接続するセンサーの情報を取得します。
ブラウザーの新しいタブを開き、
ibm.biz/IoTsensor
に接続します。
• IoT Sensorシミュレータは、インターネットに接続するデバイスを
エミュレートし、気温、湿度、物体温度の情報を発信 (publish) する
ことができます。
画面右上に当デバイスの MAC アドレスが表示されるので、
メモしておきます。
Node-RED で IoT アプリを作成する (3)
シミュレータの画面は開いた ままにしておいてください。 後ほど使用します。Node-RED で IoT アプリを作成する (4)
IoT Sensor のノードを定義します。
左側のリソースパレットの inputカテゴリ内にあるibmiotノードをフロー
エディターのキャンバスにドラッグ&ドロップしてダブルクリックします。
各属性を修正します。Device Id 属性には先ほどメモしたIoT Sensorの
MACアドレスを設定します。
「OK」ボタンをクリックします。
※ 前回使用したDebugノードを
センサーデータを取り出すfunctionノードを定義します。
左側のリソースパレットの functions カテゴリ内の function ノードを
フローエディター中央のキャンバスにドラッグ&ドロップして、ダブル
クリックします。
各属性を設定します。
Name: temp Function: return {payload:msg.payload.d.temp}; 「OK」ボタンをクリックします。
Iot Sensorと線を繋ぎます。
Node-RED で IoT アプリを作成する (5)
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」ボタンをクリックします。
Node-RED で IoT アプリを作成する (7)
次に、条件ごとの処理を指定する template ノードを定義します。 ここではメッセージ出力をそれぞれ設定します。 リソースのfunctionカテゴリー内のtemplateノードを２つ、 キャンバスにドラッグ&ドロップします。 2つを以下のように編集します。 • 1つ目 Name: safe Template:Temperature ({{payload}}) within safe limits
• 2つ目
Name: danger Template:
Temperature ({{payload}}) critical
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 を
Node-RED で IoT アプリを作成する (9)
これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ クし、アプリケーションをデプロイします。
上部に “Successfully deployed” と表示されれば、Bluemix 上でのアプリケーションの デプロイは成功です。
右側のサイドバーを debug タブに切り替えます。(必要に応じ、右側にウィンドウが表示 されるよう操作します)
デプロイしたアプリケーションを確認する
IoT Sensor のウィンドウで矢印ボタンをクリックし、温度を変更します。 IoT Sensor の温度が debug タブに出力され、40度以下のときは、
”Temperature (xx) within safe limits” と出力されることを確認します。 IoT Sensor の温度を上げて、40度を超えると “Temperature (xx)
ハンズオン手順
1.
Node-REDとは？
2.
Bluemixへのアクセス
3.
ボイラープレートでアプリケーションを作成する
4.
Node-REDに挨拶しよう
5.
Node-REDでIoTアプリケーションを作成する
6. Node-REDでWebアプリケーションを作成する
7.
Node-REDでWatsonアプリケーションを作成する
Node-REDでWebアプリを作成する (1)
ここではNode-REDを使用して、Webアプリケーションを
作成していきます。
• HTMLフォームの出力
ブラウザからのHTTPリクエストに対して HTTPレスポンスを返す方法を学びます。• HTMLフォームで入力された値の取得
HTTPリクエストのパラメータを取得して、 HTTPレスポンスに出力する方法を学びます。 ブラウザ Node.js ランタイム Node-REDアプリケーション Bluemix http://xxx.mybluemix.net/... HTTPリクエスト <html> <head> HTTPレスポンス HTTPリクエストを受ける HTTP in ノードを定義します。 左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正して、「Ok」ボタンをクリックします。 Method: GET URL: /hello
Node-REDでWebアプリを作成する (2)
～ HTMLフォームを出力
HTMLを定義するtemplateノードを定義します。
左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。 各属性を修正します。
Name: 入力画面
Set property: msg.payload Syntax Highlight: HTML Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。 HTTP inノードと線を繋ぎます。
Node-REDでWebアプリを作成する (3)
～ HTMLフォームを出力
templateノードのコード記述例
Node-REDでWebアプリを作成する (3)
～ HTMLフォームを出力
<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>
Node-REDでWebアプリを作成する (4)
～ HTMLフォームを出力
HTTPレスポンスとなるHTTP responseノードを定義します。 左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正します。 Name: HTTP出力 「OK」ボタンをクリックします。 入力画面と線を繋ぎます。 Z これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ ば、Bluemix 上でのアプリケーションのデプロイは成功です。 ブラウザから確認 Node-REDのボイラーテンプレートの名前と http in ノードで指定したURLをもとにアクセス。 ブラウザからアクセス。 例）http://XXX.mybluemix.net/webtest
Node-REDでWebアプリを作成する (5)
～ HTMLフォームを出力
HTTPリクエストを受ける HTTP in ノードを定義します。 左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正して、「Ok」ボタンをクリックします。 Method: POST URL: /hello
Node-REDでWebアプリを作成する (6)
～ HTMLフォームで入力された値の取得
HTMLを定義するtemplateノードを定義します。
左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。 各属性を修正します。
Name: 結果画面
Set property: msg.payload Syntax Highlight: HTML Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。 HTTP inノードと線を繋ぎます。
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>
Node-REDでWebアプリを作成する (7)
～ HTMLフォームで入力された値の取得
Node-REDでWebアプリを作成する (8)
～ HTMLフォームで入力された値の取得
HTTPレスポンスとなるHTTP responseノードを定義します。 左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正します。 Name: HTTP出力 「OK」ボタンをクリックします。 入力画面と線を繋ぎます。 Z これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ ば、Bluemix 上でのアプリケーションのデプロイは成功です。
Node-REDでWebアプリを作成する (9)
～ HTMLフォームで入力された値の取得
HTMLフォームにデータを入力 最初に作成したHTMLフォームを出力するURLへアクセスして、 データを入力して送信ボタンをクリック。 例）http://XXX.mybluemix.net/hello /helloにHTTPリクエストが送信され、 以下の画面が表示されます。
Node-REDでWebアプリを作成する (10)
～ HTMLフォームで入力された値の取得
ハンズオン手順
1.
Node-REDとは？
2.
Bluemixへのアクセス
3.
ボイラープレートでアプリケーションを作成する
4.
Node-REDに挨拶しよう
5.
Node-REDでIoTアプリケーションを作成する
6.
Node-REDでWebアプリケーションを作成する
7. Node-REDでWatsonアプリケーションを作成する
Node-REDでWatsonアプリを作成する (1)
ここでは、ブラウザベースの Watson アプリケーションを
作成していきます。
具体的には、ブラウザから入力された画像URLをもとに、
WatsonのVisual Recognition機能で画像を解析した結果を
出力します。
ブラウザ Node.js ランタイム Node-REDアプリケーション Bluemix http://xxx.mybluemix.net/... HTTPリクエスト <html> <head> <title>Hello Bluemix!</title> </head> ・・・ HTTPレスポンス Visual RecognitionNode-REDでWatsonアプリを作成する (2)
～ Visual Recognitionの追加①
ボイラーテンプレートで作成したランタイムに、画像分析を
行うためのVisual Recognitionサービスを追加します。
スペース・アプリを確認して、「作成」ボタンをクリックし
ます（サービス名は既定のままでかまいません）。
Node-REDでWatsonアプリを作成する (3)
～ Visual Recognitionの追加②
HTTPリクエストを受ける HTTP in ノードを定義します。 左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正して、「Ok」ボタンをクリックします。 Method: GET URL: /recognize
Node-REDでWatsonアプリを作成する (4)
～ HTMLフォームを出力
HTMLを定義するtemplateノードを定義します。
左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。 各属性を修正します。
Name: 入力画面
Set property: msg.payload Syntax Highlight: HTML Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。 HTTP inノードと線を繋ぎます。
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>
Node-REDでWatsonアプリを作成する (5)
～ HTMLフォームを出力
Node-REDでWatsonアプリを作成する(6)
～ HTMLフォームを出力
HTTPレスポンスとなるHTTP responseノードを定義します。 左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正します。 Name: HTTP出力 「OK」ボタンをクリックします。 入力画面と線を繋ぎます。 Z これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ ば、Bluemix 上でのアプリケーションのデプロイは成功です。 ブラウザから確認 Node-REDのボイラーテンプレートの名前と http in ノードで指定したURLをもとにアクセス。 ブラウザからアクセス。 例）http://XXX.mybluemix.net/recognized
Node-REDでWatsonアプリを作成する (7)
～ HTMLフォームを出力
HTTPリクエストを受ける HTTP in ノードを定義します。 左側のリソースパレットの inputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正して、「Ok」ボタンをクリックします。 Method: POST URL: /recognize
Node-REDでWatsonアプリを作成する (8)
～ HTMLフォームで入力された値の取得
入力画面から画像URLを抽出する changeノードを定義します。 左側のリソースパレットの functionカテゴリ内のchangeノードをフロー・ エディタ中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正します。 Name: 画像URLの抽出 Set: msg.payload to: msg.payload.imageurl 「OK」ボタンをクリックします。 HTTP inノードと線を繋ぎます。
Node-REDでWatsonアプリを作成する (9)
～ 画像URLを抽出するノードの追加
Visual Recgnitionノードを定義します。 左側のリソースパレットの IBM_Watsonカテゴリ内のvisual recognition ノードをフローエディタ中央のキャンバスにドラッグ&ドロップします。 先ほど作成したchangeノードとvisual recognitionを結びます。 （visual recognitionでは属性の定義は必要ありません）
Node-REDでWatsonアプリを作成する (10)
～ 画像を解析するノードの追加
Node-REDでWatsonアプリを作成する (11)
～ 結果画面を定義するノードの追加
HTMLを定義するtemplateノードを定義します。 左側のリソースパレットの functionカテゴリ内のtemplateノードをフロー エディタ中央のキャンバスにドラッグ&ドロップしダブルクリックします。 各属性を修正します。 Name: 結果画面Set property: msg.payload Syntax Highlight: HTML Template: HTMLを記載
Format: Mustache template
「OK」ボタンをクリックします。 先ほどのノードと線を繋ぎます。
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>
Node-REDでWatsonアプリを作成する (11)
～ 結果画面を定義するノードの追加
Node-REDでWatsonアプリを作成する (12)
～ 結果画面の出力
HTTPレスポンスとなるHTTP responseノードを定義します。 左側のリソースパレットの outputカテゴリ内のhttpノードをフローエディタ 中央のキャンバスにドラッグ&ドロップし、ダブルクリックします。 各属性を修正します。 Name: HTTP出力 「OK」ボタンをクリックします。 入力画面と線を繋ぎます。 Z これまでのステップで下図のようなフローができあがります。右上の「Deploy」ボタンをクリッ クし、アプリケーションをデプロイします。上部に “Successfully deployed” と表示されれ ば、Bluemix 上でのアプリケーションのデプロイは成功です。
HTMLフォームにデータを入力 最初に作成したHTMLフォームにて、 画像を表わすURLを入力して送信ボタンをクリック。 例）http://XXX.mybluemix.net/recognize Visual Recognitionでの 画像解析結果が表示されます。
