古い記事
ランダムジャンプ
新しい記事
さくらの500円レンタルサーバーには
最初から ImageMagick [2008-08-15-3]
入っているので嬉しいですね。

ということで、東京アメッシュ[2007-11-11-4]をハック!
chumby の Load Image URL widget[2008-05-20-1]
で使う目的で、
東京の最新の降雨情報画像から、
東京23区の部分だけ抽出した画像を作ります。

東京アメッシュの画像を重ね合わせる


東京アメッシュの画像は三層に分かれています。
(某モ氏のハックを参考にさせて頂きました)

まず、最初にトップにでる低解像度の画像:
- http://tokyo-ame.jwa.or.jp/map/map000.jpg
- http://tokyo-ame.jwa.or.jp/map/msk000.png
- http://tokyo-ame.jwa.or.jp/mesh/000/200808311950.gif

「20080808311950」の部分は日時です。10分刻みです。
ImageMagick でこれらを重ね合わせて一枚の画像にできます。
以下、手順:
wget http://tokyo-ame.jwa.or.jp/map/map000.jpg
wget http://tokyo-ame.jwa.or.jp/map/msk000.png
wget http://tokyo-ame.jwa.or.jp/mesh/000/200808311950.gif
composite 200808311950.gif map000.jpg tmp.png
composite msk000.png tmp.png amesh000.png

次に、地域拡大のときに出る高解像度(3080x1920)の画像:
- http://tokyo-ame.jwa.or.jp/map/map100.jpg
- http://tokyo-ame.jwa.or.jp/map/msk100.png
- http://tokyo-ame.jwa.or.jp/mesh/100/200808311950.gif

同じく、重ね合わせ手順:
wget http://tokyo-ame.jwa.or.jp/map/map100.jpg
wget http://tokyo-ame.jwa.or.jp/map/msk100.png
wget http://tokyo-ame.jwa.or.jp/mesh/100/200808311950.gif
composite 200808311950.gif map100.jpg tmp.png
composite msk100.png tmp.png amesh100.png
最終ファイルは 2M ほどになります。巨大です。

Chumby で表示する


このままでは chumby で表示するには大きすぎます。
また、私の場合は東京23区の部分だけあれば十分です。
ということで、23区の部分だけを切り取ってから、縮小します。
convert -geometry 320x240 -extract 640x480+1500+700 \
amesh100.png amesh23.png

あとは、
Load Image URL ウィジェットの URL を設定し、
chumby で表示させるだけ。
こんな感じ。
Chumbyで東京アメッシュ

上記の処理は、シェルスクリプトにして cron で
動かすようにすると良いかもですね。
URLの日時部分を現在時にあわせるロジック、
ファイルのフルパス指定、
wget のオプション指定が必要になりますが。
10分ごとだと無駄が多いし、負荷の問題もあるので、
自分がいないであろう時間帯は呼ばないようにする、
ってのがエコで良いかも。
なにはともあれ自己責任でどうぞ。

Perl によるサンプルコード


Perl で Image::Magick モジュールを使った
プログラムを書いてみましたので置いておきます。
くどいようですが、自己責任でどうぞ。
#!/usr/bin/perl
use strict;
use warnings;
use Image::Magick;
use LWP::Simple;
use POSIX qw(strftime);

my $base_dir = "/home/USERNAME/www/var";
# あらかじめ base_dir でやっておくこと:
# wget http://tokyo-ame.jwa.or.jp/map/map100.jpg
# wget http://tokyo-ame.jwa.or.jp/map/msk100.png

my $dt = strftime "%Y%m%d%H%M", localtime;
$dt =~ s/\d$/0/;

my $url = "http://tokyo-ame.jwa.or.jp/mesh/100/$dt.gif";
mirror($url, "$base_dir/now.gif");

my $p1 = new Image::Magick;
$p1->Read("$base_dir/map100.jpg");
my $p2 = new Image::Magick;
$p2->Read("$base_dir/now.gif");

$p1->Composite(image => $p2, compose => 'Over');

my $p3 = new Image::Magick;
$p3->Read("$base_dir/msk100.png");

$p1->Composite(image => $p3, compose => 'Over');
$p1->Crop(x => 1500, y => 700, width => 640, height => 480);
$p1->Resize(width => 320, height => 240);

$p1->Write("$base_dir/amesh23.png");

また、 Resize の前に下記を足すと、
画像の左上に日時文字列が入ります。
$p1->Annotate(
    text => $dt,
    pointsize => 24,
    gravity => "NorthWest",
    x => 1500, y => 700,
    fill => 'black', stroke => 'gray', undercolor => 'white',
);
amesh hack

追記080910: ケータイから画像にアクセスすると
ファイルサイズが大きすぎると怒られて表示されないので、
jpg ファイルも出すようにした。
また、縦長画面に合うように90度回転した。
サンプルコードの最後のに下記を追加しただけ。
$p1->Rotate(90);
$p1->Write("$base_dir/amesh23s.jpg");
amesh


この記事に言及しているこのブログ内の記事