Chrome上で動くLocal Proxy "Klepto"をベースにしたフロントエンド開発フローの展望
Proxyって？
（HTTP）Proxyとは
- ブラウザとサーバの通信を中継したりする
- 高速通信のためにデータをキャッシュしたり
- サーバ側でリバースプロキシとして使ったり
- 大学や企業で検閲に使ったり
- SquidやDeleGateとか有名
Local Proxyって？
Local Proxyとは
- 主にLocal環境で動かすProxy
- 開発やデバッグに使われる
- 手元にあるファイルをサーバ上にあるように見せかけたり
- 正しく通信が行われているか確認したり
- FiddlerやCharlesやCocProxyとか有名
Kleptoって？
Kleptoとは
- Chrome上で動くLocal Proxy
- 今作ってる
- JSのみで動く
- Fiddler for Mac!
- 他にフロントエンド開発向けの機能も実装予定
なんで作ったの？
- FiddlerがMacで動かなかったから
（CrossOverもMonoもwineも試した）
- Charlesは人に勧めるのにはハードル高い
- Chrome Apps上でSocket APIがサポートされた
- 2013年より現職
デモ
今後の展望
- Chrome DevTools上でのauto save
- Local File修正でのlive auto reload
- source map対応したコンパイル環境
- 未コンパイルコードのlive edit
- 通信ログからのコード修正
今後の展望
- Selenium IDEとの連携
- 操作ログと通信ログからの状況再現
- JSエラーが発生したらクラッシュレポート作成
- BTS連携
こういう問題を解決したい
for フロントエンドエンジニア
- サーバの設定が終わっていないので開発に入れない
- 開発環境のエラーで開発が止まる
- デプロイ手順が複雑でtry errorが出来ない
- APIのレスポンスを変えてみたいけど、どう修正していいかわからない
for フロントエンドエンジニア
- 外部サービスのコードを修正してみたいけど、環境作るのが大変
- 修正を依頼されたサイトの見積のためにコードを修正したい
- DevToolsのLive editで修正を確認したのにリロードしたら消えた
for サーバサイドエンドエンジニア
- 開発環境のJSがエラーで開発が止まる
- フロントエンドの開発する時にセキュリティ上制限を回避するためのAPI実装を依頼される
- ディレクタからのエラー報告が手元で再現しない
- 非エンジニアがエラー報告をしてくれない
for デザイナー
- ちょっと画像を差し替えてみたいけど、サーバ上のファイルを変えるのは大変
- 要素の色合いを変えてみたいけど、気軽に試せる場所がない
- CSSを修正したいけど、コンパイル環境を整えるのが大変
- XAMPPやMAMPの動きが動きがおかしいけど、エンジニアに頼むのは気が引ける
for ディレクタ
- 良いエラー報告の仕方がわからない
- 文言修正のためだけに手元に開発環境を用意しなければいけない
制限事項（解決の見込みが無いか、ブラウザの問題）
- ブラウザをリロードすると置き換え設定が消える（FileSystem Objectのシリアライズが出来ない）
- Windows上で通信が止まる（そのうち直る？）
- DevTools起動中のlocal file live reload（そのうち直る？）