Tampermonkey を使って本番・ステージング環境をひと目で区別する

開発中に間違えて本番環境で登録を行ってしまったりすることはありがちですが、
こうしたミスを防ぐために、ブラウザ上で 今どの環境を見ているのかを一目で判別できる仕組み があると便利です。

Tampermonkey というブラウザにユーザースクリプトを追加して、任意のページに処理を差し込める拡張機能を使って実現してみます。

拡張機能のインストール

まず下記リンクからChrome拡張機能の「Tampermonkey」をインストールします

インストールしたら chrome://extensions/ を開き右上のデベロッパーモードをONにします。

ユーザースクリプトの設定

Tampermonkey のアイコンをクリックし「新規スクリプトを追加」をクリックします。

下記のスクリプトを貼り付けて編集し保存します。

※ 以下のコードでは example.com をサンプルにしています。
ご自身の環境に合わせて @match と productions / stagings / inspection のドメインを置き換えてください。

// ==UserScript==
// @name         どの環境を見ているか表示
// @description  本番やSTGを見ている事がわかる補助ツール
// @match        https://example.com/*
// @match        https://stg.example.com/*
// @match        https://inspection.example.com/*
// ==/UserScript==

(function() {
  'use strict';

  const {hostname} = window.location;
  const envConfig = {};
  const productions = [
    'example.com',
  ];
  const stagings = [
    'stg.example.com',
  ];
  const inspection = [
    'inspection.example.com',
  ];

  if (productions.includes(hostname)) {
    envConfig.text = '本番';
    envConfig.bgc = 'rgba(254, 75, 75, .7)';
  } else if (stagings.includes(hostname)) {
    envConfig.text = 'STG';
    envConfig.bgc = 'rgba(18, 174, 0, .4)';
  } else if (inspection.includes(hostname)) {
    envConfig.text = '検証環境';
    envConfig.bgc = 'rgba(23, 64, 207, .4)';
  } else {
    return;
  }

  const eleStyle = `
      position: fixed;
      top: 0;
      left: 0;
      z-index: 20000;
      color: #fff;
      font-size: 10px;
      padding: 0 10px;
      cursor: pointer;
      background-color: ${envConfig.bgc};
    `;

  const ele = document.createElement('div');
  ele.textContent = `${envConfig.text}表示中 ×`;
  ele.style.cssText = eleStyle;
  ele.addEventListener('click', () => ele.remove());
  document.body.appendChild(ele);
})();

確認

対象のURLを開き下記のような表示が出れば完了です。
「×」を押すと非表示にすることもできます。

設定追加

上部の // @match 部分と中盤にある
productions などにカンマ繋ぎでURLを記載すると他のページも追加できます

// @match        https://example.com/*
// @match        https://hoge.example.com/* ← 実行したいURLを追加する例

~~~
  const productions = [
    'example.com',
    'hoge.example.com', // ← 本番表示中と出したいURLの例
  ];
  const stagings = [
    'stg.example.com',
  ];
  const inspection = [
    'inspection.example.com',
  ];
~~~  

終わりに

これで「今どの環境を操作しているか」を常に確認できるようになります。
Tampermonkey を使えば、ちょっとした補助ツールを自分で簡単に作れるので便利ですね。