Charlesとは

開発・制作時に、変更を確認したいけれど、サーバーのデータを更新したくない、またはできない。通信速度を変えて確認したい、通信状況を確認したい、APIから受け取るデータを上書きしたい、リバースプロキシ*を試したい、などちょっと面倒なことをしたくなったことはありませんか？

そんなときはCharles（チャールズ）がとても役に立ちます。

CharlesのWebサイト冒頭には、次のような説明があります。

WEB DEBUGGING PROXY APPLICATION

この説明の通り、Charlesはプロキシアプリケーションです。

一般的にプロキシサーバーと呼ばれるものは、クライアント（Webブラウザ）とサーバー間のネットワークに存在し、サーバーからの情報をキャッシュして、データの取得の高速化を図ったり、有害な接続をフィルタリングしたりします。

Charlesもこのプロキシの仕組みを使い、サーバーとWebブラウザの間で、開発に必要なさまざまなことを行ってくれます。例えば、次のようなことです。

• 通信のモニタリング
• ファイルのマッピング
• データの上書き
• 通信速度のシミュレーション（スロットル）
• リバースプロキシ

このように、盛りだくさんです。

Charlesは1ユーザーあたり約$50の有料のアプリケーションですが、インストール後の初期利用から30日間は体験版として、すべての機能を利用できます（ただし、30分ごとに強制的に再起動されます）。

似たようなことができるプロキシアプリケーションとしてFiddlerも有名で、こちらはフリーのアプリケーションです。しかし残念なことにWindows環境でしか利用できません。一方、CharlesはWindows、Linux、Max OS（OS X）で利用できます。Mac OSで開発をしている方は、試してみて損はないでしょう。

Charlesのインストールはダウンロードページから、インストーラーをダウンロードし、指示にしたがって手順を踏むだけで行えます*。

今回はCharlesの基本的な設定からファイルのマッピングまでを紹介しましょう。基本的にはMac OSベースで話を進めますのでご注意ください。

基本的な設定

Charlesのインストールが終わったら、基本的な設定を行いましょう。

Firefoxを利用している場合

ダウンロードページにFirefoxでアクセスして、ページ下部の「Mozilla Firefox add-on」にあるリンクからCharlesのアドオンをインストールしてください。

Mac OS X Proxyをオンにする

まずはProxy -> Max OS X Proxyを確認して、オフになっている場合はチェックしてオンにします（⇧⌘P）。Mac OSではここをオンにしないと動かないので、一番重要なところです。

キャッシュをオフにする

デバッグ中は総じてキャッシュをオフにすることが多いのですが、閲覧ページのファイルURLにタイムスタンプなどが入っていなくても*Charlesからキャッシュをオフにできます。

<script src="scripts/main.js"></script>
        p ビルドツールなどでタイムスタンプを付与します。
        pre.code.javascript
<script src="scripts/main.js?1432054720045"></script>

Tools -> No Caching をチェックしてオンにします（⇧⌘N）。

記録の設定

Proxy -> Recording Settings（⇧⌘R）で、ログを記録する対象URLを指定すると、CharlesのStructure/Sequence部分に通信状況を表示できます。

図のようにパスにはワイルドカードも利用できますが、すべての通信を表示してしまいます。ある程度細かく指定して、必要な情報のみを表示したほうがよいでしょう。

例えば私の場合、HTMLや画像ファイルの受信データは、ここでは不要なことが多いので、exclude（指定ファイルを除く）で設定しています。この設定で、モニタリングできるのは、サーバーのAPI経由で取得できるJSONデータなどです。

SSLプロキシを有効にする

対象にするWebサイト／ページがSSLを利用している場合は、Proxy -> SSL Proxy SettingsでSSLプロキシを有効にします。

すべてのSSLサイトを対象にする場合は、Locationsに Host: * を追加します。個別にしたい場合は、対象にするサイトのホスト（location.host: www.pxgrid.com の箇所）を追加します。

SSL Certificate（SSL証明書）のインストール

SSLプロキシを設定しただけでは、ブラウザ該当のWebページを開いたときにプライバシーエラーが表示されます。

これはhttpsへのリクエストをCharlesがプロキシして、Charlesから証明書を発行しているように見せているためです。OSまたはブラウザにCharlesの証明書（SSL Cerificate）を登録することで、プライバシーエラーを表示しないようにします。

Mac OS（OS X）の場合

Help -> SSL Proxying -> Install Charles Root CertificateをクリックするとSSL証明書をMac OS（OS X）にインストールできます。

MacではGoogle ChromeとSafariで利用できます。

Windows / Internet Explorerの場合

Help -> Install Charles CA SSL CertificateからSSL証明書をインストールします。

インストール画面が表示されるので手順に沿ってインストールします。

Firefoxの場合

Firefoxのツール -> Charles Proxy -> Install Charles Root CertificateからSSL証明書をインストールします。

Windows / Google Chromeの場合

Mac OS（OS X）でGoogle Chromeを利用している場合は、この手順は必要ありません。Mac OSの場合の手順に従ってください。

Charles Help -> SSL Proxying -> Save Charles Root Certificateを選択します。

SSL証明書を適当な名前を付けて保存します。Google Chromeの設定画面に「HTTPS/SSL 証明書の管理…」ボタンがあるので、クリックします。

信頼されたルート証明機関タブを開いて、先ほど保存した証明書をインポートします。SSL証明書を選択するとインポート画面が表示されるので、手順に従ってください。

ここまでで一通りの設定はできました。それでは実際に使ってみましょう。

記録を開始する（通信のモニタリング）

Proxy -> Start Recording（⌘R）で記録を開始します。ここに表示される情報はGoogle Chromeのデベロッパーツールを使っていれば、よく見たことがあるものばかりです。通信内容を表示しているだけなので、詳しいことは割愛します。

Structureではホストごとに確認できます。

Sequenceではリクエストごとに確認できます。

Overviewでリクエストの詳細も確認できます。

ファイルをマッピングする

ここでのファイルのマッピングというのは、ホスト上のファイルを、ローカルのファイルに置き換えることです。

例えば、ホスト上に次のようなファイルがあるとします。

http://hoge.com/scripts/main.js

このファイルをローカル上の、次のファイルに置き換えることができます。

~/Desktop/main.js

つまりサーバー上のファイルを操作することなく、手元で少し書き換えて確認することが可能です。

Tool -> Map Local（⇧⌘L）でMap Local Settingsダイアログを表示して、マッピングしたい組み合わせを入力するだけです。

Enable Map Localをチェックして、「Add」ボタンをクリックします。

Map Fromにはマッピングの対象ファイルを指定します。

http://www.pxgrid.com/assets/js/src/redirect.jsというファイルを指定していますが、Hostにパスを指定して、タブキーを押すと自動で分解してくれます。

Map Toにはローカルファイルを指定します。サーバー上のJavaScriptファイルをローカルにダウンロードし、冒頭にalert('hello');を追加して保存、そのファイルをMap Toに指定してみてください。

JavaScriptファイルを読み込んでいるサーバー上のページhttp://www.pxgrid.com/index.htmlをリロードするとhelloというアラートが表示されるはずです。

またローカルファイルだけでなく、リモート上にあるファイル（URLを持つファイル）にもマッピングすることができます。つまり、あるサーバー上のファイルから、別サーバー上にあるファイルへのマッピングも可能です。

ビルドしたファイルをローカルサーバーからアクセスできるようなときには、この方法が便利です。

いかがでしたか？　今回は基本的なCharlesの使い方についてお伝えしました。次回はもう少し踏み込んだ使い方を見てみましょう。