こんにちは。koyakunです。
ブラウザ上のアプリやサイトであれば、Chrome開発者ツールのNetwork閲覧機能でHTTP通信を確認する事ができます。皆様もデバックのためによく使用されるのではないでしょうか。
HTTP通信はデバックのためだけではなく、スクレイピングを行う際にも、取得したい情報のパケットを特定するために使用します。

今回は、ブラウザ上のサイトではなく、ネイティブアプリのHTTP通信を、Charlesというツールを使って覗いてみようと思います。

1. Charlesとは

アプリやソフトの通信をキャプチャすることができるソフトウェアです。通常はアプリのデバックなどに使われることが多いです。原理的には、Charlesを起動しているパソコンをプロキシにし、ネイティブアプリのパケットを覗く構造です。
本来は有料ライセンスですが、1回30分程度であれば無料でも使用することができます。

2. Charlesの導入

2-1. パソコンの設定

• WebサイトからCharlesをダウンロード、インストール
  https://www.charlesproxy.com

• Javaのアプリなので、Javaランタイム(Javaで作られたアプリケーションを動かすために必要なソフト)環境が必要。環境がない方は、そちらの設定が必要です。
• Charlesを起動し、使用するポート番号とLocal IP Addressを確認。後ほどスマートフォンで設定が必要なためメモしておく。

ポート番号の確認




Local IP Addressの確認



• 対象のSSL通信を指定する。Proxy > SSL Proxying Settings...へ移動し、SSL Proxingに * を加える。(アスタリスク * 指定で全ての通信が対象になります。)

2-2. モバイルデバイスの設定

IOS / Android 共通

• プロキシとなるパソコンとネイティブアプリ検査対象のモバイル端末は、同一ネットワークに接続。
• モバイル端末側でプロキシへ接続するために、控えておいたポート番号とLocal IP Addressを各環境別の設定画面に入力する。

Android

• 設定 > Wi-Fi > 対象のネットワークワーク を長押しし、ネットワークを修正するをクリック
• 詳細設定項目を開き、プロキシを手動へ変更。プロキシホスト名にLocal IP Addressを、プロキシポートにポート番号を入力し、保存。

• パソコンでCharlesを起動
• モバイル端末で、プロキシに接続するためのセキュリティの設定
  Chromeで http://www.charlesproxy.com/getssl を開き、証明書をインストール。（証明書を開けない場合は、別端末で、証明書の拡張子をcerに変更したものをメールなどで端末に転送して開く）
• 設定 > セキュリティ > 信頼できる認証情報 > ユーザー へと進み、Charles Proxy CAの存在を確認

IOS

• 設定 > Wi-Fi > 対象のネットワークワーク を選択
• HTTPプロキシをデフォルトのオフから手動へ変更。サーバーにLocal IP Addressを、ポートへポート番号を入力。

• パソコンでCharlesを起動
• モバイル端末で、プロキシに接続するためのセキュリティの設定
  Mobile Safariで http://www.charlesproxy.com/getssl を開き、画面から証明書をインストール
• 設定 > 一般 > プロファイル へと進み、Charles Proxy CAの存在を確認

3. 実際にネイティブアプリのHTTP通信を覗く

プロキシにモバイル端末が繋がると、パソコンのCharles画面は下記のようになります。

各パケットを右クリックすると、Copy cURL Requestが現れます。コピーしたリクエストを、ターミナル上でCurlすると、同様の挙動を再現する事ができます。

また、Curl to ruby を利用する事で、プログラムの中で対象のリクエストを再現する事も可能です

Charlesには他にも機能がありますので、ご自身が興味のあるネイティブアプリを使いながら、試していただきたいです。使用する際に、ログイン機能や認証機能があるネイティブアプリについては、情報にCookieやAuthorizationが含まれている場合もありますので、その点だけお気をつけください。