【JavaScript、Java】OpenWeatherMapを使って天気を取得、表示するサンプル

(JavaScript)OpenWeatherMapを用いて天気情報を取得する
1. OpenWeatherMapのレスポンスデータ
ついでにJavaでも書いてみた

(JavaScript)OpenWeatherMapを用いて天気情報を取得する

OpenWeatherMapを使って、Ajax通信で今日の天気情報を表示するプログラムのサンプルを作成しました。本当に最低限のサンプルです。

使用するにはAPIキーの取得が必要なので、こちらを参考にして会員登録してください。https://openweathermap.org/guide

色々プランがあるみたいですが、とりあえず現在の天気を取得するプランで登録してみました。

<script>
    //現在の天気を取得する場所の名前
    let targetCityName = "kamakura";
    let appId = "ここに取得したappId";

    const requestUrl = "https://api.openweathermap.org/data/2.5/weather?APPID=" + appId + "&lang=ja&units=metric&q=" + targetCityName + ",jp;";

    //Ajax通信用のオブジェクトを作成
    let xhr =new XMLHttpRequest();

    //通信方式とURLを設定
    xhr.open("GET",requestUrl);

    //通信を実行する
    xhr.send();

    //通信ステータスが変わったら実行される関数
    xhr.onreadystatechange = function(){
        //通信が完了
        if(xhr.readyState == 4){
            ShowTodaysWeather(xhr.responseText);
        }
    }

    /**
     * 今日の天気を表示する
     */
    function ShowTodaysWeather(response){

        let obj = JSON.parse(response);

        let weather = obj.weather[0].description;
        let city = obj.name;
        let temp = obj.main.temp;

        console.log("現在の" + city + "の天気は" + weather);
        console.log("気温は" + temp + "度です。");

    }

</script>

実行結果は以下の通り。

現在の鎌倉市の天気は雲
気温は24.53度です。

リクエストのパラメータを「&lang=ja」に設定しているので、天気と場所の名前が日本語になっているのですが、天気が「雲」ってなんか不自然ですし、「薄い雲」なんて値が返ってくることもあったので、天気の表記は自分で定義したほうが良さそうです。

また、パラメータに「&units=metric」を付けないと気温が華氏で取得されてしまうので注意です。

OpenWeatherMapのレスポンスデータ

ちなみに、OpenWeatherMapのレスポンスデータはこのようになっています。

{
    "coord": {
        "lon": 139.55,
        "lat": 35.31
    },
    "weather": [
        {
            "id": 802,
            "main": "Clouds",
            "description": "雲",
            "icon": "03n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 24.53,
        "feels_like": 30.35,
        "temp_min": 23.89,
        "temp_max": 25,
        "pressure": 1009,
        "humidity": 100
    },
    "visibility": 10000,
    "wind": {
        "speed": 0.45,
        "deg": 93,
        "gust": 0.45
    },
    "clouds": {
        "all": 35
    },
    "dt": 1595155075,
    "sys": {
        "type": 3,
        "id": 2010218,
        "country": "JP",
        "sunrise": 1595101249,
        "sunset": 1595152498
    },
    "timezone": 32400,
    "id": 1860672,
    "name": "鎌倉市",
    "cod": 200
}

上から順にざっくり説明すると、以下の通りになります。
(https://openweathermap.org/currentより抜粋)

キー	説明
coord	緯度、経度
main	気温、湿度、気圧、最低気温、最高気温、etc
wind	風速、風向き
clouds	曇りの確率
sys	国コードや日の出時刻、日の入り時刻 etc

過去3時間以内に設定箇所で雨が降ったら”rain”、雪が降ったら”snow”というデータも返ってくるのですが、記事作成当時は全国的に曇りだったので今回は無いようです。

ついでにJavaでも書いてみた

Javaも勉強がてらに書きました。Jsonをオブジェクトに変換する部分、取得データを表示する部分は省略しています。(そこも重要なのに)

import java.util.*;
import java.util.ArrayList;

import java.net.HttpURLConnection;
import java.io.InputStreamReader;
import java.io.BufferedReader;
import java.net.URL;


public class Main {
    public static void main(String[] args) throws Exception {
        
        String requestUrl = "https://api.openweathermap.org/data/2.5/weather?APPID=(ここにAPIキー)&q=kamakura,jp";
        
        URL url = new URL(requestUrl);
		　　HttpURLConnection connection = (HttpURLConnection) url.openConnection();
		　　connection.setRequestMethod("GET");
		　　connection.connect();

		　　int responseCode = connection.getResponseCode();
  
	　　	if(responseCode == HttpURLConnection.HTTP_OK){
		    
		  　　  InputStreamReader isr = new InputStreamReader(connection.getInputStream());
		    
		   　　 BufferedReader br = new BufferedReader(isr);
		    
		  　　  System.out.println(br.readLine()); //Json形式でデータが取得できるのでJackson等で処理する
		    
	　　	}else{
		  　　  System.out.println("取得失敗");
		　　}
      
    }
}