[Qiita] 修正差分ファイルのみで本番適用した状態をローカルで確認する方法

現行サイトのオリジナルデータを支給してもらえず、テスト環境も存在しない案件で、修正ファイルを差分で納品する必要に迫られるケースがあります。 こういう場合はだいたい、以下の様な状態だったりします。

  • CSSやJavaScriptを修正するので事前のクロスブラウザによる動作チェックが必要。
  • 検証のために関連データをブラウザ越しにダウンロードするのメンドい。
  • 手持ちのデータは修正差分にして、関連データを作業場所に格納したくない。

これを解決する方法として幾つか考えられる方法があります。

1. ブラウザについてる開発者ツールを使う

特定環境下で検証するだけであればコレで十分ですが、結局ファイルを修正する必要があるので二度手間になるうえ、自分以外の人も確認する必要があったり、クロスブラウザで検証する必要が有る場合は不十分です。

2. base 要素を使い、CSS やJavaScript を head 要素内でオーバーライドする

head 要素内に <base href="http://www.example.com/" /> を挿入した上で、style 要素やscript要素を追記する方法です。 お手軽に確認できますが、CSS は後続の定義が優先されるので、実際に適用すると何故か中間にオーバーライドしている定義がいた場合、想定通り CSS が当たらないことがあります。 JavaScript も既存のコードに編集を加えたいケースの方が多かったりします。 また、納品HTML から base 要素を削除し忘れると、いろいろマズイことになるので、できれば検証用の記述を別途せずに納品と同じ状態のもので検証ができる状態にしたいところ。

3. Charles を使う

Charles Web Debugging Proxy

たぶんこれが一番簡単。Map Local 機能を使えばドメインも本番と変わらないため、事前検証も確実に行えます。 Charles は他にもウェブ開発に必要な機能が揃ってるので、開発用PCに入れておくと便利です。

4. Apache + mod_rewrite + PHP でリダイレクト処理させる

Charles は機能制限は無いものの、有料アプリ($50)なので導入に二の足を踏んだり、諸事情によりインストールが出来ない環境では、それ以外の方法で…ということであれば以下のコードを使います(これが本題)。 XAMPP 環境や一般的なレンタルサーバでもお手軽にセットアップできます。

_redirect.php の $domain を任意のドメインに変更し、Document Root 直下に .htaccess とセットで格納します。 ローカルにファイルがあればそれを参照し、無ければ _redirect.php を経由して指定ドメインのリソースを読みに行く挙動となるため、ローカルには修正対象となるファイルのみとなります。

※この記事はQiitaとのマルチポストになります。