当サイトには広告が含まれております

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

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

Image [10]

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

記事をざっと見る

OpenWeatherMapについて

Image

http://openweathermap.org/

こちらのサイトです。

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

Image [1]

http://openweathermap.org/city

このページの入力欄に 

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]

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

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

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 

で画像を表示出来ます。

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

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キーを取った方が良さそうなので、

http://openweathermap.org/appid

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

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (4件)

  • […] 今日は何の日、第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 […]

記事をざっと見る