2005-09-10

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

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

はてなマップの勉強は順調です。少しアドバイス。はてなマップの実装を勉強をしたい人は、はてなマップのコードと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);
})();

2005-09-10

Hatena::Map::MyFavoritePlaceHack 0.02

ちょっとだけ改良してみました。0.01からの変更点は以下の通りです。

はてなマップの縦幅をデフォルトよりも広くなるように変更
コードのコメントを大幅に追加(英語)

ここからお試しください。

マップの縦幅は、idが"map"のdiv要素をDOMを使って調整しています。prototype.jsで提供されている$()関数を使うと、すっきり書けますね。

少し不都合があります。マップ中央にあるべきのターゲットマーカーが少し中央からずれてしまっています。ただ、マップをダブルクリックするとそのクリックした位置とターゲットマーカーの中央とがピッタリ一致するので、操作上は問題は無いと思います。ちょっと気になりますけど。

はてなマップをロードして間もない時に取ったスクリーンショットはこんな感じです。上が今回作成したgreasemonkey スクリプトを適用したもので、下が普通のはてなマップです。たったこれだけのスクリプトでここまでできるのですね。

$ vi my.favorite.place.0.02.user.js
// ==UserScript==
// @name          Hatena::Map::MyFavoritePlaceHack 0.02
// @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" variable below is at Haneda Airport.
    // The coordinate system here is WGS not Tokyo Datum.
    favorite = new GPoint(139.7890, 35.5457);
         
    // The argument order of MapUtil#japancheck() and MapUtil#wgs2tokyo()
    // are little confusing (lack of consistency). The spec should be improved.
    if (MapUtil.japancheck(favorite.x, favorite.y)) {
        p = MapUtil.wgs2tokyo(favorite.y, favorite.x);
    }

    // "map" is a GMap instance.
    // So, you can use any exported Google Maps API's functions.
    // Here is the example of the centerAndZoom() function.
    map.centerAndZoom(p, 0);
                                                    
    // Tweak the height of the map.
    // The default value is 380px.
    // See the "Developer Notes for prototype.js covers version 1.3.1"
    // for the details of the "$()" utility function.
    $('map').style.height = '500px';
})();