読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

フロントサイドの開発に「Charles」を使おう

Tool

フロントエンドの開発にCharlesを用いたらすごく効率的になったので共有します。

 

Charlesとは?

Charlesができるものとして

・指定URLをローカルのフォルダに向ける

・指定URLのリクエストを別のURLへ向ける

などがあります。

 

このようにいってもなにが便利なのかわからないと思うので実例をあげていきます。

 

実例

大規模な開発を想定します。

そのときサーバーにいちいち大容量のファイル等を毎回修正するごとにあげていくのは辛いものがあります。

そのような作業はできるかぎり少なくしたほうが開発効率がいいのは目に見えています。

そこでCharlesの出番です。

このCharlesは、本番にアクセスしたときでも、ローカルのファイルをみにいくように設定できます。つまりいちいちサーバーにファイルをアップロードしなくてもローカルで修正したら反映されたことになるのです。

 

また大規模なサイトでなくてもソースコードJavaで書かれておりgruntなどを用いている場合などにも効力を発揮します。

 

Javaは、いちいちコンパイルなどが必要です。なので修正して確認するためにコンパイルする必要があり、Charlesを使えばローカルを直接見てくれるので、cssやjsがすぐに反映されます。

 

インストールの方法

 

スクリーンショット 2013-08-31 1.18.55

http://www.charlesproxy.com/

 

こちらのサイトから簡単にダウンロードできます。

 

ダウンロードし、アプリケーションを起動させます。

 

スクリーンショット 2013-08-31 1.05.33

 

 なんかしゃれおつなアイコンです。

 

以上でインストールできました。

 

また詳しい使い方など紹介していきたいと思います。

 

※最近忙しくて更新するのが遅くなってしまいました。。。