本番環境でテスト?! Charlesを使った簡単サイト修正

カテゴリ:ツール 2011年9月12日 09:00

Charles site

前回の「スマホの開発が超絶楽に! weinreでスマートフォンをPCでリモートデバッグ!」は大変好評なようでうれしい限りです。自分もこれを知ったときはかなり興奮したのを覚えているので、同じ気持になってもらえたら幸いです。

さて、今回はデバッグツール的なつながりでCharlesというプロキシツールの話をしたいと思います。

プロキシって?

プロキシサーバーとは、e-Wordsでは「単にプロキシと言う場合は、WWW閲覧のためにHTTPによる接続を中継するHTTPプロキシを指す場合が多い。」という説明がされています。

つまりどういうことかと言うと、外部と通信する際に、通信そのものを代理でやり取りしてくれるソフトウェア(サーバ)ということができると思います。

デモ動画

今回もまた、文章では伝わりづらいので実際にその作業をしているデモ動画を作成しました。

※注意:デモでは本来なら手を入れることができないサイトに対しても使える=本番環境でも問題ない、ということを説明するためにYahoo! Japanのサイトでテストしています。なので、実際には修正を行おうとしているサイトと、修正すべきファイルは手元にあるはずなので適宜それらと置き換えて読み進めてください。

デモ解説

いかがでしたでしょうか。Charlesを使うことで非常に手軽に本番環境でのテストが行えることが分かってもらえたのではないでしょうか。

ただ注意としては、(当然ですが)実際に本番環境をいじっているわけではないのでCharlesを落としてしまえば本当の本番環境に戻ります。なので、最終的にはこうして修正・チェックしたファイルを本番へ上げる必要があります。

ただCharlesを使うことによって、「テストで大丈夫だったものを本番に上げたらおかしくなった」ということを極力減らすことができる、ということです。(なんせ、本番環境でうまく行っていたのだから、それをアップしたら当然テストしたものと同じ結果になる、という理屈)

では、動画でやっていたことをピックアップしながらなにをしていたのかの詳細をしていきたいと思います。

作業手順 - 1

まず、Charlesのサイトからアプリをダウンロードします。(Windows版、Mac版ともにあります)

サイトトップ右側にある「Download a free trial Version **」からダウンロードページへ進みます。

するとページ中程にWindows 32bit版、64bit版、Mac OS X版、Linux / UNIX版のリンクがあるので、そこから該当のファイルをダウンロードし、インストールします。

作業手順 - 2

インストール後、起動したらメニューバーから「Proxy > Mac OS X Proxy(とMozilla Firefox Proxy)」のチェックを入れます。(Macの場合)

Firefoxに限っては、専用のCharlesアドオンをインストールしないとダメなようです。ただ、インストールは簡単で、「Mozilla Firefox Proxy」のチェックを入れるとインストールするかどうかを聞かれるので、そのまま「はい」を選択してインストールすればOKです。

作業手順 - 3

続いて、メニューバーの「Tools > Map Local」を選び、マッピングの設定を行います。

マッピングについては、まずリダイレクトしたいURLを指定し、そのURLへアクセスした場合にどのファイルを参照させるかを指定します。(つまり、参照先のURLを無理やりローカル(手元)にあるファイルにリダイレクトする=Map Local)

ここまで設定したところで、設定したサイトを見てみると、上で設定したファイルの変更がそのまま反映することが確認できると思います。

まとめ

いかがでしょうか。それほど導入がむずかしくないことが分かるかと思います。

一点注意としては、Trial版は30分経つとCharlesが自動で終了する、という点です。(ただ、もう一度普通に起動し直せば、設定した内容は保存されているので使い続けることはできます)

今回のケースはHTMLでデモをしましたが、もちろんCSSやJSを同じようにローカルファイルを参照させることもできます。(逆に、ある程度の規模の案件だとHTMLはPHPなりのプログラムで書き出している、ということも少なくないと思います。その場合は今回の手法では修正がむずかしいかもしれません)

ちなみに、画像ファイルの場合はとあるディレクトリ以下をすべてローカルのファイルを参照するようにしたい、なんていう要望があるかもしれません。その場合は、URLの指定の箇所で「http://hoge.com/img/*」のようにアスタリスクを入れることで、その下のディレクトリにアクセスがあった場合は、ローカルの指定したディレクトリにリダイレクト、という設定もできるようになっています。

このCharels、知ったときはかなり感動しました。たとえば、アカウントがなくて本番にアクセスできない環境(ファイルを納品だけしている場合など)のときに、でもなんとか原因を調べてくれ、なんていう要望をもらったときでもなんとかできてしまったりします。

もちろん通常の開発時でもとても役に立つので、一度試してみてはいかがでしょうか。

この記事のカテゴリー一覧を見る⇒ツール

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/199