78
85

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-25

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

Charlesについて

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

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

スクリーンショット 2016-07-25 11.56.31.png

環境構築

インストール

1. 以下のURLより最新版のCharlesをインストールすることができます
 https://www.charlesproxy.com/download/
2. MacをWifiに接続します。
3. Charlesを起動します。初回起動時には下記のダイアログが表示されます。
スクリーンショット 2016-07-25 12.49.19.png

ここでは、Charles起動時にプロキシの設定をCharlesに切り替えるかどうかの設定を行います。
特段の事象がない限りは Grant Privileges を選択することをオススメします。

4. 次に下記のダイアログが表示されます。

スクリーンショット 2016-07-25 20.26.05.png

CharlesをFirefoxでも利用する場合は Install を選択します。
利用しない場合は __Cancel__を選択します。

5. Charles起動後、メニューから Proxy -> SSL Proxying Settingsを選択します。

スクリーンショット 2016-07-25 20.31.04.png

6. Add ボタンを押下し、Hostに * を入力後、OKを押下します。

スクリーンショット 2016-07-25 20.37.36.png

Macの設定

メニュー -> Help -> SSL Proxying -> Install Charles Root Certificate より証明書をインストールします。

スクリーンショット 2016-07-25 21.08.34.png

「このルート証明書は信頼されていません」と表示されてしまう場合は以下手順を行うことで解決することができます。

  1. 証明書 __Charles Proxy Custom Root Certificate__をダブルクリックする。
  2. 「信頼タブ」を開く。
  3. この証明書を使用するとき -> 常に信頼する を選択する。

iPhoneの設定

1. メニュー -> Help -> Local IP Addressを選択し、MacのIPアドレスを調べます。

スクリーンショット 2016-07-25 20.50.59.png

2. iPhoneをMacと同じWifiに接続します。
3. WifiのHTTPプロキシの設定にて、サーバにMacのIPアドレス、ポートに8888を入力します。

スクリーンショット 2016-07-25 21.05.22.png

4. Charles側で以下のダイアログが表示されるので Allow を選択します。

スクリーンショット 2016-07-25 21.32.04.png

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

Androidの設定

1. AndroidをMacと同じWifiに接続します。
2. WifiのHTTPプロキシの設定にて、プロキシホスト名にMacのIPアドレス、プロキシポートに8888を入力し、保存します。

スクリーンショット 2016-07-25 21.44.12.png

3. Charles側で以下のダイアログが表示されるので Allow を選択します。

スクリーンショット 2016-07-25 21.32.04.png

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

パケットをキャプチャする

下記のようにレスポンスの中身を確認することができます。

スクリーンショット 2016-07-25 21.47.13.png

リクエスト、レスポンスを書き換える

1. iOS、Androidのアプリ内で通信処理を行います。
 
2. Structureタブを選択します。
スクリーンショット 2016-07-25 21.58.45.png

3. 任意のURLを選択し、右クリック -> BreakPointをチェックします。
 
4. 再度右クリックし、BreakPointにチェックマークが入っていればOKです。

スクリーンショット 2016-07-25 21.57.12.png

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

おわりに

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

78
85
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
78
85

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?