Rails3.1rc4 をざっと動かしてみたのでその紹介です。

1. Rails3.1rc4 を試してみた
@3rddoor

2. インストール
オプションを付加
# gem install rails --pre
これは Rails2 以前の方法
(公式ブログに載っているけど)

3. Rails2 以前の方法でのインストール
# gem install rails --pre
/usr/local/lib にインストールされる
= root 権限が必要（あたりまえ）

4. bundler を使ったインストール
Rails3.0 以降の方法
Gemfile を作成
●
source :rubygems
gem 'rails', '>=3.1.0rc4'
bundler でインストール
●
先にアプリケーションディレクトリを作成
$ mkdir testapp; cd testapp
$ bundle install vendor/bundle
一般ユーザ権限 アプリケーションディレクトリ内にインストール

5. アプリ生成
$ bundle exec rails new .
カレントディレクトリにアプリケーションを作成

6. デフォルトの Gemfile
source 'http://rubygems.org'
gem 'rails', '3.1.0.rc4'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
# Asset template engines SASS
gem 'json'
gem 'sass-rails', "~> 3.1.0.rc"
gem 'coffee-script'
gem 'uglifier'
CoffeeScript
gem 'jquery-rails'
# Use unicorn as the web server
# gem 'unicorn' jQuery
# Deploy with Capistrano
# gem 'capistrano'

7. scaffold
$ bundle exec rails generate scaffold item
title:string comment:text
$ bundle exec rake db:migrate
いつもどおり。

8. web-app-theme
● 公式 gem の最新版は Rails 3.1 に未対応
● Gemfile に以下を追記して bundle install
gem 'web-app-theme', :git => 'http://github.com/dknight/web-app-
theme.git'
● テンプレート生成
$ bundle exec rails generate web_app_theme:theme
● app/view/items/index.html.erb 追記
<table class=”table”>
残念ながら普通のCSS

9. SASS を試す
● SASS: http://sass-lang.com/
● Syntactically Awesome Stylesheets
● CSS の文法を改良して書きやすくしたもの
● 入れ子構文・変数などが使える
(例) app/assets/stylesheets/table.css.scss 作成
$grey: #aaaaaa;
.table tr td {
border-color: $grey;
a{
background-color: $grey;
}
}
table の枠線とtable 内のリンクの背景色を指定

10. jQuery を試す
● Table Drag and Drop JQuery plugin
http://www.isocra.com/2008/02/table-drag-and-
drop-jquery-plugin/
●
インストール
● app/assets/javascripts/ にコピー

11. CoffeeScriptを試す
● app/assets/javascripts/table.js.coffee 作成
$(document).ready( ->$(“itemtbl”).tableDnD())
● app/views/items/index.html.erb 修正
● table に id=”itemtbl” 追加
● 見出しの tr に class=”nodrag nodrop” 追加
表の行を移動できるように（キャプチャ略）

12. Reversible migration
● 順序を保存するために migration 生成 いつもどおり。
$ bundle exec rails generate migration
AddPositionToItem position:integer
● db/migrate/201107..._add_position_to_item.rb
class AddDispOrderToItem < ActiveRecord:Migration
def change
add_column :items, :position, :integer
end
end 従来の self.up / self.down が change に統合
● 実行
$ bundle exec rake db:migrate

13. acts_as_list
● Gemfile 追記
gem 'acts_as_list'
● インストール
$ bundle install
● モデル修正 app/models/item.rb
class Item < ActiveRecord::Base
acts_as_list
end

14. jQuery と CoffeeScript を試す
● CoffeeScript でイベントハンドラ記述 - table.js.coffee に追記
$(document).ready( ->
$(“#itemtbl”).tableDnD( {
onDrop: (table, row) ->
rows = table.tBodies[0].rows
index = -1
for i in [0..rows.length-1]
if rows[i].id == row.id
index = i
$.post “items/#{row.id}/update_order.json”, { index: index }
})
)

15. update_order アクションの実装
● コントローラ修正 app/controllers/items_controller.rb
def update_order
@item = Item.find(params[:id])
@item.insert_at params[:index]
if @item.save
format.json { head :ok }
else
format.json { render :json => @item.errors, :status => :unprocessable_entity }
end
end
● routing 設定 config/routes.rb
resources :items do
member do
post 'update_order'
end
end

16. まとめ
● テーブルの内容編集・順序並べ替え機能の実装
● コード量
– bundle コマンドによるインストール: 3回
– Rails コマンドによる生成: 3回
– Ruby: 15行(変更部分)
– SASS: 7行（お好みでいくらでも）
– CoffeeScript: 13行
● Rails3.1
●
非対応プラグインなどもある大幅な更新ですが、いろい
ろ書きやすくなっているところも多く楽しみ