ブラウザで環境操作を間違えない為のユーザスクリプトを導入してみる

はじめに

実装や設定ミスなどで、開発環境やステージング環境でテストしていたつもりが、本番環境で操作していたなんてことが稀に発生したりします。

インシデントを未然に防ぐ為に、取扱注意な画面が表示された場合、ユーザスクリプトでブラウザにタグを挿入してユーザに警告を表示する仕組みを作ります。

ユーザスクリプト

ChromeであればChromeアプリのTampermonkey。FirefoxならアドオンのGreasemonkeyなどで実行可能です。今回はChromeでの方法を紹介します。

Tampermonkeyのインストール

ChromeアプリのTampermonkeyをインストールします。「CHROMEに追加」をクリックするだけです。インストールが完了すると、URLの隣にこんなアイコンが表示されます。

Tampermonkeyの設定

アイコンをクリックして、「新規スクリプトを追加...」をクリック。以下のソースを追記して上書き保存。有効にして完了です。

今回は仮にgoogleさんの環境ごとのURLが以下の想定での設定です。
http://www.google.co.jpに遷移すると画面上部に赤い帯状のものが表示されることがわかります。クリックすると非表示になるような処理になっています。

• 本番　　　　：http://www.google.co.jp
• ステージング：http://stg.www.google.co.jp
• 開発　　　　：http://dev.www.google.co.jp

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.google.co.jp/
// @grant        none
// ==/UserScript==

(function () {
    var config = [
        // google
        ['www.google.co.jp',        "#faa", "【※※※　本番環境っすよ！ ※※※】"],
        ['stg.www.google.co.jp',    "#afa", "ステージング環境"],
        ['dev.www.google.co.jp',    "#aaf", "開発環境"],
    ];

    function appendBanner(bgColor, message) {
        var newHTML         = document.createElement ('div');
        newHTML.innerHTML   = '<div id="serverEnv" style="display: block; position: fixed; top: 0; width:100%; z-index: 10000; opacity: 0.7; background-color:' + bgColor +'" onclick="this.style.display=\'none\';"><p style="font-size:12px; height:50px; text-align:center; height: 50px; line-height: 50px;">' + message + '</p></div>';

        document.body.appendChild (newHTML);
    }

    for (var i = 0; i < config.length; i++ ) {
        if (document.domain == config[i][0]) {
            appendBanner(config[i][1], config[i][2]);
        }
    }
})();

終わりに

今回のサンプルはdivタグを挿入しただけですが、javascriptなんで自分好みに簡単にカスタマイズが可能です。また、上記のコードとは別に@includeでURLを判別する方法などもあります。

参照

• Metadata Block - GreaseSpot Wiki https://wiki.greasespot.net/Metadata_Block
• UserScriptの書き方メモ http://www.m-bsys.com/code/userscript-memo