【iOS/Android/Mac】CharlesでHTTP通信の中身を調査する方法！
この記事からわかること
- iOS/AndroidアプリでHTTP通信をデバッグする方法
- Charlesの使い方
index
[open]
＼ アプリをリリースしました ／
環境
- Android Studio：Meerkat
- Android：15
- Xcode：16.3
- iOS：18
- Mac M1：Sequoia 15.4
- Charles：5.0.1
Charlesとは？
「Charles(チャールズ)」はモバイルアプリとインターネット間のHTTP通信を監視できるプロキシツールです。これにはリクエスト、レスポンス、そしてCookieやキャッシュ情報を含むHTTPヘッダーなどが含まれています。
基本的には有料のライセンスを購入して使用していく想定ですが、一応無料の範囲でもトライアルとして使用することが可能です。ただ30日間かつ30分で以下のエラーポップアップが表示され、Charlesが再起動してしまうので多用するのであればライセンスを購入することをおすすめします。
Macへの導入方法
Charlesを導入するためにまずはダウンロードします。アプリケーションフォルダに移動させ、起動させると以下のようなポップアップが表示されます。「Charlesにネットワーク設定の変更権限を与えますか？」というような意味なので「Grant Privileges（権限を付与する）」で進めていきます。するとPCのパスワードを求められるので入力しておいてください。
これでCharlesが起動します。
証明書の有効化
続いてMacとiOSシミュレーターで使えるように証明書を作成し、有効化していきます。Charles上部メニューの「Help」＞「SSL Proxying」＞「Install Charles Root Certificate」をクリックします。キーチェーンアクセスが起動するので「ログイン」＞「証明書」の中に「Charles Proxy CA」が生成されていればOKです。
続いて「Charles Proxy CA」を右クリックして「情報をみる」をクリックし以下のポップアップが開くので「常に信頼」に変更しておきます。
「Charles Proxy CA」が以下のように青色になっていればOKです。
接続設定とポート/IPアドレス確認
続いてCharles上部メニューの「Proxy」＞「Proxy Settings...」からポート番号を設定します。他とバッティングしていなければ8888のままで大丈夫です。
IPアドレスはCharles上部メニューの「Help」＞「Local IP Addresses」から確認することができます。
Charles上部メニューの「Proxy」＞「SSL Proxying Settings...」から「HOST」に*、Portに443を入れたものを追加し有効化しておきます。
これで準備は完了です。
Macの通信を除外する
現状CharlesではMacで発生している通信自体もキャプチャしてしまっています。このままではモバイルアプリ側の通信のノイズになるのでCharles上部メニューの「Proxy」＞「MacOS Proxy」のチェックをクリックして外せばOKです。
iOSシミュレーターで使用する
iOSシミュレーターでするためにはシミュレーターを起動し「設定アプリ」＞「一般(General)」＞「情報(About)」＞「証明書信頼設定(Certifiacte Trust Settings)」＞「Charles Proxy CA」のスイッチをONにします。
これでCharlesアプリを立ち上げておけば通信内容を監視することができます。試しにシミュレーターでこのサイトhttps://appdev-room.com/を開いてみるとCharlesにもhttps://appdev-room.com/があることが確認できます。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
