実践
前編 Charlesの基本

Charlesというプロキシアプリケーションの使いこなしを解説します。今回は基本的な設定方法からファイルマッピングの使い方までを紹介。開発のさまざまな場面で役立てましょう。

2015年05月28日発行

目次

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

*注:初期の自動設定

インストール時にProxyの自動設定を行うと、インストールされたマシンが接続しているホストに対して、自動的に設定を行います。

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

基本的な設定

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

Firefoxを利用している場合

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

FirefoxのCharlesアドオンのインストール

Mac OS X Proxyをオンにする

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

Max OS X Proxyをオンにする

キャッシュをオフにする

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

*注:URLにタイムスタンプを入れてキャッシュを回避する

クエリをURLパスの一部として使うとクエリなしのファイルとは別のファイルとして扱われるため、うまく使うとキャッシュを利用しないで、ファイルをロードすることができます。

<script src="scripts/main.js"></script>

ビルドツールなどでタイムスタンプを付与します。

<script src="scripts/main.js?1432054720045"></script>

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

Tools -> No Cachingを選択
No Caching SettingsダイアログでEnable No Cachingをチェック

記録の設定

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

ログ記録の設定

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

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

不要なファイルの指定

SSLプロキシを有効にする

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

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

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

SSL証明書のインストール

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

Windows / Internet Explorerの場合

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

Help -> SSL Proxying -> Install Charles Root Certificateを選択

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

SSL証明書のインストール

Firefoxの場合

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

ツール -> Charles Proxy -> Install Charles Root Certificateを選択
FirefoxのSSL証明書をインストール

Windows / Google Chromeの場合

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

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

Charles Help -> SSL Proxying -> Save Charles Root Certificateを選択

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

SSL証明書の保存

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

保存したSSL証明書のインポート

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

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

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

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

通信のモニタリング(Structure)

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

通信のモニタリング(Sequence)

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

Overviewでリクエストの詳細を確認

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

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

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

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

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

~/Desktop/main.js

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

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

Edit Mappingダイアログ

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の使い方についてお伝えしました。次回はもう少し踏み込んだ使い方を見てみましょう。

德田 和規
德田 和規
フロントエンド・エンジニア

HTML/CSSコーダーとしてWebに触れ、その後WebディレクターとしてJavaScriptの特性を活かしたサイトのテクニカルディレクションからUI開発までを経験。2011年にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。 著書に『jQuery逆引きマニュアル』(共著:インプレスジャパン、2010年12月17日)などがある。