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

パケットキャプチャツール「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
  3. メニューバーのProxy > Proxy Settingsを選択し、下記のキャプチャの通り、Enable transparent HTTP Proxyingをチェックします
  4. メニューバーの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にて通信キャプチャをするための手順を書きました。
無駄に通信をしているアプリを生み出してしまうのは、ユーザにとってもサーバにとっても負荷が高いので、通信キャプチャをしながらエコなアプリを提供しましょう。
最後までお読みいただき、ありがとうございました。


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。