2012年5月17日木曜日

たった3ステップでCoffeeScriptをWindows7にインストール

Windows7にCoffeeScriptをインストールをするのが3ステップで可能になってました。


  1. node.js のサイトにアクセスし、[ Download ]ボタンから[ Windows Installer ]をダウンロード
  2. ダウンロードした [ node-v0.6.18.msi ]※ をダブルクリックしてインストール
  3. コマンドプロンプト立ちあげて、[ npm install coffee-script --global ] と打つ

※2012/5/17現在

上記は検証用のいれたばかりのWindows7 SP1で行なってみました。
すばらしく簡単になってますね。

2012年5月6日日曜日

Sublime Text 2でCoffeeScriptのコンパイルをするバッドノウハウ


はやりのSublime Text 2を使ってます。
会社ではWindows、自宅ではMacと環境がもろ違うんですが、同じエディタが使えるのは非常に良いです。
で、最近コード書こうと思ったらCoffeeScriptで書いてしまうという中毒症状が出始めてるので、そのあたりの環境作った時のメモを。
※個人的にはCoffeeScriptはおすすめしません。理由はいくつかあるんですが、最大の問題点はネットに落ちてるJSのコードをそのままコピペで動かせないから、ちょいと変換とかするのがなんとも。

とりあえずSublime Text 2でCoffeeScriptを書くのに便利なツールを入れるんですが、今回のゴールは、
複数のCoffeeScriptファイル保存するだけで勝手にコンパイルしてくれて、サクサクっとコードを書いていきたい
という所です。

とりあえず、前段として、CoffeeScriptのインストールとSublimeText2にCoffeeScriptの言語拡張を入れるというのがあるのですが、ググれば適度に日本語の情報がヒットするのでそちらで・・。
http://d.hatena.ne.jp/mizchi/20111021/1319167480
http://memo.devjam.net/tag/coffeescript
※僕の場合、Windows環境はさっくりいったのにMac環境で手こずりました。MacPortsのバカヤロウ・・。 
※時代は進化してるので、たぶんインストーラーでさっくり言ってたりしてブログにないくらい簡単になってます。

で、もろもろ入れて準備万端。さてさてコード書いてjsにコンパイルしましょう。
という所なんですが、Windows、Macでは入れたばかりだとSublime Text 2のビルドコマンドがうまく動きません。
どうもコマンド部分でパスがうまく通ってないようです。コマンドプロンプトではうまく通ってるみたいだが、 Sublime Text 2は上手くいってないようです。
しょうがないので、設定を変更します。
ただ問題は、インストールはコマンドでやってるので、どこに何が入ったのかわからないという。と、そんな困ったときはOSのファイル検索です。
CoffeeScript.sublime-build
これを検索してみてください。
ちなみに、私の環境のMacだと
~/Library/Application Support/Sublime Text 2/Packages/CoffeeScript/Commands
あたりにあります。

で、開いてみると
{
    "path": "$HOME/bin:/usr/local/bin:$PATH",
    "cmd": ["coffee","-c","$file"],
    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "selector": "source.coffee"
}
となっていると思います。
2行目のpathがWindows、Macでは違うのでcoffeeコマンドがあるパスを指定しましょう。
Mac環境だと
    "path": "/opt/local/bin",
になります。
で、このパスを書き換えて
{
    "path": "/opt/local/bin",
    "cmd": ["coffee","-c","$file"],
    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "selector": "source.coffee"
}
保存して、Command+bとすると、おおお!!コンパイルされて同階層にjsがはき出された!
と、まぁここまで、ググるとよくあるんですが、なぜかSublime Text 2の設定でSave All on Buildにチェックいれても、保存しても完全に無視されます。なぜだ。悲しい・・。
※僕の設定が何かおかしいだけだとは思うんですが。解決法知ってる方は教えてください。

なのでここからはバッドノウハウです。
ですが、怪我の功名で
普通にSublimeText2やるとエラーしてても何でも[Finished]としか出ないという衝撃のメッセージでエラーしたの気づかないという悲しいオチですが、きっちりエラーメッセージが拾えるようになります。結構これ重要だったりします。エラーしてる=JSはき出さない=ブラウザで見て反映されてないというのに気づくのが遅れるのです。


とりあえず、自動でコンパイルができないということは、
保存(Ctr+S)したらコンパイル(Command+b)してブラウザリロード
という作業は結構めんどくさいし、コンパイル忘れして動かないなーと悩むことまちがいなし。
仕方が無いので、CoffeeScriptのコマンドにある watch を使って監視してもらおう。
http://sites.google.com/site/sappariwiki/coffeescript/coffee-command
強いて言うなら、このwatchを使うんだったら別にSublimeText2上でやらなくてもいいんじゃないかと言われそうですが、毎回起動時にコマンドプロンプト立ち上げてコマンド叩くのが面倒だったりするので、エディタからショートカットで呼び出したいのです。
なので、とりあえず以下のようにwを追加して-wcとコマンドを変更してみました。
    "cmd": ["coffee","-wc","$file"],
こうすると、一度Command+bを呼び出せば、ずっと常駐して監視してくれるようになりました。
ですが、ここで問題。
1つのCoffeeScriptファイルなら問題ないのですが、2つ以上の複数になると、1ファイルしかコンパイルできないので前に常駐してたものがキャンセルされます。別のファイルを変更するたびにCommand+bを押す事になるのは無しです。
で、コマンドでファイル名部分をディレクトリ指定するとそこにあるCoffeeScriptファイル全部監視してくれるという便利な機能があるので
{
    "path": "/opt/local/bin",
    "cmd": ["coffee","-wc","./"],
    "selector": "source.coffee"
}
としてみました。こうすると同階層にあるCoffeeScriptファイルをすべて監視してくれるようになって、複数あっても大丈夫です。
これで、何か記述ミスがあっても他のファイルでエラーが出ててもエディタ上で確認できます。