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

きのこさん
あのー、簡単にURLを切り替えたりできますかー?
きのこさん
おー、ブックマークレットすれば簡単にできますよー

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

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

2.【サンプル】本番環境とテスト環境の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/

こんな感じです。

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

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

Bookmarklet スクリプト変換

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

JavaScript::Bookmarklet

Bookmarkletサンプル集

さいごに

きのこさん
わー、切り替え楽々だー
きのこさん
ほっほほーい
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

アンカー市川|みんなで作る自分の居場所
アンカー市川|みんなで作る自分の居場所
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう