現在地

ブックマークレットで開発サーバーと本番サーバーを切り替える

作成者:assi 作成日:水, 06/01/2016 - 22:51

Web開発をしているときに
「開発サーバーと本番サーバーを何度も行き来するのが面倒くさい……!」
と思ったことはないでしょうか?

みなさまがどうかはちょっと分かりませんが、私は非常にありますのでその悩みを解消するブックマークレットを作りました。

目次

動作イメージ

挙動としてはとてもシンプルです。ブックマークレットをクリックしたタイミングで、現在のURLのホスト名を対応するホスト名に書き換え新しいタブで表示します。

例えば開発サーバーで使用した際は本番サーバーが、逆に本番サーバーで使用した際は開発サーバーが開かれます。
ホスト名だけを書き換えるので、例えば
http://www.dev.example.com/hoge/fuga/
で使用した場合は
http://www.example.com/hoge/fuga/
とディレクトリ構造を保ったまま同ページを開くことができます。

使い方

実際のJSソースはこのようになっています。

javascript:(function() {var urlPairs = {'www.example.com':'www.dev.example.com'},devUrlArray = [],genUrlArray = [],devUrl,genUrl,key;for (key in urlPairs) {if (urlPairs.hasOwnProperty(key)) {devUrlArray.push(urlPairs[key]);genUrlArray.push(key);}}var pipeReg = new RegExp(',', 'g');devUrl = devUrlArray.toString().replace(pipeReg, '|');genUrl = genUrlArray.toString().replace(pipeReg, '|');var devUrlReg = new RegExp(devUrl),genUrlReg = new RegExp(genUrl);var url = location.href,currentUrl,targetUrl;if (url.match(devUrlReg)) {currentUrl = url.match(devUrlReg);for (key in urlPairs) {if (urlPairs.hasOwnProperty(key)) {if (currentUrl == urlPairs[key]){targetUrl = key;}}}window.open(url.replace(devUrlReg, targetUrl));} else {currentUrl = url.match(genUrlReg);for (key in urlPairs) {if (urlPairs.hasOwnProperty(key)) {if (currentUrl == key){targetUrl = urlPairs[key];}}}window.open(url.replace(currentUrl, targetUrl));}})();

こちらの最初の方のオブジェクトurlPairs'本番サーバー':'開発サーバー'の形で値を入力することにより、切り替えを実現しています。
ソースをお手元のエディタにコピペしていただき、ここに任意のホスト名を入力してください。

編集が終わったら、これをブックマークとして追加します。
まずはブラウザのブックマークマネージャを開いてください(Google Chromeの例)。
まずはブラウザのブックマークマネージャを開いてください(Google Chromeの例)

次に右クリックをし、「ページを追加」を選択します。
次に右クリックをし、「ページを追加」を選択します

ラベルには任意の分かりやすい名前を、値に編集したJSコードをそのままコピペしてください。
ラベルには任意の分かりやすい名前を、値に編集したJSコードをそのままコピペしてください

これで、特に問題が無ければ対象のサイトで使用することにより、開発サーバーと本番サーバーが華麗に切り替わります。

対象サイトの増やし方

実際にWeb開発をしていると切り替え対象のサイトは1つだけでなく、案件の数だけあると思います。
対象サイトが増える度に、ブックマークレットも増やさなければならない……ということはもちろんありません。
たった少しの手間で、1つのブックマークレットで幾つものサイトに対応することができます。

方法はとても簡単で、先ほどのurlPairsオブジェクトにURLのペアを追加するだけです。
実際に記述すると、このようになります。

javascript:(function() {var urlPairs = {'www.example.com':'www.dev.example.com','www.hoge.com':'www.dev.hoge.com'},devUrlArray = [],genUrlArray = [],devUrl,genUrl,key;for (key in urlPairs) {if (urlPairs.hasOwnProperty(key)) {devUrlArray.push(urlPairs[key]);genUrlArray.push(key);}}var pipeReg = new RegExp(',', 'g');devUrl = devUrlArray.toString().replace(pipeReg, '|');genUrl = genUrlArray.toString().replace(pipeReg, '|');var devUrlReg = new RegExp(devUrl),genUrlReg = new RegExp(genUrl);var url = location.href,currentUrl,targetUrl;if (url.match(devUrlReg)) {currentUrl = url.match(devUrlReg);for (key in urlPairs) {if (urlPairs.hasOwnProperty(key)) {if (currentUrl == urlPairs[key]){targetUrl = key;}}}window.open(url.replace(devUrlReg, targetUrl));} else {currentUrl = url.match(genUrlReg);for (key in urlPairs) {if (urlPairs.hasOwnProperty(key)) {if (currentUrl == key){targetUrl = urlPairs[key];}}}window.open(url.replace(currentUrl, targetUrl));}})();

ペア間はカンマで結合し、最後のペアの後にはカンマを付けないことにお気をつけください。
案件が増える度にブックマークレットも編集しなければならないのはちょっとだけ手間ですが、開発を進めて行く中で、十分お釣りがくるほどに効率化できるでしょう。

圧縮前のソースコードはGitHubで公開しておりますので、何か不具合や、もっとこうした方が良い等ございましたらお知らせくださいませ。

それでは、快適なコーディングライフを!

JavaScriptのお勧め書籍(割とライトなもの)



categories:

関連記事