はじめに

こんにちは。
株式会社アイスタイルで@cosmeアプリのAndroidエンジニアをしている山本と申します。

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

Charlesとは

Charlesは、HTTP通信をキャプチャし、リクエストやレスポンスを確認できるソフトウェアです。

Charlesの導入方法

ダウンロード

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

ライセンス入力

ライセンスキーがある場合は入力することで、制限なく使えるようになる。
（無料の30日間のトライアル版もあります。）

Help > Register Charles を開く
ライセンス情報を入力して Register をクリックする

3. Charlesが終了するので再度起動し、Help > Registered to XXXX になっていればライセンス登録完了

初期設定（PC）

プロキシ設定

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

SSLプロキシの設定

SSL > SSL Proxying Settings を開く
Enable SSL Proxying　にチェックを入れる
: にチェックを入れて add にチェックを入れて OK をクリックする

macOSプロキシの除外(Macの場合)

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

ローカルIPアドレスの確認

Help > Local IP Address を開く

初期設定（Android端末）

SSL証明書のインストール

Help > SSL Proxying > Save Charles Root Certificateを開く
任意の場所に証明書を保存する
Android端末に証明書をインストールする

実機の場合は、証明書をPCから端末にダウンロードして、インストールする
エミュレーターの場合は、証明書をドラック＆ドロップでエミュレーターにインストールする

通信設定

エミュレーター・実機共通(実機ごとに設定画面UIなどが異なるので注意)

設定 > ネットワークとインターネット > Wi-Fi > 接続しているWi-Fiの詳細 > プロキシ
手動で設定を選択する
ホスト名には、PCのローカルIPアドレスを入力する
ポートには、PCのプロキシ設定で設定したポート番号を入力する

5. 保存する
6. 任意の通信をして、Charlesのセッションが表示されれば成功
（※初回の場合、Charles側にアラートが出るので Allow を押下して許可する）

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

通信のキャプチャ

内容を確認したい通信をクリックする
Contentタブでリクエストやレスポンスの内容を確認できる

BlockListとAllowList

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

BlockListとAllowListへの追加方法

指定したい通信を右クリックする
Add to Block List/Allow List　それぞれクリックしてチェックマークを入れる

ブレークポイント

指定した通信のリクエスト / レスポンス時にブレークポイントを設定できる。
リクエストが実行される前、レスポンスを受け取る前にブレークされ、内容を変更できる。

Proxy > Breakpoint Settings を開く
Breakpointを有効にする
指定したブレークポイントが有効になる

ブレークポイントへの追加方法

指定したい通信を右クリックする
Breakpointsをクリックしてチェックマークを入れる

ブレークして、リクエストヘッダーの内容を変更する

ブレークポイントが有効になっている状態で、通信する
ブレークされた画面で Edit Requestタブを選択する
Headersを選択する
ヘッダーの内容を変更する(直接書き換えることができる)
書き換えが終わったら、以下から選択する

Execute: リクエストを送信する
Cancel: リクエストをキャンセルする
Abort: 通信を失敗させる

ブレークして、レスポンスのJsonの内容を変更する

ブレークポイントが有効になっている状態で、通信する
ブレークされた画面で Edit Responseタブを選択する
JSON Textを選択する
レスポンスの内容を変更する(直接書き換えることができる)
書き換えが終わったら、以下から選択する

Execute: レスポンスを送信する
Cancel: レスポンスをキャンセルする
Abort: 通信を失敗させる

まとめ

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