便利ブックマークレット その11: はてなブックマークレットの解析

はてなブックマークの、ブックマークに追加するブックマークレットの
挙動について解析してみた。(2010/07現在のコード)

↑ブックマークレットを起動したときのWindowがかっこよさげ
なのでこれの挙動を調べたいのが動機。

まずはヘルプページにあるリンクから解析
ブックマークレットのJavascriptは以下のようになっている。
（一部読みやすくするため、改ざん）

(function(){
    var s = document.createElement('script');
    s.charset = 'UTF-8';
    s.src     = 'http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js'+Date.now();
    (document.getElementsByTagName('head')[0] || document.body).appendChild(s);
})();

というわけで、ブックマークレットの処理シーケンスは
http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js
にあることがわかる。
さらにその中で、
http://www.hatena.ne.jp/js/Ten.js
と
http://b.hatena.ne.jp/js/Hatena/Bookmark/LetLoader.js
を読み込んでいる。
ファイル置き場のドメインを見ると、Ten.jsは、はてなにおける
JSONPやXHRなどの共通処理を書いてあるファイルっぽいので、
今回は流し見にとどめておく。

で、コードを読んでだいたい以下のようになっている（と思う）

1. divタグなどでブックマークレットウィンドウの枠を表示する
2. ウィンドウをDraggableにしたり、浮いたような見た目にみせる
3. ウィンドウの中身は、外部ページをiframeで読み込む

ふむ。なんとなく流れはつかめたので、同じような機能を
自分で実装してみようと思う。