OpenWeatherMapを利用して天気情報を取得してみる

この記事は約9分で読めます。

Image [10]

OpenWeatherMapという天気情報をAPIで提供しているサービスを知りました。都市名を指定したり、緯度経度を指定したりしてその場所の天気情報を取得することができます。取得した情報を自分のサイトに表示することもできるので、色々実験してみました。それについて書きます。

スポンサーリンク

OpenWeatherMapについて

Image

С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 weather data for 40 years back for any ...

こちらのサイトです。

このサイト上からでも都市名などで詳しい天気情報を表示することができます。

Image [1]

Weather forecast - OpenWeatherMap
Watch the weather in your city and received hourly forecast, 13 days forecast, including data of wind, cloudiness, pressure, humidity, time of sunrise and sunse...

このページの入力欄に 

Image [2]

Hachioji,jp と入力して Searchをクリック

Image [3]

このように表示されるので Hachioji,jp をクリックすると

Image [4]

こんな感じで天気情報が表示されます

これだけだと「普通の天気予報?」という感じですが、普通の天気予報とちがうのはこのデータをAPIで取得して自分のWebサイトなどで利用できるということです。

天気情報をAPIで取得する とは?

このように都市名で指定する方法をブラウザのURLから入力して行う事ができます(緯度、経度でも取得できます)。

http://api.openweathermap.org/data/2.5/weather?q=Hachioji,jp&units=metric

↑このリンクをクリックすると表示される

Image [5]

こんな感じのデータが天気情報のデータです。

ここでは q=Hachioji,jp で 日本の八王子 という都市名と units=metric で温度の単位を摂氏と指定しています。
*緯度、経度の場合は q=Hachioji,jp の部分を lat=緯度&lon=経度 とします

プログラムで行う場合は、

$url = 'http://api.openweathermap.org/data/2.5/weather?q=Hachioji,jp&units=metric';
$weather = json_decode(file_get_contents($url), true);

echo "<pre>";
var_dump($weather);
echo "</pre>";

↑こんな感じのコーディングをしてみます。phpでこの値を取得して、連想配列($weather)にし、多少読みやすくして表示してみます。

array(11) {
  ["coord"]=>
  array(2) {
    ["lon"]=>
    float(139.32)
    ["lat"]=>
    float(35.66)
  }
  ["sys"]=>
  array(4) {
    ["message"]=>
    float(0.2016)
    ["country"]=>
    string(2) "JP"
    ["sunrise"]=>
    int(1423517683)
    ["sunset"]=>
    int(1423556346)
  }
  ["weather"]=>
  array(1) {
    [0]=>
    array(4) {
      ["id"]=>
      int(800)
      ["main"]=>
      string(5) "Clear"
      ["description"]=>
      string(12) "Sky is Clear"
      ["icon"]=>
      string(3) "01d"
    }
  }
  ["base"]=>
  string(12) "cmc stations"
  ["main"]=>
  array(7) {
    ["temp"]=>
    float(1.977)
    ["temp_min"]=>
    float(1.977)
    ["temp_max"]=>
    float(1.977)
    ["pressure"]=>
    float(979.88)
    ["sea_level"]=>
    float(1025.31)
    ["grnd_level"]=>
    float(979.88)
    ["humidity"]=>
    int(78)
  }
  ["wind"]=>
  array(2) {
    ["speed"]=>
    float(1.86)
    ["deg"]=>
    float(255.5)
  }
  ["clouds"]=>
  array(1) {
    ["all"]=>
    int(0)
  }
  ["dt"]=>
  int(1423527455)
  ["id"]=>
  int(1863440)
  ["name"]=>
  string(8) "Hachioji"
  ["cod"]=>
  int(200)
}

リクエストに対して返ってきた値がこのように表示されました。

主に使いそうな値はこんな感じです↓

連想配列名返ってきた値意味
$weather[‘weather’][0][‘main’]Clear天気
$weather[‘weather’][0][‘description’]Sky is Clear天気詳細
$weather[‘weather’][0][‘icon’]01dお天気アイコン
$weather[‘main’][‘temp’]1.977温度
$weather[‘main’][‘humidity’]78湿度(%)
$weather[‘wind’][‘speed’]1.86風速(メートル/秒)
$weather[‘wind’][‘deg’]255.5風向き 255.5が時計回りの角度であれば南西?

という感じになります。一部若干内容が不明ですがこんなかんじかなーと。Yahoo天気で見ると

Image [6]

こんな感じなので、まぁ 大体合ってる かなぁと思います。

ちゃんとした内容については、

Weather Data - OpenWeatherMap

こちらに解説があります。

自分のサイトに今の天気を表示してみる

このようにプログラムで書けるので自分のサイトにPHPで表示することも可能です。

$url = 'http://api.openweathermap.org/data/2.5/weather?q=Hachioji,jp&units=metric';
$weather = json_decode(file_get_contents($url), true);
$weatherShow = '
天気:%s
天気詳細:%s
温度:%s 度
湿度:%s パーセント
風速:%sメートル
'; echo sprintf($weatherShow, $weather['weather'][0]['main'], $weather['weather'][0]['description'], $weather['weather'][0]['icon'], $weather['main']['temp'], $weather['main']['humidity'], $weather['wind']['speed']);

