はじめに
こんにちは。
株式会社アイスタイルで@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には様々な機能がありますので、ぜひご自身で試してみてください。