東京アメッシュの降水量を表示するJavaScriptのサンプルコード

夏も終わりに近づいてきましたね。

近頃は天気が変わりやすいため、東京アメッシュなどで
数時間に一回、関東周辺の降水量を確認しています。

- 東京アメッシュ
-- http://tokyo-ame.jwa.or.jp/

このサイトを見ていると、そのうち何となく何時間後に
自分の住んでいる地域が雨になりそうかが、分かるようになります。

こういう天気系の情報は常に需要があるので、
かなり良いなぁと思います。

で、この東京アメッシュは東京都下水道局が運営しています。
僕は都民なので、積極活用させていただきます。

モダシンさんが東京アメッシュをいじくっていたので、
ソースコードを眺めてみました。

- Rain?
-- http://aivy.jp/rain/

なるほど、

東京アメッシュは、以下のように画像を3枚重ねていたのですか。
画像を表示し、表示の絶対位置を動かすことで、
全ての画像を重ね合わせていたのです。すごいなぁ。

- 低解像度版
-- http://tokyo-ame.jwa.or.jp/mesh/000/[0-9]{4}[0-9]{2}[0-9]{2}0000.gif

- 高解像度版
-- http://tokyo-ame.jwa.or.jp/mesh/100/[0-9]{4}[0-9]{2}[0-9]{2}0000.gif

例、2011年1月1日1の12時ちょうどの場合。
http://tokyo-ame.jwa.or.jp/mesh/000/201101011200.gif

- 低解像度版
-- http://tokyo-ame.jwa.or.jp/map/msk000.png
-- http://tokyo-ame.jwa.or.jp/map/map000.jpg

- 高解像度版
-- http://tokyo-ame.jwa.or.jp/map/msk100.png
-- http://tokyo-ame.jwa.or.jp/map/map100.jpg

<style type="text/css">
<!--
 .image-position{position:absolute;left:300px;}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
 function getNow() {
   var date   = new Date();
   var tmp_y  = date.getYear();
   var year   = (tmp_y < 2000) ? (tmp_y + 1900) : tmp_y;
   var mon    = date.getMonth() + 1;
   var day    = date.getDate();
   var hour   = date.getHours();
   var min    = date.getMinutes();
   if (mon < 10) {mon = "0" + mon;}
   if (day  < 10) {day = "0" + day;}
   if (hour < 10) {hour = "0" + hour;}
   min = parseInt(min / 10) + "0";
   var now = year + mon + day + hour + min;
   return now;
 }
//-->
</script>
<div>
<img src="http://tokyo-ame.jwa.or.jp/map/map100.jpg" class="image-position" style="z-index:1;" width="300">
<img src="http://tokyo-ame.jwa.or.jp/map/msk100.png" class="image-position" style="z-index:2;" width="300">
<script language="javascript" type="text/javascript">
var now = getNow();
document.write("<br><img src=\"http://tokyo-ame.jwa.or.jp/mesh/000/" + now + ".gif\" class=\"image-position\" style=\"z-index:3;\" width=\"300\" >");
document.write("<br><br><br><br><br><br><br>" + now + "の画像<br>");
</script>
</div>