こんにちは。chidakiyoです。
AIいいですねー、AI。 物理的なものは3Dプリンターで出力できて楽しんでいましたが、ちょっとあんなツールほしいな、というのがAIですぐ作れちゃいますね。
そんな感じなので、ブラウザ拡張を作ってみて初めてChrome Storeに出してみました。
はじめに
みなさん、検証環境と思って触ろうとしたら、「あれ、これ、本番じゃない？」って肝を冷やしたことはありませんか？
管理画面をいくつも開いて作業していると、タブがずらーっと並んで、どれがどの環境だか分からなくなるんですよね。 見た目がだいたい同じなので余計にたちが悪い。「テストデータ入れとくか」ってポチッとやったら、あれ、これ本番のURLじゃない…？みたいな。ヒヤッとするやつです。
ずっとそれっぽいツールを使っていたのですが、 帯に短し襷に長し、という感じであまりしっくり来なかったので自分で作ることにしました。作ってみたよ、の記事です。
何を作ったのか
本番ツール（Honban Tool） という名前のブラウザ拡張です。そのまますぎる名前。
やることはシンプルで、いまアクセスしているページが「本番」なのか「ステージング」なのか「開発」なのかを、URLから自動で判定して、画面上に目立つように表示してくれるというものです。
たとえば本番環境を開くと、ページの周りに赤い枠がドーンと出る。これだけ。これだけなんですが、これがあるだけで「あ、いま本番にいるんだな」って身体が勝手に緊張するので、うっかり操作がぐっと減ります。
どんな表示ができるの
表示方法は好みで選べるようにしました。全部ONにするとうるさいので、案件ごとに使い分ける感じです。
- ページ全体の枠 … 画面のふちに色付きの枠。いちばん分かりやすい
- 上部バナー … 画面の上に「本番環境」みたいな帯を出す
- 隅のバッジ … 端っこにちょこっとラベルを出す（控えめ派向け）
- favicon の書き換え … タブのアイコンの色を変える。タブがいっぱい並んでても見分けられる
- タブ名のプレフィックス … タブのタイトルに「[本番]」みたいな印をつける
個人的には favicon 書き換えが地味に便利で、タブを大量に開く人ほど効いてくると思います。
どうやって環境を判定してるの
URL（ホスト名）のルールで判定しています。
example.com は本番、staging.example.com はステージング、みたいなルールを設定画面から登録しておくと、あとは自動で判定してくれます。ワイルドカードや正規表現にも対応しているので、だいたいのパターンは吸収できるはずです。
色やラベルも環境ごとに自由に決められます。「本番は赤」「ステージングは黄色」みたいな、自分の中のお約束をそのまま設定に落とし込める感じですね。
設定はツールバーからサッと
ツールバーのアイコンをクリックするとポップアップが開いて、その場で設定をいじれます。わざわざ設定ページを開かなくていいので楽。
あと、複数の案件を扱っていると設定がどんどん増えていくので、グループでまとめて管理できるようにしました。案件ごとにグループを作っておいて、使わないときはグループごとまとめてOFF、みたいな運用ができます。
設定は JSON で書き出し／読み込み もできるので、チームメンバーに「これ入れといて」と設定を配ることもできます。環境ごとの見た目をチームで揃えられるのはけっこう便利じゃないかなと。
ちょっと実験的な機能
「表示するだけじゃなくて、いっそ止めてほしい」という気持ちもあるので、本番でフォームを送信しようとしたら確認ダイアログを出すという機能も入れてみました。
ただこれは正直まだ β です。というのも、ネイティブの <form> の送信にしか効かなくて、React とかの SPA（fetch/XHR で送信するタイプ）だと捕まえられないんですよね。
なので過信は禁物ということで、UIにもβバッジをつけて注意書きしてあります。
デフォルトはOFFです。
単にブラウザ拡張だとこんなところまで触れるので試しにやってみた。という感じでぜんぜん実用的な代物じゃないです。
プライバシーまわり
「ページの内容を読んで外部に送ってるんじゃないの？」というのは気になるところだと思うので、先に書いておきます。
ページの内容を読み取ったり、外部サーバーに送ったりは一切していません。 設定はブラウザの中に保存されて、同じアカウントの自分の端末どうしでだけ同期されます。権限も storage と activeTab だけに絞っていて、必要最小限にしてあります。
そういうの気をつけて作る必要があるんだなーという気づきがありました。 申請のときにコードをデプロイすると必要とする権限を調べてそれに対してコメントをそれぞれ書くという手続きがあります。
作ってみて
正直、機能としてはめちゃくちゃ地味です。枠を出すだけですからね。
複数環境をラベルで束ねて管理とか、その環境ごとdisableにするとか、ちょっと開発をやっている人には便利かも。という機能が地味に入っています。
同じように「本番こわい」と思っている人に届くといいなと思います。
せっかくなのでChrome Storeの画像を貼っておきます。
ではでは。
