Charlesの初期設定してみた

by

Charlesサムネイル

こんにちは、中尾陽菜です。
今回は、Charlesについてと、PC・スマホの初期設定方法を紹介します。

Charlesとは

・アプリからAPIのリクエストをどう出しているのか確認したい。
・サーバから返ってきたレスポンスの確認したい。
・正しいドメインにアクセスしているかを確認したい。

上記のような事を、簡単に確認できる便利なツールのことです。
※Androidは使用出来ません。
→セキュリティの観点からandroid7以上からは使用できなくなっています。

 

Charlesをインストールする

下記のリンクからCharlesをダウンロード出来ます。
https://www.charlesproxy.com/download/

ダウンロード完了後、各OSのインストールガイドに従ってインストールを行なってください。

 

PCの設定方法く

■プロキシーを設定を行う
①メニューバーの Proxy > Proxy Setting… を開く。
HTTP Proxyのポート番号を任意の4桁の番号を設定。

②入力項目の下にあるSupport HTTP/2Enable trarnsparernt HTTP proxying
両方チェックを入れる。
Charles_1

 

■SSLプロキシを有効にするための設定を行う
メニューバーから Proxy -> SSL Proxy Setting… を開く。
Enable SSL Proxyingにチェックを入れる。
②LocationsのAddをクリックして、* (ワイルドカード)を追加し、OKボタンをクリック。
Charles_2

■証明書のインストールを行う
メニューバーの Help > SSL Proxying -> Install Charles Root Certificateをクリック。
インストール完了後、キーチェーンが表示される。

・SSL証明書を右クリックし、”情報を見る”を選択。
Charles_3

・信頼項目にある”この証明書を使用する時”を常に信頼に変更する。
Charles_4

 

これで、PCの初期設定は完了です。

 

 

スマホの設定方法

最初に、PCとスマホを同じWi-Fiに接続しとく。

■Local IP Addressの確認
・charlesを起動し、Local IP Addressをクリック。
表示されたIP Addressを控えておく。
Charles_5

 

■iPhoneのプロキシー設定を行う

①iPhoneのHTTPプロキシ設定を開く。
Charles_6

②”プロキシを構成”をタップ。
※画面の一番下にあります。
Charles_7

③手動にチェックを行う。
④サーバに、先ほど控えたIP Addressを入力。
⑤ポートにPC側で設定したポート番号を入力し、
 右上にある保存ボタンをタップ。
Charles_8

 

■iPhoneにCharlesをダウンロード

charlesとiPhoneがつながっている状態で、iPhoneで以下のURLにアクセスする。
http://www.charlesproxy.com/getssl
遷移先でダイアログがでるので、”許可”を選択。
Charles_9

・ダウンロードが完了すると完了ダイアログが表示されるので、”閉じる”をタップ。
Charles_10

 

■ダウンロードしたCharlesをiPhoneにインストール

・設定アプリを起動し、”プロファイルがダウンロードされました”をタップ。
Charles_11

・右上にある”インストール”をタップ。
パスワードを求められるので、パスワードを入力する。
Charles_12

 

■charles Proxy CAのスイッチをONにする

設定アプリを起動。
一般 > 情報 > 証明書信頼設定を開き、charles Proxy CAのスイッチをONにする。
Charles_13

 

これで、iPhoneの初期設定は完了です。

Charlesの使い方については、別途記事であげます。

中尾 陽菜
20年卒。
趣味:洋画鑑賞、万年筆インク集め、ハンドメイド
最近、紅茶の缶などのお洒落な缶を集めることに嵌っています!

Egg Device Application

東京品川のスマホアプリ製作・開発会社です。
一般アプリ業務用アプリからVRアプリまで開発可能。

求人情報

スマホアプリ製作・開発の
相談を受け付けています

メールでのご相談

お電話でのご相談
TEL 03-5422-7524
平日10:00~18:00