天気アイコンは

http://openweathermap.org/img/w/ここに天気アイコンの名前.png

で画像を表示出来ます。

このように表示部分を作って実行すると

Image [7]

こんな感じに表示されます。

例えばこのコードを、WordPressの使っている子テーマのfunctions.php

// 八王子の今の天気を表示する
function ryus_weather() {
    $url = 'http://api.openweathermap.org/data/2.5/weather?q=Hachioji,jp&units=metric';
    $weather = json_decode(file_get_contents($url), true);
    $weatherShow = '<div>天気:%s</div>
    <div>天気詳細:%s</div>
    <div><img src="http://openweathermap.org/img/w/%s.png" style="width:200px"></div>
    <div>温度:%s 度</div>
    <div>湿度:%s パーセント</div>
    <div>風速:%sメートル</div>';

    return sprintf($weatherShow, $weather['weather'][0]['main'], $weather['weather'][0]['description'], $weather['weather'][0]['icon'], $weather['main']['temp'], $weather['main']['humidity'], $weather['wind']['speed']);
}
/* ショートコードを追加する */
add_shortcode('ryus_weather', 'ryus_weather');

こんな感じで(function用に少しだけ変えました)付け加えるとショートコードで表示することができます。

ダッシュボード 外観>ウィジェット で テキスト ブロックを追加して中身を

Image [8]

こんな感じにして保存すると

Image [9]

このように表示されます。

まとめ:天気APIを使うのは割と簡単でした あとは色々やることがあります

このように英語で良ければ(!)簡単に天気APIから情報を取得して表示出来ます。残念なのはこのAPIは日本語に対応していないので日本語で表示するには自分で変換しなければいけないことです。

それにも挑戦しようと思ったのですが一番困ったのがメインの $weather[‘weather’][0][‘main’] の値が何種類あるのかという情報がみつからなかったことです。おそらくは 晴れ(Clear)、曇り(Clouds)、雨(rain)、雪(snow)なのだろうなと思うんですが他の種類があるのかないのかが一覧などになってちゃんとわかるところがみつかりませんでした。

お天気アイコンとお天気詳細は http://openweathermap.org/weather-conditions このページに一覧がありました。しかし、お天気の種類についての一覧がみつかりませんでした。お天気アイコンやお天気詳細からお天気を独自に表示しようと思ったのですが、いくつかの実際の値を見るとこれらの値とお天気との関連性があるようなないようなという感じで今時点ではちょっと日本語化はできていません。

でもきっとそのうちなんとかして、日本語化をしたいと思います。

あとこのAPIを使うには APIキーの取得が必要 らしいのです。上記でやったように無くても表示されるのですが、ちゃんと使うにはAPIキーを取った方が良さそうなので、

How to start to work with Openweather API - OpenWeatherMap
It is quite easy to work with Openweather API. Just sign up to get your API key and then call any weather API. And mind using API key in every API call whatever...

こちらから APIキー を取得して リクエストするときに &appid=取得したAPIキー のように付け加えてください。上記Webサイトでは無料プランでの制限について書いてありますのでそちらも合わせて読んでみるといいと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

インターネット オープンソース オープンデータ API
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. […] 代わりに、OpenWeatherMapを利用して天気情報を取得してみるを参照してウィジェット欄に天気を表示させることに成功しました。 […]

  2. […] 今日は何の日、第3弾 サポート項目は ①本日の日付②曜日 ③元日からの通算日 ④東京の天気 ⑤東京の気温 ブラウザについて ローカル環境でhtmlを作成し、動作を確認します。ブラウザにより動作が異なることがあるので、IE,Google Chrome, FireFoxで確認したところ、本文はそのままで登録画像を改訂した場合、Google Chromeはなかなか反映されず四苦八苦しました。納得のいかない動作が起きた場合はブラウザを替えてテストすることも一法です。 軌道修正 ブログ本文記事にopenweathermapからJSONデータを取得し天気情報を表示することは、一筋縄ではありません。html5ファイルを作成してローカル環境で実行する方式は簡単に期待した動作を得ることができましたが、ウェブ上では様々な動作の同期処理に難解なところがあります。 天気情報を取得するに当たり、OpenWeatherMapを利用して天気情報を取得してみるを参照して、当初のJavaScriptからphpによるプログラミングに切り替え、WordPressのシステムファイルであるfunction.phpに織り込むように軌道修正しました。次回は天気情報の日本語化を考えています。 今日は何の日、第3弾の動作 // 今日と明日の天気予報 Tokyo 天気:最高℃~最低℃ 湿度 風速 21℃~17℃ 70% 5m 26℃~20℃ 95% 5m […]

  3. […] ドを公開する一環として、この項をまとめます。以前に述べましたが、OpenWeatherMapを利用して天気情報を取得してみるの記事に力を得て、function.phpに組み込みました。WordPressのバージョン […]

  4. […] OpenWeatherMapを利用して天気情報を取得してみる | RYUS blog […]

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。