ウェブ開発時のテスト環境と本番環境の取り違えを防ぐChrome拡張機能「Environment Marker」
ウェブ開発では、本番環境のほかにテスト環境やステージング環境を用意するのが一般的です。
しかし、これらの環境は当然ながら見た目がまったく同じです。
URLの一部が違うだけなので「今開いているのはどっちだっけ？」と分からなくなります。
他にも、最初はテスト環境を開いて操作していても、リダイレクトでいつの間にか本番環境に移動している可能性も0ではありません（そんな設定かなり危ないですが、近い内容で過去に肝を冷やした経験があります）。
テスト環境のつもりで本番環境の管理画面を操作してしまう事故は起こり得ます。
そこで活用したいのが、ブラウザ拡張機能の「Environment Marker」です。
今回はEnvironment Markerでウェブページに環境ごとの目印を表示する方法をまとめます。
Environment Marker
Environment Markerは、URLのパターンごとに色付きのリボン（ラベル）をページ上に表示してくれるChrome拡張機能です。
例えば「本番環境のURLには赤いリボン」「テスト環境には黄色いリボン」と設定しておけば、ページを開いた瞬間にどの環境かが視覚的に分かるようになります。
ChromeのほかMicrosoft Edge版も提供されています。
なお、Firefoxアドオンにも「Environment Marker」という同名の拡張機能がありますが、こちらは別の開発者によるものです。
インストール方法
Chrome Web Storeで「Environment Marker」を検索して追加するだけです。
インストール後、ツールバーの拡張機能アイコンから設定画面を開けます。
使い方
設定はシンプルで、「①表示するURLのパターン」と「②表示するリボン」の2つをルールとして登録していくだけです。
アイコンをクリックして［クイック設定］から新規追加することもできますし、［設定ページへ移動］リンクをクリックして、設定ページから管理することもできます。
設定ページは下記のような表示になっていて、［マーカー設定］にすべての設定が表示されます。
ルールを登録する
設定画面で［＋］アイコンをクリックして新しいルールを追加し、下記を入力します。
- 名前（リボンにも表示されます）
- 対象のURLパターン（部分一致で正規表現も使えます）
- リボンの色やフォント・位置
これだけで、パターンにマッチしたページを開いたときにリボンが表示されるようになります。
表示位置とスタイルを変える
リボンの表示位置は、［右上］［右下］［左上］［左下］の四隅から選べます。ページのUIと被ってしまう場合は、位置を変えるだけで解決することが多いです。
リボンの透明度も調整できるので、「常に見えていてほしいが操作の邪魔はしてほしくない」というバランスも取れます。
また、リボンの代わりにページ全体を枠線で囲む［枠］も選べます。
個人的にはこちらの方が好みですし、ページの一部に注意が行っていると、リボンだと意外と目に入っていないことがあります。
ページ全体を囲んだ方が、リボンよりもさらに見落としにくくなります。
設定のエクスポート・インポート
登録したルールはJSONファイルとしてエクスポート・インポートできます。
環境の取り違えはチーム全体で防ぎたい事故なので、プロジェクトの環境一覧をルール化してチームメンバーに配れます。新しいメンバーが入ったときにJSONを渡すだけで済むのはラクです。
類似の拡張機能
同じ目的の拡張機能はほかにもいくつかあります。
- Environment Indicator：三角形やリボンでの表示。URLのマッチ方式が細かく選べる
- ENV Alert：本番環境を開いたときに警告バナーを表示する
私の場合は常時表示のリボンで足りていますが、慎重にしたくて「本番を開いたら警告を出す」方が良ければ、ENV Alertを検討しても良さそうです。
まとめ
こうしたミスは「気をつける」だけでは防ぎきれません。
Environment Markerのように、視覚的に環境を区別できる仕組みを入れておくのが確実です。
導入もURLパターンを数個登録するだけなので、手間に対して効果が大きいのが良いところです。
そもそも気軽に本番環境を触れないようにするなどの他の対策もセットで必要ですが、手間や工数の問題で後回しにされてしまう案件もあるのではないでしょうか（チキンレースをやっていることに変わりありませんし、事故が起こっていないのは運が良いだけというのは肝に銘じておく必要があります）。
個人レベルですぐにできる対策として、試してみる価値があると思います。
