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

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

OpenWeatherMapについて

http://openweathermap.org/

こちらのサイトです。

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

http://openweathermap.org/city

このページの入力欄に　

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

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

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

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

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

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

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

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

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

ここでは　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天気で見ると

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

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

http://openweathermap.org/weather-data#current

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

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

このようにプログラムで書けるので自分のサイトに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 

で画像を表示出来ます。

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

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

例えばこのコードを、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用に少しだけ変えました）付け加えるとショートコードで表示することができます。

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

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

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

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

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

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

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

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

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

http://openweathermap.org/appid

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