Android開発者向けのCharles導入と主な使い方

## はじめに
こんにちは。
株式会社アイスタイルで[@cosmeアプリ](https://play.google.com/store/apps/details?id=jp.co.istyle.atcosme&hl=ja)のAndroidエンジニアをしている山本と申します。

今回は、Android開発する上で、便利な通信キャプチャソフトウェアのCharlesの導入とAndroid開発する上で便利な使い方について共有いたします。
(この情報は、2024/07時点での情報となります。)

## Charlesとは
[Charles](https://www.charlesproxy.com/)は、HTTP通信をキャプチャし、リクエストやレスポンスを確認できるソフトウェアです。

![Charles.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834173/47968c40-cb21-8127-eda9-f8ef95ad5c75.png)

## Charlesの導入方法

### ダウンロード
以下のURLからダウンロードする。
https://www.charlesproxy.com/download/
ダウンロードしたファイルを開いて、指示に従って進めていけばインストールできる。

### ライセンス入力
ライセンスキーがある場合は入力することで、制限なく使えるようになる。
（無料の30日間のトライアル版もあります。）
1. Help > Register Charles を開く
2. ライセンス情報を入力して Register をクリックする

![Register.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834173/96caa263-c46d-ee9b-4403-c2d76aeba634.png)
3. Charlesが終了するので再度起動し、Help > Registered to XXXX になっていればライセンス登録完了

## 初期設定（PC）

### プロキシ設定
1. Proxy > Proxy Settings を開く
2. 任意のポート番号を設定する（他で使用していなければ初期設定8888のままでOK）

![Proxying.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834173/d7685428-033e-dfd1-5ebb-56f1ed79c0ae.png)

### SSLプロキシの設定
1. SSL > SSL Proxying Settings を開く
2. Enable SSL Proxying　にチェックを入れる
3. *:* にチェックを入れて add にチェックを入れて OK をクリックする 

![SSL_Proxying.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834173/0f05cf68-cd61-8846-0e24-eee1556cba11.png)


### macOSプロキシの除外(Macの場合)
1. Proxy > macOS Proxy のチェックがついている場合はクリックして外す
(オンにしておくとプロキシしているPC自体のログが出るので邪魔になる)

![MacOSProxying.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834173/216988e7-acb6-446f-ea24-f051dd229146.png)

### ローカルIPアドレスの確認
1. Help > Local IP Address を開く

![localIp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834173/bfcfa2aa-9abf-0b95-6a57-af6fc5efbccc.png)


## 初期設定（Android端末）

### SSL証明書のインストール
1. Help > SSL Proxying > Save Charles Root Certificateを開く
2. 任意の場所に証明書を保存する
3. Android端末に証明書をインストールする
- 実機の場合は、証明書をPCから端末にダウンロードして、インストールする
- エミュレーターの場合は、証明書をドラック＆ドロップでエミュレーターにインストールする

### 通信設定
エミュレーター・実機共通(実機ごとに設定画面UIなどが異なるので注意)
1. 設定 > ネットワークとインターネット > Wi-Fi > 接続しているWi-Fiの詳細 > プロキシ
2. 手動で設定を選択する
3. ホスト名には、PCのローカルIPアドレスを入力する
4. ポートには、PCのプロキシ設定で設定したポート番号を入力する

![Anrdoid_network_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834173/d6a234e2-0ccf-3dd2-2a74-a60c39ab1186.png)
5. 保存する
6. 任意の通信をして、Charlesのセッションが表示されれば成功
（※初回の場合、Charles側にアラートが出るので Allow を押下して許可する）

## Android開発での活用方法(一部)

### 通信のキャプチャ
1. 内容を確認したい通信をクリックする
2. Contentタブでリクエストやレスポンスの内容を確認できる

### BlockListとAllowList
Tools > Block List/Allow List
特定のリクエストをブロックしたり、許可したりできる。
Block List　→　指定した通信を失敗させる。
Allow List　→ 　指定した通信のみ成功させる。
それぞれクリックしてチェックマークを入れることで有効になる。

### BlockListとAllowListへの追加方法
1. 指定したい通信を右クリックする
2. Add to Block List/Allow List　それぞれクリックしてチェックマークを入れる

### ブレークポイント
指定した通信のリクエスト / レスポンス時にブレークポイントを設定できる。
リクエストが実行される前、レスポンスを受け取る前にブレークされ、内容を変更できる。
1. Proxy > Breakpoint Settings を開く
2. Breakpointを有効にする
   指定したブレークポイントが有効になる

### ブレークポイントへの追加方法
1. 指定したい通信を右クリックする
2. Breakpointsをクリックしてチェックマークを入れる

### ブレークして、リクエストヘッダーの内容を変更する
1. ブレークポイントが有効になっている状態で、通信する
2. ブレークされた画面で Edit Requestタブを選択する
3. Headersを選択する
4. ヘッダーの内容を変更する(直接書き換えることができる)
5. 書き換えが終わったら、以下から選択する
- Execute: リクエストを送信する
- Cancel: リクエストをキャンセルする
- Abort: 通信を失敗させる

### ブレークして、レスポンスのJsonの内容を変更する
1. ブレークポイントが有効になっている状態で、通信する
2. ブレークされた画面で Edit Responseタブを選択する
3. JSON Textを選択する
4. レスポンスの内容を変更する(直接書き換えることができる)
5. 書き換えが終わったら、以下から選択する
- Execute: レスポンスを送信する
- Cancel: レスポンスをキャンセルする
- Abort: 通信を失敗させる

## まとめ
以上、Charlesの導入方法とAndroid開発での活用方法について共有いたしました。
Android開発でViewに新しい項目が追加された時や、エラー画面のチェックなど、Charlesを使うことで効率的に開発を進めることができます。
ご紹介した使い方以外にも、Charlesには様々な機能がありますので、ぜひご自身で試してみてください。