SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

LINEフロントエンドレンジャーのWeb開発術

フロントエンド開発が捗るHTTP通信モニタリングツール「Charles」を使いこなす

LINEフロントエンドレンジャーのWeb開発術 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

スマートフォンの通信をプロキシする

 Charlesの最も重宝する使い方の一つがスマートフォンの通信のプロキシです。スマートフォン側の設定を整えることで簡単にプロキシが可能です。

 スマートフォン単体でのデバッグには限界があります。またエミュレータでは見つからないバグも多くあります。そういった時にやはり実機を使ったデバッグは非常に重要ですが、Web上で動くアプリケーション、特にJavaScriptアプリケーションのデバッグは昔から厄介な仕事の一つでした。alertデバッグから始まり今ではweinreなどの便利なツールや、ブラウザに搭載されるデベロッパーツールも非常に強力なものになっていますが、このCharlesのデバッグ手法はそれらと組み合わせて使うこともできます。

 このプロキシは普通のWebブラウザだけでなく、もちろんアプリ内WebViewでも有効です。

PC側の準備

 Wi-Fiネットワークなど、スマートフォンと同じネットワークに繋げるローカルな環境を用意しましょう。スマートフォンからPCのIPアドレスが見える必要があります。

iOSの設定

 まずはiOSでの設定です。

iphone wifi

 設定からWi-Fiの項目を開きます。Wi-Fiは有効にしてください。接続先のネットワーク右端の(i)マークを選択し、詳細設定に入ります。

iphone proxy

 下部にあるHTTPプロキシを手動で設定にし、サーバにPCのIPアドレスを、ポートにCharlesが監視するポート番号を指定します。

Androidの設定

 次にAndroidでの設定です。

android wifi

 設定からWi-Fiの項目を開きます。接続先のネットワークを長押ししてポップアップを出し、[ネットワークを変更]をタップします。

android proxy

 [詳細オプションを表示]にチェックを入れ、[プロキシ設定]を手動にします。[プロキシホスト名]の項目にPCのIPアドレス、[プロキシポート]にCharlesが監視するポート番号を指定します。

プロキシ設定がない端末対策

 Androidには古いバージョンでプロキシの設定を行えない端末が存在します。その場合上述の設定ができません。

Firefox for Mobileを使う

 アドレスバーにabout:configと入力します。

firefox config

 このようなコンフィグモードのページに切り替わります。

firefox proxy

 [network.proxy.http]と[network.proxy.http_port]の項目を探してそれぞれIPアドレスとポート番号を入力します。続いて[network.proxy.type]の項目を探し、値を1にします。この状態でセーブし、Firefoxを再起動するとプロキシの設定が適用されます。

Opera Mobile Classicを使う

 OperaもFirefoxと同じようにopera:configとアドレスバーに打ちこむことでコンフィグのページを表示できます。

opera config

 [Proxy]のカテゴリに移動し、[HTTP server]の項目にIPアドレスとポート番号をIPアドレス:ポート番号の形で入力します。

opera proxy

 この状態でさらに[Use HTTP]のチェックボックスにチェックを入れ、最後に保存を押します。

 これでOperaでもプロキシの設定が適用されます。

 どちらのブラウザもシェアとしては低いため、あまり積極的に使える方法ではありませんが、いざという時に覚えておくと助かる時があるかもしれません。

Windows Phoneの設定

 Windows Phoneは端末自体のシェアも高くありませんが、同じようにプロキシの設定を行うことができます。もちろんiOS、Androidと同様にアプリ内WebViewでも有効です。

 設定からWi-Fiの項目を選択します。

wp wifi

 接続先のネットワークを選択し詳細設定に入ります。

wp proxy

 [サーバー/URL]にPCのIPアドレス、[ポート]にCharlesが起動するポート番号を指定します。

 ここまでの設定を行うことで前述のHTTP通信のモニタ、書き換えを行うことができます。これだけでも非常に便利ですが、次に説明するローカルマッピングはスマートフォンアプリ開発のさらに強力なデバッグ手法です。ちなみにスマートフォンからPCへの接続時、PC側で接続してくるIPを許可するかのダイアログが出る場合がありますので、その場合はIPアドレスを確認の上許可をしてください。

次のページ
ローカルファイルへのマッピング

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEフロントエンドレンジャーのWeb開発術連載記事一覧

もっと読む

この記事の著者

縣 亮太(LINE株式会社)(アガタ リョウタ)

LINE株式会社Webフロントエンド担当のJavaScript書き。NAVERまとめやLINE内Webアプリを担当する。 Backbone.jsが好きで仕事でもプライベートでも利用する機会が多い。最近はKnockoutjsに注目しており、JavaScriptのデータバインディングな世界を試行錯誤中。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8461 2015/02/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング