Rails3.1rc4を試してみた

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

インストール

オプションを付加

# gem install rails --pre

これは Rails2 以前の方法
(公式ブログに載っているけど)

Rails2 以前の方法でのインストール

# gem install rails --pre

/usr/local/lib にインストールされる
= root 権限が必要（あたりまえ）

bundler を使ったインストール
Rails3.0 以降の方法
Gemfile を作成
●

source :rubygems
gem 'rails', '>=3.1.0rc4'

bundler でインストール
●
先にアプリケーションディレクトリを作成

$ mkdir testapp; cd testapp
$ bundle install vendor/bundle
一般ユーザ権限アプリケーションディレクトリ内にインストール

アプリ生成

$ bundle exec rails new .

カレントディレクトリにアプリケーションを作成

デフォルトの 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'

scaffold
$ bundle exec rails generate scaffold item
title:string comment:text
$ bundle exec rake db:migrate

いつもどおり。

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

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 内のリンクの背景色を指定

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

CoffeeScriptを試す
● app/assets/javascripts/table.js.coffee 作成
$(document).ready( ->$(“itemtbl”).tableDnD())
● app/views/items/index.html.erb 修正
● table に id=”itemtbl” 追加
● 見出しの tr に class=”nodrag nodrop” 追加

表の行を移動できるように（キャプチャ略）

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

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

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 }
})
)

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

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

Rails3.1rc4を試してみた

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Rails3.1rc4を試してみた (20)

Recently uploaded (9)

Rails3.1rc4を試してみた