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

iTamabi 13
第6回：ARTSAT API 実践 1
Web APIから情報を取得する
2013年10月21日
多摩美術大学 PBL科目
担当：田所淳

今日の内容
‣ ARTSAT Web API を利用して、各種センサーの情報を取得
‣ 取得するのは、ARTSAT Projectの第一弾衛星、INVADERのシ
ミュレーションデータ

ARTSAT WebAPI
‣ ARTSAT WebAPI - Web経由でARTSATの情報を取得可能
‣ http://api.artsat.jp/web/

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",

ARTSAT WebAPI
‣ データの内容
{
"results": [{
← リクエスト
した時間
"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": [{
"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": [{
"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",

WebAPI の値をopenFrameworksに読み込む

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

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

‣ ofxJSON-masterのZipファイルを解凍し、addons/ 以下に

新規プロジェクトの作成

‣ 新規プロジェクトを作成
‣ apps/myApps/emptyExample をフォルダごとコピー

‣ 作成したプロジェクトをXcodeで開く
‣ 「addons」を右クリック → 「Add ﬁles...」を選択

‣ addons/ofxJSON を選択

‣ 「src 」と「lib」フォルダ以外は削除
‣ 下記のような、ファイル構成に

JSONファイルを読み込んでみる

‣ 作成したプロジェクトに、INVADERの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;

← 追加

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

‣ ビルドして実行
‣ Xcodeのコンソール(画面下)に、JSONデータが表示される

JSONデータを画面に表示

‣ JSONデータをopenFrameworksのプログラムに読み込むこと
ができた
‣ 次に画面にデータを表示したい
‣ まず手始めに、取得したJSONの文字列をそのまま画面に表示
してみる
‣ ofDrawBitmapString() を使用する

‣ testApp.mm
‣ testApp::draw() に下記のプログラムを追加
...(中略)...
//-------------------------------------------------------------void testApp::draw(){
ofSetColor(63);
ofDrawBitmapString(response.getRawString(), 10, 12);
}

‣ iPhoneの画面に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();
...

‣ 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"]
ofDrawBitmapString("lon = " + ofToString(lon,12), 10, lineHeigt*3);
float alt = response["results"][0]["sensors"]["alt"]
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
...(中略)...
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));
}
}

‣ 完成!!

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

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

More Related Content

What's hot (16)

Similar to iTamabi 13　第6回：ARTSAT API 実践 1 Web APIから情報を取得する (20)

More from Atsushi Tadokoro (20)