IBM Bluemix 体験ハンズオン アプリ作成の新しい形を体験する 日本アイ・ビー・エム株式会社 クラウド・ソフトウェア事業部 エコシステム・デベロップメント

IBM Cloud Software
アプリ作成の新しい形を体験する
IBM Bluemix 体験ハンズオン
日本アイ・ビー・エム株式会社
クラウド・ソフトウェア事業部 エコシステム・デベロップメント
1
© 2015 IBM Corporation
IBM Cloud Software
Agenda
IBM Bluemix基本操作
IDSと連携したアプリケーション開発
Node-REDでIoTアプリの作成
Node-REDでWeb APIを活用したアプリを動かす
まとめ : API活用によるアプリ開発とIBM Bluemix
2
© 2015 IBM Corporation
IBM Cloud Software
IBM Bluemixへのログイン
■Webブラウザを起動し、下記URLより Bluemix にログインします。
使用するブラウザは「Google Chrome」推奨です。
http://bluemix.net
■右上部の「ログイン」をクリック。
■IBM ID（メールアドレス）とパスワードを⼊⼒し、「サインイン」ボタンをクリック。
3
© 2015 IBM Corporation
作業する地域を確認する
Bluemixは、「米国南部」と「英国」の2つの地域で稼動しています。
上部メニューの 「地域」 をクリックすることで、稼動する環境を選択することができます。
今回は「⽶国南部」を利⽤します。地域が「⽶国南部」になっていることを確認してくだ
さい。
「英国」になっている場合は、「地域」をクリックして、「米国南部」を選択してください
4
© 2015 IBM Corporation
[補足] 「米国南部」選択時のポップアップへの対応方法
米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表
⽰された場合は、任意の名前を⼊⼒し、作成をクリックしてください。
本資料では
スペース名として
「dev」を使用します
5
© 2015 IBM Corporation
アプリケーション実⾏環境の構築 (1/3)
１．上部メニューの”カタログ”にて、作成するアプリケーションの実⾏環境を選択します。
ランタイム カテゴリから、Node.js による JavaScriptの実⾏環境を選択します。
2．アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。
任意の名前を指定します。
重複しているとエラーに
なるのでユニークな名称を
指定してください
6
© 2015 IBM Corporation
アプリケーション実⾏環境の構築 (2/3)
3．上部メニューの”ダッシュボード”をクリックし、作成中のアプリケーションを選択します。
30秒ほどでインスタンスの作成および起動が完了します。
画面右端の “アプリの正常性” のステータスが赤色から緑色に変わり、
「アプリは稼動しています。」のメッセージが表示されたことを確認してください。
これだけの手順で Node.js の実⾏環境が構築できました。
“アプリの正常性” のステータスが変わらない場合は、
Web ブラウザのリロード (F5キー)をお試しください。
7
© 2015 IBM Corporation
アプリケーション実⾏環境の構築 (3/3)
4．それではサンプルとして⽤意されたスターター・アプリケーションを実⾏してみましょう。
アプリケーションの “経路： “のリンクをクリックすると、作成された Node.js 上で
JavaScript のスターター・アプリケーションが動いていることが確認できます。
8
この例では、http://WebApp001.mybluemix.net/にアクセスしています
© 2015 IBM Corporation
サービスの追加 (1/2)
1．上部メニューの “カタログ” をクリックし、カタログからアプリケーションと連携させたい
サービスを選択します。 ここでは、先ほど作成した Node.js の実⾏環境に
SQL Database(DB2) のサービスを追加してみましょう。
2．サービスを追加するアプリケーションを指定し、”作成”ボタンをクリックします。
(“アプリケーション”の選択” で先ほど作成したアプリ名を指定します。)
SQL Database のサービス名や
プランはデフォルトのままでOKです
9
© 2015 IBM Corporation
サービスの追加 (2/2)
3．アプリケーションの再起動(再ステージ)の確認があります。OKボタンをクリックします。
4．約20秒ほどでサービスの追加が完了します。
アプリケーションの “概要” 画面の下部に、SQL Database サービスが表示される
ことを確認してください。 たったこれだけの手順で、アプリケーションからデータベースが
使用できるようになりました。
“アプリの正常性” のステータスが変わらない場合は、
Web ブラウザのリロード (F5キー)をお試しください。
10
© 2015 IBM Corporation
アプリケーション実⾏環境の詳細 (1/4)
〜リソースの動的追加
アプリケーションの “概要” の画面には、実⾏環境が使用するリソース情報が
表示されています。
ここで実⾏環境のリソース変更が可能です。
インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。
再起動後、リソースが拡張されていることを確認してください。
11
© 2015 IBM Corporation
アプリケーション実⾏環境の詳細 (2/4)
〜リソースの動的追加
左端のメニューから ”SDK for Node.js” を選択します。
ページ上部で CPU やメモリーの使⽤率など、インスタンスの詳細情報が確認できます。
先程インスタンスを増やしたので、リストには3⾏が表⽰されています。
今度はリソースの縮退を⾏ってみましょう。
インスタンス : 1、メモリー : 64MB と指定して「保存」をクリックします。
リソースは増やすだけでなく、減らすこともできることを確認してください。
12
※画⾯の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
© 2015 IBM Corporation
アプリケーション実⾏環境の詳細 (3/4)
〜ファイル/ログの参照
左端のメニューから ”ファイルとログ” を選択します。
実⾏環境のファイルシステム上にあるアプリケーション・ファイルやログ・ファイルを
参照したりダウンロードしたりすることができます。
※画⾯の切り替えがうまくいかない場合は、Web ブラウザのリロード (F5キー)をお試しください。
13
© 2015 IBM Corporation
アプリケーション実⾏環境の詳細 (4/4)
〜環境変数の参照
”SDK for Node.js” ページの下部にて、実⾏環境に設定されている環境変数の
情報が確認できます。（環境変数を新しく追加することも可能です）
連携に必要となる情報は、自動的に環境変数にセットされるので、アプリケーションは
これらの環境変数の値を取得して、サービスにアクセスします。
SQLDatabase 接続の場合
IPアドレス, ポート番号, DB名,
username, password などが
環境変数としてセットされます。
Bluemix では、Web ブラウザからアプリケーション実⾏環境の構築やサービスのバインド、
様々な運⽤管理作業ができることを確認いただきました。 お疲れ様でした！
14
© 2015 IBM Corporation
IBM Cloud Software
IBM Bluemix基本操作
IDSと連携したアプリケーション開発
Node-REDでIoTアプリの作成
Node-REDでWeb APIを活用したアプリを動かす
まとめ : API活用によるアプリ開発とIBM Bluemix
15
© 2015 IBM Corporation
作成したインスタンスのアプリケーション・コードをリポジトリに追加し、コードを
編集してアプリケーションを変更する流れを体験していただきます。
1. ダッシュボード左側のメニューの「概要」を選択。
右端の「GITの追加」をクリック。
2.
16
「Git リポジトリーの作成」のウィンドウが表示される。
チェックボックスが選択されていることを確認して
「続⾏」をクリック。
完了を待って「クローズ」をクリック。
© 2015 IBM Corporation
3. リポジトリに追加されたコードを
エディターで開きます。
「コードの編集」をクリック。
4.
17
ブラウザの新規タブ(ウィンドウ)にて、クラウドベースの統合開発環境「IBM Bluemix
DevOps Services」が開きます。
© 2015 IBM Corporation
5. スターター・コードを編集してみましょう。
右側のツリー表示から Publicディレクトリを展開し
index.html を選択します。
6. 表示内容を変えてみましょう。
<h1>タグの中の 「Hi there!」を他の⽂字列に置き換えます。
18
© 2015 IBM Corporation
7. デプロイボタンをクリックします。
変更したコードがBluemixにデプロイされます。
8. デプロイが完了するとシグナルが緑に戻ります。アプリケーションを開いて変更を確認します。
なお、Bluemixのダッシュボード画面で操作することも可能です。
9. コードの修正が反映されていることをご確認ください。
19
© 2015 IBM Corporation
今デプロイしていただたアプリケーションは、ワークスペース(エディター)から
直接デプロイされたものです。リポジトリの内容は変更されていません。
PUSH
COMMIT
リモート
リポジトリ
ローカル
リポジトリ
アプリ
コード
ワークスペース
IDS
20
DEPLOY
アプリ
コード
ランタイム
DEPLOY
Bluemix
© 2015 IBM Corporation
コードの変更をリポジトリに反映した上で、Bluemixにデプロイしてみます。
※変更が反映されることを確認できるように、再度index.htmlを編集しておきましょう。
10. エディター画面左端の「Git リポジトリー」アイコンを
クリックします。
アイコンが表示されていない場合は、メニューから
「表示」→「関連項目を開く」→「Gitリポジトリー」
を選択します。
21
© 2015 IBM Corporation
11.リポジトリの管理画⾯が表示されます。
変更内容のリストに、先程編集した public/index.html があることを確認してください。
public/html を展開すると修正前/修正後のコードを確認できます。
22
© 2015 IBM Corporation
12.ここでは、すべての変更内容をリポジトリに記録させましょう。
「すべて選択」をチェックし、コミットメッセージを⼊⼒した上で、「コミット」をクリックします。
23
© 2015 IBM Corporation
13.発信リストにコミットした内容が追加されています。
「プッシュ」をクリックすると、コミット内容が反映され、そのままBluemixにデプロイされます。
24
© 2015 IBM Corporation
13.デプロイの状況は「BUILD & DEPLOY」で確認できます。
お疲れ様でした！
BluemixとIDS(IBM Bluemix DevOps Services)を連携させることで、
ソースコードの編集からバージョン管理といった開発作業から環境構築、実⾏まで
すべてWebブラウザから⾏うことができることを体験していただきました。
25
© 2015 IBM Corporation
IBM Cloud Software
IBM Bluemix基本操作
IDSと連携したアプリケーション開発
Node-REDでIoTアプリの作成
Node-REDでWeb APIを活用したアプリを動かす
まとめ : API活用によるアプリ開発とIBM Bluemix
26
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■全体像
サービス
IoT Foundationサービスは
センサーデータを仲介する
IBM IoT
Foundation
デバイス
IBM Bluemix
スマホのセンサーで計測した
データをクラウドサービスに送信
27
アプリケーション
アプリはサービスからセンサー
データを取得して処理する
© 2015 IBM Corporation
IBM Cloud Software
IoT Foundation環境の作成
■Bluemixの米国のデータセンターを使用します。
右上部の「地域」をクリックし、「米国南部」を選択。
もし「スペースの作成」というウィンドウが
表示された場合は、任意の名前(dev等)を
指定してスペースを作成してください。
■上部メニューから「カタログ」をクリック。
■最上段の「ボイラープレート」カテゴリの中から
「Internet of Things Foundation Starter」
を選択。
28
© 2015 IBM Corporation
IBM Cloud Software
IoT Foundation環境の作成
■アプリ名とホスト名を⼊⼒します。
実際にはアプリ名を⼊⼒フィールドに⼊れると、ホスト名も同じ名前が指定されます。
既に同じ名前のホストが存在する場合エラーとなりますので、他の人と重複しなそうな
名前を指定してください。 例 : IoTserver2015xx など。
■「作成」ボタンをクリックすると、IoT Foundationの環境作成が始まります。
完了までしばらくお待ちください。
29
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■スマートフォンをお持ちの方は、スマホのブラウザで下記URLに
アクセスしてください。
http://phonesensor.mybluemix.net
PhoneSensorが起動します。スマホに内蔵された各種センサーの
情報を取得し、BluemixのIoT Foundationサービスに送信して
います。
■このセンサー情報を受け取って処理するアプリをBluemix上の
Node-REDで作ってみましょう。
Bluemixのダッシュボードから、先程作成したボイラープレートの
アプリのURLを開き、Node-REDを起動します。
直接WebブラウザでURLを
指定して開いてもOKです。
右の例の場合はこちらのURLです。
http://IoTServer2015xx.mybluemix.net
30
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■Node-REDが起動します。
Sheet 1にサンプルのフローが用意されていますが、これは使用しないので別シートを追加します。
上部の「+」（プラス）ボタンをクリックします。
Sheet 2が開きますので、ここで処理フローを作成してみましょう。
31
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■スマホのセンサー情報を、クラウド上のIoT Foundation
サービスから受け取ってみましょう。
左側のパレットから「ibmiot」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。
Authentication は「Quickstart」を選択。
Device Id に先程のPhoneSensorに表示されている
⽂字列の末尾12桁の数字を⼊⼒。
32
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■受け取ったデータを表示するノードを用意します。
左側のパレットから「debug」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ドラッグ＆ドロップ
■ノードの横にあるコネクタをクリック＆ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。
この部分を掴んで引っ張る
33
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■これでデータの⼊⼒と出⼒の定義ができました。
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。
（この文字はすぐに消えます）
■実⾏結果を確認してみましょう。
右上の「debug」タブを選択します。debugノードに流れて
きたデータはここに表示されます。
先程のPhoneSensorを動かします。スマホのセンサー情報が
debug画面に表示されれば成功です。
取得できる情報はスマホの機種によって
異なる場合があります。
34
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■debug画面にセンサーデータがうまく表示されない場合のチェックポイント
-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが
停止していないでしょうか。
-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。
例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが
「Disconnected」になります。
-「ibmiot」ノードのDevice Idが
正しく設定されているかどうかを
ご確認ください。
例えば、スマホのWebブラウザで
PhoneSensorを再読み込みすると
Device Idが変わってしまいます。
その場合は再度「ibmiot」ノードの
定義情報をPhoneSensor側と
同じになるよう変更してください。
35
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作ってみましょう。
「tiltLR」というデータ項目に着目します。
これはスマホ端末の左右の傾きを測定しているようです。
実際に端末を動かして、値の変化を確認してください。
この傾き度合いによって表⽰メッセージを変えてみましょう。
■センサー情報から「tiltLR」の値だけを抽出します。
左側のパレットから「function」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ダブルクリックで設定画面を開き、Functionの内容を
以下のように書き換えて「OK」をクリックします。
return {payload:msg.payload.d.tiltLR};
36
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■正しく動くかどうか確認してみましょう。
「ibmiot」と「debug」との間に、今作成した
「function」ノードを挟むように線を繋ぎ変えます。
線はクリックで選択した状態でDeleteキーで
削除できます。
■右上の「Deploy」ボタンをクリックします。
■不要な情報が削除されて、「tiltLR」の値だけが
表示されればOKです。
37
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■「tiltLR」の値によって処理を分岐させます。
左側のパレットから「switch」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ダブルクリックで設定画面を開き、分岐条件を指定します。
左に5度以上傾いた場合＝「左に傾いてます」
右に5度以上傾いた場合＝「右に傾いてます」
傾きが5度未満の場合＝「ほぼフラットです」
上記のような条件設定をするには
右図のように指定して「OK」を
クリックします。
条件を追加するには、「+rule」
ボタンをクリックします。
傾きが-5度以上(左)なら1番へ
傾きが5度以上(右)なら2番へ
どちらでもない(フラット)なら3番へ
38
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■条件分岐された後の処理を作成します。
左側のパレットから「template」ノードを中央のキャンバスに
ドラッグ＆ドロップします。
ダブルクリックで設定画面を開き、表示するメッセージを定義します。
ご自由にメッセージの内容を⼊⼒してください。
{{payload}} と指定すると、先程debug
画面で確認した傾きデータの値が表示
されます。
1番(左)
2番(右)
3番(フラット)
同様に2番、3番のノードも作成し、
それぞれメッセージを定義します。
最後にswitchノードのコネクタと
1番、2番、3番のノードを線で繋げます。
39
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■キャンバスの中を整理して、各ノードを以下の図のように接続してください。
正しく線が繋がっていれば、ノード自体は
キャンバス内のどこに置かれていても動作
に影響はありません。
■処理フローが完成しました！
それでは実際に動かしてみましょう。
右上の「Deploy」ボタンをクリックします。
40
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでIoTアプリを作成
■「Successfully Deployed」のメッセージが表示されれば
成功です。
PhoneSensorを稼動させたスマホを左右に傾けて
指定したメッセージが表示されることを確認してください。
お疲れ様でした！
IBM Bluemix と Node-RED によって、ほぼノンプログラミングで
IoTデバイスから収集したデータを処理するアプリが作れました。
41
© 2015 IBM Corporation
IBM Cloud Software
IBM Bluemix基本操作
IDSと連携したアプリケーション開発
Node-REDでIoTアプリの作成
Node-REDでWeb APIを活用したアプリを動かす
まとめ : API活用によるアプリ開発とIBM Bluemix
42
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでWeb APIを活用したアプリを動かす
■Node-REDは作成したフローをJSON形式の⽂字列としてexport/importすることができます。
あらかじめ作成済みの処理フローをde-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","compl
ete":"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"]]}]
43
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでWeb APIを活用したアプリを動かす
■Node-REDでシートを追加します。
上部の「+」（プラス）ボタンをクリックして、Sheet 3 を開きます。
■Sheet 3 に先程コピーした処理フローを取り込みます。
上部右端の三本線のアイコンをクリックし、表示されたメニューから「import」→「Clipboard」を
選択します。
44
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでWeb APIを活用したアプリを動かす
■「Import nodes」ウィンドウが表示されるので、
先程クリップボードにコピーしたテキストをペースト
して、OKボタンをクリックします。
■処理フローが取り込まれますので、キャンバスの適当な場所をクリックして配置します。
45
© 2015 IBM Corporation
IBM Cloud Software
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 にアクセスします。
46
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでWeb APIを活用したアプリを動かす
■Node-REDで作ったサンプルアプリ「筑波大学はココ！」が表示されればOKです。
地図上の筑波大学のキャンパスにマーカーが表示され、マウスポインタを合わせると
大学の住所が表示されます。
47
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでWeb APIを活用したアプリを動かす
■debug画面に、リクナビ進学APIを呼び出した結果が表示されていることを確認してください。
緯度経度や住所以外にも様々な情報が取得できています。
このようにクラウドで公開されている外部のAPIを呼び出すことで、アプリの機能を拡張できます
48
© 2015 IBM Corporation
IBM Cloud Software
Node-REDでWeb APIを活用したアプリを動かす
■試してみましょう
リクナビ進学APIに対してリクエストする内容を変えてみましょう。
■「リクナビAPI呼び出し」ノードをダブルクリックして構成画面を開きます。
■URL欄の「code=SC000059」の部分を「code=SC000006」と変更して「OK」をクリック。
SC000006は茨城大学の学校コードです。
時間のある方は、
SC000192 : 関⻄⼤学
SC000491 : 日本大学
なども試して結果を確認してみましょう。
■デプロイして結果を⾒てみましょう。
右上の「Deploy」ボタンをクリックします。
「筑波大学はココ！」をWebブラウザで再読み込みすると、実⾏結果はどう変わるでしょうか？
49
© 2015 IBM Corporation
IBM Cloud Software
IBM Bluemix基本操作
IDSと連携したアプリケーション開発
Introduction to Cloud Foundry
Node-REDでWeb APIを活用したアプリを動かす
まとめ : API活用によるアプリ開発とIBM Bluemix
50
© 2015 IBM Corporation
IBM Cloud Software
API活用によるアプリ開発とIBM Bluemix
■「筑波大学はココ！」アプリはBluemix環境のNode-RED上で稼動しています。
地図はGoogle Maps APIを、⼤学の住所および緯度経度の情報はリクナビ進学APIを
呼び出して統合し、Webブラウザ上に表示しています。
IBM Bluemix
筑波大学はココ！
アプリ
51
Google
Maps API
リクナビ
進学API
© 2015 IBM Corporation
IBM Cloud Software
IBM Bluemix活用
-必要なときに必要なコンピュータをインターネット経由で利⽤。
-イチからすべて自分で作らなくていい。 所有しなくていい。
-すぐに利⽤できてアプリの機能を拡張できるAPIが揃っている。
BluemixはAPIを活用した
クラウド時代のアプリ開発に
最適なプラットフォーム
52
© 2015 IBM Corporation
IBM Cloud Software
THANK YOU!
53
© 2015 IBM Corporation
Empowering the IBM ecosystem
Bluemix User Group - BMXUG（ビーザグ）
Bluemixのユーザー会が発足しました！
ぜひご参加ください！
BMXUGはユーザー様主体、有志によって運営される
情報交換・ネットワーキングの場です
© 2015 IBM Corporation
Empowering the IBM ecosystem
BMXUGへの参加方法
で「グループに参加」
http://ibm.biz/bmxug-facebook
で「コミュニティに参加」
http://bmxug.doorkeeper.jp
© 2015 IBM Corporation
IBM Bluemix Challenge 2015
IBM Bluemixを使用したアプリ開発コンテスト
米国 IBM Watson研究所ご招待、Oculus Rift など多数の副賞
コンテストの詳細はこちら
参加者特典として、参加者のフリートライアル期間を延⻑
ibm.biz/BMcontest
ぜひご参加ください!!
http://ibm.biz/bmcontest
一般部門：応募締切 7月24日(⾦)
学生部門：応募締切 8月20日 (木)
新しい未来を予感できる、アプリやサービス
（学生の参加も可能）
コネクテッド・ビークル または モビリティ／トラン
ス ポーテーションを支えるアプリ
(応募資格： 大学生／大学院生限定)
特典：Bluemix無償利⽤ 90日提供
副賞：Watson研究所ご招待、
Oculus Rift、他
特典：Bluemix無償利⽤ 120日提供
Watson研究所ご招待
© 2015 IBM Corporation