---

　ユーザスクリプトを編集しない場合は、はじめに 以外を読む必要はありません。

• はじめに
  Greasemonkeyのインストール
  アイコンの位置を変更する
  ユーザスクリプトのインストール
  ユーザスクリプトの編集・無効化・削除
• ユーザスクリプトの作成と編集
  編集とエディタの変更・指定
  基本構文、名前や実行サイトの条件設定など
  スクリプトごとにアイコンを指定する
  jQueryなど別のスクリプトファイルを読み込ませる
  コンソールにメッセージを表示する
• Greasemonkey向けアイコン素材
• スクリプトを作成する上での注意点
  form要素、イベントハンドラ、setTimeout
• Chrome、Operaでユーザスクリプトを使用する
• IEでGreasemonkeyスクリプトを使う Trixie IE7pro

はじめに

• Greasemonkeyのインストール
• アイコンの位置を変更する
• ユーザスクリプトのインストール
• ユーザスクリプトの編集
• ユーザスクリプトの無効化・削除

Greasemonkeyのインストール

　アドオン『Greasemonkey配布ページ』の [インストール] をクリックします。過去のバージョンをインストールするときはバージョン履歴からインストールします。

　画面上の [許可] ボタンをクリックするとインストールが始まります。

　[今すぐインストール] をクリックします。

　完了したら、Firefoxを（閉じて） [再起動] します。

　Firefoxを再起動すると、ツールバーに獣のアイコンが表示されます（インストール完了）。

　アイコンをクリックすることで、Greasemonkeyのオン・オフを切り替えることができます。

• ▲

アイコンの位置を変更する

　アイコンの位置をツールバーから最下部のアドオンバーなどに変更するときは、ツールバーなどの空いたスペースで右クリックをして、[カスタマイズ]を選択します。あるいは、メニューバーの[表示]、[ツールバー]、[カスタマイズ]を選択します。

　アイコンをドラッグできるようになるので、獣アイコンをつかんで、好きな場所に移動させます。

ユーザスクリプトのインストール

　Greasemonkeyがオンの状態で、拡張子 user.js のリンクをクリックすると、スクリプトをインストールできます。

<a href="http://fc2.com/hoge.user.js">インストール</a>

インストール : GoogleNaviFixed.user.js

　Google検索で、ページナビが固定表示されるようになります。

インストール : GoogleHelloWork.user.js

　Google検索で、Googleのタイトルをハローワークに変更して、一生懸命就職活動しているような気にさせてくれます。

• ▲

ユーザスクリプトの無効化と削除

　アイコンの矢印をクリックしてメニューを開き、[ユーザスクリプトの管理]をクリックします。

　無効にしたいスクリプトの[無効化]をクリックすると無効になります。
　有効にするときは[有効化]をクリックします。

　あるいはスクリプトの動作対象ページで、アイコンの矢印をクリックしてメニューを開き、チェックを外すことでも無効にできます。

　削除したいスクリプトの[削除]をクリックすると削除されます。誤って削除してしまった場合は[元に戻す]をクリックします（アドオンマネージャのタブを閉じなければ有効）。

　再インスールは、ユーザスクリプトのリンクをクリックすると、上書きインストールされます。

　削除して再インスールする際に、以前のスクリプトが残って、正常にスクリプトがインストールできない場合は、削除した後にFirefoxを終了させて、再起動します。そしてスクリプトを再インストールします。

• ▲

ユーザスクリプトの作成と編集

　アイコン変更などの反映にはFirefoxの再起動が必要です。
　スクリプトを保存するときは文字コードを utf-8 にして保存します（日本語の文字化け回避）。

• 編集とエディタの変更・指定
• 基本構文、名前や実行サイトの条件設定など
• スクリプトごとにアイコンを指定する
• スクリプトアイコンの変更・新たに指定する
• jQueryなど別のスクリプトファイルを読み込ませる
• コンソールにメッセージを表示する

※SleipnirのSeahorseで利用するときは、保存したファイルを開いて、文字コードを『Shift-JIS』で保存します。

編集とエディタの変更・指定

　アイコンの矢印をクリックしてメニューを開き、[ユーザスクリプトの管理]をクリックします。

　編集したいスクリプトを（右）クリックして、[編集]を選択します。

　初めてスクリプトを編集するときや新規ユーザスクリプトを作成するときには、「使用するテキストエディタを最初に指定してください」と表示されます。

