タグ: お役立ち

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

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ページ以上のチェックが必要だったら、素直にウェブ解析したほうが良いと思います。。

ウェブ制作以外でも重宝する正規表現。覚えておくと何かと便利ですよね。
いざ使うという時に忘れるので、自分用にメモしておきます。

最後の空白以降を選択する

^\n

利用シーン
余計な空白行を削除する時便利。

最後の文字を取得する

([\s]+)[^\s]+$

参考サイト

特定のコメントに囲まれたコードを選択する

<!--\s*コメントここから(\s|\S)*?コメントここまで\s*-->

利用シーン
測定タグなど、決まったコメントで囲まれたタグを一括削除するのに便利

<結果>

URL一部置換

利用シーン
ドメインと、ファイルの拡張子が一部違う。こんなURLを一括変換するときに便利

＜変換前＞
href=”https://example.com/category/items00.html”

<変換後>
href=”https://test.jp/items00/”

href="(.*[^/]?/)(.*)\.html
href="https://test.jp/$2/

＜変換前＞
href=”https://example.com/category/items00.html”

<変換後>
href=”https://test.jp/items00/”