■ファイアーフォックス(Firefox)でユーザースクリプトを使ってみよう
このページの更新は終了しました。わたし自身が、ファイアーフォックスからシーモンキーにのりかえたからです。そんなわけで、「■ブラウザー・メールソフトのりかえ案内――シーモンキー(SeaMonkey)」、「■シーモンキー(SeaMonkey)をカスタマイズ」をどうぞ。
「■ファイアーフォックス(Firefox)でユーザースタイルシートを使ってみよう」で紹介したように、ユーザースタイルシートを使えば、ファイアーフォックス自体の「みため」と、ファイアーフォックスで表示しているウェブページの「みため」――を変えることができます。でも、ユーザースタイルシートが得意なのは、「みため」という“静的な”部分の変更。ファイアーフォックス自体の「動作」や、ファイアーフォックスで表示しているウェブページの「動作」といった“動的な”部分を変更したいときには、ちょっと不向きなんですね。
そんなときに試してみたいのが、
- 「ユーザークロームJS」(userChromeJS)というアドオン
- ユーザークロームJS用のユーザースクリプト
では、ユーザースクリプトでどんなことができるのか。わたしが使っているスクリプトをいくつかあげておきましょう。
- CopyUrlLite.uc.js……現在のページのタイトルやURLなどをクリップボードにコピーする
- DragImage_v2.1.uc.js……スクロール可能な画像をマウスでドラッグする
- uAutoPagerize.uc.js……ページを自動的につぎたして読み込む
- UrlFilter.uc.js……広告など指定したURLを読み込まない
- UserAgentSwitcher.uc.js……複数のユーザーエージェントをきりかえる
- wheelscroll-to-change-search-engine.uc.js……検索バー上のマウスホイールで検索エンジンをきりかえる
- OpenIE_1.0.uc.xul……現在のページや選択したリンクをインターネットエクスプローラーで開く
- GoogleTrackingBeGoneFixed.user.js……グーグルの検索結果からクリックトラッキング(どのリンクをクリックしたかを追跡する)用のURLを削除する
- ユーザークロームJSを使って、ファイアーフォックス自体の「動作」を変更する方法
- ユーザークロームJS用スクリプト(「UserScriptLoader.uc.js」)を使って、ファイアーフォックスで表示しているウェブページの「動作」を変更する方法
1. ユーザースクリプトを使えるようにする
まずは、環境をととのえましょう。具体的には、アドオンのインストールや、必要なファイルのコピーなどをしていきます。
◆「ユーザークロームJS」(userChromeJS)をインストール
「ユーザークロームJS」(userChromeJS)は、ユーザースクリプトを使うためのアドオンです。「mozdev.org - userchromejs」からインストールしてください。公式のアドオンサイト「Add-ons for Firefox」には登録されていない、ちょっとマイナーなアドオンです。
userChromeJSをインストールすると、プロファイルフォルダーのなかに「chrome」フォルダーが作られます。そしてchromeフォルダーのなかに、「userChrome.js」というファイルが作られます。
このuserChrome.jsにいろいろなスクリプトを書き込んでいって、ファイアーフォックス自体の動作を変更する……というのが本来の使い方。でもここでは、本来の使い方はしません。スクリプトが管理しづらくなるからです。したがってuserChrome.jsをべつの名前、たとえば「userChrome-example.js」などに変えておいてください。
なお、プロファイルフォルダーを開くには、メニューの[ヘルプ]→[トラブルシューティング情報]を選び、「フォルダを開く」ボタンを押すといいでしょう。
◆「userChrome.js」「000-windowhook.uc.js」「rebuild_userChrome.uc.xul」をchromeフォルダーにコピー
以下の3つのファイルを使うと、1スクリプト=1ファイルというかたちでスクリプトを管理できるようになります。
- userChrome.js(本来のuserChrome.jsを置き換えるもの)
- 000-windowhook.uc.js
- rebuild_userChrome.uc.xul
ダウンロードしたzipファイルは、「Alice0775.zip」などとリネームしてください。てきとうなフォルダーに解凍して、上記の3つのファイルをchromeフォルダーにコピーします。
以後、userChromeJS用のスクリプトはchromeフォルダーに置いて使うことになります。おぼえておいてくださいね。
◆「UserScriptLoader.uc.js」をコピー
以下のファイルを使うと、ファイアーフォックスで表示しているウェブページのみためや動作を変更するスクリプトを読み込めるようになります。要するに、ウェブページのみためや動作を変更するには、以下のファイルが必要、ということですね。
- UserScriptLoader.uc.js
ダウンロードしたzipファイルは、「Griever.zip」などとリネームしてください。てきとうなフォルダーに解凍して、上記のファイルをchromeフォルダーにコピーします。
コピーしたら、chromeフォルダーに「UserScriptLoader」フォルダーを作ってください。UserScriptLoader.uc.js用のスクリプトは、UserScriptLoaderフォルダーに置いて使います。これもおぼえておいてくださいね。
*
ここまでの作業が終わったら、chromeフォルダーを開いてみましょう。必要なファイルとフォルダーがそろっていれば、OKです。
つづいて、ファイアーフォックスを終了して立ち上げなおしましょう。
userChromeJSと、Alice0775さんのuserChrome.jsなどが導入されていれば、[ツール]メニューはこんなふうになります。また、GrieverさんのUserScriptLoader.uc.jsが導入されていれば、ロケーションバーの右端にかみなりマークが表示されます。
2. userChromeJS用スクリプトを使ってみる
◆userChromeJS用スクリプトを探す
userChromeJS用スクリプトを探すなら、まとめサイト「userChrome.js用スクリプト - wiki@nothing」が便利でしょう。さまざまなスクリプトが配布サイト別にまとめられています。かんたんな説明もついているので、わかりやすいですね。
◆userChromeJS用スクリプトをインストール・アンインストールする
使ってみたいスクリプトがあったら、スクリプトのファイルをダウンロードして、chromeフォルダーに移動してください。ファイアーフォックスを立ち上げなおすと、そのスクリプトが使えるようになります。インストールにかかる手間はこれだけです。
インストールしたスクリプトは、後述のテキストエディターなどで、かならずなかみをみておきましょう。先頭部分に、そのスクリプトについての説明が書いてあったりしますから。また、設定を自分で書き込まなくてはならないスクリプトもあります。
使わなくなったスクリプトは、ファイアーフォックスを終了してから、削除してください。これでアンインストールしたことになります。
◆userChromeJS用スクリプトを自分で保存するとき
スクリプトのファイルをダウンロードするのではなく、たとえば、クリップボードにコピーしてなにかのソフトにはりつけてから保存する――という場合もあるでしょう。そんなときは、保存する文字コードに注意してください。
スクリプトファイルの文字コードは、「BOMなしUTF-8」でなければなりません。ところが、ウィンドウズに付属するメモ帳で、文字コードを「UTF-8」にして保存すると、「BOMつきUTF-8」で保存されてしまいます(BOMはバイト・オーダー・マーク〔Byte Order Mark〕の略で、データの並び順を示すバイナリー値です。メモ帳でUTF-8保存すると、ファイルの先頭3バイトに「EFBBBF」というBOMが付加されます)。「BOMつきUTF-8」のファイルをchromeフォルダーにコピーしても、スクリプトとして動作しません。
したがって、クリップボードにコピーしたスクリプトは、「BOMなしUTF-8」で保存できるテキストエディターにはりつけてください。
テキストエディターについては、オンラインソフトのダウンロードサイト「ベクター」のテキストエディタのジャンル(ウィンドウズ用)をどうぞ。たいていのテキストエディターは、「BOMなしUTF-8」で保存できます。
……といっても、わかりづらいかもしれませんね。実際にやってみましょう。スクリプトとテキストエディターは、以下のものを使用します。
- スクリプト……wheelscroll-to-change-search-engine.uc.js
- テキストエディター……MKEditor(ウィンドウズ用)
wheelscroll-to-change-search-engine.uc.jsをマウスで選択反転して、クリップボードへコピー。MKEditorにはりつけます。そして、MKEditorで[ファイル]→[名前を付けて保存]を選ぶと、この画面になります。
ここでは、ファイルの種類を「全てのファイル (*.*)」、文字コードを「UTF-8N (BOMなし)」にしています。こんなふうに保存すればいいわけです。
保存したスクリプトのファイルは、chromeフォルダーに移動することをお忘れなく。ファイアーフォックスを立ち上げなおすと、検索バー上のマウスホイールで検索エンジンをきりかえられるようになります。
◆userChromeJS用スクリプトを自作するには?
userChromeJS用スクリプトを自作するには、JavaScriptの知識だけでなく、ファイアーフォックスやサンダーバードをかたちづくっているユーザインターフェース記述言語「XUL」(ズール)――の知識が必要です。JavaScriptについては、いまさらいうまでもなく、たくさんの参考書や参考サイトがあります。XULについては、モジラ・デベロッパー・ネットワークの「XUL」が参考になるでしょう。
いずれにせよ、すでにあるスクリプトをみながら、あれこれ試行錯誤していくのがてっとりばやいんじゃないでしょうか。わたし自身はといえば、みようみまねのごく初歩的なスクリプトしか書けません……(^^;;;。
参考までに、ファイアーフォックスを再起動するスクリプトをあげておきましょう。このスクリプトは、「ScrapBook」などのアドオンを開発している「Gomita」さんがまとめた「userChrome.js 〜拡張機能の解体再構築〜」に掲載されていたものを、わたしがすこしだけ改変したもの。「RestartBrowser.uc.js」などというなまえで保存してください。もちろん、文字コードは「BOMなしUTF-8」で。
// ==UserScript== // @name RestartBrowser.uc.js // @version 1.0.0.0 // @description [ファイル] メニューに [再起動] を追加する // @author あなたのなまえ // @namespace // @include chrome://browser/content/browser.xul // @compatibility Firefox 20.0+ // @note // ==/UserScript== (function() { // メニュー項目の文字 再起動 // UTF-8 -> UTF-16へ変換する var unicodeConverter = Components.classes['@mozilla.org/intl/scriptableunicodeconverter']. createInstance(Components.interfaces.nsIScriptableUnicodeConverter); // このスクリプトの文字コード unicodeConverter.charset = 'UTF-8'; var labelText = unicodeConverter.ConvertToUnicode('再起動'); // メニューをつくる var restartMenu = document.createElement('menuitem'); restartMenu.setAttribute('label', labelText); restartMenu.setAttribute('accesskey', 'R'); // 再起動を実行する関数 restartFunc function restartFunc() { var startup = Components.classes['@mozilla.org/toolkit/app-startup;1']. getService(Components.interfaces.nsIAppStartup); startup.quit(startup.eRestart | startup.eAttemptQuit); }; // メニューにイベントを追加 restartMenu.addEventListener('command', restartFunc, false); // [終了] のうえに [再起動] を追加 var quitMenu = document.getElementById('menu_FileQuitItem'); quitMenu.parentNode.insertBefore(restartMenu, quitMenu); // [再起動] のうえにセパレーターを追加 var separator = document.createElement('menuseparator'); restartMenu.parentNode.insertBefore(separator, restartMenu); })();
3. UserScriptLoader.uc.js用スクリプトを使ってみる
◆UserScriptLoader.uc.js用スクリプトを探す
UserScriptLoader.uc.jsは、スクリプトを読み込むスクリプト。さまざまなスクリプトを読み込んで、ウェブページのみためや動作を変更してくれます。ファイアーフォックスのアドオン「グリースモンキー」(Greasemonkey)のuserChromeJS版、といえますね。実際、Greasemonkey用スクリプトの多くがそのまま使えるように作られています。
Greasemonkey用スクリプトを探すなら、「userscripts.org」(ユーザースクリプト・オルグ)が便利。たとえば「Google Tracking」というキーワードでuserscripts.orgを検索してみると、たくさんのスクリプトがヒットします。冒頭であげた「GoogleTrackingBeGoneFixed.user.js」も、ここに登録されていることがわかるでしょう。
userscripts.orgの管理がゆきとどかない状況になったため、あたらしいサイト「Greasy Fork」がつくられました。そんなわけで、userscripts.orgのスクリプトを利用する場合は、安全であるかどうか、よくたしかめることをおすすめしておきます。
◆UserScriptLoader.uc.js用スクリプトをインストール・アンインストールする
使いたいスクリプトがあったら、スクリプトのファイルをダウンロード……できればいいんですが、userscripts.orgにダウンロードのリンクはありません。そのかわり、各スクリプトの「About」ページには「Install」ボタンがあります。Greasemonkeyをインストールしていない状態でこのボタンを押すと、スクリプトそのものが表示されます。メニューの[ファイル]→[名前を付けてページを保存]を選ぶと、文字コード「BOMなしUTF-8」で保存されます。
ただし、ファイル名が「スクリプトの番号.user.js」となってしまいます。スクリプトのなかみがわかりやすいように、リネームしておくといいでしょう。
保存したスクリプトのファイルは、UserScriptLoaderフォルダーに移動してください。移動したら、ロケーションバーのかみなりマークをホイールクリックするか、かみなりマークの右クリックメニューから[Menu]→[Rebuild]を選びます。UserScriptLoader.uc.js用スクリプトがすべて再読み込みされて、移動したスクリプトが使えるようになります。ファイアーフォックスを立ち上げなおす必要はありません。ちなみに、現在読み込まれているスクリプトは、右クリックメニューの上部に表示されています。
使わなくなったスクリプトは、削除してください。削除したら、[Rebuild]をお忘れなく。これでアンインストールしたことになります。
◆UserScriptLoader.uc.js用スクリプトを自作する
UserScriptLoader.uc.js用のスクリプトを自作するには、JavaScriptだけでなく、Greasemonkey用スクリプトの知識が必要です。Greasemonkey用スクリプトについては、「Dive into Greasemonkey」の日本語訳が参考になるでしょう。
userChromeJS用スクリプトとおなじく、すでにあるスクリプトをみながら、あれこれ試行錯誤してみてください。
参考までに、ヤフーの検索結果画面でクリックトラッキングを無効にするスクリプトをあげておきましょう。リンクのマウスダウンイベントを無効にして、クリックトラッキング用のURLをかきかえているだけ、というなんともお手軽なスクリプトです(最初に公開したものよりは、いくらかマシにしつつあります(^^;。だいじょうぶだとは思いますが)。「DisableYahooClickTracking.user.js」などといったなまえで保存してください。もちろん、文字コードは「BOMなしUTF-8」で。
// ==UserScript== // @name DisableYahooClickTracking.user.js // @version 1.1.0.0 // @description ヤフーの検索結果画面でクリックトラッキングを無効にする // @author あなたのなまえ // @namespace // @include http://search.yahoo.* // @compatibility Firefox 20.0+ // @note // ==/UserScript== (function () { var trackingStr = 'http://wrs.search.yahoo'; var searchStr = '**http'; // リンク情報を全部取得 var linkArray = document.getElementsByTagName('a'); for (var i = 0; i < linkArray.length; i++) { // onmousedown を無効にする linkArray[i].onmousedown = doNothing(); // href をかきかえる var decodedStr = decodeURIComponent(decodeURIComponent(linkArray[i].href)); // 'http://wrs.search.yahoo' をさがす if (decodedStr.indexOf(trackingStr) == 0) { // '**http' をさがす var strPos = decodedStr.indexOf(searchStr); if (strPos > -1) { // 必要なリンクをきりだして、href をかきかえる var tempStr = decodedStr.slice(strPos + 2); linkArray[i].href = encodeURI(tempStr); } } } function doNothing() { return false; } })();
4. ユーザースクリプトを使うときの注意
userChromeJS用スクリプトも、UserScriptLoader.uc.js用スクリプトも、どちらも便利なユーザースクリプトです。でも、「動作」を変更するということは、悪意のある変更も可能になるということ。つまり、悪意のあるスクリプトがページの閲覧履歴をはじめとした個人情報をどこかに送信する、ということもありえない話ではないんですね。
悪意のあるスクリプトを避けるひとつの方法は、他人が作ったスクリプトを使わないことでしょう。そういう選択も「あり」です。ただ、必要なスクリプトを全部自作できる人はかぎられますし、問題のないスクリプトも実際にたくさんあります。
そんなわけで、
- 定評のあるスクリプト
- できるだけ単純なスクリプト
それから、ファイアーフォックスの仕様変更などによって、使っているスクリプトが動かなくなることもあります。そんなときは、自分でなんとかするしかありません。アドオンのように自動更新してくれる、というものじゃないんですね。
もっとも、更新されなくなるアドオンもありますから、このあたりは、にたりよったり。ちなみにわたしがuserChromeJS用スクリプトを使いはじめたのは、更新されなくなったアドオンの機能をなんとか実現したい、と考えたからでした。
悪意のあるスクリプトに注意しつつ、また、動かなくなったら自分でなんとかしつつ、ユーザースクリプトをいろいろと試してみてください。