Post on 04-Jun-2015
iTamabi 13 第6回：ARTSAT API 実践 1Web APIから情報を取得する2013年10月21日多摩美術大学 PBL科目担当：田所 淳
今日の内容‣ ARTSAT Web API を利用して、各種センサーの情報を取得‣ 取得するのは、ARTSAT Projectの第一弾衛星、INVADERのシミュレーションデータ
ARTSAT WebAPI
ARTSAT WebAPI‣ ARTSAT WebAPI - Web経由でARTSATの情報を取得可能‣ http://api.artsat.jp/web/
{ "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",
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", "unit": "rad/s", "value": -0.0011949767 }, "ay": { "type": "float",
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",
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",
ARTSAT WebAPI‣ データの内容
← 取得したセンサーの値
WebAPI の値をopenFrameworksに読み込む
ofxJSONをインストール
ofxJSONをインストール‣ Webブラウザで、INVADERのセンサーの値を表示できた‣ この結果を、openFrameworksから利用したい‣ JSONデータにアクセスして、その結果をパース(解析)するための機能が必要
‣ ofxJSON というアドオン(拡張機能)を利用する
ofxJSONをインストール‣ iOSでも利用可能に修正したofxJSONを下記に用意‣ Zip形式でダウンロードする‣ https://github.com/tado/ofxJSON
ofxJSONをインストール‣ ofxJSON-masterのZipファイルを解凍し、addons/ 以下に
新規プロジェクトの作成
WebAPI の値をopenFrameworksに読み込む‣ 新規プロジェクトを作成‣ apps/myApps/emptyExample をフォルダごとコピー
WebAPI の値をopenFrameworksに読み込む‣ 作成したプロジェクトをXcodeで開く‣ 「addons」を右クリック → 「Add files...」を選択
WebAPI の値をopenFrameworksに読み込む‣ addons/ofxJSON を選択
WebAPI の値をopenFrameworksに読み込む‣ 「src 」と「lib」フォルダ以外は削除‣ 下記のような、ファイル構成に
JSONファイルを読み込んでみる
JSONファイルを読み込んでみる‣ 作成したプロジェクトに、INVADERのJSONデータを読み込んでみる
‣ とても簡単!!
#pragma once
#include "ofMain.h"#include "ofxiOS.h"#include "ofxiOSExtras.h"#include "ofxJSONElement.h"
class testApp : public ofxiOSApp{ public: void setup(); void update(); void draw(); void exit(); ...(中略)... ofxJSONElement response;};
JSONファイルを読み込んでみる‣ testApp.h
← 追加
← 追加
#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; }}
...
JSONファイルを読み込んでみる‣ testApp.mm
JSONファイルを読み込んでみる‣ ビルドして実行‣ Xcodeのコンソール(画面下)に、JSONデータが表示される
JSONデータを画面に表示
JSONデータを画面に表示‣ JSONデータをopenFrameworksのプログラムに読み込むことができた
‣ 次に画面にデータを表示したい‣ まず手始めに、取得したJSONの文字列をそのまま画面に表示してみる
‣ ofDrawBitmapString() を使用する
#include "testApp.h"
...(中略)...
//--------------------------------------------------------------void testApp::draw(){ ofSetColor(63); ofDrawBitmapString(response.getRawString(), 10, 12);}
JSONデータを画面に表示‣ testApp.mm‣ testApp::draw() に下記のプログラムを追加
JSONデータを画面に表示‣ iPhoneの画面にJSONデータが表示される(はず)!
JSONデータをパース(解析)する
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();
...
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);}
JSONデータをパース(解析)する‣ testApp.mm‣ testApp::draw() に下記のプログラムを追加
JSONデータをパース(解析)する‣ それぞれのセンサーの値を、独立して取り出すことが出来た!
‣ あとは、この値をどのように視覚化するか
‣ 続きは次週に!!
参考: センサーの値を全て出力
参考: センサーの値を全て出力‣ センサーの値を全て出力するプログラム‣ JSONのパースに、少し工夫が必要
#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)); }}
JSONデータをパース(解析)する‣ testApp.mm
JSONデータを画面に表示‣ 完成!!
今日はここまで続きは、来週に!