閲覧するサイトに自動的にスクリプトを実行して便利に閲覧

駄文 IT

Firefoxのアドオンで非常にお世話になってるものがあるので、簡単に紹介。

FirefoxのアドオンでGreasemonkeyというのがある。これをインストールした上で、さらにGreasemonkey向けのスクリプトをインストールすると、任意のウェブサイトを開いた際に、自動的にスクリプトを作動させる事ができるというもの。

どんな事ができるか？基本的にはJavaScriptで出来る事なら大抵の事が可能ですが、イメージしやすいようなわかりやすい例を挙げてみると、

  • ウェブサイト上に書かれたテキストの中で特定の言葉を強調表示させる
    • 例えば漫画コミック発売日一覧表サイトにおいて、無数に列挙される一覧の中で、チェックしたいお気に入り漫画は数冊であり、それだけ分かれば良かったりするもの
    • しかし毎回一冊一冊スクロールして探したり、ページ内検索していくのは面倒
    • そんな時にお気に入り漫画を登録しておけば強調表示されるようなスクリプトも可能で、一目でチェックしたい漫画が見つかる
  • ウェブサイト上のメニューにリンク項目を追加する
    • 例えばYahoo!のトップページから東京の天気ページまで行くには天気→関東→東京とクリックして進んでいかなければならない
    • そんな時にトップページにワンクリックで東京の天気ページへ進むリンク項目を追加したりする事も可能
  • Flickrやブログなどに貼られた縮小画像を、ズームボタンなどを押さずに最初からオリジナルサイズ画像で表示する
    • Flickrやブログなどは基本的には最初は縮小画像が表示されているもの
    • Flickrの場合は、オリジナルサイズで見たい場合はズームボタンをクリックし、次にサイズ選択ページが現れるのでオリジナルサイズをクリックし、ようやく見られる
    • 次の画像もオリジナル画像で見たい場合は２ページ戻って次の画像をクリックし、またズームボタンを押して---としなければいけない
    • そんなサイトであっても、最初からオリジナルサイズ画像が出るようにするようなことも可能
    • ↓筆者が作成したFlickrにて最も大きいサイズを表示させるスクリプト
  • ウェブサイトの背景色を変える
    • 例えばYahoo!のサイトの背景色は白ですが、黒で表示されるようにする事も可能
    • この例は実用性ありませんが、背景色のみならず、ウェブサイトのデザインも変える事が可能（あくまでそのPC上にてFirefoxで見る範囲でだけ見え方を変えられるのであって、ウェブサイトそのもののデザインが変わるわけではない）


このように訪れたサイトの見え方や内容を変えて、ウェブサイトをより便利に利用できるようにする事ができる。膨大な量のスクリプトが公開されてるので「こんな事できるスクリプトがないかな？」と思って探してみれば大抵ありますが、JavaScriptで簡単に書けるので、書ける人ならサクッと書いて以後便利にウェブサイトを利用できるようになるわけです。

またXMLHttpRequestも可能なので、下記の例のような別ページの情報を取得して表示するなんて事も可能。

  • ラーメンデータベースのランキング店舗一覧ページに最寄り駅を追加表示する
    • 昔自分が作ったスクリプトで、今はサイトがリニューアルしたので使えなくなってしまいましたが、こんな事が出来るようにしてました
    • ラーメンデータベースのランキングは県、区などで絞込んで店舗一覧が表示されるが、各店舗の最寄り駅を知るには店舗名をクリックして、店舗詳細情報ページへいちいち進まないといけない
    • これが面倒なので店舗一覧ページを表示した時点で、スクリプトで自動的に各店舗名の横に最寄り駅が表示されるようにした
    • 実現方法をざっくり書くと、XMLHttpRequestを使って各店舗の詳細情報ページのHTMLソースを取得し、そこに書かれた最寄り駅を抽出して店舗一覧ページに追記するようにした


ちなみにGreasemonkeyのように他人が作った任意のサイトでJavaScriptを実行する方法として、ブックマークレットがある。ブックマークには通常URLを登録するが、代わりにJavaScript文を登録する事も可能で、ブックマークを選んだ際に開いてるページに対して実行される。Greasemonkeyの場合はページを開いた時点で自動的に実行されるので、処理内容によって使い分けて活用すると、普段よくアクセスするサイトがグッと便利になる。


スクリプト作りをしてみたい場合は、他人が作ったスクリプトも中身のコードを見る事は可能なので、シンプルなコードなどをダウンロードしてきて参考にしながら試してみると良いと思います。
個人的にGreasemonkeyスクリプトを書く際に使う、定番の処理（関数）は下記となり、この辺りさえ使い方がわかれば、それなりに応用が聞くと思います。

  • 置換処理（replaceまたはsplitとjoin）
    • ページソースの全文なり部分的に置換（全置換）する事が可能
    • 前述の漫画サイトの強調表示などに活用できる
    • 「お気に入りの漫画名」を「＜font style=background-color:red;＞お気に入りの漫画名＜/font＞」などのように、目立つようにするタグで括る形に全置換すれば良い
  • 文字列の特定部分を取得する（indexOfとsubstring）
    • ページソースやURLなど、文字列から特定部分を取得する
    • indexOfは特定の文字列が何文字目に登場するかを調べるもので、substringは何文字目から任意の文字数分の文字列を取得
    • 例えば「http://www.hoge1234.com/IMG_5623.jpg」という文字列があって、「IMG_」の直後にある数字4桁を取り出したいというような場合に利用できる

XMLHttpRequestの使い方も覚えると、別ページの情報も取得する事ができるため、前述のラーメンデータベースのような事が出来る。またHTMLをオブジェクトとして扱うDOM周りが理解できると、HTMLをどうとでも出来るようになるので理想的。

ちなみに自分がよく多用するのはevaluate関数を使って、ソース内の特定のノードを見つけ、そこを基準に親ノードや子ノードのノード自体や要素を変更する処理。
基本的にGreasemonkey向けに作るスクリプトって、開いてるページを部分的に変える事がほとんどなので、indexOfなどを使って変えたい部分を特定する事が多く、オブジェクトレベルで変更する場合には、たいていはevaluateから処理を始めることがほとんどだったりしている。