Bluemix - ߂Ă Node-RED.ppt ) · Bluemix上に下の図のようなWeb-DBシステムを構築してみましょう。 +,- ./01 AppサーバーとしてNode.js、DBサーバーとしてSQL

IBM Cloud

1 © 2015 IBM Corporation

Bluemix勉強会＠Co-EdoはじめてのNode-RED ハンズオンテキスト

日本アイ・ビー・エム株式会社クラウド・ソフトウェア事業部エコシステム・デベロップメント

2015/11/10 updated

© 2015 IBM Corporation

IBM Cloud

2

1. Bluemixの基本操作2. Node-REDでHello World3. Node-REDでWatson連携アプリを作成4. Node-REDでDBアクセス5. Node-REDでIoTアプリを作成

ハンズオンアジェンダ


IBM Cloud

3

Bluemixの基本操作


IBM Cloud

4

■Webブラウザを起動し、下記URLより Bluemix にログインします。使用するブラウザは「Firefox」推奨です。

http://bluemix.net

■右上部の「ログイン」をクリック。

■IBM ID（メールアドレス）とパスワードを⼊⼒し、「サインイン」ボタンをクリック。

IBM Bluemixへのログイン


IBM Cloud

5

■Bluemixのダッシュボードの画⾯が表⽰されればログイン完了です。IBM Bluemixへのログイン

© 2015 IBM Corporation6

作業する地域を確認するBluemixは「米国南部」と「英国」の2つのデータセンターで稼動しています。

� 上部右端の人の形をしたアイコンをクリックするとメニューが表示され、作業する地域を選択できます� 本資料では「⽶国南部」を使うことを

想定しています


[補足] 「米国南部」選択時のポップアップへの対応方法米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表⽰された場合は、任意の名前を⼊⼒し、作成をクリックしてください。

本資料ではスペース名として

「dev」を使用します


Web-DBシステムの構築Bluemix上に下の図のようなWeb-DBシステムを構築してみましょう。コードを実⾏するAppサーバーとしてNode.js、DBサーバーとしてSQL Databaseを使用します。

Webアプリサーバー

データベースサーバー

ルーター

IBM Bluemix


アプリケーション実⾏環境の構築 (1/3)１．上部メニューの”カタログ”にて、作成するアプリケーションの実⾏環境を選択します。

ランタイムカテゴリから、Node.js による JavaScriptの実⾏環境を選択します。

2．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。任意の名前を指定します。

重複しているとエラーになるのでユニークな名称を

指定してください


アプリケーション実⾏環境の構築 (2/3)3．アプリケーションのステージングが開始され、30秒ほどで完了します。

これだけの手順で Node.js の実⾏環境が構築できました。


アプリケーション実⾏環境の構築 (3/3)4．それでは作成したインスタンスにWebブラウザでアクセスし、サンプルとして

⽤意されたスターター・コードを実⾏してみましょう。URLリンクをクリックすると、作成された Node.js 上でJavaScript のスターター・アプリケーションが動いていることが確認できます。

この例では、http://Node012.mybluemix.net/にアクセスしています

このようにBluemixを使用するとクイックに、簡単に、アプリケーションの実⾏環境をセットアップすることができます。


サービスの追加 (1/4)

2. アプリケーションの概要ページが表示されます。“サービスまたはAPIの追加”をクリックします。

1. 上部メニューの”ダッシュボード”をクリックし、作成したアプリケーション(資料ではNode012)をクリックします。


サービスの追加 (2/4)3. Bluemixのカタログページが表示されます。

このカタログでアプリケーションと連携させたいサービスを選択します。

先ほど作成した Node.js の実⾏環境に SQL Databaseのサービスを追加してみましょう。 SQL Databaseのアイコンをクリックします。


サービスの追加 (3/4)4. アプリ欄に先ほど作成したNode.jsのアプリ名が設定されていること、

プランとして「Free Beta」が選択されていることを確認して「作成」ボタンをクリックします。サービス名はデフォルトのままでOKです。

アプリケーションの再ステージを確認するダイアログボックスが表示されますので、「再ステージ」ボタンをクリックします。


サービスの追加 (4/4)5. 左側のメニューから”概要”をクリックします。

SQL Databaseサービスが追加されたことを確認してください。たったこれだけの手順で、クラウド上にWeb-DBシステムを構築することができました。


アプリケーション実⾏環境のクラスタ化 (1/4)

1. 左側のメニューから「SDK for Node.js」をクリックします。最後に仕上げとして、Node.jsを3台に増やしてみましょう。


アプリケーション実⾏環境のクラスタ化 (2/4)2. ここで実⾏環境のリソース変更が可能です。

インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。再ステージ後、リソースが拡張されていることを確認してください。




ルーター

IBM Bluemix

ここまでの手順で、クラウド上に下の図のようなWeb-DBシステムができました。Node.jsのサーバーを3台並べて負荷分散を⾏っています。ユーザーからのリクエストは、自動的に3台のNode.jsのいずれかにルーティングされます。



アプリケーション実⾏環境のクラスタ化 (4/4)3. リソースは拡張することはもちろん、縮退させることも可能です。

元の状態に戻してみましょう。インスタンス : 1、メモリー : 256MB と指定して「保存」をクリックします。再ステージ後、リソースが縮退されていることを確認してください。


IBM Cloud

20

Node-REDでHello World


IBM Cloud

21

ハードウェアデバイス、API、オンラインサービスを連携させて、ロジックを作成できるフローエディター

What is Node-RED?

� WebブラウザベースのUI� node.js で稼動

• 軽量� 機能をノードという単位で

カプセル化して利⽤� 独自ノードの作成・追加可能� Bluemixの様々なサービスを簡

単に利⽤可能

Bluemixでなくても使用可能です


IBM Cloud

22

Node-RED インターフェース

Node情報ウィンドウまたはデバッグコンソール

デプロイ実⾏シート

ノード

ノードパレット

表示情報の切り替えキャンバス

処理フロー


IBM Cloud

23

Node-RED 操作方法

②ノード間を接続

④Deployを選択Node-RED画面

③ノードプロパティ設定

①ノードを選択しドラッグ＆ドロップ


IBM Cloud

24

Node-RED ノードの操作方法

コネクタが左

•イベントの終了左からデータを受信。外部アプリの起動/DB保存などの処理を⾏い、フローを終了する。

コネクタが左右

•データの処理左からデータを受信。変換/分岐などの処理を⾏い、結果を右のノードに送信する。

コネクタが右

•イベントの起動イベント起動条件を満たしたとき、情報を右のノードに送信する。

フローの左から右⽅向に処理が流れる


IBM Cloud

25

■本資料ではBluemixの米国のデータセンターを使用することを想定しています。右上部の「地域」をクリックし、「米国南部」を選択。

■上部メニューから「カタログ」をクリック。

■最上段の「ボイラープレート」カテゴリから「Node-RED Starter」を選択。

Node-RED環境の作成

もし「スペースの作成」というウィンドウが表示された場合は、任意の名前(dev等)を指定してスペースを作成してください。


IBM Cloud

26

