Charlesの使い方
1.Charlesとは
注意
本稿は古い記事です。こちらに新しい記事を用意しましたので、これからCharlesを使う方は新しい方をご参照くださいmm
【開発支援ツール】Charlesの使い方更新版【神ツールv4.5.6】
1-1. はじめに
アプリ開発をしているとAPIのレスポンスを見たかったり、正しいドメインにアクセスしているかを確認したい場合が出てくると思います。
そんな時に便利なツールがCharlesです！(とても便利)
開発に携わるのならば、是非Charlesを使えるようになりましょう！！(とてもとても便利)
神ツールです
1-2. Charlesでできること
Charlesを使用すればこんなことができます。
・通信のモニタリング
-アクセスしたドメインやAPIのレスポンスを確認できます。
・通信速度のシミュレーション
-通信速度を変えて通信できるようになります。タイムアウトのテストなどができます。
・データの上書き
-APIのリクエストやレスポンスを書き換えることができます。
Charlesは無料期間があり、インストール後30日間はすべての機能を利用することができます。
しかし、30分ごとに強制再起動が行われるためウザいです。
ライセンス買ってください。
2.Charlesのインストール
2-1. インストール手順
Charlesのインストールはダウンロードページから、インストーラをダウンロードし、指示に従って手順を踏むだけで行えます。
使っているOSに合ったインストーラをダウンロードしましょう。
Charlesがインストールできたら、次は設定を行います。
3.Charlesの設定
3-1. ProxySetting
Charlesを起動したら、メニューバーの Proxy -> Proxy Setting... を開きます。HTTP Proxyのポート番号はデフォルトのままで大丈夫です。(デフォルトは8888)
念のため"Enable transparent HTTP Proxy"にチェックを入れましょう。
また、WEBブラウザなどの通信を見たいなら、項目"macOS"の"Enable macOS Proxy"にチェックを入れます。 
3-2. SSLProxySetting
これでHTTP通信を見ることができるようになりました。次にHTTPS通信を見るために、SSLプロキシを有効にするための設定を行います。メニューバーから Proxy -> SSL Proxy Setting... を開きます。"Enable SSL Proxying"にチェックを入れ、Locationsに * (ワイルドカード)を追加します。
Locationの追加は、"Add"ボタンをクリックし、現れた画面のHostに * を入れ、"OK"ボタンをクリックすれば大丈夫です。
3-3. SSL証明書
SSLの設定が終わったら、SSLの証明書をインストールします。SSL証明書はメニューバーの Help -> SSL Proxying -> Install Charles Root Certificate からインストールできます。
インストールすると、キーチェーンが表示されます。Charles Proxy Custom Root CertificateがCharlesのSSL証明書になります。
しかし、このままではHTTPS通信を行ってもSSLHandShakeが出てしまい、通信を見ることができません。なので証明書をダブルクリックし、"この証明書を使用する時"を常に信頼に変更します。
↓
4.iPhoneとAndroidの設定
4-1. 各端末の設定について
SSLの設定と証明書のインストールが終わったら、次はiPhoneとAndroidの通信を見るための設定を行います。
通信をキャプチャするためには、PCと端末は同一のWi-Fiに接続しておく必要があるため、あらかじめ同じWi-Fiに接続しておきます。
また、PC側で接続しているWi-FiのIPが必要になるので、メニューバーの Help -> Local IP Addressを選択して、現在のIPアドレスが表示されるので控えておきます。
IPアドレスが分かったら、端末のプロキシ接続設定を行います。
4-1-1.iPhoneの場合
ホーム画面の 設定 -> Wi-Fi から接続しているWi-FiをタップしてWi-Fi設定画面を表示します。Wi-Fi設定画面の最下部にHTTPプロキシ項目があるので、"手動"にした上で、控えておいたIPアドレスとポート番号を入力します。
これでiPhoneの通信をCharlesで見ることができます。
さらにSSL通信も見られるようにiPhoneに証明書をインストールします。証明書はCharlesを起動して、プロキシ接続をしたまま、Safariでhttp://www.charlesproxy.com/getsslを開きます。
するとインストール画面が開かれるので、そこからインストールします。これでSSL通信も見られるようになります。
★★2017-06-06追記★★
iOS10.3から証明書の設定項目が１つ加わりました。
ホーム画面の 設定 -> 一般 -> 情報の最下部にある証明書信頼設定がタップして証明書を信頼する必要があります。
参考サイト-Qiita
4-1-2.Androidの場合
設定からWi-Fi設定を開き、接続しているWi-Fiを長押しします。その後、ネットワーク設定を変更 -> プロキシ -> 手動とした上で、控えておいたIPアドレスとポート番号を入力します。
次にAndroidに証明書をインストールします。証明書はCharlesを起動して、プロキシ接続をしたまま、Chromeでhttp://www.charlesproxy.com/getsslを開きます。
するとインストール画面が開かれるので、そこからインストールします。
注意すべき点は、両OSともCharlesを起動した上でプロキシ接続をしておくことです。そうしないと上記のURLを叩いても証明書のインストールができないため、確認した上でインストールしてください。
5.通信をキャプチャする
5-1. 通信内容の確認
上記までの設定が終わると、端末及びPC上の通信がCharlesに表示されます。また、端末の場合、初回接続時にアラートが出るのでAllowで通信のキャプチャを許可します。
画像のように通信しているドメインが表示されます。ドメインを開いていくと、エンドポイントのオーバービューを見ることができます。また、エンドポイントに対してのリクエストやレスポンスも確認することができます。
5-2. ブレークポイントを張る
Charlesではドメインやパスに対してブレークポイントを張る事もできます。ブレークポイントを張った状態で通信をすると、リクエスト及びレスポンス時に通信が一旦止まります。この時、レスポンスの内容を書き換えることができるので、アプリ開発でAPIを叩くテストをする時や、任意のレスポンス時の動作確認をするときはレスポンスを書き換えて確認しましょう。とても便利です。
5-3. レスポンスの編集
アプリ開発では、結構APIを叩きます。しかし、必要なAPIがまだ無かったり、メンテナンス中でアクセスできない状況も割とあります。
その時にレスポンスを自分で書き換えて、あたかもAPIが叩けた風にすることでAPIがなくてもテストや動作確認ができますので、ぜひ使いこなせるようにしましょう。便利だよ。
初めて使うときは何をどうすればいいのか戸惑う事もあると思います。もし分からないことがあればWikiを読み直したり誰かに聞いてみてください。Charlesを使ってストレスフリーなアプリ開発を目指しましょう！