イノベート・ハブ九州 Bluemix勉強会#3

IBM Bluemix
www.bluemix.net
Bluemix勉強会#3
@ヌーラボ福岡オフィス
【イノベート・ハブ九州】
2016年7月6日
日本アイ・ビー・エム株式会社
クラウド事業統括

© 2016 IBM Corporation
2
IBM Bluemix
www.bluemix.net
本日の内容
Bluemix概要（復習）
Node-REDから外部APIを呼び出す
Node-REDで位置情報付きツイートを地図上に表示させる
Node-REDでデータ保管方法/読み込み方法
Node-REDハマリがちな罠
おわりに
Node-REDを使った外部API連携やデータ保管方法など
基本的なアプリ開発手法を習得する

3
IBM Bluemix
www.bluemix.net
Bluemix概要

IBMクラウド
APIエコノミー
SaaSPaaSIaaS
・・・
・オープンソースで構築されたインフラ
・レガシーに相性のいい高性能なベアメタルも
・Fusion ioや3TBメモリーのマシン等々
・グローバルサービスで、日本DCも
・オープンスソースのCloud Foundryベースの
Java、Node.jsやRubyを対応するPaaS
・Docker対応やDevOpsサービスも
・約30秒で実行環境をセットアップが可能
・コンポーザブルな開発環境・エコシステム
・開発者は、構成済みのサービス、ランタイム
などを使ってブロックを組み立てるように手間
少なくアプリやシステム構築が可能に
IBM クラウド概要図

OS
仮想化基盤
アプリケーション
ミドルウェア
(APサーバー/DB/監視 etc…)
ハードウェア
(Server,Storage, Network)
IaaS
ビジネス・プロセス
OS
仮想化基盤
アプリケーション
ミドルウェア
(APサーバー/DB/監視 etc…)
ハードウェア
(Server,Storage, Network)
PaaS
ビジネス・プロセス
IBM SoftLayer IBM Bluemix
クラウドでご提供
開発者はアプリ開発
に専念
アプリの迅速かつ継
続的な提供
オープンなPasS IBM Bluemix

迅速なアプリケーション開発、管理、と実行を実現するクラウド
豊富な「API」「サービス」をご提供
120を超える高品質のサービスでクイックにアプリ開発
1年でAPI,サービス数は約2倍に！強力なパートナーシップ提携も！！
 実行環境
 データベース
 モバイル
 ビッグデータ
 アナリティクス
 Web & アプリケーション
 Watson
 IoT
 インテグレーション
 セキュリティ
 開発支援ツール
新しい顧客体験をもたらすIBM Bluemix

Node-REDの特徴
 ブラウザベース UI
 node.js で動作
• 軽量
 機能をカプセル化してNodeと
して利用
 独自Nodeを作成・追加可能
 Bluemixの様々なサービスを
簡単に利用可能
ハードウェアデバイス，API，オンラインサービスが画期的な
方法で結合された"仮想環境をブラウザ上で実現
7

8
IBM Bluemix
www.bluemix.net
Node-REDから外部APIを呼び出す

9
IBM Bluemix
www.bluemix.net
API Keyの取得
 以下のリンクよりGoogle MapsのAPI Keyを取得してください。
 https://code.google.com/apis/console

10
IBM Bluemix
www.bluemix.net
API Keyの取得
 新規プロジェクトを作成します。
任意のプロジェクト名を入力

11
IBM Bluemix
www.bluemix.net
Google Static Maps APIを有効化
 Google Static Maps APIを選択します。

12
IBM Bluemix
www.bluemix.net
Google Static Maps APIを有効化
 Google Static Maps APIを有効化します。

13
IBM Bluemix
www.bluemix.net
Google Maps Java Script APIキーの生成
 Google Static Maps APIキーが生成されます。

14
IBM Bluemix
www.bluemix.net
APIキーが有効か確認する
 ブラウザに以下のURLを入力し、 Google Static Maps APIキーが有効であることを確
認します。
https://maps.googleapis.com/maps/api/staticmap?center=Fukuoka
&size=800x400&sensor=false&key={取得したAPIキー}
サイズ：{width}x{height}
（必須）
GPS利用有無（必須）中心位置座標（必須）
エンドポイント
ブラウザに地図情報が
表示されればOK

15
IBM Bluemix
www.bluemix.net
Node-REDからREST APIを呼び出す
 次に、Node-REDからGoogle Static Maps APIを呼び出します。
<html>
<head>
<title>福岡市マップ</title>
</head>
<body>福岡市マップ
 powered by IBM Bluemix and Node-RED
