ユーザースクリプトは楽し

javascriptを覚えたので、ここらで一つ、ユーザースクリプトでも書いてみたい。しかし、今現在、自分では、とくに欲しい機能がない。そこで、適当に他人の欲しがっている機能を実現してみることにした。

図書館員がAmazonの検索を好きになれないたった一つの理由 - そうだ、図書館へ行こう！

選んだ理由は、たんにはてなブックマークの人気エントリーに上がっていただけだ。なるほど、発売日などの情報を、すぐに見たいという望みらしい。さっそく書いてみよう。

// ==UserScript==
// @name　　　　Amazon Mod
// @namespace　 http://cpplover.blogspot.com/
// @description move Amazon's Product Details to under the product name.
// @include　　 http://www.amazon.*/*
// ==/UserScript==

(function()
{
var holder = document.querySelector("div.buying h1.parseasinTitle") ;
if ( holder === null )
　　　　return ;

holder = holder.parentNode ;

var list = document.querySelectorAll("tbody td.bucket > div.content > ul > li") ;
if ( list.length === 0 )
 return ; 

var elem = document.createElement("ul") ;

for ( var i = 0 ; i !== list.length ; ++i )
{
　　if ( !list.item(i).getAttribute("id") && !list.item(i).getAttribute("class") )
　　　　elem.appendChild( list.item(i) ) ;
}

holder.appendChild(elem) ;
})() ;

上記のコードをユーザースクリプトとして使えば、アマゾンの商品名の下に、登録情報が表示されるようになる。とりあえず、amazon.co.jpとamazon.comでは動いた。

ユーザースクリプトになじみのない場合、このリンクをブックマークして、アマゾンのページで使うこともできる。

Chrome 3、Firefox 3.5、Opera 10、Safari 4で動くことを確認。問題は、querySelectorが、かなり最新のW3C規格だと云うことだ。jQueryなどのライブラリを使えば、最新ではないブラウザで動作させることも可能だろう。

なるほど、ユーザースクリプトは面白い。

しかし、ブラウザがjavascriptの実行に寛大なのは如何ともしがたい。list.item(i).getAttribute("class")の代わりに、list.item(i).classと書いても、Firefox、Opera、Chromeでは、問題なく実行できてしまった。もちろん、classは予約語なので、本来エラーになるべきである。エラーを出してくれたのはSafariのみ。なるほど、Safariは開発用として悪くないブラウザだ。また、最初は、querySelector("div.buying h1.parseasinTitle").parentNodeとしていたのだが、Safariはこれにもエラーを出してくれた。すばらしい。たしかにquerySelectorはnullを返す可能性があり、その場合、parentNodeを呼び出すのはエラーになる。Safariはなかなかやるブラウザだ。これからは、javascriptのコーディングにはSafariを用いようと思う。