使い勝手の悪いWebサイトを勝手に改造する(Greasemonkey)
仕事で日常的に使わなくてはならない、社内WebサイトのUIが使いにくい。Prevボタンさえ付けてくれれば……、と思うが、こういう要望を出しても、すぐに対処してもらえるとは限らない(そもそも要望を受ける窓口がないこともある)。
そういうときには、FirefoxのAdd-onであるGreasemonkeyでユーザスクリプトを作れば、クライアント側(つまり自分のブラウザ)で、Webサイトを改造できるということで挑戦してみた。
調べみると、どうも大多数のGreasemonkeyユーザは、既存の便利なユーザスクリプトを使うだけのようで、ユーザスクリプトの作り方についての情報が少ないので、ポインタ主体だがまとめておく。
- とりあえず読むべし(英語)。Dive Into Greasemonkey。 タイトルの通り、他の言語・環境でプログラムしたことはあるんだけど、ユーザスクリプトとかJavascriptとか、書いたことがない、という人にはベストな入門文書。PDFでダウンロードできるので便利。
- あとは、自分のやりたいことと似ているユーザスクリプトをGoogleででも探して眺める。自分は、ページ上にボタンを追加して思う通りの動作を追加させたかったので、Gmail Special Searchesがとても参考になった。
このあたりを準備できたら、まずは改造したいWebページの、改造したい辺りのDOMを、Firebugをインストールすると出てくる"Inspect Element"というメニューでながめる。idはどうなっているか、DOMの親子関係はどうなっているか、などなど。
そうしつつ、Dive Into Greasemonkeyを見ながら、とりあえずボタンを表示させてみるなどしつつ、格闘していけばそのうちできる。自分の場合は、Javascriptの開発経験もなかったため、週末を1日ほどつぶしてしまったが、その経験があればもっと短時間で済むはず。
ユーザスクリプトを作っている途中で気づいたことをメモ。
- Greasemonkeyで作成したユーザスクリプトは、ページ読み込み時に1回実行されるだけである。そのため、ユーザスクリプトで定義したfunctionもその場限りで消えてしまい、自分が追加したボタンでページ表示後に呼び出すことは、そのままではできない。addEventListenerを使う必要がある。具体的な使い方は、Gmail Special Searchesが参考になった。
- Javascriptには、sprintfがない。具体的には、数値を"02"などのように常に固定桁数(この場合2桁)で表示させたかったので、ちょっと困った。色々と検索したら、下記のように解決できることが分かった。なるほど。
str = ("00" + intVal).substr(-2);