　ここにはテキストエディタの『メモ帳』や『TeraPad』『EmEditor』『秀丸』などのexeファイルを指定します（インストールしたフォルダ内）。

　メモ帳は不便なので、無料であれば『TeraPad』『EmEditor（Free）』などを利用します。

　エディタを変更するときは、開いたアドオンマネージャの[拡張機能]タブの[設定]をクリックして、変更。そして閉じます。

　あるいはブラウザのアドレスバーに『about:config』を入れてエンターキー。「細心の注意を払って使用する」をクリック。フィルタに『greasemonkey.editor』を入れます。そして値をクリックして、文字列に使用するテキストエディタの場所を入力します。

• ▲

基本構文、名前や実行サイトの条件設定など

　新規ユーザスクリプトの[名前]以外の項目は後からでも変更できます。それぞれ次の@キーに対応しています。

[名前] = @name
[名前空間] = @namespace
[説明] = @description
[実行するページ] = @include
[実行しないページ] = @exclude

　冒頭のコメントアウトされたUserScript部分で設定します。各@キーの順番などは基本的に気にする必要はありません。

// ==UserScript==
// @name         GoogleNaviTop
// @namespace    http://paro2day.blog122.fc2.com/
// @description  Google Search Navi Top
// @include      http://www.google.co.jp/*
// @exclude      http://www.google.com/*
// @version      1.0
// ==/UserScript==

---

// @name     スクリプトの名前

■name にはスクリプトの名前を入れます。なるべくわかりやすい名前にします。例えば、自分のサイト名などの頭文字を先頭に入れたり、google関係なら先頭に『ggl-』を入れたりすると、並び替えのときにわかりやすいかもしれません。

// @namespace     スクリプトの識別名

■namespace には他のスクリプトと区別できるような固有の名前を入れます。例えば、作者が別で名前が『mike』のスクリプトが二つあるときにそれらを区別します。作者サイトや作者名を書くといいかもしれません。

// @description     説明文

■description にはスクリプトの説明文を書きます。文字コードを「utf-8」で保存すれば、日本語でも問題ないと思います。名前だけだと説明不足なので、適当に何か入れておきます。この項目はマネージャタブに表示されます。

// @include     実行するサイト

■include にはスクリプトを実行するサイトを指定します。ワイルドカード「*（アスタリスク）」が使用できます。

　例えば、『yahooニューストピックス』の『国内ページ』でのみ実行する場合は次のようにします。

// @include   http://dailynews.yahoo.co.jp/fc/domestic/

　ですが、このままだと『国内』の中にある次のようなページではスクリプトが動作しません。

トピックス > 国内 > 政局
http://dailynews.yahoo.co.jp/fc/domestic/politics/

　これらの下位ページでもスクリプトを動作させるには「*」（アスタリスク）を用います。以下のようにすると、『http://dailynews.yahoo.co.jp/fc/domestic/』で始まるすべてのページで動作します。

http://dailynews.yahoo.co.jp/fc/domestic/*

　「*」は途中にも使用できます。以下のようにすると、『http://○.yahoo.co.jp/fc/○/*』に該当するすべてのページで動作します（○には適当な文字）。

http://*.yahoo.co.jp/fc/*/*

http://dailynews.yahoo.co.jp/fc/domestic/
http://dailynews.yahoo.co.jp/fc/world/index.html
http://hoge.yahoo.co.jp/fc/fuga/hoge.html

　複数指定する場合は@include行を追加します。

// @include   http://*
// @include   https://*

　とすると、ほぼ全てのページで動作します。

// @exclude   http://dailynews.yahoo.co.jp/fc/domestic/*

■exclude にはスクリプトを実行しないサイトを指定します。指定方法はincludeと同じです。

// @version     バージョン情報

■version にはバージョン情報を入れます（Greasemonkey0.9以降）。更新の際の目印になります。「1.01」「1.02」、「1.0」「2.0」というように数値を増やして、過去のバージョンと区別します。@versionを使わずに、@descriptionにまとめて書くこともできますが、マネージャタブの名前の横にversionが表示されるので、あった方がわかりやすいです。

---

　Greasemonkey0.9より前のバージョンの@inclueと@excludeについては、ファイルを編集するのではなく、管理パネルの右にある[実行するページ][実行しないページ]の編集が必要です。

• ▲

スクリプトごとにアイコンを指定する

　スクリプトのUserScript部分に @icon の行を追加します（Greasemonkey0.9以降）。値には画像のアドレスを指定します。スクリプトをインストールする際に画像も一緒に保存されます。

