お天気Webサービス


お天気Webサービス(Livedoor Weather Web Service)はライブドアが提供している現在全国142カ所の今日・明日・あさっての天気予報・予想気温と都道府県の天気概況情報を取得することができるAPIです。

要注意!! -2013年4月9日追記-
お天気Webサービスの仕様が変わったため、以下のやり方では天気予報・予想気温等を表示させることができなくなってしまいました。
新しい仕様に対応した使い方については現在調査をしていますので、やり方が分かり次第修正を公開したいと思います。

お店紹介のサイトで天気予報の情報が掲載されていれば、天気に合わせていく日にちを調整したり、傘を持って行くなどの判断材料にもなるので、それなりに有益だと思います(もっとも東池袋カレーマップはピンポイントすぎるので、そんなに重要とは思えませんけど^^)。

APIの仕様についてを詳しく書くとわかりにくなるので、Google Maps API同様に実際に運用しているソースコードを中心に紹介していきます。

最終の完成形はこのようになります。

お天気Webサービス 目次

お天気WebサービスのリクエストURL作成

リクエストURLとは、お天気Webサービスのどの情報が欲しいかをプログラムに伝えるためのものです。
APIは仕組みとして、他のサイトにあるデータベース(もしくは類似するデータ)を活用するため、データをもらうためには必ず先にリクエストしなければいけません。

実際に東池袋カレーマップで使用しているリクエストURLはこちら

<?php
$url = "http://weather.livedoor.com/forecast/webservice/rest/v1";
$city =63;

$today = simplexml_load_file("$url?city=$city&day=today");
$tomorrow = simplexml_load_file("$url?city=$city&day=tomorrow");
$dayaftertomorrow = simplexml_load_file("$url?city=$city&day=dayaftertomorrow");
?>

リクエストURLが最終的に「today」「tomorrow」「dayaftertomorrow」の3つになっているのは、お天気サービスの仕様が、予報を取りたい日にちごとにデータが分かれているためです。

<参考>
東池袋カレーマップではお店の場所はすべて東池袋になるため、地域指定を変更させる必要がないので「city」を「63(東京)」で固定してます。この数値を変動させたい場合は、カスタムフィールドを作成してその数値を読み込むようにします。

$city =get_post_meta($post->ID, City, true);
$city =urlencode($city);

カスタムフィールドの[ID]を[City]にした場合の設定(カスタムフィールドについてはCustom Field Templateを参考にしてください)。

↑お天気Webサービス 目次へ

レスポンスフィールドの表示確認

リクエストURLが完成しているか(正常にお天気サービスAPIが動作しているか)を確認するために、まずレスポンスフィールド(要は返信)の表示が正常にできるかを確認します。

このステップは飛ばしても問題は無いと思いますが、問題の切り分けを行なうために念のため確認します。

テーマファイルの天気予報を表示させたい場所にリクエストURLと次の5行を追加。
東池袋カレーマップの場合は、サイドバー (sidebar.php)になります。

「県名」  <?php echo $today->location[pref] ; ?><br />
「予報画像」<?php echo $today->image->url; ?><br />
「予報」  <?php echo $today->telop ; ?><br />
「最高気温」<?php echo $today->temperature->max->celsius; ?><br />
「最低気温」<?php echo $tomorrow->temperature->min->celsius ; ?>

レイアウトは別として、以下の表示がでれば問題なく機能しています。もし表示されないようであれば、リクエストURLを見直してください。

↑お天気Webサービス 目次へ

テーマファイルへの埋め込み

動作確認の時点で、テーマファイルへの埋め込みの入り口は行なっていますが、あくまでもチェックレベルだったので、ここで最終型を説明したいと思います

最終的に埋め込んだものはこうなっています

<dl class="weather"><dt>東京の天気</dt>

<dd>
<div class="today"><p class="day">今日</p><p class="data"><img src="<?php echo $today->image->url; ?>" alt="<?php echo $today->image->title; ?>" /><br /><?php echo $today->telop ; ?><br />最高気温<span class="max"><?php echo $today->temperature->max->celsius; ?>℃</span><br />最低気温<span class="min"><?php echo $today->temperature->min->celsius ; ?>℃</span></div>

<div class="tomorrow"><p class="day">明日</p><p class="data"><img src="<?php echo $tomorrow->image->url; ?>" alt="<?php echo $tomorrow->image->title; ?>" /><br /><?php echo $tomorrow->telop ; ?><br />最高気温<span class="max"><?php echo $tomorrow->temperature->max->celsius ; ?>℃</span><br />最低気温<span class="min"><?php echo $tomorrow->temperature->min->celsius ; ?>℃</span></div>

<div class="dayaftertomorrow"><p class="day">明後日</p><p class="data"><img src="<?php echo $dayaftertomorrow->image->url; ?>" alt="<?php echo $dayaftertomorrow->image->title; ?>" /><br /><?php echo $dayaftertomorrow->telop ; ?><br />最高気温<span class="max"><?php echo $dayaftertomorrow->temperature->max->celsius ; ?>℃</span><br />最低気温<span class="min"><?php echo $dayaftertomorrow->temperature->min->celsius ; ?>℃</span></div> </dd></dl>

今日、明日、明後日とそれぞれのリクエストURLからのレスポンスフィールドを表示させるようにしています。

<参考>
お天気サービスの天気予報の区分は各都道府県で2~3地域とそれほど多くなく、東池袋が該当するのは「東京」になってしまうため、情報と見出しをそろえて「東京の天気」と表示させています。

また、リクエストURLをカスタムフィールドから呼び出してページごとに変化をつけたい場合は、「東京」の部分を以下の記述に変えることで見出しも変更させることができます。

<?php echo $today->location[pref] ; ?>

↑お天気サービスの地域を表示させてます。

↑お天気Webサービス 目次へ

レイアウトの調整

上記のままだと、(当然ながら)レイアウトがグチャグチャになってしまうため、CSSを使ってレイアウトの調整を行います。

実際に反映させたCSSがこちらになります。

dl.weather{
width:300px;
}
dl.weather dt{
height:24px;
line-height:24px;
background:url(../images/side_back.png);
padding: 0 0 0 3px;
border:none;
}
dl.weather dd{
padding: 10px 0 15px 0px;
overflow:hidden;
}

dl.weather dd div{
width:100px;
float:left;
}
dl.weather dd div p.day{
margin:0 0 8px 0 ;
font-size:14px;
text-align: center;
}
dl.weather dd div p.data{
font-size:12px;
line-height:1.5;
text-align: center;
}
dl.weather dd div p.data img{
margin:3px 0;
}
dl.weather dd div p.data span.max{
margin: 0 0 0 2px;
color: #FF0000;
}
dl.weather dd div p.data span.min{
margin: 0 0 0 2px;
color: #1e50a2;
} 

「dl」の幅とか、「dt」の背景画像とか、各テキストの色などはサイトに合わせて調整してもらえばいいと思います。

ここまでの作業で最初に見たような画像と同じ天気予報が表示されるようになります。

↑お天気Webサービス 目次へ

お天気サービスの仕様書

お天気サービスの仕様書は以下のサイトにすべて掲載されていますので、詳しいことはこちらを参考にしてください。

お天気Webサービス仕様 – Weather Hacks – livedoor 天気情報

↑お天気Webサービス 目次へ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>