はじめてのNode-RED ハンズオンテキスト Bluemix勉強会＠Co-Edo 日本アイ・ビー・エム株式会社 クラウド・ソフトウェア事業部 エコシステム・デベロップメント

IBM Cloud
Bluemix勉強会＠Co-Edo
はじめてのNode-RED ハンズオンテキスト
日本アイ・ビー・エム株式会社
クラウド・ソフトウェア事業部 エコシステム・デベロップメント
2015/08/2ゆ updated
1
© 2015 IBM Corporation
IBM Cloud
ハンズオン アジェンダ
1. Bluemixの基本操作
2. Node-REDでHello World
3. Node-REDでWatson連携アプリを作成
4. Node-REDでDBアクセス
4. Node-REDでIoTアプリを作成
2
© 2015 IBM Corporation
IBM Cloud
Bluemixの基本操作
3
© 2015 IBM Corporation
IBM Cloud
IBM Bluemixへのログイン
■Webブラウザを起動し、下記URLより Bluemix にログインします。
使用するブラウザは「Firefox」推奨です。
http://bluemix.net
■右上部の「ログイン」をクリック。
■IBM ID（メールアドレス）とパスワードを⼊⼒し、「サインイン」ボタンをクリック。
4
© 2015 IBM Corporation
IBM Cloud
IBM Bluemixへのログイン
■Bluemixの ダッシュボード の画⾯が表⽰されればログイン完了です。
5
© 2015 IBM Corporation
作業する地域を確認する
Bluemixは「米国南部」と「英国」の2つの
データセンターで稼動しています。
上部右端の人の形をしたアイコンを
クリックするとメニューが表示され、
作業する地域を選択できます
本資料では「⽶国南部」を使うことを
想定しています
6
© 2015 IBM Corporation
[補足] 「米国南部」選択時のポップアップへの対応方法
米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが
表⽰された場合は、任意の名前を⼊⼒し、作成をクリックしてください。
本資料では
スペース名として
「dev」を使用します
7
© 2015 IBM Corporation
Web-DBシステムの構築
Bluemix上に下の図のようなWeb-DBシステムを構築してみましょう。
コードを実⾏するAppサーバーとしてNode.js、DBサーバーとしてSQL Databaseを
使用します。
Webアプリ
サーバー
データベース
サーバー
ルーター
IBM Bluemix
8
© 2015 IBM Corporation
アプリケーション実⾏環境の構築 (1/3)
１．上部メニューの”カタログ”にて、作成するアプリケーションの実⾏環境を選択します。
ランタイム カテゴリから、Node.js による JavaScriptの実⾏環境を選択します。
2．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。
任意の名前を指定します。
重複しているとエラーに
なるのでユニークな名称を
指定してください
9
© 2015 IBM Corporation
アプリケーション実⾏環境の構築 (2/3)
3．アプリケーションのステージングが開始され、30秒ほどで完了します。
これだけの手順で Node.js の実⾏環境が構築できました。
10
© 2015 IBM Corporation
アプリケーション実⾏環境の構築 (3/3)
4．それでは作成したインスタンスにWebブラウザでアクセスし、サンプルとして
⽤意されたスターター・コードを実⾏してみましょう。
URLリンクをクリックすると、作成された Node.js 上でJavaScript のスターター・
アプリケーションが動いていることが確認できます。
このようにBluemixを
使用するとクイックに、
簡単に、アプリケーションの
実⾏環境をセットアップ
することができます。
11
この例では、http://Node012.mybluemix.net/にアクセスしています
© 2015 IBM Corporation
サービスの追加 (1/4)
1. 上部メニューの”ダッシュボード”をクリックし、作成したアプリケーション
(資料ではNode012)をクリックします。
2. アプリケーションの概要ページが
表示されます。
“サービスまたはAPIの追加”をクリック
します。
12
© 2015 IBM Corporation
サービスの追加 (2/4)
3. Bluemixのカタログページが表示されます。
このカタログでアプリケーションと連携させたいサービスを選択します。
先ほど作成した Node.js の実⾏環境に SQL Databaseのサービスを
追加してみましょう。 SQL Databaseのアイコンをクリックします。
13
© 2015 IBM Corporation
サービスの追加 (3/4)
4. アプリ欄に先ほど作成したNode.jsのアプリ名が設定されていること、
プランとして「Free Beta」が選択されていることを確認して「作成」ボタン
をクリックします。 サービス名はデフォルトのままでOKです。
アプリケーションの再ステージを確認する
ダイアログボックスが表示されますので、
「再ステージ」ボタンをクリックします。
14
© 2015 IBM Corporation
サービスの追加 (4/4)
5. 左側のメニューから”概要”をクリックします。
SQL Databaseサービスが
追加されたことを確認して
ください。
たったこれだけの手順で、
クラウド上にWeb-DBシステム
を構築することができました。
15
© 2015 IBM Corporation
アプリケーション実⾏環境のクラスタ化 (1/4)
最後に仕上げとして、Node.jsを3台に増やしてみましょう。
1. 左側のメニューから「SDK for Node.js」をクリックします。
16
© 2015 IBM Corporation
アプリケーション実⾏環境のクラスタ化 (2/4)
2. ここで実⾏環境のリソース変更が可能です。
インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。
再ステージ後、リソースが拡張されていることを確認してください。
17
© 2015 IBM Corporation
アプリケーション実⾏環境のクラスタ化 (3/4)
ここまでの手順で、クラウド上に下の図のようなWeb-DBシステムができました。
Node.jsのサーバーを3台並べて負荷分散を⾏っています。ユーザーからの
リクエストは、自動的に3台のNode.jsのいずれかにルーティングされます。
Webアプリ
サーバー
データベース
サーバー
ルーター
IBM Bluemix
18
© 2015 IBM Corporation
アプリケーション実⾏環境のクラスタ化 (4/4)
3. リソースは拡張することはもちろん、縮退させることも可能です。
元の状態に戻してみましょう。インスタンス : 1、メモリー : 256MB と
指定して「保存」をクリックします。
再ステージ後、リソースが縮退されていることを確認してください。
19
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World
20
© 2015 IBM Corporation
IBM Cloud
What is Node-RED?
ハードウェアデバイス、API、オンラインサービスを連携させて、ロジックを作成できるフローエディター
WebブラウザベースのUI
Bluemixでなくても
node.js で稼動
使用可能です
• 軽量
機能をノードという単位で
カプセル化して利⽤
独自ノードの作成・追加可能
Bluemixの様々なサービスを簡
単に利⽤可能
21
© 2015 IBM Corporation
IBM Cloud
Node-RED インターフェース
シート
表示情報の
切り替え
キャンバス
デプロイ実⾏
ノード
処理フロー
ノードパレット
22
Node情報ウィンドウ または デバッグコンソール
© 2015 IBM Corporation
IBM Cloud
Node-RED 操作方法
④Deployを選択
Node-RED画面
①ノードを選択し
ドラッグ＆ドロップ
②ノード間を接続
③ノードプロパティ設定
23
© 2015 IBM Corporation
IBM Cloud
Node-RED ノードの操作方法
コネクタが右
•イベントの起動
イベント起動条件を満たした
とき、情報を右のノードに送
信する。
コネクタが左右
•データの処理
左からデータを受信。
変換/分岐などの処理を⾏
い、結果を右のノードに送信
する。
コネクタが左
•イベントの終了
左からデータを受信。
外部アプリの起動/DB保存
などの処理を⾏い、フローを
終了する。
フローの左から右⽅向に処理が流れる
24
© 2015 IBM Corporation
IBM Cloud
Node-RED環境の作成
■本資料ではBluemixの米国のデータセンターを
使用することを想定しています。
右上部の「地域」をクリックし、「米国南部」を選択。
もし「スペースの作成」というウィンドウが
表示された場合は、任意の名前(dev等)を
指定してスペースを作成してください。
■上部メニューから「カタログ」をクリック。
■最上段の「ボイラープレート」カテゴリから
「Node-RED Starter」を選択。
25
© 2015 IBM Corporation
IBM Cloud
Node-RED環境の作成
■アプリ名とホスト名を⼊⼒します。
実際にはアプリ名を⼊⼒フィールドに⼊れると、ホスト名も同じ名前が指定されます。
既に同じ名前のホストが存在する場合エラーとなりますので、他の人と重複しなそうな
名前を指定してください。
■「作成」ボタンをクリックすると、Node-REDの環境作成が始まります。
完了までしばらくお待ちください。
26
© 2015 IBM Corporation
IBM Cloud
Node-RED環境の作成
■ステージングが完了したら
作成した環境にアクセスしてみましょう。
Node-REDのリンクをクリックします。
■Node-REDが起動すればOKです。
赤いボタンを
クリックする
27
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step1
■まずは処理を開始するノードを作ってみましょう。
左側のパレットから「inject」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■キャンバスにドロップした「inject」ノードをダブル
クリックして設定画面を開きます。
一番上のPayloadを「blank」を選択します。
イベントの起動を⾏うだけで、次のノードにデータは
送信されません。
「OK」をクリックします。
28
この数字を
転記する
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step1
■次にメッセージの表示内容を定義するノードを
作ってみましょう。
パレットから「template」ノードをキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■「template」ノードをダブルクリックして設定画面を
開きます。
もともと⼊⼒されている⽂字列を削除し、
「Hello World!!」など、任意の⽂字列を
⼊⼒してください。
「OK」をクリックします。
29
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step1
■受け取ったデータを表示するノードを用意します。
左側のパレットから「debug」ノードをキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■ノードの横にあるコネクタをクリック＆ホールドし、3つのノードを線で繋ぎます。
この部分を掴んで引っ張る
30
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step1
■これでHello Worldを表示するフローが完成しました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。
（この文字はすぐに消えます）
■実⾏結果を確認してみましょう。
右上の「debug」タブを選択します。debugノードに流れてきたデータはこのコンソールに表示されます。
injectノードの左側にあるボタンをクリックすると処理が起動します。
Hello World!! の⽂字列がdebugコンソールに表示されれば成功です。
取得できる情報はスマホの機種によって
異なる場合があります。
この部分をクリックすると処理がスタート
31
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step2
■作成したフローを拡張してみましょう。
Hello Worldの⽂字列をWebページに出⼒
してみます。
左側のパレットから「http」ノードをキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■「http」ノードをダブルクリックして
設定画面を開きます。
URLとして「/hello」と⼊⼒します。
このパスにWebブラウザでアクセスすると
Hello Worldの⽂字列が表⽰されます。
32
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step2
■「template」ノードは先ほど作成したノードをコピーします。
ノードをクリックして選択し、Ctrl + C でコピーできます。
templateノードをコピーします
■パレットから「http response」ノードをキャンバスにドラッグ＆ドロップします。
ドラッグ＆ドロップ
33
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step2
■3つのノードを線で繋ぎます。
■これでHello WorldをWebに表示するフローが完成しました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの
末尾の「red/#」を削除し、代わりに
「hello」と⼊⼒してWebページに
アクセスします。
(例)
https://node-red.xxx/red/#の場合は、
https://node-red.xxx/hello を開きます。
Hello WorldがWebブラウザに表示されました！
34
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step3
■あらかじめtemplateノードに書かれた⽂字列だけでなく、任意の⽂字列を表⽰できるように
してみましょう。 そのためには変数を使用します。
まずはURLリクエストパラメータで、⽂字列を変数として渡す⽅法を試してみます。
■Step2で作成したフローをコピーします。
Shiftキーを押しながらノードをクリックすると
フロー全体が選択されます。
フローごとコピーします
■右端のhttpノードの設定画面を開き、URLとして「/hello2」と⼊⼒します。
■中央のtemplateノードの設定画面を
開き、表示内容を修正します。
{{name}}さん、はろーわーるど！！
と変更しました。
35
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step3
■左側のパレットから「function」ノードを
キャンバスにドラッグ＆ドロップします。
functionノードには JavaSctiptで
コードを書くことができます。
ドラッグ＆ドロップ
フローごとコピーします
■「function」ノードをダブルクリックして
設定画面を開きます。
⼀⾏目に
msg.name = msg.payload.name;
と⼊⼒します。
⼆⾏目はそのままでOKをクリックします。
36
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step3
■ノードを下の図のようにつなぎ直します。
線を削除するには、クリックで線を選択してDELETEキーです。
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
37
© 2015 IBM Corporation
IBM Cloud
Node-REDでHello World – Step3
■Webブラウザの新しいタブを開いて、以下のURLにアクセスしてみましょう。
https://node-red.xxx/hello2?name=佐藤
Node-REDエディタのURLです
name変数の値として「佐藤」という⽂字列を渡しています
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
パラメータで渡した名前がWebブラウザに表示されました！
38
© 2015 IBM Corporation
IBM Cloud
Node-REDで
Watson連携アプリを作成
39
© 2015 IBM Corporation
Watson Q&Aサービスの追加
１．上部メニューの”ダッシュボード”から、
先ほど作成したNode-REDのアプリ
ケーションを選択します。
2．「サービスまたはAPIの追加」を
クリックします。
40
© 2015 IBM Corporation
Watson Q&Aサービスの追加
3. カタログページに遷移します。
Watsonカテゴリの「Question and Answer」をクリックします。
4. 「使用」をクリックします。
41
© 2015 IBM Corporation
Watson Q&Aサービスの追加
5. アプリケーションの再ステージの確認がありますので「再ステージ」をクリックします。
6. ステージングが完了すれば準備OKです。
リンクをクリックして、Node-REDにアクセスします。
これで Node-RED から WatsonのQ&A
サービスが利⽤できるようになります。
42
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成
■Node-REDが起動します。
Sheet 1に先ほど作成したフローが残っている方は別シートを追加します。
上部の「+」（プラス）ボタンをクリックします。
新しいシートが開きますので、ここで処理フローを作成してみましょう。
43
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成
■Watsonに質問を投げて、その回答を受け取るフローを作ってみましょう。
左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。
inputカテゴリ
functionカテゴリ
outputカテゴリ
IBM_Watsonカテゴリ
injectノード
debugノード
44
templateノード
Q and Aノード
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成
■順に各ノードの設定を⾏っていきましょう。
■injectノード をダブルクリックして設定画面を開き、Payloadで「blank」を選択します。
OKをクリックします
45
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成
■functionノード にはWatsonに投げる質問⽂を⼊⼒します。
ここでは例として「Which is the best hotel to stay in Okayama?」とします。
OKをクリックします
46
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成
■Q and Aノード ではWatsonのコーパスを指定します。
Corpusで「Travel」を選択します。
OKをクリックします
47
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成
■debugノード は変更なしでOKです。
■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
48
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成
■injectノードの左端部分をクリックすると、処理が開始されます。
templateノードに書かれた質問文がWatson Q&Aサービスに投げられ、その結果が
右端のdebug画面に表示されます。
debugタブを選択
ここをクリック
Watsonからの回答が表示されれば成功です！
Node-REDを使⽤すると、⼀⾏もコードを書かずにWatson Q&Aサービスを利⽤できます。
49
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■次にWatsonからの回答をWebページに表示するようにフローを編集してみましょう。
■左側のパレットからfunctionノードをドラッグ＆ドロップで追加します。
functionカテゴリ
functionノード
■設定画面を開き 1⾏目に「context.global.answer = msg.payload;」と追記します。
2⾏目は変更なしでOKです。
50
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■追加したfunctionノードが、Q and Aノードとdebugノードの間に入るように線を繋ぎます。
これでWatsonからの回答が”context.global.answer”という変数に代入されました。
続いて、その回答をWebページに表示するフローを作ってみましょう。
51
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■Watsonからの回答をWebページに表示するフローを作ってみましょう。
左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。
inputカテゴリ
functionカテゴリ
functionカテゴリ
outputカテゴリ
httpノード
functionノード
52
templateノード
http responseノード
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/wat1」と⼊⼒します。
OKをクリックします
53
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■functionノードをダブルクリックして設定画面を開き、
1⾏目に「msg.payload = context.global.answer;」と追記します。
2⾏目は変更なしでOKです。
OKをクリックします
54
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■templateノードをダブルクリックして設定画面を開き、
1⾏目に「<h1>Watsonさんの回答</h1>{{payload}}」と⼊⼒します。
OKをクリックします
55
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■http responseノード は変更なしでOKです。
■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
56
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■先程と同様、injectノードの左端部分を
クリックすると、処理が開始されます。
Watsonからの回答がdebug画面に
表示されていることを確認します。
■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの
末尾の「red/#」を削除し、代わりに
「wat1」と⼊⼒してWebページに
アクセスします。
(例)
http://node-red.xxx/red/#の場合は、
http://node-red.xxx/wat1 を開きます。
Watsonからの回答がWebブラウザに表示されました！
57
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■Webブラウザから質問⽂を⼊⼒できるようにしましょう。
これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックします。
このフローのすべてのノードが選択されます。
■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。
キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
フローをコピーします
58
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■左端のhttpノードをダブルクリックし、URLを「/wat2」と変更します。
■2番目のfunctionノードをクリックして選択し、「Delete」キーを押して削除します。
■3番目のtemplateノードは次ページを参照。
■4番目のhttp responseノードはそのままでOKです。
削除
59
次ページ
変更なし
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■3番目のtemplateノードに、質問文を受け取るHTMLフォームを定義します。
ダブルクリックして以下の内容を⼊⼒してください。元の記載内容は削除します。
<form action=“/wat3” method=“post”>
<input type=“text” name=“question” value=“Which is the best hotel to stay
in Okayama?”><br>
<button type=“submit”>質問する</button>
質問例⽂
</form>
■以下のように3つのノードを線で繋ぎます。
これでWebブラウザから質問⽂を⼊⼒するフローができました。
60
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■Watsonに質問し、回答を表示するフローを作成しましょう。
これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックして選択します。
■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。
キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
もう⼀度フローをコピーします
61
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■左端のhttpノードをダブルクリックし、Methodを「POST」、URLを「/wat3」と変更します。
■2番目のfunctionノードをダブルクリックし、「context.global.answer」の部分を
「msg.payload.question」と書き換えます。
■3番目のtemplateノードはそのままでOKです。
■4番目のhttp responseノードもそのままでOKです。
変更なし
62
変更なし
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■Watsonに質問する処理を追加します。
最初に作成したフローから、Q and Aノードをコピーします。
パレットからQ and Aノードを
追加してもOKです。
その場合は忘れずCorpusを
「Travel」に変更してください。
Q and Aノードをコピーします
63
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■ノードを下記のように線で繋ぎ直します。
これでWatsonに質問をして回答をWebブラウザに表示するフローが完成しました。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
64
© 2015 IBM Corporation
Node-REDでWatsonアプリを作成 Web編
■Node-REDフローエディタのURLの
末尾の「red/#」を削除し、代わりに
「wat2」と⼊⼒してWebページに
アクセスします。
(例)
http://node-red/red/#の場合は、
http://node-red/wat2 を開きます。
■質問⽂を⼊⼒して「質問する」をクリック
すると回答画面に遷移します。
Watsonからの回答がWebブラウザに
表示されればOKです！
お疲れ様でした！
このようにWebアプリケーションを作成する場合も
Node-REDは非常に便利です。
65
© 2015 IBM Corporation
IBM Cloud
Node-REDでDBアクセス
66
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
１．⾦沢区が公開しているAEDの設置場所のデータをWebから取得します。
Webブラウザを起動し、「⾦沢区データポータル」にアクセスします。
https://ibm.biz/kanazawa
２．「AED設置場所」をクリックしてCSVファイルを保存します。
ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。
67
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
3．ダッシュボードにて、最初のハンズオンで作成したSQL Databaseサービスをクリックします。
4． Launch をクリックしてSQL Database のコンソールを起動します。
68
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
5．Load Dataをクリックします。
69
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
6．”Brows files” をクリックし、ダウンロードした”3-kz-somu.csv” を指定します。
ダウンロードしたcsvファイルのコードページはShift_JISですので、Code pageを
”1208”から”943”に上書き変更します。
Does the file have columns that contain dates or times? を
“Yes”にし、右下の”Load File” をクリックします。
ダウンロードした
csvファイルを指定
コードページを
1208→943
に変更
Yes
に変更
70
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
7．サンプルデータのCSVファイルの内容が表示されていることを確認し、
”Next” をクリックします。
71
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
8．”Create a new table and load” にチェックを入れ、”Next” をクリックします。
72
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
9．”Table name” を 「AEDKANAZAWA」に変更します。
１0．Columnを以下のとおり変更し、”Finish” をクリックします。
名称
⇒ NAME
住所
⇒ ADDRESS
緯度
⇒ LATITUDE
経度
⇒ LONGITUDE
AEDの数 ⇒ AED
更新⽇
⇒ UPDATE
73
© 2015 IBM Corporation
IBM Cloud
SQL Databaseへのデータ取り込み
１1．ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択
します。
１2．左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が
表示されます
74
表の作成とデータの取り込みが完了しました
© 2015 IBM Corporation
IBM Cloud
SQL Databaseサービスのバインド
１．上部メニューの”ダッシュボード”から、
先ほど作成したNode-REDのアプリ
ケーションを選択します。
2．「サービスまたはAPIのバインド」を
クリックします。
75
© 2015 IBM Corporation
IBM Cloud
SQL Databaseサービスのバインド
3. バインド可能なサービスが表示されます。
「SQL Database」を選択し、「追加」を
クリックします。
4. アプリケーションの再ステージの確認
があるので「再ステージ」をクリックします。
ステージングが完了すると、
Node-RED から SQL Database
サービスが利⽤できるようになります。
76
© 2015 IBM Corporation
Node-REDでDBアクセス
■SQL DatabaseからAEDの情報を取得するWeb APIを作成します
■左側のパレットから、以下の3つのノードをキャンバスにドラッグ＆ドロップして配置します。
inputカテゴリ
httpノード
outputカテゴリ
http responseノード
77
storageカテゴリ
sqldbノード
左右にコネクタが付いたノードです
© 2015 IBM Corporation
Node-REDでDBアクセス
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/aed」と⼊⼒します。
OKをクリックします
78
© 2015 IBM Corporation
Node-REDでDBアクセス
■sqldbノード をダブルクリックして設定画面を開きます。
-Server :
バインドしたSQL Databaseサービスを選択
-Query :
SELECT * FROM AEDKANAZAWA
OKをクリックします
79
© 2015 IBM Corporation
Node-REDでDBアクセス
■http responseノード は変更なしでOKです。
■3つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
80
© 2015 IBM Corporation
Node-REDでDBアクセス
■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの末尾の「red/#」を削除し、
替わりに「aed」と⼊⼒してWebページにアクセスします。
(例)
http://node-red.xxx/red/#の場合は、
http://node-red.xxx/aed を開きます。
DBに格納されたAEDの情報が
Webブラウザに表示されました！
81
© 2015 IBM Corporation
Node-REDでDBアクセス
■作成したAPIを呼び出すアプリケーションを作成します。
■左側のパレットから、以下の3つのノードをキャンバスにドラッグ＆ドロップして配置します。
inputカテゴリ
httpノード
outputカテゴリ
functionカテゴリ
templateノード
http responseノード
82
© 2015 IBM Corporation
Node-REDでDBアクセス
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/aedmap」と⼊⼒します。
OKをクリックします
83
© 2015 IBM Corporation
Node-REDでDBアクセス
■templateノード をダブルクリックして設定画面を開き、
Template の内容として、https://ibm.biz/BdXueL のHTMLをコピーします
OKをクリックします
84
© 2015 IBM Corporation
Node-REDでDBアクセス
■http responseノード は変更なしでOKです。
■3つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
85
© 2015 IBM Corporation
Node-REDでDBアクセス
■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの末尾の「red/#」を削除し、
替わりに「aedmap」と⼊⼒してWebページにアクセスします。
(例)
http://node-red.xxx/red/#の場合は、
http://node-red.xxx/aedmap を開きます。
アプリケーションが起動
すれば成功です！
86
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
87
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■全体像
サービス
IoT Foundationサービスは
センサーデータを仲介する
IBM IoT
Foundation
デバイス
IBM Bluemix
スマホのセンサーで計測した
データをクラウドサービスに送信
88
アプリケーション
アプリはサービスからセンサー
データを取得して処理する
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■スマートフォンをお持ちの方は、
スマホのブラウザで以下のURLに
アクセスしてください。
http://phonesensor.mybluemix.net
PhoneSensorが起動します。スマホに内蔵された各種センサーの
情報を取得し、BluemixのIoT Foundationサービスに送信して
います。
■このセンサー情報を受け取って処理するアプリをBluemix上の Node-REDで作ってみましょう。
89
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■スマホのセンサー情報を、クラウド上のIoT Foundation
サービスから受け取ってみましょう。
左側のパレットから「ibmiot」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。
Authentication は「Quickstart」を選択。
Device Id に先程のPhoneSensorに表示されている
⽂字列の末尾12桁の数字を⼊⼒。
この数字を
転記する
90
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■受け取ったデータを表示するノードを用意します。
左側のパレットから「debug」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■ノードの横にあるコネクタをクリック＆ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。
この部分を掴んで引っ張る
91
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■これでデータの⼊⼒と出⼒の定義ができました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。
（この文字はすぐに消えます）
■実⾏結果を確認してみましょう。
右上の「debug」タブを選択します。debugノードに流れて
きたデータはここに表示されます。
先程のPhoneSensorを動かします。スマホのセンサー情報が
debug画面に表示されれば成功です。
取得できる情報はスマホの機種によって
異なる場合があります。
92
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■debug画面にセンサーデータがうまく表示されない場合のチェックポイント
-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが
停止していないでしょうか。
-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。
例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが
「Disconnected」になります。
-「ibmiot」ノードのDevice Idが
正しく設定されているかどうかを
ご確認ください。
スマホのWebブラウザで
PhoneSensorを再読み込みすると
Device Idが変わってしまいます。
その場合は再度「ibmiot」ノードの
定義情報をPhoneSensor側と
同じになるよう変更してください。
93
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作ってみましょう。
「tiltLR」というデータ項目に着目します。
これはスマホ端末の左右の傾きを測定しているようです。
実際に端末を動かして、値の変化を確認してください。
この傾き度合いによって表⽰メッセージを変えてみましょう。
■センサー情報から「tiltLR」の値だけを抽出します。
左側のパレットから「function」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ダブルクリックで設定画面を開き、Functionの内容を
以下のように書き換えて「OK」をクリックします。
return {payload:msg.payload.d.tiltLR};
94
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■正しく動くかどうか確認してみましょう。
「ibmiot」と「debug」との間に、今作成した
「function」ノードを挟むように線を繋ぎ変えます。
線はクリックで選択した状態でDeleteキーで
削除できます。
■右上の「Deploy」ボタンをクリックします。
■不要な情報が削除されて、「tiltLR」の値だけが
表示されればOKです。
95
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■「tiltLR」の値によって処理を分岐させます。
左側のパレットから「switch」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ダブルクリックで設定画面を開き、分岐条件を指定します。
左に5度以上傾いた場合＝「左に傾いてます」
右に5度以上傾いた場合＝「右に傾いてます」
傾きが5度未満の場合＝「ほぼフラットです」
上記のような条件設定をするには
右図のように指定して「OK」を
クリックします。
条件を追加するには、「+rule」
ボタンをクリックします。
傾きが-5度以上(左)なら1番へ
傾きが5度以上(右)なら2番へ
どちらでもない(フラット)なら3番へ
96
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■条件分岐された後の処理を作成します。
左側のパレットから「template」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ダブルクリックで設定画面を開き、表示するメッセージを定義します。
ご⾃由にメッセージの内容を⼊⼒してください。
{{payload}} と指定すると、先程debug
画面で確認した傾きデータの値が表示
されます。
1番(左)
2番(右)
3番(フラット)
同様に2番、3番のノードも作成し、
それぞれメッセージを定義します。
最後にswitchノードのコネクタと
1番、2番、3番のノードを線で繋げます。
97
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■キャンバスの中を整理して、各ノードを以下の図のように接続してください。
正しく線が繋がっていれば、ノード自体は
キャンバス内のどこに置かれていても動作
に影響はありません。
■処理フローが完成しました！
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
98
© 2015 IBM Corporation
IBM Cloud
Node-REDでIoTアプリを作成
■「Successfully Deployed」のメッセージが表示されれば
成功です。
PhoneSensorを稼動させたスマホを左右に傾けて
メッセージが正しく表示されることを確認してください。
お疲れ様でした！
IBM Bluemix と Node-RED によって、ほぼノンプログラミングで
IoTデバイスから収集したデータを処理するアプリが作れました。
99
© 2015 IBM Corporation
Node-RED応用編
100
© 2015 IBM Corporation
IBM Cloud
Node-REDでフローのエクスポート/インポート
ここから先は応用編です。
余裕のある方はぜひ試してみてください。
■Node-REDは作成したフローをJSON形式のテキストとして、export/importすることができます。
JSON形式の
テキストの例
[{“id”:“13257eec.669069”,“type”:“websocket-listener”,“path”:“/ws/stations”,“wholemsg”:“false”},{“id”:“28a6990b.d75966”,“type”:“websocket
out”,“name”:“”,“server”:“13257eec.669069”,“x”:677,“y”:274,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“f5ecfe3e.0a13”,“type”:“xml”,“name”:“”,“attr”:“$”,“chr”:“_”,“x”:498.5,“y”:27
5,“z”:“60aa0f7b.9f55f”,“wires”:[[“28a6990b.d75966”,“3e967dc2.c16982”]]},{“id”:“3e967dc2.c16982”,“type”:“debug”,“name”:“”,“active”:true,“console”:“false”,“complete”:“
false”,“x”:626.5,“y”:340,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“2c1c43fd.d3e3bc”,“type”:“http request”,“name”:“リクナビAPI呼び出
し”,“method”:“GET”,“url”:“http://webservice.recruit.co.jp/shingaku/school/v2/?code=SC000059&key=43ba47966ce3abea”,“x”:326,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[
[“f5ecfe3e.0a13”]]},{“id”:“ad4079b6.52bf88”,“type”:“websocket
in”,“name”:“”,“server”:“13257eec.669069”,“x”:126,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[[“2c1c43fd.d3e3bc”]]},{“id”:“fda27200.025d9”,“type”:“http
response”,“name”:“”,“x”:492,“y”:181,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“774506a8.88baf8”,“type”:“template”,“name”:“表示内容の定
義”,“field”:“payload”,“template”:“<!DOCTYPE html>¥n<html>¥n <head>¥n <meta name=¥”viewport¥“ content=¥”initial-scale=1.0, user-scalable=no¥“>¥n <meta
charset=¥”utf-8¥“>¥n <title>大学キャンパスマップ</title>¥n <style>¥n
html, body, #map-canvas {¥n
height: 94%;¥n
margin: 5px;¥n
padding:
0px¥n
}¥n </style>¥n <script src=¥"https://maps.googleapis.com/maps/api/js?v=3.exp¥"></script>¥n <script>¥n¥t¥tfunction initialize() {¥n¥t¥t var myLatlng
= new google.maps.LatLng(36.095, 140.084);¥n¥t¥t var mapOptions = {¥n¥t¥t zoom: 11,¥n¥t¥t center: myLatlng,¥n¥t¥t };¥n¥t¥t var map = new
google.maps.Map(document.getElementById('map-canvas'), mapOptions);¥n¥t¥t ¥n¥t¥t var loc = window.location;¥n
if (loc.protocol === ¥"https:¥") {¥n
newUri = ¥"wss:¥";¥n
} else {¥n
newUri = ¥"ws:¥";¥n
}¥n
newUri += ¥"//¥" + loc.host + ¥"/ws/stations¥";¥n¥t¥t ¥n¥t¥t ¥n¥t¥t var sock = new
WebSocket(newUri);¥n¥t¥t sock.onopen = function(){ ¥n¥t¥t console.log(¥"Connected websocket¥");¥n¥t¥t console.log(¥"Sending
ping..¥");¥n¥t¥t¥tsock.send(¥"Ping!¥");¥n¥t¥t console.log(¥"Ping sent..¥");¥n¥t¥t };¥n¥t¥t sock.onerror = function(){ console.log(¥"Websocket error¥"); };¥n¥t¥t
sock.onmessage = function(evt){¥n¥t¥t var schoolData = JSON.parse(evt.data);¥n¥t¥t var stations = schoolData.results.school[0].campus;¥n¥t¥t¥tfor(var i = 0; i
< stations.length; i++) {¥n¥t¥t¥t var camp = stations[i];¥n
var marker = new google.maps.Marker({¥n¥t¥t¥t position: new
google.maps.LatLng(camp.latitude[0],camp.longitude[0]),¥n¥t¥t¥t map: map,¥n¥t¥t¥t animation: google.maps.Animation.BOUNCE,¥n¥t¥t¥t title:
camp.address[0]¥n¥t¥t¥t });¥n¥t¥t¥t ¥n¥t¥t¥t}¥n¥t¥t };¥n¥t¥t};¥n¥t¥t¥n¥t¥tgoogle.maps.event.addDomListener(window, 'load', initialize);¥n¥n </script>¥n
</head>¥n <body>¥n <div id=¥"map-canvas¥"></div>¥n <font size=¥"6¥">大学キャンパスマップ</font>¥n <br>powered by IBM Bluemix and Node-RED¥n <div
align=¥"right¥"> ¥n <a href=¥"http://webservice.recruit.co.jp/¥"><img src=¥"http://webservice.recruit.co.jp/banner/shingaku-m.gif¥" alt=¥"リクナビ進学 Webサービス¥"
width=¥"88¥" height=¥"35¥" border=¥"0¥" title=¥"リクナビ進学 Webサービス¥"></a>¥n </div> ¥n
</body>¥n</html>","x":330,"y":181,"z":"60aa0f7b.9f55f","wires":[["fda27200.025d9"]]},{"id":"636d7b37.9c9284","type":"http
in","name":"","url":"/schoolmap","method":"get","x":143,"y":181,"z":"60aa0f7b.9f55f","wires":[["774506a8.88baf8"]]}]
10
1
© 2015 IBM Corporation
IBM Cloud
Node-REDでWatsonアプリを作成 Web編 - option
□http://ibm.biz/noderedweb
Watsonに質問をするWebアプリを機能拡張したフローを公開しています。
この記事の「4. サンプルフロー」の手順でフローを取り込んでみましょう。
今回のハンズオンで作成したアプリだけでなく、さらに拡張したフローもありますので
Webアプリ作成の参考にしてください。
10
2
© 2015 IBM Corporation
IBM Cloud
Node-REDでWeb APIを活用したアプリを動かす
□http://ibm.biz/noderedflow
地図を表示するGoogle Maps APIと大学の情報を提供するリクナビ進学APIを連携させた
キャンパスの場所を地図上に示すサンプルアプリのフローを公開しています。
これらのフローをNode-REDに取り込んでみましょう。
■JSON形式のテキストを「選択」→「コピー」します。
10
3
© 2015 IBM Corporation
IBM Cloud
Node-REDでWeb APIを活用したアプリを動かす
■Node-REDでシートを追加します。
上部の「+」（プラス）ボタンをクリックして、新しいシートを開きます。
■新しいシートに先程コピーした処理フローを取り込みます。
上部右端の三本線のアイコンをクリックし、表示されたメニューから「import」→「Clipboard」を
選択します。
10
4
© 2015 IBM Corporation
IBM Cloud
Node-REDでWeb APIを活用したアプリを動かす
■「Import nodes」ウィンドウが表示されるので、
先程クリップボードにコピーしたテキストをペースト
して、OKボタンをクリックします。
■処理フローが取り込まれますので、キャンバスの適当な場所をクリックして配置します。
10
5
© 2015 IBM Corporation
IBM Cloud
Node-REDでWeb APIを活用したアプリを動かす
■このアプリを動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。
■実⾏結果を確認してみましょう。
Webブラウザの新しいタブを開いて、Node-REDのホスト名の末尾に「/schoolmap」という
パスを付加したURLにアクセスします。
Node-REDを開いているWebブラウザのURLの末尾の「/red/#」を削除し、「/schoolmap」を追加します。
(例)
http://iotserver2015xx.mybluemix.net/red/#
でNode-REDを開いている場合、
http://iotserver2015xx.mybluemix.net/schoolmap にアクセスします。
10
6
© 2015 IBM Corporation
IBM Cloud
Node-REDでWeb APIを活用したアプリを動かす
■Node-REDで作ったサンプルアプリ「筑波大学はココ！」が表示されればOKです。
地図上の筑波大学のキャンパスにマーカーが表示され、マウスポインタを合わせると
大学の住所が表示されます。
10
7
© 2015 IBM Corporation
IBM Cloud
Node-REDでWeb APIを活用したアプリを動かす
■debug画面に、リクナビ進学APIを呼び出した結果が表示されていることを確認してください。
緯度経度や住所以外にも様々な情報が取得できています。
このようにクラウドで公開されている外部のAPIを呼び出すことで、アプリの機能を拡張できます
10
8
© 2015 IBM Corporation
IBM Cloud
Node-REDでWeb APIを活用したアプリを動かす - option
□試してみましょう□
リクナビ進学APIに対してリクエストする内容を変えてみましょう。
■「リクナビAPI呼び出し」ノードをダブルクリックして構成画面を開きます。
■URL欄の「code=SC000059」の部分を「code=SC000006」と変更して「OK」をクリック。
SC000006は茨城大学の学校コードです。
時間のある方は、
SC000192 : 関⻄⼤学
SC000491 : 日本大学
なども試して結果を確認してみましょう。
■デプロイして結果を⾒てみましょう。
右上の「Deploy」ボタンをクリックします。
「筑波大学はココ！」をWebブラウザで再読み込みすると、実⾏結果はどう変わるでしょうか？
10
9
© 2015 IBM Corporation
IBM Cloud
API活用によるアプリ開発とIBM Bluemix
■大学キャンパスマップアプリはBluemix環境のNode-RED上で稼動しています。
地図はGoogle Maps APIを、⼤学の住所および緯度経度の情報はリクナビ進学APIを
呼び出して統合し、Webブラウザ上に表示しています。
IBM Bluemix
大学キャンパスマップ
アプリ
APIを活用することで
効率的なアプリ開発が可能
Google
Maps API
リクナビ
進学API
クラウドの世界では
APIの公開が拡がっている
11
0
© 2015 IBM Corporation
IBM Cloud
THANK YOU!
11
1
© 2015 IBM Corporation
IBM Cloud
Bluemix User Group - BMXUG（ビーザグ）
Bluemixのユーザー会が発足しました！
ぜひご参加ください！
BMXUGはユーザー様主体、有志によって運営される
情報交換・ネットワーキングの場です
11
2
© 2015 IBM Corporation
IBM Cloud
BMXUGへの参加方法
で「グループに参加」
http://ibm.biz/bmxug-facebook
で「コミュニティに参加」
http://bmxug.doorkeeper.jp
11
3
© 2015 IBM Corporation