天気予報アプリ

前回はAjaxを使って外部サーバと通信する技術を修得し、RSSリーダを作りました。今回も引き続きAjaxを利用して外部サーバが提供するWebAPIを利用して情報を取得するアプリを開発します。開発するのは10章の第2節「外部サーバと通信する」で扱う天気予報アプリです。このアプリは、下記のOpenWeatherMapというサイトから天気情報を取得します。

http://openweathermap.org/api

このWebAPIを利用するにはAPI key (APPID)が必要になります。API key を取得するにはユーザ登録が必要です。この画面から登録を行ってAPI key を入手してください。
入手したAPI key はHttpリクエストの際、パラメタとしてサーバへ送ります。テキストP306のプログラムは少し古いようで、そのあたりが抜けています。パラメタ config を以下のように修正してください。

            var config = {
              params: { 
                q: 'Tokyo,jp',
                id: '[ユーザID]',
                APPID: '[API key]'
              }
            }

このAPIはJavascriptオブジェクトとしてレスポンスを返してきます。したがって、レスポンスデータはそのままJavascriptオブジェクトとして利用することができます。たとえば、次のようなフォーマットです。

{
 "coord":{
  "lon":139.69,
  "lat":35.69
 },
 "weather":[
  {
   "id":803,
   "main":"Clouds",
   "description":"broken clouds",
   "icon":"04n"
  }
 ],
 "base":"stations",
 "main":{
  "temp":275.93,
  "pressure":1030,
  "humidity":52,
  "temp_min":271.15,
  "temp_max":281.15
 },
 "visibility":10000,
 "wind":{
  "speed":5.7,
  "deg":10
 },
 "clouds":{
  "all":75
 },
 "dt":1480449600,
 "sys":{
  "type":1,
  "id":7619,
  "message":0.008,
  "country":"JP",
  "sunrise":1480368684,
  "sunset":1480404486
 },
 "id":1850147,
 "name":"Tokyo",
 "cod":200
}