edge rails(3.2.0.beta)に上げてみた

戯れに手元のrailsをmasterを見るようにしてみたらサーバが起動しなくなりました。

hamlのエラー

#gem 'rails', '3.0.9'
# Bundle edge Rails instead:
gem 'rails', :git => 'git://github.com/rails/rails.git'
$ bundle exec rails s
=> Booting WEBrick
=> Rails 3.2.0.beta application starting in development on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
Exiting
/Users/y_310/work/sample_prj/vendor/bundle/ruby/1.9.1/gems/haml-3.1.2/lib/haml/template/patch.rb:16:in `alias_method': undefined method `delegate_template_exists?' for class `ActionView::Base' (NameError)

エラーをぐぐってみるとどうやらhamlのバグっぽい。
https://github.com/nex3/haml/issues/395
そしてこの問題はここですでに修正済。
https://github.com/nex3/haml/pull/398

ただ普通にgem installして入るバージョンは3.1.0でギリギリこの修正コミットは入っていないみたい。

仕方ないのでhamlもedgeを見るようにする。

gem 'haml', :git => 'git://github.com/nex3/haml.git'

rjsのエラー

hamlを最新にして再度サーバを起動しようとするとまたエラーが出ました。

=> Booting WEBrick
=> Rails 3.2.0.beta application starting in development on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
Exiting
/Users/y_310/work/sample_prj/vendor/bundle/ruby/1.9.1/bundler/gems/rails-3b5eb11664b8/actionpack/lib/action_view/railtie.rb:34:in `block (3 levels) in <class:Railtie>': undefined method `debug_rjs=' for ActionView::Base:Class (NoMethodError)

これもググッてみるとこのページがヒットしました。
http://weblog.rubyonrails.org/2011/4/21/jquery-new-default

rails3.1で標準のJSライブラリがprototype.jsからjQueryになった際に、rjsもデフォルトで入らなくなったらしい。
rjsは必要ないので書いてあるとおりにconfig/environments/development.rbから以下の行を削除

# remove next line
config.action_view.debug_rjs = true

これで無事にサーバが起動しました。

Rails3でjQueryを使う方法

前回の記事の続きでjQueryも使えるようにする。

インストール

Gemfileにjquery-railsを追加

gem 'jquery-rails'

jQueryをインストール。(prototype.js関連のファイルが削除される)

$ bundle install
$ rails g jquery:install
      remove  public/javascripts/controls.js
      remove  public/javascripts/dragdrop.js
      remove  public/javascripts/effects.js
      remove  public/javascripts/prototype.js
      create  public/javascripts/jquery.min.js
      create  public/javascripts/jquery.js
    conflict  public/javascripts/rails.js
   Overwrite  public/javascripts/rails.js? (enter "h" for help) [Ynaqdh] y
       force  public/javascripts/rails.js

プロジェクト作成時にprototype.jsが不要だと分かっている場合は-Jで生成を抑止できる。

$ rails new APP_NAME -J

動作確認

views/samples/index.html.hamlに以下の記述を追加。

  3 %table#fade_table
(snip)
 19 :css
 20   #fade_table {
 21     display: none;
 22   }
 23 :javascript
 24   window.onLoad = (function(){
 25     $('#fade_table').fadeIn('slow');
 26   })();

これでサーバを再起動して/samplesにアクセスするとデータのtableがフェードインしながら表示されます。
内の読み込むjsもprototypeからjQueryに変わっています。

Rails3でRspecを使う方法

Haml、Sassを使えるようになったので今度はRspecを使えるようにします。

インストール

Rails3ではデフォルトでTest::Unit用のディレクトリやファイルが生成されるのですが、これは不要なのでプロジェクト作成時にTest::Unitを使わないようにします。

$ rails new rails3_rspec -T #-TでSkip Test::Unit

次にGemfileに必要なgemを記述します。
※同時にHaml、Sassを使う方法については以前の記事を参照のこと
Rails3とRuby1.9.2でHamlを使う方法
Rails3でSassを使う方法

gem 'haml-rails'

