0
iTamabi 13 
第6回:ARTSAT API 実践 1
Web APIから情報を取得する
2013年10月21日
多摩美術大学 PBL科目
担当:田所 淳
今日の内容
‣ ARTSAT Web API を利用して、各種センサーの情報を取得
‣ 取得するのは、ARTSAT Projectの第一弾衛星、INVADERのシ
ミュレーションデータ
ARTSAT WebAPI
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形式で、ブラウザにデータが表示...
ARTSAT WebAPI
‣ データの内容
{
"results": [{
"interpolated": true,
"requested_time_unix": 1382216472,
← リクエスト
"requested_time_is...
ARTSAT WebAPI
‣ データの内容
{
"results": [{
"interpolated": true,
"requested_time_unix": 1382216472,
"requested_time_iso_string...
ARTSAT WebAPI
‣ データの内容
{
"results": [{
"interpolated": true,
"requested_time_unix": 1382216472,
"requested_time_iso_string...
WebAPI の値をopenFrameworksに読み込む
ofxJSONをインストール
ofxJSONをインストール
‣ Webブラウザで、INVADERのセンサーの値を表示できた
‣ この結果を、openFrameworksから利用したい
‣ JSONデータにアクセスして、その結果をパース(解析)するため
の機能が必要
‣ of...
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データを読み込ん
でみる
‣ とても簡単!!
JSONファイルを読み込んでみる
‣ testApp.h
#pragma once
#include
#include
#include
#include

"ofMain.h"
"ofxiOS.h"
"ofxiOSExtras.h"
"ofx...
JSONファイルを読み込んでみる
‣ testApp.mm
#include "testApp.h"
//-------------------------------------------------------------void tes...
JSONファイルを読み込んでみる
‣ ビルドして実行
‣ Xcodeのコンソール(画面下)に、JSONデータが表示される
JSONデータを画面に表示
JSONデータを画面に表示
‣ JSONデータをopenFrameworksのプログラムに読み込むこと
ができた
‣ 次に画面にデータを表示したい
‣ まず手始めに、取得したJSONの文字列をそのまま画面に表示
してみる
‣ ofDrawBit...
JSONデータを画面に表示
‣ testApp.mm
‣ testApp::draw() に下記のプログラムを追加
#include "testApp.h"
...(中略)...
//------------------------------...
JSONデータを画面に表示
‣ iPhoneの画面にJSONデータが表示
される(はず)!
JSONデータをパース(解析)する
JSONデータをパース(解析)する
‣ 取得したJSONデータから、センサーの値をとり出すには?
‣ JSONデータをパース(解析)する必要がある
‣ ofxJSONでは、簡単に分解してデータをとり出せる!
‣ それぞれのデータの値は、以下のよ...
JSONデータをパース(解析)する
‣ testApp.mm
‣ testApp::draw() に下記のプログラムを追加
void testApp::draw(){
ofSetColor(63);
int lineHeigt = 15;
//...
JSONデータをパース(解析)する
‣ それぞれのセンサーの値を、独立し
て取り出すことが出来た!
‣ あとは、この値をどのように視覚化
するか
‣ 続きは次週に!!
参考: センサーの値を全て出力
参考: センサーの値を全て出力
‣ センサーの値を全て出力するプログラム
‣ JSONのパースに、少し工夫が必要
JSONデータをパース(解析)する
‣ testApp.mm
#include "testApp.h"
...(中略)...
void testApp::draw(){
ofSetColor(63);
int lineHeigt = 15;
/...
JSONデータを画面に表示
‣ 完成!!
今日はここまで
続きは、来週に!
Upcoming SlideShare
Loading in...5
×

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

1,617

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,617
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×