Rails3.1rc4を試してみた

2,523 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,523
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rails3.1rc4を試してみた

  1. 1. Rails3.1rc4 を試してみた @3rddoor
  2. 2. インストール オプションを付加# gem install rails --pre これは Rails2 以前の方法 (公式ブログに載っているけど)
  3. 3. Rails2 以前の方法でのインストール # gem install rails --pre /usr/local/lib にインストールされる = root 権限が必要(あたりまえ)
  4. 4. bundler を使ったインストール Rails3.0 以降の方法Gemfile を作成● source :rubygems gem rails, >=3.1.0rc4bundler でインストール● 先にアプリケーションディレクトリを作成 $ mkdir testapp; cd testapp $ bundle install vendor/bundle一般ユーザ権限 アプリケーションディレクトリ内にインストール
  5. 5. アプリ生成$ bundle exec rails new . カレントディレクトリにアプリケーションを作成
  6. 6. デフォルトの Gemfilesource http://rubygems.orggem rails, 3.1.0.rc4# Bundle edge Rails instead:# gem rails, :git => git://github.com/rails/rails.gitgem sqlite3# Asset template engines SASSgem jsongem sass-rails, "~> 3.1.0.rc"gem coffee-scriptgem uglifier CoffeeScriptgem jquery-rails# Use unicorn as the web server# gem unicorn jQuery# Deploy with Capistrano# gem capistrano
  7. 7. scaffold$ bundle exec rails generate scaffold itemtitle:string comment:text$ bundle exec rake db:migrate いつもどおり。
  8. 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. 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. 10. jQuery を試す● Table Drag and Drop JQuery plugin http://www.isocra.com/2008/02/table-drag-and- drop-jquery-plugin/● インストール ● app/assets/javascripts/ にコピー
  11. 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. 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. 13. acts_as_list● Gemfile 追記 gem acts_as_list● インストール $ bundle install● モデル修正 app/models/item.rb class Item < ActiveRecord::Base acts_as_list end
  14. 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. 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. 16. まとめ● テーブルの内容編集・順序並べ替え機能の実装 ● コード量 – bundle コマンドによるインストール: 3回 – Rails コマンドによる生成: 3回 – Ruby: 15行(変更部分) – SASS: 7行(お好みでいくらでも) – CoffeeScript: 13行● Rails3.1 ● 非対応プラグインなどもある大幅な更新ですが、いろい ろ書きやすくなっているところも多く楽しみ

×