group :development, :test do
  gem 'rspec-rails', '>= 2.0.0.beta.20'
  gem 'autotest'
  gem 'webrat'
end

Gemfileができたらインストール

$ bundle install vendor/bundle
$ rails generate rspec:install

動作確認

動作確認のためにscaffoldで一通りのファイルを生成してテストを実行

$ rails generate scaffold sample
$ rake db:migrate
$ rake db:test:prepare #テスト用DBを作成
$ rake spec
...............**............
(省略)
29 examples, 0 failures, 2 pending

こんな感じでRspecが使えるようになります。
また、autotestを使うとファイルに変更があったときに自動でテストが走るようになります。

$ bundle exec autotest

Rails3でSassを使う方法

せっかくHamlを使えるようにしたのでSassも使えるようにしたいところ。
とはいってもSassはHamlに同梱されているので前回の記事の手順でインストールまでは既に済んでいます。

設定

config/initializers/sass_config.rbを作成して以下の記述を追加。

#デフォルトのスタイルシートパスを削除
Sass::Plugin.remove_template_location("./public/stylesheets/sass")
#app/stylesheetsをSass用のディレクトリに設定
Sass::Plugin.add_template_location("./app/stylesheets")
#最小サイズのCSSに変換する
Sass::Plugin.options[:style] = :compressed

デフォルトのパスでも問題ないのですが、Sassは.sassファイルから.cssファイルへコンパイルする仕組みのためソースファイルと生成されたCSSの場所を分離しておいたほうがスッキリすると思います。
またSassの変換結果のスタイルは以下のドキュメントに書かれていますので好きなものを設定してください。
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

動作確認

Sass用のディレクトリとファイルを作成

$ mkdir app/stylesheets
$ vim app/stylesheets/sample.sass

以下の記述をsample.sassに追加

h1
  :font
    :size 200%
    :weight bold
  :border 16px solid #DD66CC
  :width 400px
  :padding 5px 
p
  :font-weight bold
  :border 16px solid #6666DD
  :width 400px
  :padding 5px 
$ rails server
$ open http://localhost:3000/sample/index

こんな画面が表示されたら動作確認OK。public/stylesheets/sample.cssが生成されているはず。
f:id:y_310:20100906005347p:image

Rails3とRuby1.9.2でHamlを使う方法

会社でRails3とHamlを使っているんですが、既に他の方が環境を作った上でコードを書いていたので、勉強のために一から環境構築をやってみました。

Rails環境構築

$ rvm 1.9.2
$ gem install rails
$ rails new rails3_haml
$ cd rails3_haml
$ bundle install vendor/bundle #必要なgemをvender/bundleに一括インストール
$ rails server

これでブラウザからhttp://localhost:3000にアクセスして動作していればひとまず最低限のRailsの環境構築はOK.

Hamlインストール

Gemfileにhaml-rails*1を追加。

gem 'haml-rails'

haml-railsはRails3にHaml Generatorを追加するためのプラグインです。
元々はrails3-generatorsだったものがHaml部分だけ分離したものらしいです。

もう一度bundle install

$ bundle install

これで準備は完了。
config/application.rbにg.template_engine :hamlのような記述を追加する必要はありません。

あとは試しにcontrollerをgenerateして動作確認してみましょう。

$ rails g controller sample index
      create  app/controllers/sample_controller.rb
       route  get "sample/index"
      invoke  haml     #template_engineがhamlに変わっている
       exist    app/views/sample
      create    app/views/sample/index.html.haml
      invoke  test_unit
      create    test/functional/sample_controller_test.rb
      invoke  helper
   identical    app/helpers/sample_helper.rb
      invoke    test_unit
   identical      test/unit/helpers/sample_helper_test.rb
$ rails server

これでhttp://localhost:3000/sample/indexにアクセスしてこんな画面が表示されればhamlが動作しています。
f:id:y_310:20100831005131p:image

*1:haml-railsを入れずにgem 'haml'だけでもHamlを使うことはできますが、rails gでファイルをgenerateする際にerbファイルが生成されてしまいます。これを手動で書き換えるか自分でファイルを作成する場合はhaml-railsは必要ありません。