【デザインツール】ブックマークレットで本番環境とテスト環境のURLを簡単に切り替える

【デザインツール】ブックマークレットで本番環境とテスト環境のURLを簡単に切り替える
あのー、簡単にURLを切り替えたりできますかー?
おー、ブックマークレットすれば簡単にできますよー

ブックマークレットって?

ブックマークの進化版って感じです。
URLの代わりにプログラム(JavaScript)を登録すると、今回のように『本番環境とテスト環境のURLを簡単に切り替える』ことが簡単にできます。
他にも『WebページのタイトルとURLをクリップボードにコピー』できたり使い方は多種多様です。
拡張機能やアプリのインストールは不要です。

【サンプル】本番環境とテスト環境のURLを簡単に切り替える

切り替えるにはJavaScriptが必要です。
今回は本番環境とテスト環境のURLを簡単に切り替えるようにしています。
『a』が本番環境のURL、『b』がテスト環境のURL、にしてみました。
※ Chrome(クローム)でのみ動作確認済みです。

【デザインツール】ブックマークレットで本番環境とテスト環境のURLを簡単に切り替える

JavaScript

javascript: (function () {
  a = '/本番環境のURL/';
  b = '/テスト環境のURL/';
  if (document.location.href.indexOf(a) == -1) {
    location.href = document.location.href.replace(b, a);
  } else {
    location.href = document.location.href.replace(a, b);
  }
})(location.href);

ちょっと補足すると、

  • /本番環境のURL/ → /125naroom.com/
  • /テスト環境のURL/ → /test-125naroom.com/

こんな感じです。

簡単にブックマークレット化してくれるおすすめサイト

下記のサイトさんで簡単にブックマークレットに変換してくれるので、ブックマークツールバーにドラッグ&ドロップで簡単です。

いろんなサンプルコードが載ってるサイト

さいごに

わー、切り替え簡単だー
ほっほほーい
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

11

/

22

2024

Googleさんの
おすすめ

11

/

22

2024

デザインの記事

水色デザイン
映画『アット・ザ・ベンチ』
【jQuery】スライダープラグイン「slick」実装サンプル集