今回はWEB制作でよくあるテスト環境と本番環境のURL切り替えを、ブックマークレットで実装したのでメモしときます。
※動作確認はChromeのみです。
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 スクリプト変換
ytyng.github.io
※コメントが入っているとうまく変換されない可能性があるので、削除して変換します。
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では使えません')
}
コメント