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 fluid
そして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 .
これでめでたく全部動くようになりました。