読者です 読者をやめる 読者になる 読者になる

processing JSON web APIを使って天気情報を表示させる

・目的

 JSON形式のweb APIを使ってProcessing にて天気予報を表示させる

 

・使用したもの

 Processing 3.2.1

 ノートPC(Windows 10

 

・方法

(1)天気予報サービスを利用する

    今回はJSONデータで天気予報を配布しているライブドアのお天気

webサービスを使用する。仕様はhttp://weather.livedoor.com/weather_hacks/webservice

に載っている。

 

--JSONとは--

 JSON(JavaScript Object Notation)は、軽量のデータを交換するフォーマット。

詳しくはhttp://www.json.org/json-ja.htmlを見てください。

 

 

 (2)プログラムコード

String baseURL = "http://weather.livedoor.com/forecast/webservice/json/v1?city="; 
String city = "120010";  //都市コード
String title;
String publicTime;
String image;
JSONArray forecasts;
JSONArray description;



void setup() {
  size(800,800);
  JSONObject w = loadJSONObject(baseURL+city); //JSON形式のデータを取得 baseURLと都市コードを結合  
  title = w.getString("title");                 
  forecasts = w.getJSONArray("forecasts");   //forecastsのプロパティーを取得
  publicTime = w.getString("publicTime");
  
  
}


void draw() {
  background(255);
  fill(0);
  text(title,150,30);
   text(publicTime,width/2,height/2);
  
  //配列に収納されているので データを取り出す
  for(int i=0; i<forecasts.size(); i++){
    JSONObject f = forecasts.getJSONObject(i);
    String s =  f.getString("dateLabel")+":" +f.getString("telop");
    JSONObject t = f.getJSONObject("temperature");
    JSONObject v = f.getJSONObject("image");
    for (int j=0; j<v.size();j++){
      String link = v.getString("url");
          textSize(30);
          text(link,170,330);
    }
    
    
text(s,150,100+20*i);
  }
    
}

図1:プログラムコード

 

・結果 

 文字を拡大するコードを入力し実行した結果が図2。文字化けしている。

for (int j=0; j<v.size();j++){
      String link = v.getString("url");
          textSize(30);//この行を削除したのが図3
          text(link,170,330);
    }

 

f:id:shangtian:20170321165024p:plain

図2:文字化け

f:id:shangtian:20170321165026p:plain

図3:天気情報

・考察

 表示される文字の大きさが小さいため

 textSize(); 

  で大きくしたが、日本語が文字化けしてしまう。

 おそらくProcessing側のフォントをUTF-8にすることで解決

 しそうだが、設定画面で変更しようとしても、そもそも設定画面にUTF-8

 が存在しないため解決できなかった。英語のサイトから天気情報を持ってくれば

 一応は解決しそうだ。

<参考文献>

JSON の紹介

 (http://www.json.org/json-ja.html

Processing で Web API (Web サービス) を利用するプログラムを作る

 (http://www2.kobe-u.ac.jp/~tnishida/misc/processing-web-api.html)

ヘテムル