MacをJavaScriptの開発環境にするメモ

以前は自宅も仕事もWindowsメインな環境だったんですが、仕事の方がでMac+英語キーボードな環境になり、ついでなので自宅もそれに合わせることにしました。
環境はMac miniの最新型で一番安いの(6月くらいに購入)とMacbook Airのやっぱり一番安いの(11月に購入)です。両方合わせて15万くらい。お手頃…なのか？どうでもいいけど、mac miniは1.3kgしかなくて、Macbook Airの13インチとほぼ同じ重さだっりします。miniデスネー。
ついでにWindowsのほうは2年半前に買ったCore2duo(Windows7アップグレード済み)で、当時そこそこハイエンドだったやつです(ちょうどMac miniと同じくらいのスペックだけどこいつは一体何kgあるんだろう…)。
以下、Macの開発環境をなるべく最近の流行りを取り入れてレポートします。

ブラウザ

さて、マシンのセットアップで最初にすることといえば、もちろんブラウザのインストールですよね！とりあえずスタンダードにChrome、Opera、Firefoxを入れておきます。
ChromeはChrome Release Channels - The Chromium Projectsからdev、beta、stableの各バージョンがそれぞれダウンロードできます。ダウンロードしたファイルを実行するとGoogle Chrome.appが出てきます。通常はこれをアプリケーションフォルダに放りこめば良いのですが、JavaScripterとしてはそれぞれのバージョンを同時に使いたいので、一工夫します。まず、アプリケーションフォルダに適当にディレクトリを作ります(Chromesとする)。その中にさらにdev、beta、stableとさらにサブディレクトリを作ります。で、それぞれのディレクトリにGoogle Chrome.appを保存します。これで一応各バージョンを起動することはできますが、プロファイルが共有されているの同時起動できませんし、バージョン違いでプロファイルを共有すると色々と問題がでます(というか、起動できないこともある)。というわけで、プロファイルを分けましょう。Chromeのプロファイルを分けるには、起動オプションの--user-data-dirでプロファイルの場所を指定してあげればOKです。ただ、Macは起動オプションを指定するのが少々面倒で、こういうときにAppleScriptが活躍します。アプリケーションの中のユーティリティの中にAppleScriptエディタがあるはずなのでそれを起動し、以下のコードをコピペしてください。

do shell script "/Applications/Chromes/beta/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --user-data-dir=/Users/$USER/Library/Application\\ Support/Google/ChromeBeta > /dev/null 2>&1 &"

パスは適宜調整してください。これを実行すると、beta版のChromeが立ち上がると思います。動くのを確認したら.appとして保存しましょう。保存場所はアプリケーションの中などにして、ファイルフォーマットをアプリケーションにしましょう。これで.appファイルとして保存されます(ただ、この方法で起動したChromeをDockに追加すると、追加されるのはChrome自体であってAppleScriptではないのでご注意を)。
Firefoxもバージョン違いを共存させる方法は大体同じで、Firefoxの場合は起動オプションの-p(profile)と同時起動のための--no-remoteをやはりAppleScriptにしておくとよいでしょう。

システム環境設定

(だいぶ脱線しましたが、)つづいてシステム環境設定まわりを見ていきます。まあ、好みが大きいところなので、大事なところだけ触れます。
まず、「言語とテキスト」で入力ソースを開き、「入力ソースのオプション」を「書類ごとに異なるものを使用」にしましょう。これでブラウザはIME ON、コンソールではOFFと使い分けできるようになります。これがないと死にます(これに1ヶ月くらい気がつかなかった…)。
あと、「キーボード」の「キーボード」の右下にある「修飾キー」で、Caps Lockの割り当てをControlなどにしておくのがオススメです。また「キーボードショートカット」のほうで「フルキーボードアクセス」を「すべてのコントロール」にしておくとタブキーでボタンにもフォーカスできるようになるので、これもオススメです(OSの設定ですが、多くのブラウザもそれに従います)。
あとは、アカウントでまず左下の鍵アイコンをクリックして鍵を解除し、自分のアカウント名のところでControl+クリック(もしくは右クリック)して詳細オプションを開きます。ここでターミナルのログインシェルを変更できます(私はzshに)。

裏:システム環境設定

Secretsの PrefPane( Secrets_[バージョン].zip)をダウンロードしてSecrets.prefPaneを実行するとシステム環境設定のその他の項目にSecretsが追加されます。このSecretsはいろんなアプリケーションの隠しオプションを設定できるツールで、画面キャプチャ時のファイルフォーマットをPNGなどに変更できたり、Finderで非表示属性のファイルを表示するようにできたりします。他にもいろいろありますが、自己責任なのでご注意を。

基本ツール

Finder

Finderの環境設定の「詳細」で、「すべてのファイル名拡張子を表示」にチェックを入れておきましょう。

