カテゴリー
その他

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

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

ブックマークレットとは

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

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には対応していません!')
}

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

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

https://ytyng.github.io/bookmarklet-script-compress/

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

カテゴリー
その他

ブックマークレットでテスト環境のタグが入っていないか確認する

がんばって制作したウェブページをついに本番公開!なのにうっかりテスト環境の測定タグを入れちゃってた!!ってことないですか?

私はあります。。

最近ではGoogleタグマネージャーをはじめとするタグ管理サービスがあるので、そういった事故はなくなってきました。

でも!どうしても!ここのリンクはhttpsから始まる絶対パスをかかないとダメなの!ってことも結構あると思います。でも毎回いちいちコードを開いてチェックとかめんどくさい!1ページ位なら許すけど10ページ以上になるとやってられません。

そこで本番公開した時に、本来あってはイケないコードを検索するブックマークレットを作ったのでメモ。

var htmlTxt = document.getElementsByTagName("html")[0].innerHTML;
var keyword = "www-test";

htmlTxt.replace( /<!--[\s\S]*?-->/g , '');
result=htmlTxt.indexOf(keyword);

if(result !== -1){
	var count = (htmlTxt.split(keyword).length - 1);
	alert(keyword + "が" + count + "個あります。確認してください!");
} else {
	alert("OK!");
}

今回もブックマークレット変換サイトを利用します。

https://ytyng.github.io/bookmarklet-script-compress/

ちなみに100ページ以上のチェックが必要だったら、素直にウェブ解析したほうが良いと思います。。