• Like
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
Upcoming SlideShare
Loading in...5
×

iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する

  • 1,093 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,093
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
11
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する 2013年10月21日 多摩美術大学 PBL科目 担当:田所 淳
  • 2. 今日の内容 ‣ ARTSAT Web API を利用して、各種センサーの情報を取得 ‣ 取得するのは、ARTSAT Projectの第一弾衛星、INVADERのシ ミュレーションデータ
  • 3. ARTSAT WebAPI
  • 4. ARTSAT WebAPI ‣ ARTSAT WebAPI - Web経由でARTSATの情報を取得可能 ‣ http://api.artsat.jp/web/
  • 5. ARTSAT WebAPI ‣ INVADERのセンサー情報は、下記のURLから取得できる ‣ http://api.artsat.jp/web/v2/invader/sensor_data.json ‣ JSON形式で、ブラウザにデータが表示される { "results": [{ "interpolated": true, "requested_time_unix": 1382216472, "requested_time_iso_string": "2013-10-20T06:01:12.000+09:00", "closest_available_time_unix": 1382216200, "closest_available_time_iso_string": "2013-10-20T05:56:40.000+09:00", "sensors": { "lat": { "type": "float", "unit": "degrees", "value": -59.82505 }, "lon": { "type": "float", "unit": "degrees", "value": 60.40049 }, "alt": { "type": "float", "unit": "degrees", "value": 463.5504 }, "ax": { "type": "float",
  • 6. ARTSAT WebAPI ‣ データの内容 { "results": [{ "interpolated": true, "requested_time_unix": 1382216472, ← リクエスト "requested_time_iso_string": "2013-10-20T06:01:12.000+09:00", "closest_available_time_unix": 1382216200, した時間 "closest_available_time_iso_string": "2013-10-20T05:56:40.000+09:00", "sensors": { "lat": { "type": "float", "unit": "degrees", "value": -59.82505 }, "lon": { "type": "float", "unit": "degrees", "value": 60.40049 }, "alt": { "type": "float", "unit": "degrees", "value": 463.5504 }, "ax": { "type": "float", "unit": "rad/s", "value": -0.0011949767 }, "ay": { "type": "float",
  • 7. ARTSAT WebAPI ‣ データの内容 { "results": [{ "interpolated": true, "requested_time_unix": 1382216472, "requested_time_iso_string": "2013-10-20T06:01:12.000+09:00", "closest_available_time_unix": 1382216200, "closest_available_time_iso_string": "2013-10-20T05:56:40.000+09:00", "sensors": { "lat": { ↑ "type": "float", "unit": "degrees", リクエストした時間から一番近い "value": -59.82505 }, 取得可能な時間 "lon": { "type": "float", "unit": "degrees", "value": 60.40049 }, "alt": { "type": "float", "unit": "degrees", "value": 463.5504 }, "ax": { "type": "float", "unit": "rad/s", "value": -0.0011949767 }, "ay": { "type": "float",
  • 8. ARTSAT WebAPI ‣ データの内容 { "results": [{ "interpolated": true, "requested_time_unix": 1382216472, "requested_time_iso_string": "2013-10-20T06:01:12.000+09:00", "closest_available_time_unix": 1382216200, "closest_available_time_iso_string": "2013-10-20T05:56:40.000+09:00", "sensors": { "lat": { "type": "float", "unit": "degrees", ← 取得したセンサーの値 "value": -59.82505 }, "lon": { "type": "float", "unit": "degrees", "value": 60.40049 }, "alt": { "type": "float", "unit": "degrees", "value": 463.5504 }, "ax": { "type": "float", "unit": "rad/s", "value": -0.0011949767 }, "ay": { "type": "float",
  • 9. WebAPI の値をopenFrameworksに読み込む
  • 10. ofxJSONをインストール
  • 11. ofxJSONをインストール ‣ Webブラウザで、INVADERのセンサーの値を表示できた ‣ この結果を、openFrameworksから利用したい ‣ JSONデータにアクセスして、その結果をパース(解析)するため の機能が必要 ‣ ofxJSON というアドオン(拡張機能)を利用する
  • 12. ofxJSONをインストール ‣ iOSでも利用可能に修正したofxJSONを下記に用意 ‣ Zip形式でダウンロードする ‣ https://github.com/tado/ofxJSON
  • 13. ofxJSONをインストール ‣ ofxJSON-masterのZipファイルを解凍し、addons/ 以下に
  • 14. 新規プロジェクトの作成
  • 15. WebAPI の値をopenFrameworksに読み込む ‣ 新規プロジェクトを作成 ‣ apps/myApps/emptyExample をフォルダごとコピー
  • 16. WebAPI の値をopenFrameworksに読み込む ‣ 作成したプロジェクトをXcodeで開く ‣ 「addons」を右クリック → 「Add files...」を選択
  • 17. WebAPI の値をopenFrameworksに読み込む ‣ addons/ofxJSON を選択
  • 18. WebAPI の値をopenFrameworksに読み込む ‣ 「src 」と「lib」フォルダ以外は削除 ‣ 下記のような、ファイル構成に
  • 19. JSONファイルを読み込んでみる
  • 20. JSONファイルを読み込んでみる ‣ 作成したプロジェクトに、INVADERのJSONデータを読み込ん でみる ‣ とても簡単!!
  • 21. JSONファイルを読み込んでみる ‣ testApp.h #pragma once #include #include #include #include "ofMain.h" "ofxiOS.h" "ofxiOSExtras.h" "ofxJSONElement.h" ← 追加 class testApp : public ofxiOSApp{ public: void void void void setup(); update(); draw(); exit(); ...(中略)... }; ofxJSONElement response; ← 追加
  • 22. JSONファイルを読み込んでみる ‣ testApp.mm #include "testApp.h" //-------------------------------------------------------------void testApp::setup(){ ofBackground(224); ofSetFrameRate(30); // ARTSAT WebAPIにアクセスしてJSONデータを取得 bool result = response.open("http://api.artsat.jp/web/v2/invader/ sensor_data.json"); // 取得結果をコンソールに出力 if (!result) { // もし取得できなかったら、エラーを出力 cout << "faild to get JSON data!" << endl; } else { // 取得に成功したら、JSONデータを出力 } ... } cout << response.getRawString() << endl;
  • 23. JSONファイルを読み込んでみる ‣ ビルドして実行 ‣ Xcodeのコンソール(画面下)に、JSONデータが表示される
  • 24. JSONデータを画面に表示
  • 25. JSONデータを画面に表示 ‣ JSONデータをopenFrameworksのプログラムに読み込むこと ができた ‣ 次に画面にデータを表示したい ‣ まず手始めに、取得したJSONの文字列をそのまま画面に表示 してみる ‣ ofDrawBitmapString() を使用する
  • 26. JSONデータを画面に表示 ‣ testApp.mm ‣ testApp::draw() に下記のプログラムを追加 #include "testApp.h" ...(中略)... //-------------------------------------------------------------void testApp::draw(){ ofSetColor(63); ofDrawBitmapString(response.getRawString(), 10, 12); }
  • 27. JSONデータを画面に表示 ‣ iPhoneの画面にJSONデータが表示 される(はず)!
  • 28. JSONデータをパース(解析)する
  • 29. JSONデータをパース(解析)する ‣ 取得したJSONデータから、センサーの値をとり出すには? ‣ JSONデータをパース(解析)する必要がある ‣ ofxJSONでは、簡単に分解してデータをとり出せる! ‣ それぞれのデータの値は、以下のようにして取得可能 // “lat”の値をFloat型で取得 response["results"][0]["sensors"]["lat"]["value"].asFloat(); // “lon”の値をFloat型で取得 response["results"][0]["sensors"]["lon"]["value"].asFloat(); // “alt”の値をFloat型で取得 response["results"][0]["sensors"]["alt"]["value"].asFloat(); ...
  • 30. JSONデータをパース(解析)する ‣ testApp.mm ‣ testApp::draw() に下記のプログラムを追加 void testApp::draw(){ ofSetColor(63); int lineHeigt = 15; // JSONデータをパースして、画面に表示 string available_time = response["results"][0] ["closest_available_time_iso_string"].asString(); ofDrawBitmapString(available_time, 10, lineHeigt*1); float lat = response["results"][0]["sensors"]["lat"] ["value"].asFloat(); ofDrawBitmapString("lat = " + ofToString(lat,12), 10, lineHeigt*2); float lon = response["results"][0]["sensors"]["lon"] ["value"].asFloat(); ofDrawBitmapString("lon = " + ofToString(lon,12), 10, lineHeigt*3); float alt = response["results"][0]["sensors"]["alt"] ["value"].asFloat(); ofDrawBitmapString("alt = " + ofToString(alt,12), 10, lineHeigt*4); float ax = response["results"][0]["sensors"]["ax"]["value"].asFloat(); ofDrawBitmapString("ax = " + ofToString(ax,12), 10, lineHeigt*5); float ay = response["results"][0]["sensors"]["ay"]["value"].asFloat(); ofDrawBitmapString("ay = " + ofToString(ay,12), 10, lineHeigt*6); float az = response["results"][0]["sensors"]["az"]["value"].asFloat(); ofDrawBitmapString("az = " + ofToString(az,12), 10, lineHeigt*7); }
  • 31. JSONデータをパース(解析)する ‣ それぞれのセンサーの値を、独立し て取り出すことが出来た! ‣ あとは、この値をどのように視覚化 するか ‣ 続きは次週に!!
  • 32. 参考: センサーの値を全て出力
  • 33. 参考: センサーの値を全て出力 ‣ センサーの値を全て出力するプログラム ‣ JSONのパースに、少し工夫が必要
  • 34. JSONデータをパース(解析)する ‣ testApp.mm #include "testApp.h" ...(中略)... void testApp::draw(){ ofSetColor(63); int lineHeigt = 15; // 取得した時間を表示 string available_time = response["results"][0] ["closest_available_time_iso_string"].asString(); ofDrawBitmapString(available_time, 10, lineHeigt*1); // センサーの全てのメンバー名を取得 ofxJSONElement::Members mem = response["results"][0]["sensors"].getMemberNames(); // メンバーごとにセンサーの値をとりだして、画面に表示 for (int i = 0; i < mem.size(); i++) { string lavel = mem[i]; float value = response["results"][0]["sensors"][mem[i]]["value"].asFloat(); ofDrawBitmapString(lavel + " = " + ofToString(value), 10, lineHeigt * (i + 3)); } }
  • 35. JSONデータを画面に表示 ‣ 完成!!
  • 36. 今日はここまで 続きは、来週に!