// ==UserScript==
// @name         GoogleNaviTop
// @namespace    http://paro2day.blog122.fc2.com/
// @description  Google Search Navi Top
// @include      http://www.google.co.jp/*
// @exclude      http://www.google.com/*
// @version      1.0
// @icon         画像のアドレス
// ==/UserScript==

　画像は32x32程度のサイズにします。

　インストールの際に画像が見つからなかった場合は、

Error loading dependency 画像アドレス
Error! Server Returned : 404: Not Found

　とダイアログが表示されて、インストールが中断されます。スクリプトと画像ファイルはなるべく同じサーバに置いた方がいいかもしれません。

• ▲

スクリプトアイコンの変更・新たに指定する

　スクリプトの @icon の画像アドレスを変えても、アイコンは変わりません（インストール時に保存される）。変更するときは、Greasemonkeyアイコンの矢印をクリックしてメニューを開き、[ユーザスクリプトの管理]から行います。

　変更したいスクリプトを（右）クリックして、[内包するフォルダを表示]を選択します。

　すると保存されたフォルダが表示されます。

　このフォルダの中にあるアイコン画像を上書き保存するとアイコンが変更されます（同じ名前の別画像と置き換える）。再起動。

---

　元々アイコンのないスクリプトにアイコンを指定する場合は、内包するフォルダの一つ上の階層にある[gm_scripts]フォルダを開いてから、Firefoxを一端閉じ、終了させます。

　次にフォルダ内にある[config.xml]を編集します。編集に誤りがあるとスクリプトが動作しなくなるため、慎重に行います。不安なときはコピーするなどしてバックアップしてください。

　xmlファイルをテキストエディタで開いたら、アイコンを指定するスクリプト要素を探し、その末尾に icon属性 をつけます。値には アイコン画像の名前を入れます（拡張子もつける）。

icon="画像の名前.拡張子"

<Script filename="fctmppreviewb.user.js" name="FCtmpPreviewB" namespace="http://paro2day.blog122.fc2.com/blog-entry-526.html" description="FC2Blog Template Preview Button" version="1.0" enabled="true" basedir="fctmppreviewb" modified="0" dependhash="0" installurl="FCtmpPreviewB.user.js" icon="gm-F3.png">

　変更が完了したら、ファイルを保存して、スクリプトのフォルダを開き、そこに先ほど指定したアイコン画像と同じ名前の画像を入れます。再起動。

• ▲

jQueryなど別のスクリプトファイルを読み込ませる

　スクリプトのUserScript部分に @require の行を追加します。値にはファイルのアドレスを指定します。スクリプトをインストールする際にファイルも一緒に保存されます。

// ==UserScript==
// @name         GoogleNaviTop
// @namespace    http://paro2day.blog122.fc2.com/
// @description  Google Search Navi Top
// @include      http://www.google.co.jp/*
// @exclude      http://www.google.com/*
// @require      ファイルのアドレス
// @version      1.0
// ==/UserScript==

　インストールの際にファイルが見つからなかった場合は、

Error loading dependency ファイルアドレス
Error! Server Returned : 404: Not Found

　とダイアログが表示されて、インストールが中断されます。スクリプトとファイルはなるべく同じサーバに置いた方がいいかもしれません。

---

　ファイルを編集するときは、Greasemonkeyアイコンの矢印をクリックしてメニューを開き、[ユーザスクリプトの管理]から行います。

　変更したいスクリプトを（右）クリックして、[内包するフォルダを表示]を選択します。そして、ファイルを編集します。

---

　複数のファイルを指定するときは @require の行を追加します。スクリプトは先に書いたものから実行されます（1→2）。

// @require      ファイルのアドレス1
// @require      ファイルのアドレス2

---

　スクリプトの順番は @require が先に実行されます。

//hoge.js
alert('apple');

// ==UserScript==
// @name         GoogleNaviTop
// @namespace    http://paro2day.blog122.fc2.com/
// @description  Google Search Navi Top
// @include      http://www.google.co.jp/*
// @exclude      http://www.google.com/*
// @require      http://hoge.com/hoge.js
// @version      1.0
// ==/UserScript==
alert('banana');

　1. apple
　2. banana

• ▲

コンソールにメッセージを表示する

　コンソールはメニューの[ツール][エラーコンソール]、メッセージで確認できます。

GM_log(message);
console.log(message)

var text = 'Greasemonkey';
GM_log(text);  //Greasemonkey
console.log(text);  //Greasemonkey

