Auto Draft Charles Proxyで端末の通信をモニタリングしよう

1. はじめに

APIの動作確認をするとき、HTTPヘッダーやリクエストの中身、レスポンスなどをどのようにチェックしていますか？何を隠そう私はずっと、Laravelのロガー一本槍でやってきました…。今日ボスに紹介してもらった、こんなときのための強力なツールをご紹介します。Charles Proxyです。では、 Auto Draft Charles Proxyで端末の通信についてご説明します。

Charlesは、デバイス間のすべてのHTTP(S)通信をモニタリングできるウェブプロキシツールです。

クライアントがPCブラウザであれ、モバイル端末であれ、リクエスト、レスポンスからHTTPヘッダー（クッキーやキャッシュを含む）までまるっと追跡できます。

では実際に、スマートフォンとコンピューターの間の接続にCharles Proxyを刺してみましょう。

検証環境：

AndroidスマートフォンとWindows PC

（iOSやMacでも検証可能です）

2. レッツトライ

a. Windows側

Charlesアプリケーションは、Mac、Linux、Windowsの3つのプラットフォームすべてで利用できます。 https://www.charlesproxy.com/download/からダウンロードできます。

Charles Proxyの新規作成:

1. Charlesを開き、Proxy -> Proxy Settingsを選びます。

「Proxies」タブで、[HTTP Proxy Port]セクションに8888と入力します。

2. 「SSL Proxying」タブをクリックし、「Enable SSL Proxying」をオンにします。

ここでListenしたいドメイン名を指定します。

たとえば、https:://saas.beyond-inc.jpを接続する場合は、「Add」ボタンをクリックしてhttps:://saas.beyond-inc.jpを追加します。ワイルドカード（*.saas.beyond-inc.jp）でも可。

b. モバイル（Android）側

1. Windows PCのローカルIPを取得します。

　「Help」->「Local IP addess」に移動します。ここでは192.168.1.168です。

2. AndroidにCharles Proxyを設定

AndroidのWi-fi一覧から、接続しているWi-fiの「Modify network」->「Advanced Options」に移動し -> 「Proxy」までスクロールし、「Manual」を選択します。

「Proxy host name」ボックスに、Windows PCのIPを入力します。ここでは192.168.1.168です。
「Proxy port」ボックスにポート8888を入力します。

保存すると、電話からCharlesへの接続があることを通知するポップアップが表示されます。「Allow」を選択してください。

接続できたどうかを確認するために、PC側で「Proxy」 ->「Access Control Settings」に移動してください。

追加した電話のローカルIPは192.168.1.94でした。

2. Charles SSL certificate をインストールする

　　　SSL通信のために、証明書のインストールが必要です。

スマホのブラウザに移動し、chls.pro/ssl または　http://charlesproxy.com/getssl と入力し、SSL certificateをダウンロードします。
Certificate をダウンロードしたら、クリックしてファイルを開きます。 Androidはこのファイルをインストールするためのダイアログボックスを表示します。証明書名を入力して「OK」をクリックします。この名前は何でも大丈夫です。ここではCharlesにします。