イノベート・ハブ九州 bluemix勉強会#3
TRANSCRIPT
IBM Bluemixwww.bluemix.net
Bluemix 勉強会 #3@ ヌーラボ福岡オフィス
【イノベート・ハブ九州】
2016 年 7 月 6 日日本アイ・ビー・エム株式会社クラウド事業統括
© 2016 IBM Corporation2
IBM Bluemixwww.bluemix.net
本日の内容Bluemix 概要(復習)Node-RED から外部 API を呼び出すNode-RED で位置情報付きツイートを地図上に表示させるNode-RED でデータ保管方法 / 読み込み方法Node-RED ハマリがちな罠おわりに
Node-RED を使った外部 API 連携やデータ保管方法など基本的なアプリ開発手法を習得する
© 2016 IBM Corporation3
IBM Bluemixwww.bluemix.net
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
© 2016 IBM Corporation8
IBM Bluemixwww.bluemix.net
Node-RED から外部 API を呼び出す
© 2016 IBM Corporation9
IBM Bluemixwww.bluemix.net
API Key の取得 以下のリンクより Google Maps の API Key を取得してください。
https://code.google.com/apis/console
© 2016 IBM Corporation10
IBM Bluemixwww.bluemix.net
API Key の取得 新規プロジェクトを作成します。
任意のプロジェクト名を入力
© 2016 IBM Corporation11
IBM Bluemixwww.bluemix.net
Google Static Maps API を有効化 Google Static Maps API を選択します。
© 2016 IBM Corporation12
IBM Bluemixwww.bluemix.net
Google Static Maps API を有効化 Google Static Maps API を有効化します。
© 2016 IBM Corporation13
IBM Bluemixwww.bluemix.net
Google Maps Java Script API キーの生成 Google Static Maps API キーが生成されます。
© 2016 IBM Corporation14
IBM Bluemixwww.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
© 2016 IBM Corporation15
IBM Bluemixwww.bluemix.net
Node-RED から REST API を呼び出す 次に、 Node-RED から Google Static Maps API を呼び出します。
<html><head><title> 福岡市マップ </title></head><body><font size="6"> 福岡市マップ </font><br>powered by IBM Bluemix and Node-RED<p><img src="https://maps.googleapis.com/maps/api/staticmap?center=Fukuoka&size=800x400&sensor=false&key=<Google Static Maps API Key>"/></p></body></html>
© 2016 IBM Corporation16
IBM Bluemixwww.bluemix.net
Node-RED から REST API を呼び出す 以下の URL でブラウザから表示されるか確認する
http://< アプリ名 >.mybluemix.net/map
© 2016 IBM Corporation17
IBM Bluemixwww.bluemix.net
Node-RED で位置情報付きツイートを地図上に表示させる
© 2016 IBM Corporation18
IBM Bluemixwww.bluemix.net
今回開発するアプリ Worldmap ノードを使い Node-RED で位置情報付きツイートを地図上に表示させる
アプリを開発します。 Worldmap ノード等のユーザー・インターフェスを取り扱うノードを使えば、 HTML で作成する必要がありません。
© 2016 IBM Corporation19
IBM Bluemixwww.bluemix.net
全体フロー
© 2016 IBM Corporation20
IBM Bluemixwww.bluemix.net
IoT Platform Starter をデプロイする
Internet of Things Platform Starter
© 2016 IBM Corporation21
IBM Bluemixwww.bluemix.net
IoT Platform Starter をデプロイする アプリの名前を付けて作成ボタンをクリックすればデプロイが開始します。
© 2016 IBM Corporation22
IBM Bluemixwww.bluemix.net
Git リポジトリーの作成 GIT の追加より Git リポジトリーを作成します。
© 2016 IBM Corporation23
IBM Bluemixwww.bluemix.net
コードの編集を開始するコードの編集をクリックします。
© 2016 IBM Corporation24
IBM Bluemixwww.bluemix.net
Worldmap ノードを追加する Worldmap ノードを利用するために package.json に “ node-red-contrib-web-
worldmap”:“0.x” を追加し、 git ボタンをクリックします。
“node-red-contrib-web-worldmap”:“0.x”
© 2016 IBM Corporation25
IBM Bluemixwww.bluemix.net
コード編集のコミットコードの編集内容をコミットした後、プッシュします。
© 2016 IBM Corporation26
IBM Bluemixwww.bluemix.net
ビルド&デプロイする BUILD & DEPLOY します。
© 2016 IBM Corporation27
IBM Bluemixwww.bluemix.net
Node-RED アプリの再始動ダッシュボードより、 Node-RED アプリが起動していることを確認します。
© 2016 IBM Corporation28
IBM Bluemixwww.bluemix.net
新規フローの作成 Node-RED Editor をオープンして、あらかじめ登録されているサンプル・フロー
( Flow 1 )とは別パレットに新規フロー( Flow 2 )を作成します。
© 2016 IBM Corporation29
IBM Bluemixwww.bluemix.net
全体フロー
①Twitter ノード ②Switch ノード ③Switch ノード
④Switch ノード
⑤Function ノード
⑥Function ノード
⑦Websocket out ノード
⑧worldmap ノード
© 2016 IBM Corporation30
IBM Bluemixwww.bluemix.net
①Twitter ノード ツイート情報を集集するノードを準備します。「 twitter 」ノード をダブルクリック
して、次のように設定をします。 Twitter ID: 自身の Twitter の ID (認証連携済み) Search: all public tweets ( すべての世の中のつぶやき ) を選択 for: 取得したいキーワード(ここでは、 IBM ) Name: ノード名 ( ここでは、 Get tweets)
© 2016 IBM Corporation31
IBM Bluemixwww.bluemix.net
(補足) Twitter Credential 情報の追加方法 Twitter ノードを追加して、 Credential 情報を追加します。 Twitter アカウントとの
連携が正常に完了すると” Authorised - you can close this window and return to Node-RED” と表示されます。 Twitter ID を確認して Add をクリックしてください。
© 2016 IBM Corporation32
IBM Bluemixwww.bluemix.net
②Switch ノード ツイートをチェックするノードを準備します。 Location 情報が含まれるツイートの
み「 1 」に進みます。
© 2016 IBM Corporation33
IBM Bluemixwww.bluemix.net
③Switch ノード ツイートをチェックするノードを準備します。 Lat ( latitude: 緯度)情報が含まれ
るツイートのみ「 1 」に進みます。
© 2016 IBM Corporation34
IBM Bluemixwww.bluemix.net
④Switch ノード ツイートをチェックするノードを準備します。 Lon ( longitude: 緯度)情報が含ま
れるツイートのみ「 1 」に進みます。
© 2016 IBM Corporation35
IBM Bluemixwww.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;
© 2016 IBM Corporation36
IBM Bluemixwww.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;
© 2016 IBM Corporation37
IBM Bluemixwww.bluemix.net
⑦Websocket out ノード worldmap ノードが表示したブラウザに WebSocket経由で地図操作処理を送るため、 WebSocket ノードを配置します。 WebSocket ノードに設定する URL は /ws/worldmap です。
© 2016 IBM Corporation38
IBM Bluemixwww.bluemix.net
⑧Worldmap ノード Node-RED の開発画面の左側のパレットから、 worldmap ノードをフロー画面に配
置するのみで、地図を表示する URL(http://< アプリ名 >.mybluemix.net/worldmap) にアクセスできる様になります。
© 2016 IBM Corporation39
IBM Bluemixwww.bluemix.net
フローをつなげる 出来上がった各ノードをつなげて、右上の Depoy をクリックすれば完成です ! エ
ラーが出ていないことを確認してください。
https://ibm.biz/Bd4NRZ
© 2016 IBM Corporation40
IBM Bluemixwww.bluemix.net
動作確認 地図を表示する URL(http://< アプリ名 >.mybluemix.net/worldmap) にアクセス
し、位置情報付きツイートが地図上に表示させることを確認してください。
https://ibm.biz/Bd4NRZ
© 2016 IBM Corporation41
IBM Bluemixwww.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
© 2016 IBM Corporation42
IBM Bluemixwww.bluemix.net
Node-RED でデータ保管方法 / 読み込み方法
© 2016 IBM Corporation43
IBM Bluemixwww.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/
© 2016 IBM Corporation44
IBM Bluemixwww.bluemix.net
Node-RED ハマリがちな罠
© 2016 IBM Corporation45
IBM Bluemixwww.bluemix.net
参考 URL Node-RED ハマリがちな罠
http://qiita.com/joeartsea/items/3bf1fa22e088640c7624
© 2016 IBM Corporation46
IBM Bluemixwww.bluemix.net
おわりに
© 2016 IBM Corporation47
IBM Bluemixwww.bluemix.net
この資料に含まれる情報は可能な限り正確を期しておりますが、日本アイ・ビー・エム株式会社の正式なレビューを受けておらず、当資料に記載された内容に関して日本アイ・ビー・エム株式会社は何ら保証するものではありません。従って、この情報の利用またはこれらの技法の実施はひとえに使用者の責任において為されるものであり、資料の内容によって受けたいかなる被害に関しても一切の補償をするものではありません。また、IBM、IBMロゴおよび ibm.com は、世界の多くの国で登録された International Business Machines Corporation の商標です。他の製品名およびサービス名等は、それぞれIBMまたは各社の商標である場合があります。現時点でのIBMの商標リストについては、 www.ibm.com/legal/copytrade.shtml をご覧ください。当資料をコピー等で複製することは、日本アイ・ビー・エム株式会社および執筆者の承諾なしではできません。また、当資料に記載された製品名または会社名はそれぞれの各社の商標または登録商標です。
ご注意