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

・目的

　JSON形式のweb APIを使ってProcessing

　にて天気予報を表示させる

・使用したもの

　Processing 3.2.1

　ノートPC（Windows 10）

・方法

（１）天気予報サービスを利用する

　　今回はJSONデータで天気予報を

　　配布しているライブドアのお天気

　　webサービスを使用する。

　　仕様はhttp://weather.livedoor.com/weather_hacks/webservice

に載っている。

--JSONとは--

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

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

　（２）プログラムコード

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);
  }
    
}

図１：プログラムコード

・結果　

　文字を拡大するコードを入力し実行

　した結果が図２。文字化けしている。

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

図２：文字化け

図３：天気情報

・考察

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

　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)

ヘテムル