デモ解説

いかがでしたでしょうか。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）

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