ブックマークレットで本番環境とテスト環境のURLを切り替える【javascript】

javascript

今回はWEB制作でよくあるテスト環境と本番環境のURL切り替えを、ブックマークレットで実装したのでメモしときます。
※動作確認はChromeのみです。

ブックマークレットとは

気に入ったウェブサイトをブラウザのお気に入りに登録すると、通常そのサイトのURLが登録されますが、
URLの代わりにプログラムを登録すると、表示しているページに対してちょっとした動作を自動化できたりします。

URLの組み合わせごとに関数を実行するバージョン

テスト環境と本番環境で切り替えるURLを引数に指定します。
複数のサイトを運営している場合は、引数を変更して複数の関数を実行します。

実行するページで、切り替え対象のURLがなければアラートを表示します。
アラート表示は、変数(urlFlag )のフラグをfalseからtrueに変更することで判定します。

var area = location.href; //現在のURLを取得
var urlFlag = false; //変換するURLがあるか判定

function changeUrl(testUrl, honbanUrl) {
  //テストURLがあれば本番に置換、またはその逆
  if(document.location.href.indexOf(testUrl)>0){
    area=document.location.href.replace(testUrl,honbanUrl);
    urlFlag = true; //URLを置換したらフラグを更新
    window.open(area);
  } else if(document.location.href.indexOf(honbanUrl)>0){
    area=document.location.href.replace(honbanUrl,testUrl);
    urlFlag = true; //URLを置換したらフラグを更新
    window.open(area);
  } 
}
//関数実行
changeUrl('www-test.example.com','www.example');
changeUrl('XXX.XXX.X.XXX','www.test.jp');
//変換するURLがなければアラートを出す
if(urlFlag === false) {
  alert('このURLには対応していません!')
}

コードに改行が含まれているとうまく動作しません。
手作業ですべての改行を削除するのは大変なので、ブックマークレットのコードに変換できるサイトを利用します。

いつもお世話になっているサイトはこちら。

Bookmarklet スクリプト変換

※コメントが入っているとうまく変換されない可能性があるので、削除して変換します。

URLを配列に格納したバージョン(追記)

urlを配列に格納したバージョンも作成。先ほどのURLごとに関数を実行するよりもスマートかもしれない。。

var urls = [
   ['www-st.example', 'www.example'],
   ['http://test.jp/example-jp/', 'https://example.jp/'],
   ['example.jp', '203.0.113.0']
];

var area = location.href;
var flag = false;

urls.forEach(function (url) {
   if (area.indexOf(url[0]) > 0) {
       area = area.replace(url[0], url[1]);
       window.open(area);
       flag = true;
   } else if (area.indexOf(url[1]) > 0) {
       area = area.replace(url[1], url[0]);
       window.open(area);
       flag = true;
   }
});

if (!flag) {
   alert('このURLでは使えません')
}

コメント