ここまで出来る！LocalProxyベースの開発手法紹介

自己紹介

• @kyo_ago
• こないだ財布（札入れ）を自作しました

LocalProxyとは

LocalProxyとは

• Localで起動させるProxy
• 厳密な定義があるわけじゃない
• ファイル差し替えたり、通信監視したり
• 広告切ったり、キャッシュしたり

今回は主にフロントエンド開発に使う方法を紹介します

フロントエンド開発者から見た主な機能

フロントエンド開発者から見た主な機能

• 通信の監視
• 通信の差し替え
• 通信の改変
• ヘッダの変更
• 通信速度の制限

通信の監視

通信の監視

• 任意のアプリに対して通信内容を見たい
• ブラウザのデバッガーが信用出来ない

通信の差し替え

通信の差し替え

• 既存のJSを改変したい
• APIの通信を差し替えたい
• 任意のURLにコンテンツを作りたい
• デプロイせずに本番環境で確認したい
• 見てるサイトのコードをなんとなくいじってみたい
• 「URLしか無いけどデバッグを依頼された」

通信の改変

通信の改変

• 動的コンテンツの内容を置き換えたい
• すべてのhtmlにJSを差し込みたい

ヘッダの変更

ヘッダの変更

• クロスドメイン通信を許可したい
  （Access-Control-Allow-Origin: *）
• ApplicationCacheのテストがしたい
  （Content-Type: text/cache-manifest）

通信速度の制限

通信速度の制限

• 低速な環境の再現
• 「どのくらい遅いのか」を定量的に判断

LocalProxyの問題点

「常時使い続けるのは辛い」
（アプリのダウンロード時やストリーミング時に問題が出るので）

でも、普通の人はみんな常時使いたい

解決方法

pac使う

pacとは

• Proxy auto-config
• Netscape Navigator 2.0以降でサポートされている技術
• JavaScriptでブラウザのProxy動作を制御できる

function FindProxyForURL(url, host) {
    if (host === 'example.com') {
        return 'PROXY localhost:8888';
    }
    return 'DIRECT';
}

function FindProxyForURL(url, host) {
    if (url.match(/^http:\/\/example.com\/api\//)) {
        return 'PROXY localhost:8888';
    }
    return 'DIRECT';
}

pacの内容はキャッシュされるので注意

pacファイルを変えてもすぐに反映されない
アプリを再起動したり、Proxy設定を変更すると反映される
pac自体もLocalProxyで配信して通信があるか監視すると反映がわかりやすい

LocalProxyの種類

LocalProxyの種類

• Fiddler
  もともとMSが作っていたLocalProxy（なので基本Win向け）最近Macにも移植されてるけどMac版はまだ開発中
• Charles
  Java製でクロスプラットフォームのLocalProxy。有料
• CocProxyもとRubyのをnginx化したもの。コンソールな人向け
• Burp Proxy
  セキュリティ系のツール。ファイルの差し替えはないような？
• Klepto自作なので一応。他のやつが使えるなら他のヤツのほうがいいです

関連拡張

関連拡張

• Tincr
  DevTools上の変更をローカルにAutoSave（Nodeとかいらないやつ）
• LiveReloadはGruntを使うほうがいいかも
  （extensionのみで完結するものがない）

iOSのデバッグ

iOSのデバッグ

• Proxyもpacも使えるので非常に楽
• UIWebViewもアプリの独自通信も中継できる
• SSLも中継できる（証明書の検証を行っていない場合）
• iOS6以降ならリモートデバッグできる

Androidのデバッグ

Android(*)のデバッグ

• pacは使えないがProxyは使える
• WebViewの中継はできるが、アプリ独自の通信は無理
• SSLも中継できる（証明書の検証を行っていない場合）
• Chromeならリモートデバッグできる

Android(*)のデバッグ

• pacは使えないがProxyは使える
• WebViewの中継はできるが、アプリ独自の通信は無理
• SSLも中継できる（証明書の検証を行っていない場合）
• Chromeならリモートデバッグできる

*だたしAndroid 2系を除く

Android 2系のデバッグ

Android 2系のデバッグ

• 実機は基本Proxy無効（一部機種で有効。Root取ればどれでも可能）
• 透過Proxyなら行けるかも（設定挫折済み）
• Emulator上であればProxy使える
• IE6時代の杵柄が冴え渡る

ご清聴ありがとうございました