■アプリ名とホスト名を⼊⼒します。実際にはアプリ名を⼊⼒フィールドに⼊れると、ホスト名も同じ名前が指定されます。既に同じ名前のホストが存在する場合エラーとなりますので、他の人と重複しなそうな名前を指定してください。


■「作成」ボタンをクリックすると、Node-REDの環境作成が始まります。完了までしばらくお待ちください。


IBM Cloud

27

■ステージングが完了したら作成した環境にアクセスしてみましょう。Node-REDのリンクをクリックします。

■Node-REDが起動すればOKです。

赤いボタンをクリックする



IBM Cloud

28

■まずは処理を開始するノードを作ってみましょう。左側のパレットから「inject」ノードを中央のキャンバスにドラッグ＆ドロップします。

■キャンバスにドロップした「inject」ノードをダブルクリックして設定画面を開きます。一番上のPayloadを「blank」を選択します。イベントの起動を⾏うだけで、次のノードにデータは送信されません。

「OK」をクリックします。

Node-REDでHello World – Step1

ドラッグ＆ドロップ

この数字を転記する


IBM Cloud

29

■次にメッセージの表示内容を定義するノードを作ってみましょう。パレットから「template」ノードをキャンバスにドラッグ＆ドロップします。

■「template」ノードをダブルクリックして設定画面を開きます。もともと⼊⼒されている⽂字列を削除し、「Hello World!!」など、任意の⽂字列を⼊⼒してください。





IBM Cloud

30

■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードをキャンバスにドラッグ＆ドロップします。

■ノードの横にあるコネクタをクリック＆ホールドし、3つのノードを線で繋ぎます。


この部分を掴んで引っ張る



IBM Cloud

31

■これでHello Worldを表示するフローが完成しました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。

■画面上部に「Successfully Deployed」の文字が表示されればOKです。（この文字はすぐに消えます）

■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはこのコンソールに表⽰されます。injectノードの左側にあるボタンをクリックすると処理が起動します。Hello World!! の⽂字列がdebugコンソールに表示されれば成功です。

取得できる情報はスマホの機種によって異なる場合があります。


この部分をクリックすると処理がスタート


IBM Cloud

32

■作成したフローを拡張してみましょう。Hello Worldの⽂字列をWebページに出⼒してみます。左側のパレットから「http」ノードをキャンバスにドラッグ＆ドロップします。

■「http」ノードをダブルクリックして設定画面を開きます。URLとして「/hello」と⼊⼒します。このパスにWebブラウザでアクセスするとHello Worldの⽂字列が表⽰されます。




IBM Cloud

33

■「template」ノードは先ほど作成したノードをコピーします。ノードをクリックして選択し、Ctrl + C でコピーできます。

■パレットから「http response」ノードをキャンバスにドラッグ＆ドロップします。



templateノードをコピーします


IBM Cloud

34

■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ブラウザに表示されました！


IBM Cloud

35

■あらかじめtemplateノードに書かれた⽂字列だけでなく、任意の⽂字列を表⽰できるようにしてみましょう。そのためには変数を使用します。まずはURLリクエストパラメータで、⽂字列を変数として渡す⽅法を試してみます。

■Step2で作成したフローをコピーします。Shiftキーを押しながらノードをクリックするとフロー全体が選択されます。

■右端のhttpノードの設定画面を開き、URLとして「/hello2」と⼊⼒します。

■中央のtemplateノードの設定画面を開き、表示内容を修正します。{{name}}さん、はろーわーるど！！

と変更しました。


フローごとコピーします


IBM Cloud

36

■左側のパレットから「function」ノードをキャンバスにドラッグ＆ドロップします。

functionノードには JavaSctiptでコードを書くことができます。

■「function」ノードをダブルクリックして設定画面を開きます。⼀⾏目にmsg.name = msg.payload.name;と⼊⼒します。⼆⾏目はそのままでOKをクリックします。


フローごとコピーしますドラッグ＆ドロップ


IBM Cloud

37

■ノードを下の図のようにつなぎ直します。線を削除するには、クリックで線を選択してDELETEキーです。

■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。

それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。



IBM Cloud

38

■Webブラウザの新しいタブを開いて、以下のURLにアクセスしてみましょう。https://node-red.xxx/hello2?name=佐藤



name変数の値として「佐藤」という⽂字列を渡しています

パラメータで渡した名前がWebブラウザに表示されました！

Node-REDエディタのURLです


IBM Cloud

39

Node-REDでWatson連携アプリを作成


１．上部メニューの”ダッシュボード”から、先ほど作成したNode-REDのアプリケーションを選択します。

2．「サービスまたはAPIの追加」をクリックします。

Watson Q&Aサービスの追加


3. カタログページに遷移します。Watsonカテゴリの「Question and Answer」をクリックします。

4. 「使用」をクリックします。



5. アプリケーションの再ステージの確認がありますので「再ステージ」をクリックします。

6. ステージングが完了すれば準備OKです。リンクをクリックして、Node-REDにアクセスします。

これで Node-RED から WatsonのQ&A サービスが利⽤できるようになります。



■Node-REDが起動します。Sheet 1に先ほど作成したフローが残っている方は別シートを追加します。上部の「+」（プラス）ボタンをクリックします。

新しいシートが開きますので、ここで処理フローを作成してみましょう。

Node-REDでWatsonアプリを作成


■Watsonに質問を投げて、その回答を受け取るフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。


inputカテゴリinjectノード

outputカテゴリdebugノード

functionカテゴリtemplateノード

IBM_WatsonカテゴリQ and Aノード


■順に各ノードの設定を⾏っていきましょう。Node-REDでWatsonアプリを作成

■injectノードをダブルクリックして設定画面を開き、Payloadで「blank」を選択します。

OKをクリックします


Node-REDでWatsonアプリを作成■functionノードにはWatsonに投げる質問⽂を⼊⼒します。ここでは例として「Which is the best hotel to stay in Okayama?」とします。



Node-REDでWatsonアプリを作成■Q and AノードではWatsonのコーパスを指定します。Corpusで「Travel」を選択します。



Node-REDでWatsonアプリを作成■debugノードは変更なしでOKです。

■4つのノードを下記のように線で繋ぎます。

■それでは実⾏してみましょう。右上の「deploy」をクリックします。


■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です。


Node-REDでWatsonアプリを作成 Web編■追加したfunctionノードが、Q and Aノードとdebugノードの間に入るように線を繋ぎます。

これでWatsonからの回答が”context.global.answer”という変数に代入されました。続いて、その回答をWebページに表示するフローを作ってみましょう。


■Watsonからの回答をWebページに表示するフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。


inputカテゴリhttpノード



outputカテゴリhttp responseノード


■順に各ノードの設定を⾏っていきましょう。

■httpノードをダブルクリックして設定画面を開き、URLに「/wat1」と⼊⼒します。




■functionノードをダブルクリックして設定画面を開き、1⾏目に「msg.payload = context.global.answer;」と追記します。2⾏目は変更なしでOKです。




■templateノードをダブルクリックして設定画面を開き、1⾏目に「<h1>Watsonさんの回答</h1>{{payload}}」と⼊⼒します。




■http responseノードは変更なしでOKです。■4つのノードを下記のように線で繋ぎます。




■先程と同様、injectノードの左端部分をクリックすると、処理が開始されます。Watsonからの回答がdebug画面に表示されていることを確認します。

■Webブラウザの新しいタブを開きます。Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat1」と⼊⼒してWebページにアクセスします。

(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/wat1 を開きます。

Watsonからの回答がWebブラウザに表示されました！



■Webブラウザから質問⽂を⼊⼒できるようにしましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。

■Shiftキーを押しながら先程作成した2つ目のフローをクリックします。このフローのすべてのノードが選択されます。

■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。


フローをコピーします


■左端のhttpノードをダブルクリックし、URLを「/wat2」と変更します。■2番目のfunctionノードをクリックして選択し、「Delete」キーを押して削除します。■3番目のtemplateノードは次ページを参照。■4番目のhttp responseノードはそのままでOKです。


削除変更なし次ページ


■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ブラウザから質問⽂を⼊⼒するフローができました。


■Watsonに質問し、回答を表示するフローを作成しましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。

■Shiftキーを押しながら先程作成した2つ目のフローをクリックして選択します。■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。

キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。


もう⼀度フローをコピーします


■左端のhttpノードをダブルクリックし、Methodを「POST」、URLを「/wat3」と変更します。■2番目のfunctionノードをダブルクリックし、「context.global.answer」の部分を「msg.payload.question」と書き換えます。■3番目のtemplateノードはそのままでOKです。■4番目のhttp responseノードもそのままでOKです。


変更なし変更なし


■Watsonに質問する処理を追加します。最初に作成したフローから、Q and Aノードをコピーします。


Q and Aノードをコピーします

パレットからQ and Aノードを追加してもOKです。その場合は忘れずCorpusを「Travel」に変更してください。


■ノードを下記のように線で繋ぎ直します。これでWatsonに質問をして回答をWebブラウザに表示するフローが完成しました。




■Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat2」と⼊⼒してWebページにアクセスします。

(例)http://node-red/red/#の場合は、http://node-red/wat2 を開きます。■質問⽂を⼊⼒して「質問する」をクリックすると回答画面に遷移します。Watsonからの回答がWebブラウザに表示されればOKです！

お疲れ様でした！このようにWebアプリケーションを作成する場合もNode-REDは非常に便利です。



IBM Cloud

66

Node-REDでDBアクセス


IBM Cloud

67

１．⾦沢区が公開しているAEDの設置場所のデータをWebから取得します。Webブラウザを起動し、「⾦沢区データポータル」にアクセスします。https://ibm.biz/kanazawa

２．「AED設置場所」をクリックしてCSVファイルを保存します。ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。

SQL Databaseへのデータ取り込み


IBM Cloud

68

3．ダッシュボードにて、最初のハンズオンで作成したSQL Databaseサービスをクリックします。

4． Launch をクリックしてSQL Database のコンソールを起動します。



IBM Cloud

69

5．Load Dataをクリックします。SQL Databaseへのデータ取り込み


IBM Cloud

70

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” をクリックします。

コードページを1208→943

に変更

Yesに変更

ダウンロードしたcsvファイルを指定



IBM Cloud

71

7．サンプルデータのCSVファイルの内容が表示されていることを確認し、”Next” をクリックします。



IBM Cloud

72

8．”Create a new table and load” にチェックを入れ、”Next” をクリックします。SQL Databaseへのデータ取り込み


IBM Cloud

73

9．”Table name” を「AEDKANAZAWA」に変更します。１0．Columnを以下のとおり変更し、”Finish” をクリックします。

名称 ⇒ NAME 住所 ⇒ ADDRESS緯度 ⇒ LATITUDE 経度 ⇒ LONGITUDEAEDの数 ⇒ AED 更新⽇ ⇒ UPDATE



IBM Cloud

74

１1．ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択します。

１2．左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が表示されます


表の作成とデータの取り込みが完了しました


IBM Cloud

75

SQL Databaseサービスのバインド


2．「サービスまたはAPIのバインド」をクリックします。


IBM Cloud

76

3. バインド可能なサービスが表示されます。「SQL Database」を選択し、「追加」をクリックします。

4. アプリケーションの再ステージの確認があるので「再ステージ」をクリックします。

ステージングが完了すると、Node-RED から SQL Databaseサービスが利⽤できるようになります。



■SQL DatabaseからAEDの情報を取得するWeb APIを作成します■左側のパレットから、以下の3つのノードをキャンバスにドラッグ＆ドロップして配置します。




storageカテゴリsqldbノード

左右にコネクタが付いたノードです



■httpノードをダブルクリックして設定画面を開き、URLに「/api/aed」と⼊⼒します。




■sqldbノードをダブルクリックして設定画面を開きます。

-Server :バインドしたSQL Databaseサービスを選択-Query : SELECT * FROM AEDKANAZAWA




■http responseノードは変更なしでOKです。





Node-REDでDBアクセス■Webブラウザの新しいタブを開きます。

Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「api/aed」と⼊⼒してWebページにアクセスします。

(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/api/aed を開きます。

DBに格納されたAEDの情報がWebブラウザに表示されました！


Node-REDでDBアクセス■作成したAPIを呼び出すアプリケーションを作成します。■左側のパレットから、以下の3つのノードをキャンバスにドラッグ＆ドロップして配置します。inputカテゴリ

httpノードoutputカテゴリ

http responseノード




■httpノードをダブルクリックして設定画面を開き、URLに「/aedmap」と⼊⼒します。




■templateノードをダブルクリックして設定画面を開き、Template の内容として、https://ibm.biz/BdXueL のHTMLをコピーします










Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「aedmap」と⼊⼒してWebページにアクセスします。

(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/aedmap を開きます。

アプリケーションが起動すれば成功です！


IBM Cloud

87

Node-REDでIoTアプリを作成


IBM Cloud

88


IBM IoTFoundation

デバイス IBM Bluemix

■全体像アプリケーション

スマホのセンサーで計測したデータをクラウドサービスに送信

サービス

アプリはサービスからセンサーデータを取得して処理する

IoT Foundationサービスはセンサーデータを仲介する


IBM Cloud

89

■スマートフォンをお持ちの方は、スマホのブラウザで以下のURLにアクセスしてください。

http://phonesensor.mybluemix.net

PhoneSensorが起動します。スマホに内蔵された各種センサーの情報を取得し、BluemixのIoT Foundationサービスに送信しています。

■このセンサー情報を受け取って処理するアプリをBluemix上の Node-REDで作ってみましょう。



IBM Cloud

90

■スマホのセンサー情報を、クラウド上のIoT Foundationサービスから受け取ってみましょう。左側のパレットから「ibmiot」ノードを中央のキャンバスにドラッグ＆ドロップします。

■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。Authentication は「Quickstart」を選択。Device Id に先程のPhoneSensorに表示されている⽂字列の末尾12桁の数字を⼊⼒。





IBM Cloud

91

■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードを中央のキャンバスにドラッグ＆ドロップします。

■ノードの横にあるコネクタをクリック＆ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。





IBM Cloud

92

■これでデータの⼊⼒と出⼒の定義ができました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。


■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはここに表示されます。

先程のPhoneSensorを動かします。スマホのセンサー情報がdebug画面に表示されれば成功です。




IBM Cloud

93

■debug画面にセンサーデータがうまく表示されない場合のチェックポイント-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが停止していないでしょうか。

-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが「Disconnected」になります。

-「ibmiot」ノードのDevice Idが正しく設定されているかどうかをご確認ください。スマホのWebブラウザでPhoneSensorを再読み込みするとDevice Idが変わってしまいます。その場合は再度「ibmiot」ノードの定義情報をPhoneSensor側と同じになるよう変更してください。



IBM Cloud

94

■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作ってみましょう。「tiltLR」というデータ項目に着目します。これはスマホ端末の左右の傾きを測定しているようです。実際に端末を動かして、値の変化を確認してください。この傾き度合いによって表⽰メッセージを変えてみましょう。

■センサー情報から「tiltLR」の値だけを抽出します。左側のパレットから「function」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、Functionの内容を以下のように書き換えて「OK」をクリックします。

return {payload:msg.payload.d.tiltLR};



IBM Cloud

95

■正しく動くかどうか確認してみましょう。「ibmiot」と「debug」との間に、今作成した「function」ノードを挟むように線を繋ぎ変えます。

■右上の「Deploy」ボタンをクリックします。

■不要な情報が削除されて、「tiltLR」の値だけが表示されればOKです。


線はクリックで選択した状態でDeleteキーで削除できます。


IBM Cloud

96

■「tiltLR」の値によって処理を分岐させます。左側のパレットから「switch」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、分岐条件を指定します。左に5度以上傾いた場合＝「左に傾いてます」右に5度以上傾いた場合＝「右に傾いてます」傾きが5度未満の場合＝「ほぼフラットです」

上記のような条件設定をするには右図のように指定して「OK」をクリックします。


条件を追加するには、「+rule」ボタンをクリックします。

傾きが-5度以上(左)なら1番へ傾きが5度以上(右)なら2番へ

どちらでもない(フラット)なら3番へ


IBM Cloud

97

■条件分岐された後の処理を作成します。左側のパレットから「template」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、表示するメッセージを定義します。ご⾃由にメッセージの内容を⼊⼒してください。

同様に2番、3番のノードも作成し、それぞれメッセージを定義します。最後にswitchノードのコネクタと1番、2番、3番のノードを線で繋げます。


{{payload}} と指定すると、先程debug画面で確認した傾きデータの値が表示されます。

1番(左)

2番(右)

3番(フラット)


IBM Cloud

98

■キャンバスの中を整理して、各ノードを以下の図のように接続してください。

■処理フローが完成しました！それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。


正しく線が繋がっていれば、ノード自体はキャンバス内のどこに置かれていても動作に影響はありません。


IBM Cloud

99

■「Successfully Deployed」のメッセージが表示されれば成功です。

PhoneSensorを稼動させたスマホを左右に傾けてメッセージが正しく表示されることを確認してください。


お疲れ様でした！IBM Bluemix と Node-RED によって、ほぼノンプログラミングでIoTデバイスから収集したデータを処理するアプリが作れました。


Node-RED応用編


IBM Cloud

101

■Node-REDは作成したフローをJSON形式のテキストとして、export/importすることができます。

Node-REDでフローのエクスポート/インポート

[{“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”:275,“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"]]}]

ここから先は応用編です。余裕のある方はぜひ試してみてください。

JSON形式のテキストの例


IBM Cloud

102

□http://ibm.biz/noderedwebWatsonに質問をするWebアプリを機能拡張したフローを公開しています。

この記事の「4. サンプルフロー」の手順でフローを取り込んでみましょう。今回のハンズオンで作成したアプリだけでなく、さらに拡張したフローもありますのでWebアプリ作成の参考にしてください。

Node-REDでWatsonアプリを作成 Web編 - option


IBM Cloud

103

□http://ibm.biz/noderedflow地図を表示するGoogle Maps APIと大学の情報を提供するリクナビ進学APIを連携させたキャンパスの場所を地図上に示すサンプルアプリのフローを公開しています。これらのフローをNode-REDに取り込んでみましょう。■JSON形式のテキストを「選択」→「コピー」します。

Node-REDでWeb APIを活用したアプリを動かす


IBM Cloud

104

■Node-REDでシートを追加します。上部の「+」（プラス）ボタンをクリックして、新しいシートを開きます。

■新しいシートに先程コピーした処理フローを取り込みます。上部右端の三本線のアイコンをクリックし、表示されたメニューから「import」→「Clipboard」を選択します。



IBM Cloud

105

■「Import nodes」ウィンドウが表示されるので、先程クリップボードにコピーしたテキストをペーストして、OKボタンをクリックします。

■処理フローが取り込まれますので、キャンバスの適当な場所をクリックして配置します。



IBM Cloud

106

■このアプリを動かしてみましょう。右上の「Deploy」ボタンをクリックします。

■画面上部に「Successfully Deployed」の文字が表示されればOKです。

■実⾏結果を確認してみましょう。Webブラウザの新しいタブを開いて、Node-REDのホスト名の末尾に「/schoolmap」というパスを付加したURLにアクセスします。


http://iotserver2015xx.mybluemix.net/red/# でNode-REDを開いている場合、

http://iotserver2015xx.mybluemix.net/schoolmap にアクセスします。

(例)

Node-REDを開いているWebブラウザのURLの末尾の「/red/#」を削除し、「/schoolmap」を追加します。


IBM Cloud

107

■Node-REDで作ったサンプルアプリ「筑波大学はココ！」が表示されればOKです。

地図上の筑波大学のキャンパスにマーカーが表示され、マウスポインタを合わせると大学の住所が表示されます。



IBM Cloud

108

■debug画面に、リクナビ進学APIを呼び出した結果が表示されていることを確認してください。緯度経度や住所以外にも様々な情報が取得できています。

このようにクラウドで公開されている外部のAPIを呼び出すことで、アプリの機能を拡張できます



IBM Cloud

109

□試してみましょう□リクナビ進学APIに対してリクエストする内容を変えてみましょう。

■「リクナビAPI呼び出し」ノードをダブルクリックして構成画面を開きます。

■URL欄の「code=SC000059」の部分を「code=SC000006」と変更して「OK」をクリック。

■デプロイして結果を⾒てみましょう。右上の「Deploy」ボタンをクリックします。「筑波大学はココ！」をWebブラウザで再読み込みすると、実⾏結果はどう変わるでしょうか？

Node-REDでWeb APIを活用したアプリを動かす - option

SC000006は茨城大学の学校コードです。時間のある方は、

SC000192 : 関⻄⼤学SC000491 : 日本大学

なども試して結果を確認してみましょう。


IBM Cloud

110

■大学キャンパスマップアプリはBluemix環境のNode-RED上で稼動しています。地図はGoogle Maps APIを、⼤学の住所および緯度経度の情報はリクナビ進学APIを呼び出して統合し、Webブラウザ上に表示しています。

API活用によるアプリ開発とIBM Bluemix

Google Maps API

リクナビ進学API

大学キャンパスマップアプリ

クラウドの世界ではAPIの公開が拡がっている

IBM Bluemix

APIを活用することで効率的なアプリ開発が可能

IBM Cloud

1 © 2015 IBM Corporation

Bluemix勉強会＠Co-EdoはじめてのNode-RED ハンズオンテキスト

日本アイ・ビー・エム株式会社クラウド・ソフトウェア事業部エコシステム・デベロップメント

2015/11/10 updated


IBM Cloud

2

1. Bluemixの基本操作2. Node-REDでHello World3. Node-REDでWatson連携アプリを作成4. Node-REDでDBアクセス5. Node-REDでIoTアプリを作成

ハンズオンアジェンダ


IBM Cloud

3

Bluemixの基本操作


IBM Cloud

4

■Webブラウザを起動し、下記URLより Bluemix にログインします。使用するブラウザは「Firefox」推奨です。

http://bluemix.net

■右上部の「ログイン」をクリック。

■IBM ID（メールアドレス）とパスワードを⼊⼒し、「サインイン」ボタンをクリック。

IBM Bluemixへのログイン


IBM Cloud

5

■Bluemixのダッシュボードの画⾯が表⽰されればログイン完了です。IBM Bluemixへのログイン


作業する地域を確認するBluemixは「米国南部」と「英国」の2つのデータセンターで稼動しています。

� 上部右端の人の形をしたアイコンをクリックするとメニューが表示され、作業する地域を選択できます� 本資料では「⽶国南部」を使うことを

想定しています


[補足] 「米国南部」選択時のポップアップへの対応方法米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表⽰された場合は、任意の名前を⼊⼒し、作成をクリックしてください。

本資料ではスペース名として

「dev」を使用します


Web-DBシステムの構築Bluemix上に下の図のようなWeb-DBシステムを構築してみましょう。コードを実⾏するAppサーバーとしてNode.js、DBサーバーとしてSQL Databaseを使用します。



ルーター

IBM Bluemix


アプリケーション実⾏環境の構築 (1/3)１．上部メニューの”カタログ”にて、作成するアプリケーションの実⾏環境を選択します。

ランタイムカテゴリから、Node.js による JavaScriptの実⾏環境を選択します。

2．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。任意の名前を指定します。

重複しているとエラーになるのでユニークな名称を

指定してください


アプリケーション実⾏環境の構築 (2/3)3．アプリケーションのステージングが開始され、30秒ほどで完了します。

これだけの手順で Node.js の実⾏環境が構築できました。


アプリケーション実⾏環境の構築 (3/3)4．それでは作成したインスタンスにWebブラウザでアクセスし、サンプルとして

⽤意されたスターター・コードを実⾏してみましょう。URLリンクをクリックすると、作成された Node.js 上でJavaScript のスターター・アプリケーションが動いていることが確認できます。

この例では、http://Node012.mybluemix.net/にアクセスしています

このようにBluemixを使用するとクイックに、簡単に、アプリケーションの実⾏環境をセットアップすることができます。


サービスの追加 (1/4)

2. アプリケーションの概要ページが表示されます。“サービスまたはAPIの追加”をクリックします。

1. 上部メニューの”ダッシュボード”をクリックし、作成したアプリケーション(資料ではNode012)をクリックします。


サービスの追加 (2/4)3. Bluemixのカタログページが表示されます。

このカタログでアプリケーションと連携させたいサービスを選択します。

先ほど作成した Node.js の実⾏環境に SQL Databaseのサービスを追加してみましょう。 SQL Databaseのアイコンをクリックします。


サービスの追加 (3/4)4. アプリ欄に先ほど作成したNode.jsのアプリ名が設定されていること、

プランとして「Free Beta」が選択されていることを確認して「作成」ボタンをクリックします。サービス名はデフォルトのままでOKです。

アプリケーションの再ステージを確認するダイアログボックスが表示されますので、「再ステージ」ボタンをクリックします。


サービスの追加 (4/4)5. 左側のメニューから”概要”をクリックします。

SQL Databaseサービスが追加されたことを確認してください。たったこれだけの手順で、クラウド上にWeb-DBシステムを構築することができました。



1. 左側のメニューから「SDK for Node.js」をクリックします。最後に仕上げとして、Node.jsを3台に増やしてみましょう。


アプリケーション実⾏環境のクラスタ化 (2/4)2. ここで実⾏環境のリソース変更が可能です。

インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。再ステージ後、リソースが拡張されていることを確認してください。




ルーター

IBM Bluemix

ここまでの手順で、クラウド上に下の図のようなWeb-DBシステムができました。Node.jsのサーバーを3台並べて負荷分散を⾏っています。ユーザーからのリクエストは、自動的に3台のNode.jsのいずれかにルーティングされます。



アプリケーション実⾏環境のクラスタ化 (4/4)3. リソースは拡張することはもちろん、縮退させることも可能です。

元の状態に戻してみましょう。インスタンス : 1、メモリー : 256MB と指定して「保存」をクリックします。再ステージ後、リソースが縮退されていることを確認してください。


IBM Cloud

20

Node-REDでHello World


IBM Cloud

21

ハードウェアデバイス、API、オンラインサービスを連携させて、ロジックを作成できるフローエディター

What is Node-RED?

� WebブラウザベースのUI� node.js で稼動

• 軽量� 機能をノードという単位で

カプセル化して利⽤� 独自ノードの作成・追加可能� Bluemixの様々なサービスを簡

単に利⽤可能

Bluemixでなくても使用可能です


IBM Cloud

22

Node-RED インターフェース

Node情報ウィンドウまたはデバッグコンソール

デプロイ実⾏シート

ノード

ノードパレット

表示情報の切り替えキャンバス

処理フロー


IBM Cloud

23

Node-RED 操作方法

②ノード間を接続

④Deployを選択Node-RED画面

③ノードプロパティ設定

①ノードを選択しドラッグ＆ドロップ


IBM Cloud

24

Node-RED ノードの操作方法

コネクタが左

•イベントの終了左からデータを受信。外部アプリの起動/DB保存などの処理を⾏い、フローを終了する。

コネクタが左右

•データの処理左からデータを受信。変換/分岐などの処理を⾏い、結果を右のノードに送信する。

コネクタが右

•イベントの起動イベント起動条件を満たしたとき、情報を右のノードに送信する。

フローの左から右⽅向に処理が流れる


IBM Cloud

25

■本資料ではBluemixの米国のデータセンターを使用することを想定しています。右上部の「地域」をクリックし、「米国南部」を選択。

■上部メニューから「カタログ」をクリック。

■最上段の「ボイラープレート」カテゴリから「Node-RED Starter」を選択。


もし「スペースの作成」というウィンドウが表示された場合は、任意の名前(dev等)を指定してスペースを作成してください。


IBM Cloud

26

■アプリ名とホスト名を⼊⼒します。実際にはアプリ名を⼊⼒フィールドに⼊れると、ホスト名も同じ名前が指定されます。既に同じ名前のホストが存在する場合エラーとなりますので、他の人と重複しなそうな名前を指定してください。


■「作成」ボタンをクリックすると、Node-REDの環境作成が始まります。完了までしばらくお待ちください。


IBM Cloud

27

■ステージングが完了したら作成した環境にアクセスしてみましょう。Node-REDのリンクをクリックします。

■Node-REDが起動すればOKです。

赤いボタンをクリックする



IBM Cloud

28

■まずは処理を開始するノードを作ってみましょう。左側のパレットから「inject」ノードを中央のキャンバスにドラッグ＆ドロップします。

■キャンバスにドロップした「inject」ノードをダブルクリックして設定画面を開きます。一番上のPayloadを「blank」を選択します。イベントの起動を⾏うだけで、次のノードにデータは送信されません。






IBM Cloud

29

■次にメッセージの表示内容を定義するノードを作ってみましょう。パレットから「template」ノードをキャンバスにドラッグ＆ドロップします。

■「template」ノードをダブルクリックして設定画面を開きます。もともと⼊⼒されている⽂字列を削除し、「Hello World!!」など、任意の⽂字列を⼊⼒してください。





IBM Cloud

30

■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードをキャンバスにドラッグ＆ドロップします。

■ノードの横にあるコネクタをクリック＆ホールドし、3つのノードを線で繋ぎます。





IBM Cloud

31

■これでHello Worldを表示するフローが完成しました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。


■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはこのコンソールに表⽰されます。injectノードの左側にあるボタンをクリックすると処理が起動します。Hello World!! の⽂字列がdebugコンソールに表示されれば成功です。



この部分をクリックすると処理がスタート


IBM Cloud

32

■作成したフローを拡張してみましょう。Hello Worldの⽂字列をWebページに出⼒してみます。左側のパレットから「http」ノードをキャンバスにドラッグ＆ドロップします。

■「http」ノードをダブルクリックして設定画面を開きます。URLとして「/hello」と⼊⼒します。このパスにWebブラウザでアクセスするとHello Worldの⽂字列が表⽰されます。




IBM Cloud

33

■「template」ノードは先ほど作成したノードをコピーします。ノードをクリックして選択し、Ctrl + C でコピーできます。

■パレットから「http response」ノードをキャンバスにドラッグ＆ドロップします。



templateノードをコピーします


IBM Cloud

34

■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ブラウザに表示されました！


IBM Cloud

35

■あらかじめtemplateノードに書かれた⽂字列だけでなく、任意の⽂字列を表⽰できるようにしてみましょう。そのためには変数を使用します。まずはURLリクエストパラメータで、⽂字列を変数として渡す⽅法を試してみます。

■Step2で作成したフローをコピーします。Shiftキーを押しながらノードをクリックするとフロー全体が選択されます。

■右端のhttpノードの設定画面を開き、URLとして「/hello2」と⼊⼒します。

■中央のtemplateノードの設定画面を開き、表示内容を修正します。{{name}}さん、はろーわーるど！！

と変更しました。


フローごとコピーします


IBM Cloud

36

■左側のパレットから「function」ノードをキャンバスにドラッグ＆ドロップします。

functionノードには JavaSctiptでコードを書くことができます。

■「function」ノードをダブルクリックして設定画面を開きます。⼀⾏目にmsg.name = msg.payload.name;と⼊⼒します。⼆⾏目はそのままでOKをクリックします。


フローごとコピーしますドラッグ＆ドロップ


IBM Cloud

37

■ノードを下の図のようにつなぎ直します。線を削除するには、クリックで線を選択してDELETEキーです。


それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。



IBM Cloud

38

■Webブラウザの新しいタブを開いて、以下のURLにアクセスしてみましょう。https://node-red.xxx/hello2?name=佐藤



name変数の値として「佐藤」という⽂字列を渡しています

パラメータで渡した名前がWebブラウザに表示されました！

Node-REDエディタのURLです


IBM Cloud

39

Node-REDでWatson連携アプリを作成



2．「サービスまたはAPIの追加」をクリックします。



3. カタログページに遷移します。Watsonカテゴリの「Question and Answer」をクリックします。

4. 「使用」をクリックします。



5. アプリケーションの再ステージの確認がありますので「再ステージ」をクリックします。

6. ステージングが完了すれば準備OKです。リンクをクリックして、Node-REDにアクセスします。

これで Node-RED から WatsonのQ&A サービスが利⽤できるようになります。



■Node-REDが起動します。Sheet 1に先ほど作成したフローが残っている方は別シートを追加します。上部の「+」（プラス）ボタンをクリックします。

新しいシートが開きますので、ここで処理フローを作成してみましょう。



■Watsonに質問を投げて、その回答を受け取るフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。


inputカテゴリinjectノード

outputカテゴリdebugノード


IBM_WatsonカテゴリQ and Aノード


■順に各ノードの設定を⾏っていきましょう。Node-REDでWatsonアプリを作成

■injectノードをダブルクリックして設定画面を開き、Payloadで「blank」を選択します。



Node-REDでWatsonアプリを作成■functionノードにはWatsonに投げる質問⽂を⼊⼒します。ここでは例として「Which is the best hotel to stay in Okayama?」とします。



Node-REDでWatsonアプリを作成■Q and AノードではWatsonのコーパスを指定します。Corpusで「Travel」を選択します。



Node-REDでWatsonアプリを作成■debugノードは変更なしでOKです。




■injectノードの左端部分をクリックすると、処理が開始されます。templateノードに書かれた質問文がWatson Q&Aサービスに投げられ、その結果が右端のdebug画面に表示されます。


ここをクリック

debugタブを選択

Watsonからの回答が表示されれば成功です！Node-REDを使⽤すると、⼀⾏もコードを書かずにWatson Q&Aサービスを利⽤できます。


■次にWatsonからの回答をWebページに表示するようにフローを編集してみましょう。■左側のパレットからfunctionノードをドラッグ＆ドロップで追加します。



■設定画面を開き 1⾏目に「context.global.answer = msg.payload;」と追記します。2⾏目は変更なしでOKです。


Node-REDでWatsonアプリを作成 Web編■追加したfunctionノードが、Q and Aノードとdebugノードの間に入るように線を繋ぎます。

これでWatsonからの回答が”context.global.answer”という変数に代入されました。続いて、その回答をWebページに表示するフローを作ってみましょう。


■Watsonからの回答をWebページに表示するフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。








■httpノードをダブルクリックして設定画面を開き、URLに「/wat1」と⼊⼒します。




■functionノードをダブルクリックして設定画面を開き、1⾏目に「msg.payload = context.global.answer;」と追記します。2⾏目は変更なしでOKです。




■templateノードをダブルクリックして設定画面を開き、1⾏目に「<h1>Watsonさんの回答</h1>{{payload}}」と⼊⼒します。




■http responseノードは変更なしでOKです。■4つのノードを下記のように線で繋ぎます。




■先程と同様、injectノードの左端部分をクリックすると、処理が開始されます。Watsonからの回答がdebug画面に表示されていることを確認します。

■Webブラウザの新しいタブを開きます。Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat1」と⼊⼒してWebページにアクセスします。

(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/wat1 を開きます。

Watsonからの回答がWebブラウザに表示されました！



■Webブラウザから質問⽂を⼊⼒できるようにしましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。

■Shiftキーを押しながら先程作成した2つ目のフローをクリックします。このフローのすべてのノードが選択されます。

■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。


フローをコピーします


■左端のhttpノードをダブルクリックし、URLを「/wat2」と変更します。■2番目のfunctionノードをクリックして選択し、「Delete」キーを押して削除します。■3番目のtemplateノードは次ページを参照。■4番目のhttp responseノードはそのままでOKです。


削除変更なし次ページ


■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ブラウザから質問⽂を⼊⼒するフローができました。


■Watsonに質問し、回答を表示するフローを作成しましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。

■Shiftキーを押しながら先程作成した2つ目のフローをクリックして選択します。■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。

キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。


もう⼀度フローをコピーします


■左端のhttpノードをダブルクリックし、Methodを「POST」、URLを「/wat3」と変更します。■2番目のfunctionノードをダブルクリックし、「context.global.answer」の部分を「msg.payload.question」と書き換えます。■3番目のtemplateノードはそのままでOKです。■4番目のhttp responseノードもそのままでOKです。


変更なし変更なし


■Watsonに質問する処理を追加します。最初に作成したフローから、Q and Aノードをコピーします。


Q and Aノードをコピーします

パレットからQ and Aノードを追加してもOKです。その場合は忘れずCorpusを「Travel」に変更してください。


■ノードを下記のように線で繋ぎ直します。これでWatsonに質問をして回答をWebブラウザに表示するフローが完成しました。




■Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat2」と⼊⼒してWebページにアクセスします。

(例)http://node-red/red/#の場合は、http://node-red/wat2 を開きます。■質問⽂を⼊⼒して「質問する」をクリックすると回答画面に遷移します。Watsonからの回答がWebブラウザに表示されればOKです！

お疲れ様でした！このようにWebアプリケーションを作成する場合もNode-REDは非常に便利です。



IBM Cloud

66



IBM Cloud

67

１．⾦沢区が公開しているAEDの設置場所のデータをWebから取得します。Webブラウザを起動し、「⾦沢区データポータル」にアクセスします。https://ibm.biz/kanazawa

２．「AED設置場所」をクリックしてCSVファイルを保存します。ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。



IBM Cloud

68

3．ダッシュボードにて、最初のハンズオンで作成したSQL Databaseサービスをクリックします。

4． Launch をクリックしてSQL Database のコンソールを起動します。



IBM Cloud

69

5．Load Dataをクリックします。SQL Databaseへのデータ取り込み


IBM Cloud

70

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” をクリックします。

コードページを1208→943

に変更

Yesに変更

ダウンロードしたcsvファイルを指定



IBM Cloud

71

7．サンプルデータのCSVファイルの内容が表示されていることを確認し、”Next” をクリックします。



IBM Cloud

72

8．”Create a new table and load” にチェックを入れ、”Next” をクリックします。SQL Databaseへのデータ取り込み


IBM Cloud

73

9．”Table name” を「AEDKANAZAWA」に変更します。１0．Columnを以下のとおり変更し、”Finish” をクリックします。

名称 ⇒ NAME 住所 ⇒ ADDRESS緯度 ⇒ LATITUDE 経度 ⇒ LONGITUDEAEDの数 ⇒ AED 更新⽇ ⇒ UPDATE



IBM Cloud

74

１1．ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択します。

１2．左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が表示されます


表の作成とデータの取り込みが完了しました


IBM Cloud

75



2．「サービスまたはAPIのバインド」をクリックします。


IBM Cloud

76

3. バインド可能なサービスが表示されます。「SQL Database」を選択し、「追加」をクリックします。

4. アプリケーションの再ステージの確認があるので「再ステージ」をクリックします。

ステージングが完了すると、Node-RED から SQL Databaseサービスが利⽤できるようになります。



■SQL DatabaseからAEDの情報を取得するWeb APIを作成します■左側のパレットから、以下の3つのノードをキャンバスにドラッグ＆ドロップして配置します。




storageカテゴリsqldbノード

左右にコネクタが付いたノードです



■httpノードをダブルクリックして設定画面を開き、URLに「/api/aed」と⼊⼒します。




■sqldbノードをダブルクリックして設定画面を開きます。

-Server :バインドしたSQL Databaseサービスを選択-Query : SELECT * FROM AEDKANAZAWA










Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「api/aed」と⼊⼒してWebページにアクセスします。

(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/api/aed を開きます。

DBに格納されたAEDの情報がWebブラウザに表示されました！


Node-REDでDBアクセス■作成したAPIを呼び出すアプリケーションを作成します。■左側のパレットから、以下の3つのノードをキャンバスにドラッグ＆ドロップして配置します。inputカテゴリ

httpノードoutputカテゴリ

http responseノード




■httpノードをダブルクリックして設定画面を開き、URLに「/aedmap」と⼊⼒します。




■templateノードをダブルクリックして設定画面を開き、Template の内容として、https://ibm.biz/BdXueL のHTMLをコピーします










Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「aedmap」と⼊⼒してWebページにアクセスします。

(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/aedmap を開きます。

アプリケーションが起動すれば成功です！


IBM Cloud

87



IBM Cloud

88


IBM IoTFoundation

デバイス IBM Bluemix

■全体像アプリケーション

スマホのセンサーで計測したデータをクラウドサービスに送信

サービス

アプリはサービスからセンサーデータを取得して処理する

IoT Foundationサービスはセンサーデータを仲介する


IBM Cloud

89

■スマートフォンをお持ちの方は、スマホのブラウザで以下のURLにアクセスしてください。

http://phonesensor.mybluemix.net

PhoneSensorが起動します。スマホに内蔵された各種センサーの情報を取得し、BluemixのIoT Foundationサービスに送信しています。

■このセンサー情報を受け取って処理するアプリをBluemix上の Node-REDで作ってみましょう。



IBM Cloud

90

■スマホのセンサー情報を、クラウド上のIoT Foundationサービスから受け取ってみましょう。左側のパレットから「ibmiot」ノードを中央のキャンバスにドラッグ＆ドロップします。

■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。Authentication は「Quickstart」を選択。Device Id に先程のPhoneSensorに表示されている⽂字列の末尾12桁の数字を⼊⼒。





IBM Cloud

91

■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードを中央のキャンバスにドラッグ＆ドロップします。

■ノードの横にあるコネクタをクリック＆ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。





IBM Cloud

92

■これでデータの⼊⼒と出⼒の定義ができました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。


■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはここに表示されます。

先程のPhoneSensorを動かします。スマホのセンサー情報がdebug画面に表示されれば成功です。




IBM Cloud

93

■debug画面にセンサーデータがうまく表示されない場合のチェックポイント-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが停止していないでしょうか。

-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが「Disconnected」になります。

-「ibmiot」ノードのDevice Idが正しく設定されているかどうかをご確認ください。スマホのWebブラウザでPhoneSensorを再読み込みするとDevice Idが変わってしまいます。その場合は再度「ibmiot」ノードの定義情報をPhoneSensor側と同じになるよう変更してください。



IBM Cloud

94

■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作ってみましょう。「tiltLR」というデータ項目に着目します。これはスマホ端末の左右の傾きを測定しているようです。実際に端末を動かして、値の変化を確認してください。この傾き度合いによって表⽰メッセージを変えてみましょう。

■センサー情報から「tiltLR」の値だけを抽出します。左側のパレットから「function」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、Functionの内容を以下のように書き換えて「OK」をクリックします。

return {payload:msg.payload.d.tiltLR};



IBM Cloud

95

■正しく動くかどうか確認してみましょう。「ibmiot」と「debug」との間に、今作成した「function」ノードを挟むように線を繋ぎ変えます。

■右上の「Deploy」ボタンをクリックします。

■不要な情報が削除されて、「tiltLR」の値だけが表示されればOKです。


線はクリックで選択した状態でDeleteキーで削除できます。


IBM Cloud

96

■「tiltLR」の値によって処理を分岐させます。左側のパレットから「switch」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、分岐条件を指定します。左に5度以上傾いた場合＝「左に傾いてます」右に5度以上傾いた場合＝「右に傾いてます」傾きが5度未満の場合＝「ほぼフラットです」

上記のような条件設定をするには右図のように指定して「OK」をクリックします。


条件を追加するには、「+rule」ボタンをクリックします。

傾きが-5度以上(左)なら1番へ傾きが5度以上(右)なら2番へ

どちらでもない(フラット)なら3番へ


IBM Cloud

97

■条件分岐された後の処理を作成します。左側のパレットから「template」ノードを中央のキャンバスにドラッグ＆ドロップします。

ダブルクリックで設定画面を開き、表示するメッセージを定義します。ご⾃由にメッセージの内容を⼊⼒してください。

同様に2番、3番のノードも作成し、それぞれメッセージを定義します。最後にswitchノードのコネクタと1番、2番、3番のノードを線で繋げます。


{{payload}} と指定すると、先程debug画面で確認した傾きデータの値が表示されます。

1番(左)

2番(右)

3番(フラット)


IBM Cloud

98

■キャンバスの中を整理して、各ノードを以下の図のように接続してください。

■処理フローが完成しました！それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。


正しく線が繋がっていれば、ノード自体はキャンバス内のどこに置かれていても動作に影響はありません。


IBM Cloud

99

■「Successfully Deployed」のメッセージが表示されれば成功です。

PhoneSensorを稼動させたスマホを左右に傾けてメッセージが正しく表示されることを確認してください。


お疲れ様でした！IBM Bluemix と Node-RED によって、ほぼノンプログラミングでIoTデバイスから収集したデータを処理するアプリが作れました。


Node-RED応用編


IBM Cloud

101

■Node-REDは作成したフローをJSON形式のテキストとして、export/importすることができます。

Node-REDでフローのエクスポート/インポート

[{“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”:275,“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"]]}]

ここから先は応用編です。余裕のある方はぜひ試してみてください。

JSON形式のテキストの例


IBM Cloud

102

□http://ibm.biz/noderedwebWatsonに質問をするWebアプリを機能拡張したフローを公開しています。

この記事の「4. サンプルフロー」の手順でフローを取り込んでみましょう。今回のハンズオンで作成したアプリだけでなく、さらに拡張したフローもありますのでWebアプリ作成の参考にしてください。

Node-REDでWatsonアプリを作成 Web編 - option


IBM Cloud

103

□http://ibm.biz/noderedflow地図を表示するGoogle Maps APIと大学の情報を提供するリクナビ進学APIを連携させたキャンパスの場所を地図上に示すサンプルアプリのフローを公開しています。これらのフローをNode-REDに取り込んでみましょう。■JSON形式のテキストを「選択」→「コピー」します。



IBM Cloud

104

■Node-REDでシートを追加します。上部の「+」（プラス）ボタンをクリックして、新しいシートを開きます。

■新しいシートに先程コピーした処理フローを取り込みます。上部右端の三本線のアイコンをクリックし、表示されたメニューから「import」→「Clipboard」を選択します。



IBM Cloud

105

■「Import nodes」ウィンドウが表示されるので、先程クリップボードにコピーしたテキストをペーストして、OKボタンをクリックします。

■処理フローが取り込まれますので、キャンバスの適当な場所をクリックして配置します。



IBM Cloud

106

■このアプリを動かしてみましょう。右上の「Deploy」ボタンをクリックします。

■画面上部に「Successfully Deployed」の文字が表示されればOKです。

■実⾏結果を確認してみましょう。Webブラウザの新しいタブを開いて、Node-REDのホスト名の末尾に「/schoolmap」というパスを付加したURLにアクセスします。


http://iotserver2015xx.mybluemix.net/red/# でNode-REDを開いている場合、

http://iotserver2015xx.mybluemix.net/schoolmap にアクセスします。

(例)

Node-REDを開いているWebブラウザのURLの末尾の「/red/#」を削除し、「/schoolmap」を追加します。


IBM Cloud

107

■Node-REDで作ったサンプルアプリ「筑波大学はココ！」が表示されればOKです。

地図上の筑波大学のキャンパスにマーカーが表示され、マウスポインタを合わせると大学の住所が表示されます。



IBM Cloud

108

■debug画面に、リクナビ進学APIを呼び出した結果が表示されていることを確認してください。緯度経度や住所以外にも様々な情報が取得できています。

このようにクラウドで公開されている外部のAPIを呼び出すことで、アプリの機能を拡張できます



IBM Cloud

109

□試してみましょう□リクナビ進学APIに対してリクエストする内容を変えてみましょう。

■「リクナビAPI呼び出し」ノードをダブルクリックして構成画面を開きます。

■URL欄の「code=SC000059」の部分を「code=SC000006」と変更して「OK」をクリック。

■デプロイして結果を⾒てみましょう。右上の「Deploy」ボタンをクリックします。「筑波大学はココ！」をWebブラウザで再読み込みすると、実⾏結果はどう変わるでしょうか？

Node-REDでWeb APIを活用したアプリを動かす - option

SC000006は茨城大学の学校コードです。時間のある方は、

SC000192 : 関⻄⼤学SC000491 : 日本大学

なども試して結果を確認してみましょう。


IBM Cloud

110

■大学キャンパスマップアプリはBluemix環境のNode-RED上で稼動しています。地図はGoogle Maps APIを、⼤学の住所および緯度経度の情報はリクナビ進学APIを呼び出して統合し、Webブラウザ上に表示しています。

API活用によるアプリ開発とIBM Bluemix

Google Maps API

リクナビ進学API

大学キャンパスマップアプリ

クラウドの世界ではAPIの公開が拡がっている

IBM Bluemix

APIを活用することで効率的なアプリ開発が可能

Documents

Bluemix - ߂Ă Node-RED.ppt ) · Bluemix上に下の図のようなWeb-DBシステムを構築してみましょう。 +,- ./01 AppサーバーとしてNode.js、DBサーバーとしてSQL