W!ボタンの開発で利用したテクニックと参考文献の紹介

先日公開しましたはてなブックマークを拡張するW!ボタンですが、想像していたよりも反響があり驚きました。ありがとうございました。

さて、今回はそのW!ボタンの開発に利用したテクニックの一部と参考文献を紹介します。

W!ボタンの開発には以下が役に立ちました。

JavaScript Shell
return文で強制的に制御を返すテクニック
The data: URI kitchen
Live HTTP Headers
Greasemonkey Hacks

JavaScript Shell

JavaScript Shellを利用することで

などを手軽に試行錯誤できる環境が得られます。この中でもXPathの作成をJavaScript Shellで行うのが特に有効だと感じました。というのも、JavaScript Shellはシェルで入力されたJavaScriptのコードが、ターゲットのページと連動して作用するからです。この特性を利用して、本当に自分が望んでいるXPathが得られるまでフィードバックを得ながら試行錯誤することができます。

では、自分のはてなブックマークのページの右側にあるtag cloudに、"workspace"というタグのリンクがあるとして、具体的に説明してみます。

まず、自分のはてなブックマークのページ(http://b.hatena.ne.jp/yourhatenaid/)に行って下さい。次にJavaScrip Shellを立ち上げます。その後、以下のコードをJavaScript Shellに入力してみます。

var elm = document.evaluate("//a",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
blink(elm);

"//a"の部分がXPathです。このコードは自分のはてなブックマークのページにあるリンクの中から、はじめに見つかるリンクのエレメントをelmに格納します。blink(elm);を実行することで、該当するリンクが点滅します。この場合、はてなブックマークのページにあるヘッダー部の「Hatena」という文字が点滅します。これによって、視覚的にどのリンクのエレメントなのか把握できます。

次に、自分のはてなブックマークのページのHTMLコードを見てみます。以下のようなコードが見つかるはずです。tag cloudのそれぞれのタグのリンクには"tag-"で始まるCSSのクラスが指定されていることがわかります。

[...]
<ul class="taglist">

<li><a href="/ysano2005/%40IT/" style="font-size: 10.4511278195489pt;" class="tag-latest">@IT</a></li>

<li><a href="/ysano2005/Ajax/" style="font-size: 12.796992481203pt;" class="tag-latest">Ajax</a></li>
[...]
<li><a href="/ysano2005/java/" style="font-size: 10pt;" class="tag-later">java</a></li>
[...]

そこで、先ほどのXPathを次のように変更します。これで、aエレメントのclass属性が'tag-'で始まるすべてを選択できるようになります。

//a[starts-with(@class, 'tag-')]

同様に、JavaScript Shellで上記のXPathに修正して試してみます。

var elm = document.evaluate("//a[starts-with(@class, 'tag-')]",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
blink(elm);

このコードを実行すると、私の場合、tag cloudの中に"@IT"のタグが一番始めにあるため、"@IT"が点滅します。

あと少しです。

最後に、tag cloudの中にある"workspace"タグのリンクのエレメントが得られるようにXPathを修正します。

var elm = document.evaluate("//a[starts-with(@class, 'tag-') and child::text()='workspace']",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
blink(elm);

これで、tag cloudにあるworkspaceタグのリンクのエレメントが取得できるようになりました。

XPathの知識はやっぱり多少は必要ですが、こんな感じで試行錯誤しながらXPathを作成していけば、自分がほしいXPathを割と楽に得られるのではないでしょうか。