今回はちゃんとしたハックに近い気がするのでちゃんと説明してから(笑)。
ブックマークレット
前回とは異なり「自由にユーザーや地図の位置を替えられる」ようにします。9月9日の機能アップによって、はてなマップに個人ページが用意され、個人のはてなフォトライフデータをロードすることが可能になったのでこれを利用します。
しかし、Ajaxで困り者なのはセキュリティの関係上、XmlHttpRequestで他ドメインの情報をロードできない点です。これを回避する方法はいくつかあるのですが今回はブックマークレット(Bookmarklets)にしてみました。
ブックマークレットとは、ブックマークにURLの代わりにJavaScriptを登録し、欲しい情報があるドメインのページを表示した状態でブックマークを実行することで、そのページのHTMLを書き換えるという手法です。もちろんドメインのままですからXmlHttpRequestの問題も回避できます。
ブックマークレットという言葉は知っていたのですが、よく意味を理解していなかったので勉強になりました。有名どころではdel.icio.us direc.torで使われています。これの詳しい解説は、mizzy.orgさんのdel.icio.us direc.torの謎などで。
しかしセキュリティ的には気持ち悪いのですね(笑)。ただサーバでのプロキシもいりませんし非常に便利なことは確か。
はてなマップ経路ブックマークレット
さて、さっそくと言いたいところですが残念ながらIEに対応していません。IEでは経路を記述するときにVMLを利用しています。そのため特別なHTMLタグとSTYLEタグの記述方法があります。はてなマップは経路に対応していないのでこのタグが記述されていません。JavaScriptで追記するようにしてみたのですが、うまくいかないみたいです。そのためIEでは経路表示ができません。はてなマップ自体に追加されるのを待つしかないようです。
では、使ってみてみましょう。動作はFireFox、Safariで確認済みです。まず、下のリンクを右クリックでブックマークに登録してください。
それから、はてなマップの個人ページに移動します。僕の場合はhttp://map.hatena.ne.jp/yusuke_jazz/。
普通に情報が表示されたら、ブックマークから先ほどのブックマークレットをクリックします。すると同じ地図が経路用に切り替わります。右側に表示されているのは日付と写真の枚数です。チェックボックスをクリックすることで、該当日の写真を表示し、日付が古い順に経路でつなぎます。スタート地点が赤いアイコンで、ゴール地点が青いアイコンです。
僕の東京1周であれば、ここらへんを表示してブックマークレットしてください。20050821をチェックすると経路が表示されます。

仕組みは、ブックマークレットを実行した時に'はてなマップ'で表示されている写真だけが対象になり、あとは位置を動かしても固定されています。ズームして眺めるもよし、動かして眺めるもよし。やり直したい場合は'はてなマップ'に戻って、つまりリロードしてから再度ブックマークレットを実行してください。「このページへのリンク」を実行すると、そのままの位置ではてなマップに戻ります。
ズームアップしすぎると経路表示が遅くなります。座標に対して正直に線を引いているので、近づくとそれだけ線が長くなります。適度な辺りで眺めることをお勧めします。
jkondoさんで経路ブックマークレット(笑)
僕の東京一周だけではつまらないので自転車好きで有名なjkondoさんをターゲットに(笑)。たとえば命の輝きで書かれているツール・ド・信州だと思うのですが、ここらへんから、20050814、20050815、20050816をチェックしてもらえるとこうなります。5日間あると書かれているのでもっと長いんでしょうね。

それから都内ですがここらへんでは、20050605をクリックしもらうと円が描かれています。これ東京の方ならわかりますよね。マップ表示にすると山手線に沿っていることがわかるはずです。で、日記をみると山手線一周。

雑感
写真を経路で並べてみると視覚的に意味が通じるのが面白いです。遊びとして、みんなで一筆書きとかできる気もします。
あとはフォトライフのフォルダごとに出るとうれしいのではないかと想像されます。ていうか、そもそも写真のロードを位置ではなくフォルダでできればよいと思います。日付はアップした日でしかないので、jkondoさんのようにまじめにアップしていれば良いのですが、僕のようにあとになって上げているとわけがわからなくなります。
それからコードは参考になるとは思えません。だいぶ気持ち悪いことになっています(笑)。僕のJavaScript能力は5年ぐらい前から止まっているので非常に原始的です。あと時間もかかりましたね。夜が白んできてましたorz。今回は、はてなマップ側のソースがオブジェクトばりばりになっていて非常に勉強になりました。
あ、もちろん最終的に狙っているのははてなマップでの経路採用ですから、このブックマークレットの寿命が短いことを祈っています。
2005/09/13 追記 : センターマーカーやクリップなど、はてな側の機能を消してしまっていたのを正しく継承するようにしました(うーん、クリップは若干うるさいようなぁ)。あとはMarkerMakerに対応すれば、きれいになるかな。
