はてなマップのお勉強と、ちょっとしたはっく

はてなマップの実装のお勉強

はてなマップの勉強は順調です。少しアドバイス。はてなマップの実装を勉強をしたい人は、はてなマップのコードとDeveloper Notes for prototype.jsをにらめっこすると良いです。それと私は、linuxのマシンにwgetではてなマップのソースを取ってきて、grepやらvimやらでコードを読んでます。印刷したコードだけでは限界があったので。

$ wget http://map.hatena.ne.jp/js/map.js
$ wget http://map.hatena.ne.jp/js/page.js
$ wget http://map.hatena.ne.jp/

あと、UMLのクラス図を自分でコードを読みながら描いていくと、構造が見えてきて理解しやすくなります。prototype.jsにおけるクラスや継承の表現方法など、基本的な所を勉強しておけばすぐに描けます。

Hatena::Map::MyFavoritePlaceHack

せっかくはてなマップの実装を勉強したので、何か楽しいことができないか考えてみました。それで思いついたのがgreasemonkey。これを使えば、はてなマップをHackできそうな予感がしました。

greasemonkeyを今まで使ったことはありましたが、自分でgreasemonkeyのコードを書くのは今回がはじめてだったので勉強しました。この資料が参考になりました。まだ全部は読んでいませんが、お決まりの"Hello, world!"を出すサンプルを試したら大体雰囲気はつかめました。

それでは、私が考えたHackを紹介します。

前から思っていたのですが、毎回はてなマップにアクセスすると、はてなの仕事場がマップの中央にセットされます。これに、もうそろそろ飽きてきました。そこで、何とかしてみようと思い、こんなコードを書いてみました。あくまでサンプルなので、マップの中心の緯度経度をハードコードしています。このgreasemonkeyスクリプトをインストールして、はてなマップにアクセスすると、羽田空港が最初に表示されるようになります。

興味がある方は、一度お試しくださいませ。

最後に一言。greasemonkeyのスクリプトを実際に自分で書いてみると、改めてgreasemonkeyの凄さを実感しました。はてなマップのHackへの可能性が見えてきました。

$ vi my.favorite.place.0.01.user.js
// ==UserScript==
// @name          Hatena::Map::MyFavoritePlaceHack
// @namespace     http://vaio.redirectme.net/lib/greasemonkey
// @description   Change the default place(hatena,Inc) to my favorite place whenever you load Hatena::Map.
// @include       http://map.hatena.ne.jp/*
// ==/UserScript==

(function() {
    favorite = new GPoint(139.7890, 35.5457);
        
    if (MapUtil.japancheck(favorite.x, favorite.y)) {
        p = MapUtil.wgs2tokyo(favorite.y, favorite.x);
    }

    map.centerAndZoom(p, 0);
})();