本番・ステージング・ローカルを毎日何十回も往復してると、正直それだけで地味に削られていくんですよね。URLバーを書き換える、ブックマークを切り替える、さっき開いてたタブを探す……どれも「できないわけじゃない」けど「毎回やるには普通にしんどい」やつです。「環境 切り替え 拡張機能」とか「Chrome URL 書き換え 自動化」で検索すれば似たツールはいくつか出てくるんですが、自分の使い方にぴったり合うものがなくて、結局自分で作っちゃいました。
それで作ったのが、Chrome拡張「The Switcher［ドメイン切り替え］」です。今見てるページのURLを部分置換して、本番⇄ステージング⇄ローカルをワンクリックで切り替えるだけの、ほんとにそれだけのツールです。でも、こういう「シンプルな見た目の割に裏側の設計がガチ」なツールほど、その意図をうっかり踏み外すと一瞬で壊れるんだなというのを、今回めちゃめちゃ実感しました。
この記事では、公開後にユーザーさんからもらったフィードバックで発覚した「やってしまった」感のある仕様崩壊と、それをどう立て直したか、あとついでにオプション画面のUIを白ベースで作り直した話を書きます。Chrome拡張のUX設計とか、地味な設定1個の重みについて考えてる人、あと「ドメイン切り替えを自動化したいけど何を使えばいいかわからん」という人の参考になればうれしいです。
ツールの概要とか実際の画面は、こちらのThe SwitcherをChromeウェブストアで確認するから見れます。
① 「設定が効いてない」というバグ報告が来た
機能追加をちょこちょこ重ねてたある日、こんな報告が届きました。
「同じタブで開く」にチェックを入れているが、別タブで開いてしまう。
最初は「ああ、単純なバグだろうな」と思ってました。チェックボックスの値を読み忘れてるとか、リンクのtargetが固定になってるとか、コード見ればすぐわかるやつだろうと。
実際見てみたら、まんま想像どおり。メインのリンクがtarget="_blank"でガチガチに固定されてて、トグルの値を一切見てないという、教科書に載せたいレベルの実装ミスでした。すぐ直して、「ポップアップを開いたら一覧から選んでクリックする」動作に統一、トグルの値でクリック時の挙動（同タブか新規タブか）を切り替えるようにしました。
ここまでは「よし、直った」で終わるはずでした。問題は、この修正の前提からして間違っていたことです。
② 本当の仕様は「ポップアップを出さないこと」だった
修正版を見たユーザーさんから、続報が来ました。
「同じタブで開く」のチェックは、プロジェクト内にドキュメントルートが2つしかない場合にはポップアップは開かないで、拡張機能のアイコンを押した瞬間にもう片方のドキュメントルートを同じタブで開くかどうかのチェックです。
読んで、しばらく固まりました。私はこの設定を「リンクをクリックしたときの挙動」だと思い込んでたんですが、本来の意図は「アイコンを押した瞬間、確認なしで即座に切り替える」という、もっと踏み込んだ効率化仕様だったんです。うわ、それは全然違う話だ、と。
整理すると、こういう設計でした。
| ドキュメントルートの数 | 本来の挙動 |
|---|---|
| 2つ | アイコン押下でポップアップを出さず即座に切り替え。ONなら同じタブ、OFFなら新規タブ |
| 3つ以上 | 候補が複数あって自動判定できないので、ポップアップで一覧表示して選んでもらう |
つまり「同じタブで開く」は、見た目は地味なチェックボックス1個のくせに、ワンクリックの操作回数そのものを変える設定だったわけです。本番とステージングしかない2環境構成なら、アイコン押す→即切り替え、それで終わり。なのに私が直してしまった「常にポップアップを出す」仕様は、そのいちばんのメリットを丸ごと潰してしまっていた、という話なんですよね。
ユーザーさん視点で見ると「設定が効いてない」じゃなくて、「設定そのものの意味が変わってしまった」状態だったってことになります。バグ報告を読んだ瞬間は単純な不具合だと思い込んでましたが、実際は仕様の解釈違いでした。コードを直す前に「そもそも何のための設定なんだっけ」を確認すべきだったな、というのは地味に効く反省です。
見た目が同じチェックボックス1個でも、裏にある体験設計の意図まで含めて引き継がないと、普通に劣化するんだなというのを思い知った出来事でした。とりあえず元の自動遷移ロジックを慌てて復元し、トグルは「即切り替え時に同タブか新規タブか」を決める、という本来の役割に戻しました。3つ以上のドキュメントルートを持つプロジェクトは候補一覧を表示、そっちのリンクのクリック挙動もトグルの値に追従させてます。
なぜ「即実行」にこだわってたのか
振り返ると、この仕様にはちゃんと狙いがありました。2環境構成（本番／ステージング、本番／ローカルとか）は実務でいちばん頻度が高いパターンです。このパターンに限っては、「選ぶ」という行為自体がもう冗長なんですよね。候補が1つしかないのに、わざわざポップアップを開いてその1つをクリックする——これ、メニューが1品しかない店で「ご注文は？」って聞かれてるのと同じくらい、いらないワンクッションです。
一方で3環境以上になると自動で確定できないので、ここはポップアップで一覧を見せて選んでもらうしかありません。つまりこの設定、「自動化できるところは自動化して、判断が必要なところだけ人間に委ねる」という、効率化ツールとして当然守らなきゃいけない境界線を引いていたわけです。私はその境界線を、リファクタリングのどさくさで踏み抹してしまっていた、というオチでした。
③ オプション画面も「白ベースでリッチ」に作り直した
仕様を直したついでに、長らく放置してたオプション画面のデザインも一新しました。元はテーブルタグの名残が残ってるような素朴なレイアウトで、機能はどんどん増えてるのに見た目だけ全然追いついてない状態だったんです。ちょうどjQuery依存も切り離してコードをモダン化したタイミングだったので、「白ベースでリッチなテイスト」を目指して作り直しました。
ポイントはこの3つです。
- カードベースのレイアウト：機能ごとに白いカードで区切って、視線の迷子をなくす
- インディゴ→バイオレットのアクセントカラー：保存ボタンやトグルみたいな「操作できる要素」に一貫した彩度を持たせる
- 環境レール（縦のノード付きライン）：プロジェクトに登録したURL群を、1本の線でつないだ縦の並びとして表示。「同じプロジェクトの並行環境」って構造が、ひと目でわかるようにした
特に3つ目は、今回の本題（環境切り替えツール）の「複数の環境が1つのプロジェクトに属してる」という構造を、そのままUIの形に翻訳した部分です。本番URL・ステージングURL・ローカルURLが1本のレールの上に点として並んでるイメージなので、プロジェクトが増えても「どの行がどのグループか」を目で追いやすくなりました。チェックボックスのON/OFFも、ただのフラットなグレーから、押した瞬間に沈み込むような質感を足して、ちゃんと操作した実感が出るようにしてます。ダークモードにも追従するので、開発中に画面を行ったり来たりしてる人でも目が疲れにくいはずです。
こういう地味な機能拡張ツールでも、見た目に説得力があるだけで「ちゃんと作られてるツールだな」って信頼感につながるんですよね。Chrome拡張みたいな小さいプロダクトほど、この積み重ねが口コミやレビューの評価に直結する、というのは作ってる側としても実感してます。
まとめ
- 「設定が効いてない」というバグ報告は、コードのミスだけじゃなく仕様の解釈ミスの可能性も疑ったほうがいい
- トグルやチェックボックスみたいな一見シンプルなUIは、「何を切り替えてるか」の前提を取り違えると、見た目は直っても体験は壊れたままになる
- 複数環境を切り替えるツールは、「候補を提示して選んでもらう」だけじゃなく「自動で確定できるケースは即実行する」設計が、地味だけど効果が大きい
- UIを作り直すときは、機能の構造（今回なら「1プロジェクト=複数環境」）をそのままビジュアルの構造に落とし込むと、説明なしで伝わるデザインになる
The Switcherはこれからも、こういう細かい仕様のすり合わせを重ねながら育てていく予定です。Chrome拡張で環境切り替えを自動化したい人、本番・ステージング・ローカルを毎日何回も往復してる人、URLの書き換えを手作業でやり続けて地味にストレス溜まってる人は、ぜひ一回試してみてください。インストールは無料です。
もし気に入ったら、ブログやSNSで紹介してもらえると普通に励みになります。Web制作・開発系のブロガーさんで「こういう視点で紹介できそう」というアイデアがあれば、ぜひ記事にしてもらえたら嬉しいです。
ドメイン切り替えの手間、ワンクリックで終わらせませんか？The SwitcherをChromeウェブストアで見る →