<img
src="https://maps.googleapis.com/maps/api/staticmap?
center=Fukuoka&size=800x400&sensor=false&key=<
Google Static Maps API Key>"/>
</body>
</html>

16
IBM Bluemix
www.bluemix.net
Node-REDからREST APIを呼び出す
 以下のURLでブラウザから表示されるか確認する
 http://<アプリ名>.mybluemix.net/map

17
IBM Bluemix
www.bluemix.net
Node-REDで位置情報付き
ツイートを地図上に表示させる

18
IBM Bluemix
www.bluemix.net
今回開発するアプリ
 Worldmapノードを使いNode-REDで位置情報付きツイートを地図上に表示させるア
プリを開発します。Worldmapノード等のユーザー・インターフェスを取り扱うノード
を使えば、HTMLで作成する必要がありません。

19
IBM Bluemix
www.bluemix.net
全体フロー

20
IBM Bluemix
www.bluemix.net
IoT Platform Starterをデプロイする
Internet of Things Platform Starter

21
IBM Bluemix
www.bluemix.net
IoT Platform Starterをデプロイする
 アプリの名前を付けて作成ボタンをクリックすればデプロイが開始します。

22
IBM Bluemix
www.bluemix.net
Gitリポジトリーの作成
 GITの追加よりGitリポジトリーを作成します。

23
IBM Bluemix
www.bluemix.net
コードの編集を開始する
 コードの編集をクリックします。

24
IBM Bluemix
www.bluemix.net
Worldmapノードを追加する
 Worldmapノードを利用するためにpackage.jsonに “node-red-contrib-web-
worldmap”:“0.x”を追加し、gitボタンをクリックします。
“node-red-contrib-web-worldmap”:“0.x”

25
IBM Bluemix
www.bluemix.net
コード編集のコミット
 コードの編集内容をコミットした後、プッシュします。

26
IBM Bluemix
www.bluemix.net
ビルド＆デプロイする
 BUILD & DEPLOYします。

27
IBM Bluemix
www.bluemix.net
Node-REDアプリの再始動
 ダッシュボードより、Node-REDアプリが起動していることを確認します。

28
IBM Bluemix
www.bluemix.net
新規フローの作成
 Node-RED Editorをオープンして、あらかじめ登録されているサンプル・フロー（
Flow 1）とは別パレットに新規フロー（Flow 2）を作成します。

29
IBM Bluemix
www.bluemix.net
全体フロー
①Twitterノード ②Switchノード ③Switchノード
④Switchノード
⑤Functionノード
⑥Functionノード
⑦Websocket outノード
⑧worldmapノード

30
IBM Bluemix
www.bluemix.net
①Twitterノード
 ツイート情報を集集するノードを準備します。「twitter」ノードをダブルクリックし
て、次のように設定をします。
 Twitter ID: 自身のTwitterのID（認証連携済み）
 Search: all public tweets (すべての世の中のつぶやき)を選択
 for: 取得したいキーワード（ここでは、IBM）
 Name: ノード名 (ここでは、Get tweets)

31
IBM Bluemix
www.bluemix.net
（補足）Twitter Credential情報の追加方法
 Twitterノードを追加して、Credential情報を追加します。Twitterアカウントとの連携
が正常に完了すると” Authorised - you can close this window and return to
Node-RED”と表示されます。Twitter IDを確認してAddをクリックしてください。

32
IBM Bluemix
www.bluemix.net
②Switchノード
 ツイートをチェックするノードを準備します。Location情報が含まれるツイートのみ
「1」に進みます。

33
IBM Bluemix
www.bluemix.net
③Switchノード
 ツイートをチェックするノードを準備します。Lat（latitude: 緯度）情報が含まれるツ
イートのみ「1」に進みます。

34
IBM Bluemix
www.bluemix.net
④Switchノード
 ツイートをチェックするノードを準備します。Lon（longitude: 緯度）情報が含まれ
るツイートのみ「1」に進みます。

35
IBM Bluemix
www.bluemix.net
⑤Functionノード
 Functionノードを準備します。WebSocketノードへ、移動先の緯度経度を含むJSON
データを送るだけで、地図の中心が移動できます。同時にzoomの値を変えることで拡
大縮小できます。layerの値を変えることで表示する地図も変更できます。
msg.payload = {
command:{
layer:"Esri Terrain",
lat: msg.location.lat,
lon: msg.location.lon,
zoom:3
}
};
return msg;

36
IBM Bluemix
www.bluemix.net
⑥Functionノード
 WebSocketノードに、緯度経度を含むJSONデータを送るだけでブラウザ上にピンを配
置できます。ここではTwitterノードから取得した緯度 lat、経度lonの値を
msg.payloadのJSONデータに代入しています。iconやiconColorでピンの種類を設定
できます。
var output = {
lat: msg.location.lat,
lon: msg.location.lon,
place: msg.location.place,
tweet: msg.payload,
name: msg.tweet.user.name,
icon: "globe",
iconColor: "orange"
};
msg.payload = output;
return msg;

37
IBM Bluemix
www.bluemix.net
⑦Websocket outノード
 worldmapノードが表示したブラウザにWebSocket経由で地図操作処理を送るため、
WebSocketノードを配置します。WebSocketノードに設定するURLは/ws/worldmap
です。

38
IBM Bluemix
www.bluemix.net
⑧Worldmapノード
 Node-REDの開発画面の左側のパレットから、worldmapノードをフロー画面に配置す
るのみで、地図を表示するURL(http://<アプリ名>.mybluemix.net/worldmap)にア
クセスできる様になります。

39
IBM Bluemix
www.bluemix.net
フローをつなげる
 出来上がった各ノードをつなげて、右上のDepoyをクリックすれば完成です!エラーが
出ていないことを確認してください。
https://ibm.biz/Bd4NRZ

40
IBM Bluemix
www.bluemix.net
動作確認
 地図を表示するURL(http://<アプリ名>.mybluemix.net/worldmap)にアクセスし、
位置情報付きツイートが地図上に表示させることを確認してください。
https://ibm.biz/Bd4NRZ

41
IBM Bluemix
www.bluemix.net
参考URL
 1分で実装！Node-REDでREST API呼び出し
 http://qiita.com/zuhito/items/ed5f505edaac2baeadd9
 GoogleMaps APIより簡単！Node-REDで位置情報付きツイートを地図上に表示
 http://qiita.com/zuhito/items/2625c85d35f6289f118b
 Google Static Maps APIの使い方まとめ！画像地図を作ろう
 https://syncer.jp/how-to-use-google-static-maps-api
 Google Maps APIの基本
 http://www.ajaxtower.jp/googlemaps/charset/index1.html
 Node-REDでTwitterデータ取得・表示
 https://syncer.jp/how-to-use-google-static-maps-api

42
IBM Bluemix
www.bluemix.net
Node-REDでデータ保管方法/読み込み方法

43
IBM Bluemix
www.bluemix.net
参考URL
 [Bluemix] Node-REDからCloudantを使ってみた。基本的な使い方。
 http://post-atmospherica.com/post-150/
 Searching a Cloudant DB search index with Node-Red
 https://blog.balfes.net/2015/10/23/searching-a-cloudant-db-search-index-with-
node-red/

44
IBM Bluemix
www.bluemix.net
Node-REDハマリがちな罠

45
IBM Bluemix
www.bluemix.net
参考URL
 Node-REDハマリがちな罠
 http://qiita.com/joeartsea/items/3bf1fa22e088640c7624

46
IBM Bluemix
www.bluemix.net
おわりに

47
IBM Bluemix
www.bluemix.net
この資料に含まれる情報は可能な限り正確を期しておりますが、日本アイ・ビー・エム株式会社の正式なレビューを受けておらず、当資
料に記載された内容に関して日本アイ・ビー・エム株式会社は何ら保証するものではありません。
従って、この情報の利用またはこれらの技法の実施はひとえに使用者の責任において為されるものであり、資料の内容によって受けたい
かなる被害に関しても一切の補償をするものではありません。
また、ＩＢＭ、ＩＢＭロゴおよびibm.comは、世界の多くの国で登録されたInternational Business Machines Corporationの商標です。
他の製品名およびサービス名等は、それぞれＩＢＭまたは各社の商標である場合があります。現時点でのＩＢＭの商標リストについては、
www.ibm.com/legal/copytrade.shtmlをご覧ください。
当資料をコピー等で複製することは、日本アイ・ビー・エム株式会社および執筆者の承諾なしではできません。また、当資料に記載され
た製品名または会社名はそれぞれの各社の商標または登録商標です。
ご注意

イノベート・ハブ九州 Bluemix勉強会#3

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (20)

Similar to イノベート・ハブ九州 Bluemix勉強会#3

Similar to イノベート・ハブ九州 Bluemix勉強会#3 (20)

Recently uploaded

Recently uploaded (9)

イノベート・ハブ九州 Bluemix勉強会#3