Google IME

ATOKユーザーでないならGoogle 日本語入力を入れておくと良いです。設定は特に弄らなくても大丈夫だと思います。

KeyRemap4MacBook

英語キーボードだとIMEのON/OFFが面倒です。そこでKeyRemap4MacBookで左⌘を単独で押したときは半角英数モードに、右⌘を単独で押したときは日本語入力モードに切り替えるように設定します。設定方法はキーボード操作をもっと便利に! KeyRemap4MacBook オススメ設定からどうぞ。

エディタ

ベーシックなエディタとしてはCotEditorがオススメです。文章を書くときはCotを使っています。vimなひとはMacVimを入れておくとコンソールからも使えて便利です。他の候補はTextWranglerとかでしょうか。あと、JavaScripterとして、も気になるところですね。FirefoxなひとはXULで出来てるKomodo Editとかが気になるところでしょうか。

Windowsとの連携

Windowsも同時に使いたいので、以下にしてスムーズにMacとWindowsを使い分けるかが重要な課題です。

Synergy

まずは定番のSynergyです。私の場合、モニタを2個並べて右をWindows、左をMac miniにしていて、Windows側でマウスを画面左に持って行くとそのままモニタを抜けてマウスポインタがMac側に移動するようになっています。
設定方法などは複数の PC を手元で操作「Synergy」を使おう! -Win&Mac 混合対応版- - livedoor ディレクターブログが参考になります。
ただ、キーボード周りが今一つで、私の環境だとシングルクオートとダブルクオートの入力がおかしくなるという問題があります。というかMacとWindowsのキーは結構違うので仕方ないところも大きいんですが…。

リモートデスクトップ

もうひとつの選択肢はMacからWindowsへのリモートデスクトップです。MicrosoftからRemote Desktop Connection Client 2というアプリが出ていて、これがかなり高性能です。特にKeyRemap4MacBookで設定したキーも認識してくれるのがポイントで、前述のIMEの切り替えがWindowsでも効きます。その他も色々とよきに計らってくれる感じで、かなり快適です。今のところMacbook Airからリモートデスクトップで使うことが多いですが、Mac miniもリモートデスクトップにしようかと検討中です。

コンソール

さて、いよいよ開発環境らしくCUI周りを見ていきます。なお、前述のとおり私は今までWindowsをメインでやっていたので、CUI環境にはかなり疎いです。突込みどころと思ったら是非突っ込んで頂けると助かります。
MacのデフォルトコンソールはTerminal.appですが、256color modeをサポートしてなかったりと機能的に物足りないので、MacのコンソールといえばiTermが定番のようです。特に最近はiTerm2がいい感じみたいです(ただ、iTerm2は自動アップデートの通知の度にフリーズするという現象が起きているので、自動アップデートには注意)。

パッケージマネージャ

MacのパッケージマネージャといえばMacPortsが定番ですが、最近はhomebrewが人気…なんですが、あえてMacPortsを選びました。
homebrewが人気な理由は、MacPortsはデフォルトで入っているパッケージを使わずにすべて自前でコンパイルするから重い、それに対してhomebrewはデフォルトをそのまま使うので軽いというのが主な理由(あと、homebrewのほうが新しいので各パッケージのバージョンも最新に近いのもメリット)みたいなんですが、MacPortsも昔はデフォルトのパッケージを使っていたけどMacのバージョンが変わったときに問題が出るから自前でコンパイルするように切り替えたという経緯があるそうです。というわけで、homebrewも同じ道を歩む可能性が高そうです。ただ、結局MacPortsもOSのバージョンが上がったときに問題が出ることがあるみたいで、環境の再構築に時間が短くて済むhomebrewのほうが良いかもしれません。どっちに転ぶかとりあえず様子見ということで、今回はMacPortsを選びました。
MacPortsのインストールはThe MacPorts Project -- Download & InstallationからSnow Leopard用のdmgを落としてインストールするだけです。

2011/10/20追記：その後、homebrewに切り替えました。homebrewのほうが使い勝手が断然良いので、もはやMacPortsに戻れない感じです。Lionへのアップデートもhomebrew自体は全く問題ないですね。

screen

今時はtmuxかtscreenらしく、MacPortsからインストールできるのはtmuxなので、tmuxにするという安直な判断に…。

sudo port install tmux

して、

cp /opt/local/share/doc/tmux/screen-keys.conf .tmux.conf

でscreen互換なキーバインドになります。ただ、zshのC-aはよく使うので、やはりC-tが無難だと思います。まあ具体的な設定はtmux.confでググって色々参考にしてみるのが良いと思います。

coreutils

折角iTerm2にtmuxなので、カラフルにしたいよねってことで

ls --color=auto

