【開発支援ツール】Charlesの使い方更新版【神ツールv4.5.6】

## はじめに
本稿は[Charles](https://www.charlesproxy.com/)というプロキシツールのv4.5.6版の解説です。
[【開発支援ツール】Charlesの使い方【神ツール】](https://qiita.com/ishigaki_shun/items/41ab31b002c8649be2c2)を書いた人ですが、記事が古くCharlesも更新されていたので書き直し記事みたいなやつです。

## Charlesとは
アプリ開発をしているとAPIのレスポンスを見たかったり、正しいドメインにアクセスしているかを確認したい場合が出てくると思います。

それが簡単にできる便利なツールがCharlesです！(とても便利)

エンジニアなら是非Charlesを使いこなしましょう！！(とてもとても便利)

聡明な皆さんならもちろんご存知の神ツールです。

## Charlesでできること

・通信のモニタリング
　-アクセスしたドメインやAPIのリクエスト/レスポンスのヘッダやボディを確認できます。

・通信速度のシミュレーション
　-通信速度を変えて通信できるようになります。タイムアウトのテストなどができます。

・データの上書き
　-APIのリクエストやレスポンスを書き換えることができます。

・Locationのモッキング
　-アクセス先をLocalにあるJsonファイルやWebページに変えることができます。

Charlesは無料期間があり、インストール後30日間はすべての機能を利用することができます。

しかし、30分ごとに強制再起動が行われるためウザいです。

[ライセンス](https://www.charlesproxy.com/buy/)買ってください。

## インストール

インストールは[ダウンロードページ](https://www.charlesproxy.com/download/)から、インストーラをダウンロードし、指示に従って手順を踏むだけで行えます。

使っているOSに合ったインストーラをダウンロードしましょう。

## 使うための設定

ここからCharlesを使うための設定を説明していきます。

### ProxySetting

Charlesを起動したら、メニューバーの **Proxy -> Proxy Setting...** を開きます。HTTP Proxyのポート番号は8888とし、チェックボックスにはどちらもチェックしましょう。
<img width="593" alt="スクリーンショット 2020-02-17 13.05.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279881/2ba440d6-e979-71cd-303f-d74121800c63.png">

また、PC上のブラウザなどでWebページを見たり、iOS/Androidのシミュレータで通信をキャプチャしたい場合は**macOS -> Enable macOS proxy**にチェックを入れましょう。
<img width="593" alt="スクリーンショット 2020-02-17 13.07.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279881/f95f2445-af8e-f0a0-77f9-7b41ec730a06.png">

### SSLProxySetting

次にHTTPS通信を見るための設定を行います。  
メニューバーから**Proxy -> SSL Proxy Setting...**を開き、"Enable SSL Proxying"にチェックを入れます。

そしたら**Include**の欄に通信キャプチャしたいドメインを、**Exclude**の欄には通信キャプチャを**したくない**ドメインを追加します。
<img width="592" alt="スクリーンショット 2020-02-17 15.57.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279881/8f12ff7c-35d1-6ec5-77d2-7968f28d4229.png">

追加は「Add」ボタンを押し、出てくるダイアログに入力するだけです。全ての通信をキャプチャしたい場合は、**Includeにのみ**hostを「*」、portを「443」にします。(何も考えずExcludeにも追加してたため1敗)
上の画像通りになっていれば、全てのhostに対する通信をキャプチャすることができるので参考にしてください。
<img width="593" alt="スクリーンショット 2020-02-17 16.01.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279881/f23f47d5-f1f3-c706-91af-3a15e292baa3.png">

### SSL証明書

次に、PCにSSLの証明書をインストールします。SSL証明書はメニューバーの**Help -> SSL Proxying -> Install Charles Root Certificate**を選択します。

すると、キーチェーンが表示されます。`Charles Proxy Custom Root Certificate`がCharlesのSSL証明書です。ですが、デフォルトで証明書が信頼されていないため、証明書をダブルクリックし、`この証明書を使用する時`を`常に信頼`に変更します。
![a](https://qiita-user-contents.imgix.net/http%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Dview%26id%3D0B1mzDVhT-5rVaEFnZ2lybHlMalU?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=a4260adaaff86a1c58b7c1a205214092)  
            **↓**  
![b](https://qiita-user-contents.imgix.net/http%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Dview%26id%3D0B1mzDVhT-5rVRjRPNDlOVXhUbDQ?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=e553a3a37df57bdad5f5bf0c15424008)  


## 実機端末(iPhone/Android)の通信をキャプチャする

実機端末の通信をキャプチャするためには、PCと同一のWi-Fiに接続しておく必要があるため、あらかじめ**同じWi-Fi**に接続しておきます。

また、PC側で接続しているWi-FiのIPが必要になるので、メニューバーの**Help -> Local IP Address**を選択して、現在のIPアドレスが表示されるので控えておきます。
![c](https://qiita-user-contents.imgix.net/http%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Dview%26id%3D0B1mzDVhT-5rVcUZxbDFpVjBwS2s?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=ba5a744f2890887564d26bf635032018)

### iPhone
**設定アプリ -> Wi-Fi**から接続しているWi-FiをタップしてWi-Fi設定画面を表示します。Wi-Fi設定画面の最下部にHTTPプロキシ項目があるので、`手動`にした上で、控えておいた`IPアドレス`と`ポート番号`を入力します。

さらにSSL通信も見られるようにiPhoneに証明書をインストールします。証明書はCharlesを起動して、プロキシ接続をしたまま、Safariでhttp://www.charlesproxy.com/getssl を開きます。(Charles経由で証明書をインストールするため、プロキシ接続してないとインストールできません)
するとインストール画面が開かれるので、画面に従ってインストールします。

最後に**設定アプリ -> 一般 -> 情報 -> 証明書信頼設定**をタップして、インストールした証明書を信頼する設定にします。これでSSL通信も見られるようになります。

### Android
設定からWi-Fi設定を開き、接続しているWi-Fiを長押しします。その後、**ネットワーク設定を変更 -> プロキシ -> 手動**とした上で、控えておいたIPアドレスとポート番号を入力します。

次にAndroidに証明書をインストールします。証明書はCharlesを起動して、プロキシ接続をしたまま、Chromeでhttp://www.charlesproxy.com/getsslを開きます。

するとインストール画面が開かれるので、そこからインストールします。

注) Androidのアプリの通信をキャプチャしたい場合、アプリ内で明示的に認証局(CA)を信頼してあげないといけません。デバッグビルドのみキャプチャしたい場合はコンフィグファイルを作ってAndroidManifestファイルに追加するだけなのでお手軽です。以下に参考にさせていただいた記事を記載します。
[Android7からcharlesでssl通信が見れなくなった件](https://qiita.com/endoidou/items/9d83d253b29e26e8d244)

## 通信をキャプチャする
上記までの設定が終わると、端末及びPC上の通信がCharlesに表示されます。また、実機端末の場合、初回接続時にアラートが出るので`Allow`を押して通信のキャプチャを許可します。(macOSの場合、`Deny`の方が青くなってるので手癖でEnterキーをターンッ！してしまう方はご注意ください。)
![d](https://qiita-user-contents.imgix.net/http%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Dview%26id%3D0B1mzDVhT-5rVVFpDWkllVkplR3M?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=55cf4aed1ec6514b245cb3cef87cc006)

画像のように通信しているドメインが表示されます。ドメインを開いていくと、エンドポイントのオーバービューを見ることができます。また、エンドポイントに対してのリクエストやレスポンスも確認することができます。

## ブレークポイント

多分一番使ってる機能が`ブレークポイント`です。URLに対してブレークポイントを張る事で、リクエスト及びレスポンス時に通信が一旦止まります。この時、`レスポンスの内容を書き換えることができる`ので、アプリ開発でAPIを叩くテストをする時や、任意のレスポンス時の動作確認をするときはレスポンスを書き換えて確認しましょう。とても便利です。

![e](https://qiita-user-contents.imgix.net/http%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Dview%26id%3D0B1mzDVhT-5rVOEUxY09lTlppWWs?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=ff023d93f2e945cf153813f6048a811c)

![f](https://qiita-user-contents.imgix.net/http%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Dview%26id%3D0B1mzDVhT-5rVUUFlcTI3OWZPTGc?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=d6a2e43d7fc8a70344d330bb8fb615f1)

## マッピング

これもたまに使います。特定のURLに対して、リモートやローカルの環境にあるファイルやWebページにアクセスするようにマッピングさせることが可能です。**Tools -> Map Local**を選択し、特定のURLとマッピングしたいファイルのパスを入力しておくことで、それ以降そのURLへのアクセスが指定したファイルになり変わります。S3やローカルにjsonファイルを置いといて、モックとして扱うことができるので重宝してます。
<img width="484" alt="スクリーンショット 2020-02-18 16.14.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279881/c355626f-0afe-b0b2-78af-9da8bcf85a21.png">  
↓
<img width="539" alt="スクリーンショット 2020-02-18 16.13.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279881/ca5d15f1-6f23-6bfc-4d7d-3215e033ca8d.png">

## さいごに

Charlesの導入方法から簡単な使い方までの説明でした。古い記事の書き直しなので一部画像は使い回しですが気にしないでください。

若干導入がややこしく手間ではありますが、それさえ出来てしまえば非常に頼りになるツールだと思っています。デバッグの難しい本番環境の通信ログにもなるし、開発環境のモックにもなるし、アプリエンジニアとしては非常に便利なツールとして活用しています。

ライセンスがちょっと高いので、法人で使えるといいかもしれませんね。

質問や不明点等ございましたらコメントしていただければ対応いたします。ご気軽にどうぞ。