不完全なHTMLを動的にタッチアップ

Greasemonkeyを活用した互換性の確保とTouchUpWebプロジェクト

Greasemonkeyを使ってみよう

　前述の理由から、FirefoxやOpera、SafariといったIE以外のブラウザでアクセスすると、表示のレイアウトが崩れたり、システムがうまく動作しないケースがあります。Greasemonkey（グリースモンキー）という拡張機能を使うと、この問題を解決することができる場合があるのです。

Greasemonkeyとは

　Greasemonkeyは、もともとFirefoxの拡張機能として開発されたモジュールで、ダウンロードしたHTMLやCSSに対してWebブラウザ内部でスクリプトを適用できるようにします。スクリプトを適用することで、コンテンツを表示する前に修正します。この仕組みによって、Webコンテンツをローカルにカスタマイズすることが可能になります。

　Greasemonkeyの評判が高かったので、同様の機能が最新版のOperaでも実装されました。またGreasemonkey拡張機能は、Safariの拡張機能としても実装されています。

Greasemonkeyの導入

　Greasemonkey拡張機能のFirefoxへの組み込みはとても簡単です。まずFirefox Add-ons Webサイトへアクセスし、Greasemonkeyのダウンロードページを開きます。インストール用のリンクをクリックすると、拡張機能を組み込むかどうかを尋ねるダイアログがポップアップします（図3）。

図3 Greasemoneky拡張機能の組み込み

　しばらく待つと、インストールを始めるためのボタンが有効になるので、そのボタンを押してGreasemonkey拡張機能をインストールしましょう。ダウンロードが終わったら、Firefoxを再起動します。ウィンドウの右下にGreasemonkeyのアイコン（図4）が出現していればGreasemonkey拡張機能の組み込みは成功です。

図4 Greasemonkeyのアイコン

Greasemonkeyのユーザースクリプト

　Greasemonkeyが使うスクリプトの実体は、JavaScriptです。このスクリプトに、スクリプトの名前や説明、スクリプト適用対象（URL、ドメインなど）のメタデータが組み合わさって、Greasemonkeyのユーザースクリプトになります（図5）。

図5 ユーザースクリプトの構造

　userscript.orgでは、さまざまなユーザースクリプトが集積・公開されており、Greasemonkeyのコミュニティを形成しています。さまざまなWebサイトに対する便利なカスタマイズ例が提供されているので、いろいろと試してみるとよいでしょう。

ユーザースクリプトの例

　ここでユーザースクリプトの例を一つ紹介します。このスクリプトは、私が日ごろ愛用しているスクリプトの一つです。

Google Button Search Now

// ==UserScript==
// @name          Google Button Search Now
// @namespace     http://a-h.parfe.jp/einfach/
// @include       http://*.google.*/*
// ==/UserScript==

(function() {

var ginput = document.getElementsByTagName('input');

for (i=0; i<ginput.length; i++){
    if(ginput[i].id == 'lrt' || ginput[i].id == 'stw' ||
 ginput[i].id == 'il' || ginput[i].id == 'all')
 ginput[i].addEventListener('click', function(){
        var gform = document.evaluate("//form[@name='f']", document, null,
 XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue ||
 document.evaluate("//form[@name='gs']", document, null,
 XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        gform.submit();
    }, true);
}

})();

• このスクリプトへのリンク

　このスクリプトは、googleを操作する手間をちょっとだけ軽減するものです。

　googleには、「◎ ウェブ全体から検索 ○ 日本語のページを検索」というように、すべてのWebサイトを対象として検索するか、各国語のページだけを検索対象とするかを切り替えるラジオボタンがあります。通常、このラジオボタンを操作して検索対象を切り替えた後は、必ず［検索］ボタンを押すはずです。このスクリプトはその手順を自動化してくれるスクリプトです。つまり、ラジオボタンを切り替えた瞬間に、検索を実行してしまうのです。

　ワンアクション減らすだけ、ほんのひと手間を省略するだけのちょっとしたカスタマイズですが、頻繁に利用する機能だけに重宝しています。

ユーザースクリプトの登録

　ユーザースクリプトを登録する方法はいくつかありますが、ここでは代表的なやり方を紹介します。

　Greasemonkeyのユーザースクリプトは、.user.jsという拡張子を付けたファイル名で記録します。使い慣れたエディタでスクリプトを記述してください。作成し終わったらファイルにセーブします。ファイル名は、上記の拡張子を付けた名前であれば何でも構いません。

　次に、Greasemonkey拡張機能を組み込んだFirefoxでそのファイルを開きます。例えば、ロケーションバーにfile:///home/iiojun/userscript.user.jsなどと入力してそのファイルを表示させます^（※1）。すると、「このファイルはGreasemonkeyのユーザースクリプトである」ということが自動的に認識され、このスクリプトをインストールするかどうかが尋ねられます。問題がなければ［Install］ボタンを押してユーザースクリプトを登録しましょう（図6）。

図6 ユーザースクリプトの登録

　なお登録したユーザースクリプトは、［ツール］-［Manage User Scripts］メニューを使って管理することができます。スクリプトの修正や削除は、このメニューで表示されるダイアログから行います。

※1

　Windowsで実行する場合、環境設定によっては、ローカルファイルを開こうとするとダウンロードマネージャが起動してしまうことがあります。そのときは、レジストリエディタで拡張子「.js」に対するContent Typeをapplication/x-javascriptもしくはtext/javascriptに設定してからやり直してみて下さい。MIME-Typeを正しく設定してあるサーバに置いて、そこからダウンロードするようにアクセスするという手順でもOKです。