サーバー ルーター
3. リソースは拡張することはもちろん、縮退させることも可能です。
元の状態に戻してみましょう。インスタンス : 1、メモリー : 256MB と 指定して「保存」をクリックします。
再ステージ後、リソースが縮退されていることを確認してください。
IBM Cloud
Node-REDでHello World
© 2015 IBM Corporation 21
ハードウェアデバイス、API、オンラインサービスを連携させて、ロジックを作成できるフローエディター
What is Node-RED?
Web ブラウザベースの UI node.js で稼動
• 軽量
機能をノードという単位で カプセル化して利⽤
独自ノードの作成・追加可能 Bluemix の様々なサービスを簡
単に利⽤可能
Bluemixでなくても 使用可能です
IBM Cloud
Node-RED インターフェース
デプロイ実⾏
シート
ノード
表示情報の キャンバス 切り替え
処理フロー
© 2015 IBM Corporation 23
Node-RED 操作方法
②ノード間を接続
④Deployを選択 Node-RED画面
③ノードプロパティ設定
①ノードを選択し ドラッグ＆ドロップ
IBM Cloud
Node-RED ノードの操作方法
コネクタが左
•イベントの終了
左からデータを受信。
外部アプリの起動/DB保存 などの処理を⾏い、フローを 終了する。
コネクタが左右
•データの処理
左からデータを受信。
変換/分岐などの処理を⾏
い、結果を右のノードに送信 する。
コネクタが右
• イベントの起動
イベント起動条件を満たした とき、情報を右のノードに送 信する。
フローの左から右⽅向に処理が流れる
© 2015 IBM Corporation 25
■本資料ではBluemixの米国のデータセンターを 使用することを想定しています。
右上部の「地域」をクリックし、「米国南部」を選択。
■上部メニューから「カタログ」をクリック。
■最上段の「ボイラープレート」カテゴリから
「Node-RED Starter」を選択。
Node-RED環境の作成
もし「スペースの作成」というウィンドウが 表示された場合は、任意の名前
(dev
等)
を 指定してスペースを作成してください。IBM Cloud
■アプリ名とホスト名を⼊⼒します。
実際にはアプリ名を⼊⼒フィールドに⼊れると、ホスト名も同じ名前が指定されます。
既に同じ名前のホストが存在する場合エラーとなりますので、他の人と重複しなそうな 名前を指定してください。
Node-RED環境の作成
© 2015 IBM Corporation 27
■ステージングが完了したら
作成した環境にアクセスしてみましょう。
Node-REDのリンクをクリックします。
■Node-REDが起動すればOKです。
赤いボタンを クリックする
Node-RED環境の作成
IBM Cloud
■まずは処理を開始するノードを作ってみましょう。
左側のパレットから「inject」ノードを中央のキャンバスに ドラッグ＆ドロップします。
■キャンバスにドロップした「inject」ノードをダブル クリックして設定画面を開きます。
一番上のPayloadを「blank」を選択します。
イベントの起動を⾏うだけで、次のノードにデータは 送信されません。
「OK」をクリックします。
Node-REDでHello World – Step1
ドラッグ＆ドロップ
この数字を
© 2015 IBM Corporation 29
■次にメッセージの表示内容を定義するノードを 作ってみましょう。
パレットから「template」ノードをキャンバスに ドラッグ＆ドロップします。
■「template」ノードをダブルクリックして設定画面を 開きます。
もともと⼊⼒されている⽂字列を削除し、
「Hello World!!」など、任意の⽂字列を
⼊⼒してください。
「OK」をクリックします。
ドラッグ＆ドロップ
Node-REDでHello World – Step1
IBM Cloud
■受け取ったデータを表示するノードを用意します。
左側のパレットから「debug」ノードをキャンバスに ドラッグ＆ドロップします。
■ノードの横にあるコネクタをクリック＆ホールドし、3つのノードを線で繋ぎます。
ドラッグ＆ドロップ
Node-REDでHello World – Step1
© 2015 IBM Corporation 31
■これでHello Worldを表示するフローが完成しました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。
（この文字はすぐに消えます）
■実⾏結果を確認してみましょう。
右上の「debug」タブを選択します。debugノードに流れてきたデータはこのコンソールに表⽰されます。
injectノードの左側にあるボタンをクリックすると処理が起動します。
Hello World!! の⽂字列がdebugコンソールに表示されれば成功です。
取得できる情報はスマホの機種によって 異なる場合があります。
Node-REDでHello World – Step1
この部分をクリックすると処理がスタート
IBM Cloud
■作成したフローを拡張してみましょう。
Hello Worldの⽂字列をWebページに出⼒
してみます。
左側のパレットから「http」ノードをキャンバスに ドラッグ＆ドロップします。
■「http」ノードをダブルクリックして 設定画面を開きます。
URLとして「/hello」と⼊⼒します。
このパスにWebブラウザでアクセスすると Hello Worldの⽂字列が表⽰されます。
Node-REDでHello World – Step2
ドラッグ＆ドロップ
© 2015 IBM Corporation 33
■「template」ノードは先ほど作成したノードをコピーします。
ノードをクリックして選択し、Ctrl + C でコピーできます。
■パレットから「http response」ノードをキャンバスにドラッグ＆ドロップします。
Node-REDでHello World – Step2
ドラッグ＆ドロップ
template
ノードをコピーしますIBM Cloud
■3つのノードを線で繋ぎます。
■これでHello WorldをWebに表示するフローが完成しました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
Node-REDでHello World – Step2
■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの 末尾の「red/#」を削除し、代わりに
「hello」と⼊⼒してWebページに アクセスします。
(例)
https://node-red.xxx/red/#の場合は、
© 2015 IBM Corporation 35
■あらかじめtemplateノードに書かれた⽂字列だけでなく、任意の⽂字列を表⽰できるように してみましょう。 そのためには変数を使用します。
まずはURLリクエストパラメータで、⽂字列を変数として渡す⽅法を試してみます。
■Step2で作成したフローをコピーします。
Shiftキーを押しながらノードをクリックすると フロー全体が選択されます。
■右端のhttpノードの設定画面を開き、URLとして「/hello2」と⼊⼒します。
■中央のtemplateノードの設定画面を 開き、表示内容を修正します。
{{name}}さん、はろーわーるど！！
と変更しました。
Node-REDでHello World – Step3
フローごとコピーします
IBM Cloud
■左側のパレットから「function」ノードを キャンバスにドラッグ＆ドロップします。
functionノードには JavaSctiptで コードを書くことができます。
■「function」ノードをダブルクリックして 設定画面を開きます。
⼀⾏目に
msg.name = msg.payload.name;
と⼊⼒します。
Node-REDでHello World – Step3
フローごとコピーします ドラッグ＆ドロップ
© 2015 IBM Corporation 37
■ノードを下の図のようにつなぎ直します。
線を削除するには、クリックで線を選択してDELETEキーです。
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
Node-REDでHello World – Step3
IBM Cloud
■Webブラウザの新しいタブを開いて、以下のURLにアクセスしてみましょう。
https://node-red.xxx/hello2?name=佐藤
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
Node-REDでHello World – Step3
name変数の値として「佐藤」という⽂字列を渡しています
Node-RED
エディタのURL
です© 2015 IBM Corporation 39
Node-REDで
Watson連携アプリを作成
１．上部メニューの”ダッシュボード”から、
先ほど作成したNode-REDのアプリ ケーションを選択します。
2．「サービスまたはAPIの追加」を クリックします。
Watson Q&Aサービスの追加
© 2015 IBM Corporation 41
3. カタログページに遷移します。
Watsonカテゴリの「Question and Answer」をクリックします。
4. 「使用」をクリックします。
5. アプリケーションの再ステージの確認がありますので「再ステージ」をクリックします。
6. ステージングが完了すれば準備 OKです。
リンクをクリックして、Node-REDにアクセスします。
これで
Node-RED
からWatson
のQ&A
サービスが利⽤できるようになります。Watson Q&Aサービスの追加
© 2015 IBM Corporation 43
■Node-REDが起動します。
Sheet 1に先ほど作成したフローが残っている方は別シートを追加します。
上部の「+」（プラス）ボタンをクリックします。
新しいシートが開きますので、ここで処理フローを作成してみましょう。
■Watsonに質問を投げて、その回答を受け取るフローを作ってみましょう。
左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。
Node-REDでWatsonアプリを作成
inputカテゴリ injectノード outputカテゴリ
debugノード
functionカテゴリ
templateノード IBM_Watsonカテゴリ
Q and Aノード
© 2015 IBM Corporation 45
■順に各ノードの設定を⾏っていきましょう。
■injectノード をダブルクリックして設定画面を開き、Payloadで「blank」を選択します。
OKをクリックします
Node-REDでWatsonアプリを作成
■functionノード にはWatsonに投げる質問⽂を⼊⼒します。
ここでは例として「Which is the best hotel to stay in Okayama?」とします。
© 2015 IBM Corporation 47
■Q and Aノード ではWatsonのコーパスを指定します。
Corpusで「Travel」を選択します。
OKをクリックします
Node-REDでWatsonアプリを作成
■debugノード は変更なしでOKです。
■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
© 2015 IBM Corporation 49
■injectノードの左端部分をクリックすると、処理が開始されます。
templateノードに書かれた質問文がWatson Q&Aサービスに投げられ、その結果が 右端のdebug画面に表示されます。
ここをクリック
debugタブを選択
Watson
からの回答が表示されれば成功です！Node-REDを使⽤すると、⼀⾏もコードを書かずにWatson Q&Aサービスを利⽤できます。
■次にWatsonからの回答をWebページに表示するようにフローを編集してみましょう。
■左側のパレットからfunctionノードをドラッグ＆ドロップで追加します。
Node-REDでWatsonアプリを作成 Web編
functionカテゴリ functionノード
■設定画面を開き 1⾏目に「context.global.answer = msg.payload;」と追記します。
2⾏目は変更なしでOKです。