【Charles】アプリの通信をキャプチャする

Android、iOSアプリ開発でAPIのリクエスト、レスポンスを確認するために使っているツール「Charles」について記載します。
スマートフォンアプリ開発で是非、利用して頂ければと思います！

# Charlesについて
CharlesはHTTPプロキシ、HTTPモニタを行うためのツールです。
このような書き方をすると難しいツールのように感じてしまうかもしれませんが、使い方は至ってシンプルです。
Charlesを使うことで、通信時のリクエスト、レスポンスの中身を除いたり、値を好きに書き換えたりすることができます。
APIが異常系のレスポンスを返してきた場合のアプリ側の挙動を確認したい場合に、サーバー側の設定やDBの値を変更する必要がなくなります。

また、この記事ではOSX + iOS + Androidで使うことを前提に記載します。
もちろん、WindowsやLinuxでも使うことができますので参考にして頂ければと思います。


![スクリーンショット 2016-07-25 11.56.31.png](https://qiita-image-store.s3.amazonaws.com/0/133918/4c8769fd-b3ad-dbe1-a2de-1dcb227f2cce.png "スクリーンショット 2016-07-25 11.56.31.png")

# 環境構築

## インストール
１. 以下のURLより最新版のCharlesをインストールすることができます
　https://www.charlesproxy.com/download/  
２. MacをWifiに接続します。
３. Charlesを起動します。初回起動時には下記のダイアログが表示されます。
![スクリーンショット 2016-07-25 12.49.19.png](https://qiita-image-store.s3.amazonaws.com/0/133918/4d9a8959-997e-6327-0c9e-52760985c7c8.png "スクリーンショット 2016-07-25 12.49.19.png")
  
  ここでは、Charles起動時にプロキシの設定をCharlesに切り替えるかどうかの設定を行います。
  特段の事象がない限りは __Grant Privileges__ を選択することをオススメします。
  
４. 次に下記のダイアログが表示されます。
  
  ![スクリーンショット 2016-07-25 20.26.05.png](https://qiita-image-store.s3.amazonaws.com/0/133918/1d3acafd-f332-4824-2799-42206ad8b202.png "スクリーンショット 2016-07-25 20.26.05.png")


  CharlesをFirefoxでも利用する場合は __Install__ を選択します。
  利用しない場合は __Cancel__を選択します。
  
５. Charles起動後、メニューから Proxy -> SSL Proxying Settingsを選択します。
  
  ![スクリーンショット 2016-07-25 20.31.04.png](https://qiita-image-store.s3.amazonaws.com/0/133918/ed3d7f41-0e66-d12a-7e05-e061a3b5eb3b.png "スクリーンショット 2016-07-25 20.31.04.png")

６. __Add__ ボタンを押下し、Hostに __*__ を入力後、OKを押下します。
  
  ![スクリーンショット 2016-07-25 20.37.36.png](https://qiita-image-store.s3.amazonaws.com/0/133918/ecf8df4f-a5ff-7bd3-5f18-e186d80ab952.png "スクリーンショット 2016-07-25 20.37.36.png")
  
## Macの設定
メニュー -> Help -> SSL Proxying -> Install Charles Root Certificate より証明書をインストールします。
  
  ![スクリーンショット 2016-07-25 21.08.34.png](https://qiita-image-store.s3.amazonaws.com/0/133918/255e5a2a-39e6-2fbb-59c8-31cf8420cfe2.png "スクリーンショット 2016-07-25 21.08.34.png")
  
  「このルート証明書は信頼されていません」と表示されてしまう場合は以下手順を行うことで解決することができます。
  1. 証明書 __Charles Proxy Custom Root Certificate__をダブルクリックする。
  2. 「信頼タブ」を開く。
  3. この証明書を使用するとき -> 常に信頼する を選択する。
  
## iPhoneの設定

１. メニュー -> Help -> Local IP Addressを選択し、MacのIPアドレスを調べます。
  
  ![スクリーンショット 2016-07-25 20.50.59.png](https://qiita-image-store.s3.amazonaws.com/0/133918/68722c33-0d3d-7e73-809e-2a3c74d4b281.png "スクリーンショット 2016-07-25 20.50.59.png")
  
２. iPhoneをMacと同じWifiに接続します。
３. WifiのHTTPプロキシの設定にて、サーバにMacのIPアドレス、ポートに8888を入力します。
  
  ![スクリーンショット 2016-07-25 21.05.22.png](https://qiita-image-store.s3.amazonaws.com/0/133918/9a70a7d0-049f-9b12-1991-4212cf1c6cca.png "スクリーンショット 2016-07-25 21.05.22.png")
  
４. Charles側で以下のダイアログが表示されるので __Allow__ を選択します。
  
  ![スクリーンショット 2016-07-25 21.32.04.png](https://qiita-image-store.s3.amazonaws.com/0/133918/31b3a9c0-c34c-4e4c-c07a-c7699f036bb9.png "スクリーンショット 2016-07-25 21.32.04.png")


５. 以下URLにアクセスし、プロファイルをインストールします
  http://www.charlesproxy.com/getssl


## Androidの設定

１. AndroidをMacと同じWifiに接続します。
２. WifiのHTTPプロキシの設定にて、プロキシホスト名にMacのIPアドレス、プロキシポートに8888を入力し、保存します。
  
  ![スクリーンショット 2016-07-25 21.44.12.png](https://qiita-image-store.s3.amazonaws.com/0/133918/c256d0b5-8ee0-cc80-7c43-9cbbe1b9dc5a.png "スクリーンショット 2016-07-25 21.44.12.png")

３. Charles側で以下のダイアログが表示されるので __Allow__ を選択します。
  
  ![スクリーンショット 2016-07-25 21.32.04.png](https://qiita-image-store.s3.amazonaws.com/0/133918/31b3a9c0-c34c-4e4c-c07a-c7699f036bb9.png "スクリーンショット 2016-07-25 21.32.04.png")


４. 以下URLにアクセスし、プロファイルをインストールします
  http://www.charlesproxy.com/getssl
  
# パケットをキャプチャする
下記のようにレスポンスの中身を確認することができます。
  
![スクリーンショット 2016-07-25 21.47.13.png](https://qiita-image-store.s3.amazonaws.com/0/133918/98a022c6-3d5f-9b33-7246-679746f4e28f.png "スクリーンショット 2016-07-25 21.47.13.png")

# リクエスト、レスポンスを書き換える
１. iOS、Androidのアプリ内で通信処理を行います。
　
２. Structureタブを選択します。
  ![スクリーンショット 2016-07-25 21.58.45.png](https://qiita-image-store.s3.amazonaws.com/0/133918/85b48bc8-b29a-0c66-dd62-9d4c90990956.png "スクリーンショット 2016-07-25 21.58.45.png")

  
３. 任意のURLを選択し、右クリック -> BreakPointをチェックします。
　
４. 再度右クリックし、BreakPointにチェックマークが入っていればOKです。
  
  ![スクリーンショット 2016-07-25 21.57.12.png](https://qiita-image-store.s3.amazonaws.com/0/133918/531fc7d6-b98c-1fdf-d914-ed5013d740b1.png "スクリーンショット 2016-07-25 21.57.12.png")

５. iOS、Androidのアプリ内で再度通信処理を行います。
６. 通信処理ブレーク後、Edit Response(Edit Request)タブを押下します。
　
７. 通信データを任意に書き換えた後、Executeボタンを押下します。
　
  ※補足Responseのみを書き換える場合、メニュー -> Proxy -> BreakPoint Setting -> Requsetチェックを外す必要があります。

# おわりに
Charlesにはこの記事で紹介した以外にも様々な機能があります。
Charlesは有料ライセンスですが、起動後30分で終了する（再起起動すればまた使えます）制限付きで無料で使うことができます。
簡単で便利な機能が多くあるので、是非一度使ってみてはいかがでしょうか。