「現在の気温」を表示するガジェットを作ってみた。

今、自分のサイトをWordPressでゴソゴソ作っているのですが、サイトにあまりにも「色気」がないので、とあるブログパーツ(←ムッチャかわいい)を貼ろうと思い配布先に行ったところ、昨年のある頃からそのブログパーツ上で表示されるはずの「現在の気温」が、おそらくは「データ取得先の仕様の変更」により表示できなくなった、との事。

趣味で作られた物であり、本業もお忙しい中お願いメールを出すのも憚られるので、これは自分でナントかしよう!と碌な知識も無いままガジェットっぽいものを作ってみたという顛末です。

今の気温の情報が得られるサイトを探す。

まず件のブログパーツで使われていたサイトTheWeatherChannelを見て回ったんですが、世界の気象情報のXML配信はやってない感じ(見落としているのかも、だが)

で、色々ググって探して、WeatherUndergroundというところで、現在の気温などの気象情報を都市別(観測場所別)にXMLで配信していることがわかりました。

札幌の→http://api.wunderground.com/weatherstation/WXCurrentObXML.asp?ID=MAS390

中身はこんなんです

<?xml version="1.0"?>
	<current_observation>
		<credit>Weather Underground Personal Weather Station</credit>
		<credit_URL>http://wunderground.com/weatherstation/</credit_URL>
		<image>
		<url>http://icons.wunderground.com/graphics/bh-wui_logo.gif</url>
		<title>Weather Underground</title>
		<link>http://wunderground.com/weatherstation/</link>
		</image>
		<location>
		<full>APRSWXNET Ishikari City JP, Sapporo Air Base, </full>
		<neighborhood>APRSWXNET Ishikari City JP</neighborhood>
		<city>Sapporo Air Base</city>
		<state></state>
		<zip></zip>
		<latitude>43.147671</latitude>
		<longitude>141.297501</longitude>
		<elevation>19 ft</elevation>
		</location>
		<station_id>MAS390</station_id>
		<station_type></station_type>
		<observation_time>Last Updated on July 17, 10:49 PM JST</observation_time>
		<observation_time_rfc822>Sat, 17 July 2010 13:49:0 GMT</observation_time_rfc822>
		<weather></weather>
		<temperature_string>72.0 F (22.2 C)</temperature_string>
		<temp_f>72.0</temp_f>
		<temp_c>22.2</temp_c>
		<relative_humidity>37</relative_humidity>
		<wind_string>From the South at 5.0 MPH Gusting to 8.0 MPH</wind_string>
		<wind_dir>South</wind_dir>

(以下省略)

が華氏、が摂氏の「現在の気温」です。「現在の天気」(晴れとか雨とか)も入ってると嬉しかったのですが、残念ながら無いようです。

また、一応札幌という事ですが、実際の観測地点は隣の石狩市藤女子大学キャンパス付近のようです。

必要な情報を取り出して表示するファイルをつくる

さて、このファイルからなどの情報を得て表示するPHPファイルを書いていきます。(色々ググって見よう見まねです。PHPまだよく解らんです)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta name="robots" content="noindex,nofollow">
<title>札幌の現在の気温</title>
</head>
<body>
<?php 
	$xml = simplexml_load_file("http://api.wunderground.com/weatherstation/WXCurrentObXML.asp?ID=MAS390");
?>
<div style="border:solid 1px;width:320px;height:200px;padding:4px;">
<h1 style="font-size:24px;text-align:center;">札幌の現在の気温</h1>
<div style="float:left; width:155px;">
<dl>
		<dt><?php echo $xml->location->city; ?></dt>
		<dd>華氏<?php echo $xml->temp_f; ?>F°</dd>
		<dd>摂氏<?php echo $xml->temp_c; ?>C°</dd>
</dl>
</div>
<div style="text-align:center;">
<a href="<?php echo $xml->image->link; ?>"><img src="<?php echo $xml->image->url; ?>" title="<?php echo $xml->image->title; ?>" /></a>
</div>
</div>
</body>
</html>

読み込んでいる情報は「観測地点(Sapporo Air Base)」「現在の気温(華氏)」「現在の気温(摂氏)」「情報元バナー(とタイトル)」「情報元サイトURL」です。

「simplexml_load_file」というのはPHP5で使えるものだそうです。PHP4ではダメなので、お使いのサーバ仕様をご確認ください。

※メモ:上のXMLファイルはちゃんと改行されていて分かりやすいのですが、改行がなくゴチャゴチャで分かりにくいものの場合、PHPファイルに「print_r($xml);」で表示させると(改行はしないものの)タグと値が多少分かりやすくなります。


こうして出来たPHPファイルをGoogleガジェットにするためにXMLファイルを作ります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sapporo_no_kion" />
<Content type="url" href="(先程のPHPファイルのURL)" />
</Module>

このXMLのURLをiGoogleの「コンテンツを追加」>(左下の)「フィードやガジェットを追加」で登録すればオッケーな訳ですが…

結果。

※ガジェット化する前へのリンク

こんなん出ましたけど…

色気もへったくれも無いですね…orz


追伸:本当はこの下にGoogleガジェットのスクリプト貼ってるんですが、表示されないようです。サイドバーも同様。なんでだろ?…あれ、表示されたwなんでなんで?さっきまでの苦労は何?

…でもサイドバーに表示するには幅が広すぎるなこれ。


追伸その2:このガジェットを置きたいという奇特な方のためのリンク。
http://www.google.co.jp/ig/adde?moduleurl=http://aozora100.sakura.ne.jp/weather/kion.xml&source=imag

もしよろしければどうぞ。