　Firebugに表示させるときは、コンソールの下矢印から[クロームのエラー]と[クロームのメッセージ]を表示をチェックします。

• ▲

Greasemonkey向けアイコン素材

　適当に作成したもの（png）です。Greasemonkey用のjsに組み込んでの再配布はOKです。作者表示やリンク、報告などは特に必要ありません。また、自分のサイトでのみ使用する場合も不要です。Greasemonkey以外の目的での再配布については配布元のリンクをお願いします。

　リンク先を保存＆アップロードしてご利用ください。[ 1 ]～[ 5 ]で色変更。

• ▲

スクリプトを作成する上での注意点

　ブラウザによって、動作が異なる部分もあります。

form要素へのアクセス

<form name="hoge" action="./">
 <input type="text" name="q" value="Hello" />
</form>

■ダメなコード

document.hoge   //undefined
document.hoge.q

　Firefox、Chromeでは取れません。Operaは動作するようです。

■大丈夫なコード

document.forms.namedItem('hoge');
document.forms.namedItem('hoge').elements.namedItem('q')

イベントハンドラ（onclick、onmouseoverなどのプロパティ）

　Firefoxでは動きません。ChromeとOperaは動作するようです。

■ダメなコード

element.onclick = hoge;

■大丈夫なコード（addEventListener）

element.addEventListener('click', hoge, false);

setTimeout、setInterval

Firefox : JavaScriptオンで動作

　Firefox、Chromeでは動きません。Operaは動作するようです。

■ダメなコード（関数が文字列）

setTimeout('hoge()',1000);
setInterval('fuga()',5000);

■大丈夫なコード

setTimeout(hoge,1000);
setInterval(fuga,5000);

■大丈夫なコード（引数あり）

setTimeout(function(){hoge(e);},1000);
setInterval(function(){fuga(e);},5000);

• ▲

Chrome、Operaでの利用

　Firefoxとは異なりアドオンをインストールする必要はありません。

Chrome

　user.js のリンクをクリックすると、スクリプトをインストールできます。

インストール : GoogleNaviFixed.user.js

　無効化やアンインス－ルはメニューの[ツール][拡張機能]で行います。またはアドレスに『chrome://extensions』を入れます。

　編集するときは、スクリプトが保存されたフォルダ内にあるファイルを編集します。

　Windows Xpは下記フォルダ内にあるファイルを編集します。

C:\Documents and Settings\ユーザ名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\

　Windows Vista 7は下記フォルダ内にあるかもしれません。

C:\Users\ユーザ名\AppData\Local\Chromium\User Data\Default\User Scripts\

※ユーザ名や場所がよくわからないときは、Chromeブラウザ起動のショートカットを右クリック、[プロパティ]リンク先を参考にします。

　上記アドレスを開くと、名前がIDのフォルダが見つかります。IDはインストールしたユーザースクリプトごとに異なります。IDは拡張機能ページで確認できます。メニューの[ツール][拡張機能]を選択。デベロッパーモードをクリックすると表示されます。

　IDを調べるのが面倒なときは、フォルダを最終更新日順に並び替えて一番新しいフォルダを開きます。

　フォルダを開いていくと、『script.js』があるので、それをテキストエディタで編集します。『～\User Data\Default\Extensions』などのフォルダをお気に入りに登録しておくと編集が楽になるかもしれません。

Opera

　どこでもいいので、スクリプトを保存するための新しいフォルダを作成します（『userscript』など適当な名前で作成）。

　作成したフォルダの中にGreasemonkeyのjsファイルを保存します。
　user.jsのリンクを（右）クリックして「リンク先のコンテンツを保存」を選択。
　ファイルの名前は必ず『名前.user.js』の形式でなければなりません。

　Operaのメニュー、[ツール][設定]、[詳細設定][コンテンツ]の[JavaScriptオプション]をクリックします。

　ユーザーJavaScriptフォルダに先ほど作成したフォルダを指定、[OK]をクリックします。

関連記事

• iPhone 4S auとSoftBankの通信速度比較サイトの簡易まとめ
• 都道府県ウェブサイトの横幅まとめ 平均895px
• ツイッター公式フォローボタンを設置する方法と色変更
• Greasemonkeyの使い方とアイコン素材
• 主なブラウザのシステム要件・動作環境とアップデート方法
• IE8以下でHTMLを含むtxtファイルを開くとHTMLで表示されるのを防ぐ
• IEでGreasemonkeyスクリプトを使う Trixie IE7pro