テストサーバと本番サーバを識別する Greasemonkey を作ってみた。

firefox

はじめに

GreaseMonkey
多くの人が知っていると思うので、説明は割愛ｗ


自分は、

Minibuffer
LDRize
Yahoo with Google
AutoPagerize

を入れています。
特に、

  • Yahoo with Google (Googleで検索すると、Yahooの検索結果も同時に表示)
  • AutoPagerize (Googleなどの検索結果の２ページ目以降を自動表示)

が便利ですね。


そんな GreaseMonkey を作ってみたい。
と、思い立ったので、週末に作ってみました。


作ったものは、開発者向けのもの
開発サーバ（もしくはテストサーバ）と本番サーバを見極めて、画面の右上に
『開発サーバ』『本番サーバ』
と表示する簡単なもの。


テストサーバでテストしているつもりが、いつのまにか、本番だった!?
なんて馬鹿なミスが起きないための簡易ツール。

作ってみよう

まずは作り方を調べます。
参考にしたのは、下記のサイト
GreaseMonkeyスクリプト作成クイックスタート - mitc - 日記
と
Greasemonkey スクリプト作成入門 - 紅孔雀
の二つ。
非常に分かりやすいページです。


GreaseMonkey は普通の javascript ファイルを作ればいいらしい。
ただし、少し決まりごとがある。

決まりごとその１

ファイルの名前は、
【任意の名前】.user.js
にすること。

決まりごとその２

js ファイルに下記の記述を書くこと

// ==UserScript==
// @name Hello
// @namespace
// @description test
// @include
// ==/UserScript==
※ココ以下にやりたいことを記述します。

実際に作成したもの。

// ==UserScript==
// @name           check test server
// @namespace     
// @description    check test server
// @include        *
// ==/UserScript==
(function() {
    var obj = document.createElement("span");
    obj.style.position = 'fixed';
    obj.style.top = '10px';
    obj.style.right = '10px';
    obj.style.fontSize = '25px';
    var bodyObj = document.getElementsByTagName("body").item(0);
    var url = document.URL;
    var url_array = new Array("ここに本番サーバのドメインをリストで記述します",
                              "http://test.com",);
    if (url.match(/^(http|https):\/\/[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+/)) {
        obj.innerHTML = "開発サーバ";
        obj.style.color = 'blue';
        bodyObj.appendChild(obj);
    }
    else {
        for (i = 0; i < url_array.length; i++) {
            re = new RegExp("^" + url_array[i]);
            if (url.match(re)) {
                obj.innerHTML = "本番サーバ";
                obj.style.color = 'red';
                bodyObj.appendChild(obj);
                break;
            }
        }
    }
})();


汎用性、速度、全く無視のものですが、とりあえず動いたｗ
GreaseMonkey をinstallしている人なら、firefox に D&D するだけでインストールできます。


とりあえず、今回は試しで作成できたので、今度はもうちょっと大きなもの作ろうかな。