こんにちは、間藤です。
今回は、「Charles」というツールについて紹介したいと思います。
iPadからの通信をトレースするというシチュエーションで解説していきたいと思います。
I'm trying to debug a network problem. How do I get a packet trace?
以前、iPadのアプリを開発していたとき、そのアプリがWebサーバに対して行う通信を確認したい場面がありました。その際に、以下のページに行き当たりました。
「ネットワークの問題をデバッグしたいんだけど、どうやればいいですか？」というQAに対する回答が記載されています。
そして、「iOS Packet Tracing」の項に、紹介されていたのが「Charles」です。つまり、Charlesは、Webサーバへの通信を行うアプリの通信デバッグに利用できます。このツールは、他の用途にも利用できますが、今回はこの「Packet Trace」の機能について見ていきたいと思います。
また、Appleのサイトに掲載されていることから、高い評価を得ているツールであることがうかがえます。
Charlesのインストール
公式サイトからファイルをダウンロードしてください。この記事の執筆時点では、バージョン3.7が最新版です。以降、このバージョンを利用していきます。また、今回はWindows7にCharlesをインストールします。インストールは、特に注意しなければならないことはないと思います。ただ、最後に「Mozilla Firefox add-on」のインストールを促されます。CharlesがFirefoxのプロキシ設定を変更するために必要だとのことですので、必要に応じてインストールしてください。
なお、Charlesは有償のツールですが、30日間の試用期間が設けらていますので、購入せずとも利用することは可能です。但し、試用版では、起動に時間がかかったり、30分後に強制終了したりと、使い勝手に関するいくつかの制約があります。
- 30分後に強制終了
Charlesの動作原理
以降の設定内容をイメージしやすいよう図にしてみました。CharlesがiPad端末のプロキシサーバとなり、通信内容をトレースするという仕組みです。
Charlesのプロキシ設定
上の図に示したように、Charlesがプロキシサーバとしての役割を果たしますので、そのポート番号の設定を以下のように行います。
デフォルトでは8888が設定されています。今回はこのポート番号をそのまま使用します。
SSL設定
次に、SSLに関する設定を行います。HTTPS接続のトレースを行いたい場合、以下の設定が必要です。
Locationsに接続先のホストを追加／設定します。上の例では、任意のホスト接続のトレースを行うようにしています。
証明書インストール
Windowsマシンに、CharlesのCA証明書をインストールします。※今回は、iPadに証明書をインストールすればよいのですが、CharlesをインストールしたWindowsマシンでも、いろいろと機能確認したかったのでインストールしています。iPadへの証明書インストールについては、後述します。
メニューから[Install Charles CA SSL Certificate]を選択。
証明書ストアとして、「信頼されたルート証明機関」を選択してください。
インストール時に以下のような警告が出ます。
フィンガープリントは、このページで確認できます。このページには、プラットフォームごとの証明書インストール方法が記載されていますので、参考にしてください。
アクセス制御設定
Charlesに外部のマシンから接続する場合、アクセス制御設定を行っておく必要があります。
今回は、iPadから接続したいので、追加設定を行います。
Windows Proxy設定
デフォルトでは、Charlesを起動すると、Windowsのプロキシ設定を変更します。もし、Charlesの利用目的が、今回のようにiPadからの通信をトレースすることであれば、Windowsのプロキシ設定変更は不要です。これを抑制したいのであれば、以下のように「Proxy Windows Proxy at startup」のチェックを外しておきます。また、Firefoxは、独自にプロキシ設定を持っているので、別タブ（Mozilla Firefox）で同様の設定変更を行ってください。なお、Charlesが行ったプロキシ設定変更は、Charles終了時にもとに戻されます。ただし、Charles利用中にクラッシュした場合は、設定が戻らないので注意してください。
外部プロキシ設定
もし、お使いの環境が、プロキシサーバ経由でインターネット接続を行っており、iPadからインターネット上のサイトにアクセスしたときの通信内容をトレースしたいなら、外部プロキシ設定を行っておく必要があります。お使いの環境に合わせて設定を行ってください。
iPadの設定
Wi-Fi設定
以下のようにWi-Fi設定を変更します。（設定値は、環境に合わせて読み替えてください。）
CA証明書インストール
Safariで以下のURLにアクセスしてください。
http://charlesproxy.com/charles.crt
証明書のインストール画面が表示されますので、インストールを選択します。
【2015/4/8 追記】
バージョン3.10からCA証明書のインストール方法が変わりました。リリースノートに以下にように記載されています。
SSL certificate root certificate change to generate a unique certificate for each installation of Charles (see SSL Proxying in the Help menu)
ヘルプメニューを確認すると、以下のように表示されます。（以下のキャプチャはMacで取得したもの）
ここに記載されている手順を踏めば、証明書をインストールすることが可能です。
要するに一律同じ証明書を使うのではなく、Charlesのインストールごとに異なる証明書が使われるようになったということです。
通信内容のトレース
ここまでで準備が整いましたので、実際に通信内容をトレースしてみます。
iPadのSafariからGoogleに接続してみます。
すると、Charlesに通信トレース結果が表示されるはずです。（Recodingが停止中だと通信トレースされませんので注意してください。）
以下、「Sequence」タブを選択時の表示内容です。
次にHTTPSでGoogleに接続してみます。これも問題なくトレースされているのが確認できます。
※HTTPS通信のトレースで、レスポンスのHTMLソースを確認しようとすると、高い確率でCharlesがハングしてしまいました。
Charlesには、通信内容のトレース以外にも、様々な機能を提供します。
例えば、本番環境のプログラムコードを更新せずに、新しいプログラムコードの動作を確認するなどです。
以下のサイトに非常にわかりやすいデモが紹介されています。
http://css-eblog.com/tools/charles.html
私はまだそれほど使い込めていないので、これから他機能も確認したいと考えています。