とかしてみるとそんなオプション対応してないと怒られます。代わりに-Gで色は着くのですが、配色がしっくりこないんですよ。というわけでcoreutilsをいれます。coreutilsはBSD系のOSでLinux系の基本コマンドを使えるようにするユーティリティ集です。ls以外にもLinuxとの互換性があがって、同じドットファイルを使いやすくなるのでオススメです。

sudo port install coreutils

ただ、coreutilsで入るコマンドにはprefixでgが付いています。なので、aliasで

alias ls='gls -v --color=auto'

のようにしています。aliasの一覧など詳しくはMint's log: Macportsのcoreutilsコマンド群はなんでも「g」から始まるをどうぞ。

vim

Mac OSXでのvim環境整理。.vimrcやらオヌヌメPlug inやらまとめ。 - ( ꒪⌓꒪) ゆるよろ日記を参考に、MacVimを使うようにします。

export EDITOR=/Applications/MacVim.app/Contents/MacOS/Vim
alias vi='/Applications/MacVim.app/Contents/MacOS/Vim "$@"'
alias vim='/Applications/MacVim.app/Contents/MacOS/Vim "$@"'

iterm，tmuxのおかげで256色で使うのに特に設定は必要ありません。あとはいい感じのcolorschemeを頂いてくればOKです。ただ、colorschemeはカラースキーマ — 名無しのvim使いとかにいっぱいあるけど、どれがいい感じかわからなくてどうしたものかと思ってたんですが、idのバリエーションが豊かな方がおすすめしていたir_blackに決めました。ir_blackはいろいろ凝ってて面白いですね。ただ、ちょっと凝り過ぎな感じもするので、様子見て h2u_black.vim に落ち着くかも。
ちなみに、その他のdotfileは主にid:cho45のdotfileを参考にさせていただいています。まだよくわかってないところが多いので自分のは公開してません。

git

sudo port install git-core

でインストールできる…はずですが、(おそらく)XCodeインストールしてない状態だとJavaがなんとかと言われてエラーで止まります。そのメッセージにURLが書いてあるとおり、Java Developer Package for Mac OS XというやつをAppleのサイト(要ログイン)からダウンロードしてインストールするとgitが入るようになると思います。

SpiderMonkey

sudo port install spidermonkey

でとりあえず入るけど、versionは1.7でFirefox2相当。古い…。まあ、jslint走らせるくらいなら困らないかな…。homebrewなら1.8.5(js -vの結果はJavaScript-C 1.8.0 pre-release 1 2007-10-03でした。Firefox3.5相当かな?)が入ります。ウラヤマシイ。

node.js

sudo port install nodejs

で(2011年1月1日時点で)v0.2.5が入ります(homebrewだとv0.2.6)。ただ、node.jsはバージョン管理したいので、naveを使うほうが良いです。

git clone git://github.com/isaacs/nave.git ~/.nave
./.nave/nave.sh install 0.2.6

インストールはこんな感じで。インストールしただけではパスが通ってなくて、

./.nave/nave.sh use 0.2.6

を呼ぶ必要があります。
これを毎回呼ぶのは面倒なので、上記を.profileとかに書く…でもいいけど、アプリごとにバージョンを管理するのがベターなので少し工夫してみます。
まず適当にnaveコマンド作ります。

ln -s ~/.nave/nave.sh bin/nave

.zshrcに次のように記述します。chpwd_functionsはcdしたときに実行する関数を入れておく配列です(めも - Zshでディレクトリを移動したときに色々やるを参考にしました)。

typeset -ga chpwd_functions

function _naverc_check() {
if [[ -f '.naverc' ]] ; then
  source '.naverc'
fi
}
chpwd_functions+=_naverc_check

これで、cdしたときにそのディレクトリに.navercというファイルがあったらsource で読み込むようになるので、プロジェクトの中に

nave use 0.2.6

とだけ書いた.navercファイルを置いておけば、そのプロジェクトにcdすると適切なnodeがセットされるという塩梅になります。
これはRVMの仕組みと全く同じです。naveもそのうち同じような仕組みになってくれるかも。

RVM

ついでに RVM(Ruby Version Manager)もインストールしましょう。

bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

でインストールは完了です。

rvm install ruby-1.9.2
rvm install ruby-1.8.7
rvm install jruby

といった感じで色んなバージョンのRubyを簡単にインストールでき、手軽に切り替えできます。前述の通り、.rvmrcファイルを用意すればプロジェクトごとに自動でバージョンを切り替えることもできます。

終わりに

だいぶ長くなってしまいましたが、いまのところこんな感じです。そういえば、あんまりJavaScriptしてないですね…。第2弾に期待ということで。。とにかくMacもUnixもほぼ素人なので、知らないことばかりなので調べ甲斐があって楽しいです。