« "コモディティ化と人月"の現実 | メイン | Web2.0の広がりはXMLのアフォーダンス »

はてなマップをハック2 経路ブックマークレット編

今回はちゃんとしたハックに近い気がするのでちゃんと説明してから(笑)。

ブックマークレット
 前回とは異なり「自由にユーザーや地図の位置を替えられる」ようにします。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に対応すれば、きれいになるかな。

トラックバック

このエントリーのトラックバックURL:
http://www.arclamp.jp/mt33/mt-tracback.cgi/1482

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

About

2005年09月11日 14:00に投稿されたエントリーのページです。

ひとつ前の投稿は「"コモディティ化と人月"の現実」です。

次の投稿は「Web2.0の広がりはXMLのアフォーダンス」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Creative Commons License
このブログは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.
Powered by
Movable Type