URLをコピーしました!
スキルアップを始める!

jQuery – OpenWetherAPI【全世界の気象データを取得する】

jQuery(ジェイクエリ)

OpenWetherAPIとは?

OpenWeatherAPIは、天気情報を提供するAPIプロバイダーの1つです。このAPIを使用すると、世界中の場所の現在の天気、予報、気温、湿度、気圧などの情報を取得できます。

また、歴史的な天気情報や、紫外線指数、空気質指数などの情報も取得できます。OpenWeatherAPIは、無料のプランも提供しており、APIキーを取得することで、簡単に利用できます。

OpenWetherAPIアカウントの取得

Сurrent weather and forecast - OpenWeatherMap
Get current weather, hourly forecast, daily forecast for 16 days, and 3-hourly forecast 5 days for your city. Historical...

まずは、公式サイトからアカウントを作成します。

アカウントを作成してログインすると、様々なAPIが使用できます。

プランが様々ありますが、無料の範囲で使用したい場合はFreeを選択します。

APIキーが発行されました。

How to make an API call

Current weather data - OpenWeatherMap
Access current weather data for any location on Earth. We collect and process weather data from different sources such a...

API call

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

lat, lon 必要 地理座標 (緯度、経度)。都市名と郵便番号を地理座標に自動変換するジオコーダーが必要な場合は、ジオコーディング APIを使用してください。

appid 必要 固有の API キー (アカウント ページの[API キー] タブでいつでも確認できます)

最低、こちらの3つが必要なようですので、それぞれ設定します。

Invalid API key

例を元に、APIを呼び出してみます。

https://api.openweathermap.org/data/2.5/weather?lat=44.34&lon=10.99&appid={API key}

いきなりはまりました・・・。

{"cod":401, "message": "Invalid API key. Please see https://openweathermap.org/faq#error401 for more info."}

何度、ページを開いてもJSONが返ってきません…。

調べていると、stackoverflowにそれらしき回答がありました。

Invalid API Key in OpenWeatherMap (Error 401)
I'm trying to make an API call to OpenWeatherMap. When I execute flutter run in the terminal, the response.statusCode pr...

checkout Using OpenWeatherMap API gives 401 error here you will find some reasons why your apikey is not working. also, it takes 2 hours for key activation.

「it takes 2 hours for key activation.」…。

使用できるようになるまで、2時間ほどかかるようです。なんと…。

API 呼び出しの例

このURLが基本で、パラメータを付加しているようです。

http://api.openweathermap.org/data/2.5/weather

city、keyをそれぞれ設定すると現在の天気データが取得できるようになっています。

http://api.openweathermap.org/data/2.5/weather?q={city}&appid={key}&lang=ja&units=metric

予報の場合はforecastを指定することで取得できるようです。

http://api.openweathermap.org/data/2.5/forecast?q={city}&appid={key}&lang=ja&units=metric

例えば、東京のデータを取得したい場合は、「Tokyo,JP」をcityの部分に入れます。

あとは、APIkeyを入れればJSONファイルが取得できるはずです。

取得できました。

あとは、jQuery側で$.getJSON()を使ってJSONデータを取得します。

$.getJSON()メソッドとは?

$.getJSON()は、jQueryのAjaxメソッドの一つで、AJAX HTTP GETリクエストを使用してJSONデータを取得するために使用されます。

このメソッドを使用することで、単一のリクエストに対して複数の.done()、.always()、.fail()のコールバックをチェーンすることができます。

また、リクエストがすでに完了している場合にも、コールバックをすぐに呼び出すことができます

$.getJSON()メソッドは、引数としてURL、データ、成功時のコールバック関数をとります。成功時のコールバック関数は、取得したデータ、ステータス、およびXMLHttpRequestオブジェクトを受け取ります。

下記のように記述すると、成功した場合と失敗した場合の処理を指定することができます。

[rml_read_more]

<script>
const text = document.getElementById("text1");
$.getJSON('https://api.openweathermap.org/data/2.5/weather?q=Tokyo,JP&appid={apikey}&lang=ja&units=metric', function(data) {
   // 成功した場合
   console.log("成功");
   text.innerHTML="成功";
})
.fail(function() {
   // 失敗した場合
   console.log("失敗");
   text.innerHTML="失敗";
});
</script>

成功しました!

.fail(function() {
で失敗した場合の処理を書くことができます。

APIから返されたJSONの結果をHTML側に出力する

APIから返されたJSONの結果をHTML側に出力するには、次の手順を実行する必要があります。

  1. HTMLに表示する要素を作成する
  2. 取得したJSONのデータを処理するために、取得したデータを変数に格納する
  3. 変数を使って、取得した情報をHTMLに表示する

以下は、上記手順を実行するためのコード例です。

HTML:

<div id="weather-info">
  <p id="temp"></p>
  <p id="humidity"></p>
  <p id="pressure"></p>
  <p id="description"></p>
</div>

JavaScript:

const weatherInfo = document.getElementById("weather-info");
const temp = document.getElementById("temp");
const humidity = document.getElementById("humidity");
const pressure = document.getElementById("pressure");
const description = document.getElementById("description");

$.getJSON('https://api.openweathermap.org/data/2.5/weather?q=Tokyo,JP&appid={apikey}&lang=ja&units=metric', function(data) {
  // 変数に取得したデータを格納する
  const currentTemp = data.main.temp;
  const currentHumidity = data.main.humidity;
  const currentPressure = data.main.pressure;
  const currentDescription = data.weather[0].description;
  
  // 変数を使って、取得した情報をHTMLに表示する
  temp.innerHTML = `現在の気温は${currentTemp}度です。`;
  humidity.innerHTML = `現在の湿度は${currentHumidity}%です。`;
  pressure.innerHTML = `現在の気圧は${currentPressure}hPaです。`;
  description.innerHTML = `現在の天気は${currentDescription}です。`;
})
.fail(function() {
   // 失敗した場合のコード
   console.log("失敗");
});

このコードでは、”weather-info”というIDを持つdiv要素に、APIから取得した天気情報が表示されます。

取得したデータを変数に格納して、テキストの中に埋め込むことで、HTMLに情報を表示しています。それぞれの変数の値を変更することで、表示する情報をカスタマイズすることもできます。

まとめ

注意点として、APIキーは公開しないように注意してください。

今回のコードをそのまま使った場合、JavaScriptやjQueryでは誰でも見れてしまいますので、サーバーサイド側で処理するなど工夫が必要です。

使い方次第で便利に使えるかと思いますので、ぜひご活用下さい。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら