Binbo-Special - WEB制作や運営に関する楽屋話 -

サイト制作・運営やドラムの事やゲーム開発のこととか

技術資料

デモサイト(テストサイト・テスト環境)であることをわかりやすくしたい

デモサイト(テストサイト・テスト環境)であることをわかりやすくしたい

本番環境のサイトと、テスト環境・デモ環境・ステージング環境・開発環境等々、
サイト制作・公開・運用にあたって、様々な環境が存在します。

当たり前ですね。

で、それぞれの環境は、大きなデザインリニューアル時とかでない場合は、まあ概ね見た目については似ているないしは同じであることが多いです。

これも当たり前ですね。

問題点っぽいもの

で、制作サイドはURLを見たりして判断出来ますが、

修正内容をテスト環境にアップして修正内容をクライアントに確認してもらったりするフローの時に、

「これでOKです。ありがとうございました。」

なんて言われてしまうこともしばしば。

いや、これテスト環境なので、確認してもらって問題なければ本番環境にアップしますよー、ってメールに書いたんだけど・・・・。

みたいな些細なストレスが発生したり、

まだメールで返信もらえていれば良いですが、本番アップ完了したと勘違いしたクライアントはそのまま放置してみたりするケースも・・・・・

そして、さらにさらに言うと、

社内でもテスト環境を参照しながら手動で更新内容をデプロイしていたつもりでも、あやまって本番環境をダイレクトに更新していたり、なんてことも・・・

とまあ色々と可能性を考えるときりがないわけですが、今回やりたいことは、

ブラウザでサイト閲覧時に、本番環境か本番環境以外かどうかがぱっと分かりやすくしておきたい!

ということです。

本番環境以外の環境は、印を表示しておく。

こんなことが出来れば、作業時もわかりやすいですし、クライアントにもわかりやすいので勘違いが減る可能性が高くなりますね。(高くなって欲しいですね)

というわけで、簡単なものですが、demomark.js というものを作ってgithubにアップしてみましたので、よかったら使ってみてください。

donkysoft/demomark

使い方は超簡単で、

demomark.js

を読み込むだけです。

<script src="path/to/demomark.js"><script>

デフォルトでは、サブドメインで切り分ける事を想定して、URL中の development. test. stage. staging. に反応します。

ディレクトリで分けているよ!とかIPアドレス直だよ!とか別ドメインにしているよ!とか人によって違うと思いますので、その場合は、demomark.js の environments 内を直接修正したり追加したりして、自分仕様に変えちゃってください。

また、表示位置がデフォルトでは右上ですが、これも左上や右下、左下に変更可能です。

environments 内に既に記述していある内容やコメントを見て触ってみてください。

本番環境からすると、ゴミjsファイルが混じってくるという感覚になってしまいますが、jQueryも使っていない超小さいjsですし、許してやって欲しいです。

(まあそんな厳密なプロジェクトでは、こんなjsファイルは検討もされないとは思いますが。)

サンプル

サンプルを github pages にアップしましたので、こちらからどうぞ。

donkysoft.github.io/demomark/

投稿日:

技術資料
,

関連記事

no image

東大王セカンドシーズンのクイズマラソンのランキングを計算してみた

クイズ番組、大好きなんですよね。

次回作っぽいもの情報。「とうふファンタジー(仮)」

次回作っぽいもの情報。「とうふファンタジー(仮)」

今度の主人公はとうふです!(主人公って言って良いのかどうか)

とうふファンタジー Android版を公開しました。

とうふファンタジー Android版を公開しました。

今回はついにとうふ達が主役になりました。
敵と戦い、勝利し、GOLDを得てとうふ達を強くしながら、新たな強い敵と戦っていく、、、
そんなゲームです。

no image

東大王セカンドシーズンの早書きバトルのランキングを計算してみた

クイズ番組、大好きなんですよね。

PHP5.4にしたらCodeIgniterのImage画面出力が出来なくなった!?

PHP5.4にしたらCodeIgniterのImage画面出力が出来なくなった!?

どうもこんにちは。
焼き鳥って、おいしいですよね。