コーダー日誌
公開日：2019/10/09
企業サイトの開発・運用をやっていると、一旦テストサーバーにアップして、関係各所が確認して承認されたら本番サーバーにアップして公開するという流れになることが多いと思います。
更新作業の内容によっては、テストページと本番ページを見比べたいときがありますが、URLをコピペして、本番サーバー（またはテストサーバー）のドメインに書き換えて・・・とやっていると、意外と面倒臭いというかなんというか・・・。
そんなときは、どちらかを表示しているときに、もう一方に切り替えられるブックマークレットを作っておくと便利です。
簡単に言ってしまうと、ブックマークにjs（など）を登録して、ブラウザを操作しちゃおうというものです。
javascript:
var url=location.href;
var str1="http://ドメイン1/";
var str2="http://ドメイン2/";
if(url.indexOf(str1)==0){
url=url.replace(str1,str2);document.location=url;
}else if(url.indexOf(str2)==0){
url=url.replace(str2,str1);document.location=url;
}変数str1・str2の値は本番またはテストサーバーのドメインになります。http～と書いてますが、httpsだとしても問題ないです。
ただし、以下のような情報もあるので、おかしいなと思ったら参考にしてみてください。
なお、開発環境（や本番サーバー公開までのルールが複雑な会社）によっては、テストサーバーが複数あって、それぞれ確認が必要なこともあると思いますが、変数や条件式を増やせば、一つのブックマークレットで切替可能になります。
上記はわかりやすいように改行などを入れていますが、ブックマークに登録するには、以下のような処理が必要になります。
ブックマークに登録するので、URL欄に登録できる形式にする必要があります。
改行を削除し、URLとして扱えない文字を％で始まるURL encoding（Percent-encoding）に変換してください。
やや面倒臭い感がありますが、世の中には変換してくれる便利なツールを提供してくださっている方々がいらっしゃいます。強い味方！
上の「ブックマークレットとは」のリンク先でも紹介されていますが、使いやすいものを求めてgoogle先生たちに訊いてみてください。自分で作るのもありです！
というわけで、上のソースは以下のようになります。
javascript:var%20url=location.href;var%20str1=%22http://ドメイン1/%22;var%20str2=%22http://ドメイン2/%22;if(url.indexOf(str1)==0){url=url.replace(str1,str2);document.location=url;}else%20if(url.indexOf(str2)==0){url=url.replace(str2,str1);document.location=url;}ドメイン1・ドメイン2の値を適宜変更し、ブラウザの新しいブックマークに適当な名前をつけて、URL欄にソースをコピペして登録してください。切り替えたいページで登録したブックマークをクリックすると切り替わります。
なお、ブラウザのブックマークには文字数制限があったりしますが、スクリプトが長くなりそうなときは外部ファイルにすることもできます。
外部ファイルにしてブックマークに呼び出すようにすれば、スクリプトの改行や文字をurl用に変換しなくても良いです。
ちなみに、自分でスクリプトを考えなくても、便利なブックマークレットが提供されていたりします。google先生たちに訊いてみてください。
ことのついでに、例えばFFで見ていたページをURLをコピペする作業なしにChromeでも見ることできる拡張機能（アドオン）をご紹介します。
pythonさんが必要になりますが・・・。
まずは以下の拡張機能をFFまたはChrome(必要があれば両方)に入れてください。
以下のリンク先を参照して設定をしてください。
FFでの説明ですが、Chromeでもやることは同じです。
どちらかで先に設定しておけば、同じ設定をする必要はないです。念の為「インストールのテスト」を実行して、大丈夫か確認後、「ブラウザを探す」をすればインストール済みのブラウザを勝手に登録してくれるはずです。
pythonさんをインストールしたり、コマンドプロンプトでディレクトリにアクセスしたり、ちょっと難しそうですが、素直にやっていけばたぶん大丈夫。
しかも、もうpythonさんをインストールしちゃったので、いつでもpythonさんの勉強ができます！
なお、ここでご紹介した手順はWindowsの場合ですが、macOSでもあまり大差はありません。
コマンドプロンプトの代わりにターミナルを使うだけです。
FFのChromeや拡張機能（アドオン）にはUser-Agentを切り替えられるものもあります。どれを使うかはお好みなのかな？
go to homeindex