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

IBM Bluemixwww.bluemix.net

Bluemix 勉強会 #3@ ヌーラボ福岡オフィス

【イノベート・ハブ九州】

2016 年 7 月 6 日日本アイ・ビー・エム株式会社クラウド事業統括

© 2016 IBM Corporation2


本日の内容Bluemix 概要（復習）Node-RED から外部 API を呼び出すNode-RED で位置情報付きツイートを地図上に表示させるNode-RED でデータ保管方法 / 読み込み方法Node-RED ハマリがちな罠おわりに

Node-RED を使った外部 API 連携やデータ保管方法など基本的なアプリ開発手法を習得する



Bluemix 概要

IBMクラウド

APIエコノミー SaaSPaaS

IaaS

・・・

・オープンソースで構築されたインフラ・レガシーに相性のいい高性能なベアメタルも・ 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



Node-RED から外部 API を呼び出す



API Key の取得以下のリンクより Google Maps の API Key を取得してください。

https://code.google.com/apis/console






API Key の取得新規プロジェクトを作成します。

任意のプロジェクト名を入力



Google Static Maps API を有効化 Google Static Maps API を選択します。



Google Static Maps API を有効化 Google Static Maps API を有効化します。



Google Maps Java Script API キーの生成 Google Static Maps API キーが生成されます。



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



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>



Node-RED から REST API を呼び出す以下の URL でブラウザから表示されるか確認する

http://< アプリ名 >.mybluemix.net/map



Node-RED で位置情報付きツイートを地図上に表示させる



今回開発するアプリ Worldmap ノードを使い Node-RED で位置情報付きツイートを地図上に表示させる

アプリを開発します。 Worldmap ノード等のユーザー・インターフェスを取り扱うノードを使えば、 HTML で作成する必要がありません。



全体フロー



IoT Platform Starter をデプロイする

Internet of Things Platform Starter



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



Git リポジトリーの作成 GIT の追加より Git リポジトリーを作成します。



コードの編集を開始するコードの編集をクリックします。



Worldmap ノードを追加する Worldmap ノードを利用するために package.json に “ node-red-contrib-web-

worldmap”:“0.x” を追加し、 git ボタンをクリックします。

“node-red-contrib-web-worldmap”:“0.x”



コード編集のコミットコードの編集内容をコミットした後、プッシュします。



ビルド＆デプロイする BUILD & DEPLOY します。



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



新規フローの作成 Node-RED Editor をオープンして、あらかじめ登録されているサンプル・フロー

（ Flow 1 ）とは別パレットに新規フロー（ Flow 2 ）を作成します。



全体フロー

①Twitter ノード ②Switch ノード ③Switch ノード

④Switch ノード

⑤Function ノード

⑥Function ノード

⑦Websocket out ノード

⑧worldmap ノード



①Twitter ノードツイート情報を集集するノードを準備します。「 twitter 」ノードをダブルクリック

して、次のように設定をします。 Twitter ID: 自身の Twitter の ID （認証連携済み） Search: all public tweets ( すべての世の中のつぶやき ) を選択 for: 取得したいキーワード（ここでは、 IBM ） Name: ノード名 ( ここでは、 Get tweets)



（補足） Twitter Credential 情報の追加方法 Twitter ノードを追加して、 Credential 情報を追加します。 Twitter アカウントとの

連携が正常に完了すると” Authorised - you can close this window and return to Node-RED” と表示されます。 Twitter ID を確認して Add をクリックしてください。



②Switch ノードツイートをチェックするノードを準備します。 Location 情報が含まれるツイートの

み「 1 」に進みます。



③Switch ノードツイートをチェックするノードを準備します。 Lat （ latitude: 緯度）情報が含まれ

るツイートのみ「 1 」に進みます。



④Switch ノードツイートをチェックするノードを準備します。 Lon （ longitude: 緯度）情報が含ま

れるツイートのみ「 1 」に進みます。



⑤Function ノード Function ノードを準備します。 WebSocket ノードへ、移動先の緯度経度を含む

JSON データを送るだけで、地図の中心が移動できます。同時に zoom の値を変えることで拡大縮小できます。 layer の値を変えることで表示する地図も変更できます。

msg.payload = { command:{ layer:"Esri Terrain", lat: msg.location.lat, lon: msg.location.lon, zoom:3 }};return msg;



⑥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;



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



⑧Worldmap ノード Node-RED の開発画面の左側のパレットから、 worldmap ノードをフロー画面に配

置するのみで、地図を表示する URL(http://< アプリ名 >.mybluemix.net/worldmap) にアクセスできる様になります。



フローをつなげる出来上がった各ノードをつなげて、右上の Depoy をクリックすれば完成です ! エ

ラーが出ていないことを確認してください。

https://ibm.biz/Bd4NRZ



動作確認地図を表示する URL(http://< アプリ名 >.mybluemix.net/worldmap) にアクセス

し、位置情報付きツイートが地図上に表示させることを確認してください。

https://ibm.biz/Bd4NRZ



参考 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

http://qiita.com/zuhito/items/ed5f505edaac2baeadd9

http://qiita.com/zuhito/items/ed5f505edaac2baeadd9

http://qiita.com/zuhito/items/2625c85d35f6289f118b






http://www.ajaxtower.jp/googlemaps/charset/index1.html

http://www.ajaxtower.jp/googlemaps/charset/index1.html





Node-RED でデータ保管方法 / 読み込み方法



参考 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/

http://post-atmospherica.com/post-150/

http://post-atmospherica.com/post-150/






Node-RED ハマリがちな罠



参考 URL Node-RED ハマリがちな罠

http://qiita.com/joeartsea/items/3bf1fa22e088640c7624






おわりに



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

ご注意

Technology

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