こんにちは。ブログビジネス部 石野です。
livedoor Blogやクリップ、Readerの担当ディレクターです。

今日は「CocProxy」というツールをご紹介します。

同僚のプログラマーに教わったのですが、便利です。
コーディングにも携わるディレクターにはぜひ知っておいてほしいツールです。

CocProxyとは

ブラウザからのリクエスト先をローカルファイルに置き換えてくれるプロキシです。
(一見取っつきにくそうですが)
デバッグ時にその環境を用意をするまでの手間をなくしてくれる、時間短縮してくれるツールです。

メリット

Ajaxを使っているなど、デバッグ環境を用意するのが大変な場合もプロキシの切り替え1つで済みます。
また、確認するために編集したファイルをサーバへアップロードして…といった手順をスルーできます。

amachangさんのこの記事を見て「名前は知っていたけど」という方も、この機会にぜひ試してみてください。
http://d.hatena.ne.jp/amachang/20081126/1227700830

設定方法

5分もあれば準備できます。Rubyが必要です。(Rubyの知識は不要です)

▼準備
1. まずはRubyをダウンロード & インストール
2. 「proxy.rb」をダウンロード
3. 好きな場所に『files』フォルダを作成、proxy.rbも同じ階層にコピー

▼実行
4. files内に置き換えたいファイルを置く
5. proxy.rb をダブルクリックして起動
6. ブラウザのプロキシを『localhost:5432』に設定
7. ブラウザで閲覧すると、そのページで使われている(リクエストされた)ファイルが『files』にあれば置き換えて表示してくれます。
(ちなみにfilesに置いたファイルが閲覧しているURLに存在しなくても、特に悪いことは起こりません。)

キャプチャ付きで手順を確認

1. Rubyをインストール http://arton.hp.infoseek.co.jp/ActiveRuby.msi
Ruby インストール画面

2. proxy.rbをダウンロード http://svn.coderepos.org/share/lang/ruby/cocproxy/proxy.rb
3. 好きな場所に『files』という名前のフォルダを作成
(デスクトップでもマイドキュメントでも、自分の使いやすい作業フォルダにどうぞ)
先ほどのproxy.rbも同じ階層にコピー
workディレクトリ

4. files内に置き換えたいファイルを置く
5. proxy.rb を起動
proxyrb起動後の画面

6. ブラウザのプロキシを『localhost:5432』に設定
LANの設定画面
※Firefoxアドオン「SwitchProxy Tool」や「FoxyProxy」を入れておくと より便利です。

7. ブラウザで閲覧
CocProxy OK
「Checking files/...」こういう黒い画面が動き出せば無事に動いています。

使用例「livedoor Blogの共通CSSを更新した後の表示を確認する」

1) 共通CSS "https://parts.blog.livedoor.jp/css/template.css" を『files』に保存します。

2) files内の template.css を編集して保存します。

3) プロキシを設定した状態で "http://blog.livedoor.jp/staff/" や "http://blog.livedoor.jp/ld_directors/" を閲覧(既に閲覧していた場合はリロード)すると、ローカルに保存した template.css が適用されます。


もちろんCSSファイル以外も、jsでも、jpgなど画像ファイルでも置換されます。

よくあるトラップ

「リロードしてもローカルファイルをどうも読み込んでくれない」というときがあります。
キャッシュのせいです。
このキャッシュをクリアしたければ、URLに『?clearcache=1』 をつけてアクセスし直してください。
http://blog.livedoor.jp/ld_directors/archives/51008735.html?clearcache=1

関連

http://coderepos.org/share/wiki/CocProxy


CocProxyで快適なWeb制作を。おすすめです。