itamabi 13　第6回：artsat api 実践 1 web apiから情報を取得する

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/

http://api.artsat.jp/web/

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形式で、ブラウザにデータが表示される

http://api.artsat.jp/web/v2/invader/sensor_data.json

http://api.artsat.jp/web/v2/invader/sensor_data.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‣ データの内容

← リクエストした時間



↑リクエストした時間から一番近い取得可能な時間



← 取得したセンサーの値

WebAPI の値をopenFrameworksに読み込む

ofxJSONをインストール

ofxJSONをインストール‣ Webブラウザで、INVADERのセンサーの値を表示できた‣ この結果を、openFrameworksから利用したい‣ JSONデータにアクセスして、その結果をパース(解析)するための機能が必要

‣ ofxJSON というアドオン(拡張機能)を利用する

ofxJSONをインストール‣ iOSでも利用可能に修正したofxJSONを下記に用意‣ Zip形式でダウンロードする‣ https://github.com/tado/ofxJSON

https://github.com/tado/ofxJSON

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() を使用する


...(中略)...

//--------------------------------------------------------------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のパースに、少し工夫が必要


...(中略)...

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データを画面に表示‣ 完成!!

今日はここまで続きは、来週に!

itamabi 13 第6回：artsat api 実践 1 web apiから情報を取得する

Documents

itamabi 13　第6回：artsat api 実践 1 web apiから情報を取得する