LoginSignup
5
4

More than 5 years have passed since last update.

1クリックURL切り替え

Last updated at Posted at 2017-12-22

WEB開発の際に本番環境と確認環境の異なるURLがあると思います。
普段はキーボード操作でそんなに手間なく切り替えられるのですが、周囲のデザイナーさんたちからクリック1発で切り替えたいといった要望がありましたので作成しました。

javascriptをブックマーク登録し、そのブックマークを呼び出すことでjavascriptが実行されるという仕組みです。

URLを書き換えるサンプルスクリプト

var arr=location.href.match(/^(.*?)\.(.*)$/);
if( arr[1].match(/-s/) ) {
  location.href = arr[1].replace(/-s/,'') + '.' + arr[2];
} else {
  location.href = arr[1] + '-s.' + arr[2];
}

軽く解説。
最初の正規表現でURLの先頭から最初の「.(ドット)」までを取得。
その右端に「-s」が付いていれば削除。
「-s」が付いていなければ付与します。

  1. このscriptの改行を取り除きコピー
  2. ブラウザのブックマークを新規作成
  3. URL欄に「javascript:」と入力。
  4. 続けてscriptをペースト
  5. URLを切り替えたいページを開き、登録したブックマークをクリック
    • ブックマークをクリックするたびに「-s」の有無が切り替わります
    • ツールバーあたりに置いておくとすぐにクリックできます

改行を取り除き「javascript:」を付与したscriptも置いておきます。

javascript: var arr=location.href.match(/^(.*?)\.(.*)$/);if( arr[1].match(/-s/) ) {location.href = arr[1].replace(/-s/,'') + '.' + arr[2];} else {location.href = arr[1] + '-s.' + arr[2];}

同様の方法でPCサイト⇔スマホサイトのURL切り替え等も可能です。

var domains = [
  {pc:'pc.example.com',sp:'sp.example.com'},
  {pc:'hoge.example.com',sp:'poge.example.com'}
];
for( var service of domains ) {
  if(location.host == service['pc']) {
    location.href = location.href.replace(service['pc'], service['sp']);
    break;
  } else if(location.host == service['sp']) {
    location.href = location.href.replace(service['sp'], service['pc']);
    break;
  }
}

改造はご自由にどうぞ。

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4