twitter-bootstrap-rails on windows - 同じにやっても動かない

BootstrapをRailsで使ってみたかったので、このへんを参考にしてやってみたところ、毎度おなじみのgem installで早速つまずきました。

やっぱりrailsやるならlinuxなんでしょうか。
サンクコストという言葉も頭に浮かんだのですが、グーグル先生に聞いたらなんとかなってしまったので、やり方をメモっておきます。

therubyracer for windowsのインストール

基本的には上述リンクの手順で良いのですが、windows環境だと gem "therubyracer" で発生するlibv8 installでこけます。
エラーメッセージはこんなです。

Installing libv8 (3.11.8.17)
Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

    C:/Ruby193p392/bin/ruby.exe extconf.rb
creating Makefile
指定されたパスが見つかりません。
指定されたパスが見つかりません。
指定されたパスが見つかりません。
C:/Ruby193p392/lib/ruby/gems/1.9.1/gems/libv8-3.11.8.17/ext/libv8/builder.rb:49:in `setup_python!': libv8 requires python 2 to be installed in order to build, but it is currently not available (RuntimeError)

このエラーをさけるために、windowsように用意されたtherubyracerだけ先にインストールしてしまいます。

パッケージはGithubからダウンロードできます。
v8.dllもv8preparser.dllもここに置いておあるので忘れずにダウンロードして、ruby/binにコピーしておきます。

> gem install therubyracer-0.11.0beta1-x86-mingw32.gem
> cp v8.dll v8preparser.dll c:\ruby\bin

あとはbudle installとbootstrapのインストールで終了

therubyracerさえ入ってしまえばもう大丈夫です。
参考ページの通りやるだけで、アプリケーションがbootstrapなデザインになります。
下記はレスポンシブデザイン(fluid)用のインストール例です。

> bundle install
> rails g bootstrap:install
> rails g bootstrap:layout application ﬂuid

そしてjqueryが動かなくなった。。。

めでたくかっこ良いデザインになったと喜んでいたのですが、htmlに直接埋め込んでいたajax関連の動作が全滅しています。
ブラウザのログを見てみるとこんなエラーメッセージが。

Uncaught ReferenceError: $ is not defined

調べてみたところ、application.html.erbのjavascriptの読み込みがページロードの最後に追いやられている。
jquery.jsが読み込まれる前にajaxがコールされてエラーとなっていたようです。

<html>
 </body>
   コンテンツ
   Ajaxコンテンツ
   ...

   <!-- Javascripts
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <%= javascript_include_tag "application" %> 
  </body>
</html>

というわけで、jqueryだけ最初にロードするように、下記変更を加えました。

まずは application.html.erbのヘッダーに下記を追加しjqueryをここでロードするようにします。

<head>
    .....
    <%= javascript_include_tag "jquery" %>
    .....
</head>

このままだと、このファイルの最後にある javascript_inclue_tag "application" でもう一度ロードされてしまうので、一括ロードリスト(application.js)からjqueryを削除します。

//= // この行を無効にする requier jquer
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

これでめでたく全部動くようになりました。