Loading...

【JavaScript】OpenWeatherMap(Weather API)の使い方を解説

「OpenWeatherMap」が提供している無料天気予報API(Application Programming Interface)を利用して天気予報ページを作ってみました。

実際に使用した「Current Weather API」というAPIをJavaScriptで読み込んで表示する方法や、実際に起こったアクシデントなどを書いていこうと思います。

APIを始めて触る初心者でも簡単に実装することができたので、この記事を読めば天気予報サイトをすぐに作成できるようになると思います。

実際に作った天気予報ページ

OpenwWeatherMapとは

OpenWeatherMapの公式HP

「OpenWeatherMap」とは全世界の都市の気温や湿度、風速、降水量などの気象情報を提供しているサービスです。

ホームページで気象情報を調べる他に、「Weather API」という気象情報のデータを読み込むAPIを複数提供しています。

無料版でも基本的な機能を利用することができますが、有料版では読み込めるAPIの種類や月に読み込めるAPIの数が増えます。

今回は提供しているAPIの中で基本的な気象情報が書かれている「Current Weather API」を読み込んで天気や温度、湿度を表示させます。

Weather API

「OpenWeatherMap」が提供しているAPIを利用するにはアカウントを作成して、アクセスキーを取得する必要があります。

アカウントはメールアドレスだけで簡単に作成することができます。

サインイン

OpenWeatherMapの公式HP

OpenWeatherMapの公式HP から右上の「Sign In」を押してサインインしていきます。

アカウント登録ができたら作成したアカウントにログインしてアクセスキーを確認します。

アクセスキーの確認

アクセスキーの確認はアカウントマークから「API Keys」を押すとアクセスキー一覧ページに移動して確認できます。

複数のアクセスキーを作りたい場合はアクセスキー一覧ページから「Create key」で名前を決めたアクセスキーを作成することができます。

アクセスキーの有効化

アクセスキーの有効化は「Status」が「Active」になっていれば基本的に大丈夫です。

しかしアカウント作成から数時間以内はアクセスキーの有効化が終わっていない可能性が高く、「Active」状態でもアクセスキーが有効かわかりません。

自分の場合は1時間後では401エラーが返ってきて、12時間後に試したら無事読み込むことができました。

使い方

アクセスキーの有効化が出来たら、実際にAPIデータを読み込んで今日の天気情報を表示してみます。

APIデータを取得する

Call Current Weather Data

「Current Weather API」について書かれているページで紹介されているAPIの読み込み方で「都市名」と「アクセスキー」だけで読み込めるものは以下のコードになります。

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

JavaScript(jquery)でAPIを読み込む場合はfetchメソッドを使ってjsonデータを読み込みます。

次のコードはコンソールログに読み込んだデータを表示するだけのコードで、cityとAPIKeyを設定したら実行できると思います。

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKey}`)
.then(response => response.json())
.then(date => {
console.log(date);
});

APIデータを表示する

先ほど確認したデータの中でweatherという一つ目の配列の「id,main,description,icon」というクラスに文字や数字が入れられています。

その中のmainが天気を表しているのでalertメソッドを使って確認してみます。

alert(date.weather[0].main)

「Clouds」や「Rain」といった天気を表す文字が表示できたと思います。

これでAPIデータの読み込みからデータの確認、データの表示まで出来ました。

まとめ

本記事では「OpenWeatherMap」の「Current Weather API」を読み込んで気象情報を表示するまで紹介しました。

取得できる天気の種類や名前等の詳しい情報を知りたい場合は、「OpenWeatherMap」の公式HPに載っているのでから確認してみてください。