74
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CharlesでiOS Simulatorの通信をキャプチャする方法

Last updated at Posted at 2018-02-17

パケットキャプチャツール「Charles」を用いて、iOS端末(特にiOS Simulator)の通信をキャプチャする方法についてまとめます。
また、Charlesは通信のキャプチャだけでなく、レスポンスの差し替えなどもツール上から行えるのでとても便利です。

こんなときに役に立ちます!

  • Xcodeでのデバッグでは追いにくい、実際の通信処理の中身を確認したい
  • iOSアプリの結合試験時など、無駄にリクエストをしていないか確認したい
  • 実機でパケットキャプチャする時のプロキシの設定が毎回めんどくさい(←自分は地味にこれです)

必要なものはMacだけ

  • Mac
    • Xcode (iOS Simulator) ※Xcodeの導入方法は割愛
    • Charles (パケットキャプチャツール)
      • 無料でも使えます

やり方

一度設定してしまえば、以降はCharlesを起動するだけで通信のキャプチャが可能です:tada:

Charlesの設定

  1. こちらから最新版をインストールします
    • Homebrewでインストールすることもできます
$ brew tap homebrew/cask
$ brew cask install charles
  1. インストールが完了したらCharlesを起動します
  2. ダイアログが出るので、Grant Privilegesを選択します
スクリーンショット 2018-02-14 12.56.46.png 4. メニューバーのProxy > Proxy Settingsを選択し、下記のキャプチャの通り、Enable transparent HTTP Proxyingをチェックします 5. メニューバーのProxy > SSL Proxy Settingsを選択し、下記のキャプチャの通り、HTTP Proxyを設定します

Charlesの証明書の設定

Charlesでパケットキャプチャするには、証明書を対象のmacOS/iOS端末に登録する必要があります。
この登録処理自体をしなくてもパケットキャプチャ自体はできるのですが、SSL(https)通信まではキャプチャできないので、SSL通信をキャプチャしたい場合は、この設定が必要となります。
やっておいて損はないと思います。

  1. メニューバーのHelp > SSL Proxying > Install Charles Root Certificateを選択します
  2. キーチェーンアクセスに追加されたか確認します(charlesで検索するとよいです
3. 赤いバツマークになっているので、右クリックして情報をみるを選択し、信頼セクションを展開して、この証明書を利用するときの「常に信頼」に変更します 4. 赤いバツマークがなくなればOKです

iOS Simulatorの証明書設定

  1. メニューバーのHelp > SSL Proxying > Install Charles Root Certificate in iOS Simulatorを選択します
  2. ダイアログが出るのでOKを選択します
スクリーンショット 2018-02-17 17.36.00.png

iOS Simulator上の設定(iOS10.3以降)

:warning: iOS10.3以降のSimulatorにて、https(SSL通信)の中身をキャプチャするには、下記設定が必須となりますのでご注意ください

  1. Charlesを起動します
  2. 通信をキャプチャしたいiOS Simulatorを起動します
  3. 設定(Settings).Appを開き、一般(General) > 情報(About) > 信頼書設定(Certifiacte Trust Settings) > Charles Proxy CA のスイッチをOnにします

Let's Capture!!!

  1. 試しに先ほど設定したSimulatorでSafariでAppleのサイトを開いてみます
  2. 正常にSSL通信がキャプチャできているのがわかりますね:thumbsup:
貼り付けた画像_2018_02_17_17_47.png

実機ではどうやるの?

iPhone/iPadなどの実機の場合も、同様にCharlesメニューバーのHelpからMobile Device用のRootCertificateを実機にインストールすれば可能です。
が、通信をPCでキャプチャするために端末のネットワーク設定に対してプロキシを毎回設定しなくてはならないので、ちょっぴりめんどくさいです。
また、キャプチャ完了した後にプロキシの設定を有効にしたまま閉じてしまって、通信を使うときにエラーになってなんでだろう?とよくなってしまいがちなので、Simulatorの方がよく使います。

まとめ

Charlesを使ってiOS Simulatorにて通信キャプチャをするための手順を書きました。
無駄に通信をしているアプリを生み出してしまうのは、ユーザにとってもサーバにとっても負荷が高いので、通信キャプチャをしながらエコなアプリを提供しましょう。
最後までお読みいただき、ありがとうございました。

74
58
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
74
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?