44
浜松Rails3道場 其の壱 プロジェクト作成~RoutingHamamatsurb#4 2011.06.08 @mackato

浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

Embed Size (px)

DESCRIPTION

2011/6/8 Hamamatsu.rb#4の浜松Rails3道場の資料です。 https://github.com/hamamatsu-rb/rails3dojo

Citation preview

Page 1: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

浜松Rails3道場其の壱 プロジェクト作成~Routing編Hamamatsurb#4 2011.06.08 @mackato

Page 2: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

浜松Rails3道場の心得

習うより慣れろ

理論より実用

未知を恐れない

Page 3: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

実際にRailsアプリを作ってみる

Wiki or CMS

全5回位で

Page 4: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

今回は其の壱

スライド

プロジェクトの作成~Routing編

実演 Q&A

うまく出来るかな?(^_^;)

Page 5: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

開発環境

Ruby Version 1.9.2

Rails Version 3.0.7

.rvmrcrvm ruby-1.9.2-p180@rails-3_0_7

Page 6: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

rails new rails3dojo -m http://railswizard.org/ae25c16f22597ad5ea98.rb -J -T

新規アプリケーション作成RailsWizardが便利!

Page 7: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

≠ CSS ≠ Erb

気にしない (^O^)/

Page 8: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

gem uninstall rake -v=0.9.xbundle update

※ Rails3.1は0.9.1以降でOK!

Gemfilegem 'rake', '0.8.7'

Page 9: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

cd ~/.powln -s /path/to/rails3dojoopen http://rails3dojo.dev/

Mac only!

Page 10: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

rm public/index.html public/images/rails.png

http://localhost:3000/

Page 11: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

http://localhost:3000/

ここからRoutingのハナシ

Page 12: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

RoutingとはHTTPリクエストとコントローラのアクションを

結びつける仕組み

HTTPリクエストMethods: GET, POST, PUT, DELETEPaths: /login, /pages/2, /items.xml

params[:id] format

参考: Rails Routing from the Outside In. http://guides.rubyonrails.org/routing.html

Page 13: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

rails g controller welcome index

トップページ用のコントローラを生成

Page 14: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

テストを追加spec/controllers/welcome_controller_spec.rb

# -*- coding: utf-8 -*-require 'spec_helper'

describe WelcomeController do

  describe "#index" do     it "should be successful" do      get 'index'      response.should be_success    end        it "GET / にマッチ" do      { :get => "/" }.should route_to(        :controller => "welcome",        :action => "index" )    end  end

end

Page 15: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

テストを実行bundle exec rspec \

spec/controllers/welcome_controller_spec.rb

Page 16: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

Rails3dojo::Application.routes.draw do  # You can have the root of your site routed with "root"  root :to => "welcome#index"end

config/routes.rb

root_path => /root_url => http://localhost:3000/

WelcomeController#index

rootのrouteを追加

Page 17: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

もっかいテスト

\(^o^)/

Page 18: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

テストのパスを名前付きに修正spec/controllers/welcome_controller_spec.rb

# -*- coding: utf-8 -*-require 'spec_helper'

describe WelcomeController do

  describe "#index" do     it "should be successful" do      get 'index'      response.should be_success    end        it "GET root_path にマッチ" do      { :get => root_path }.should route_to(        :controller => "welcome",        :action => "index" )    end  end

end

Page 19: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

http://localhost:3000/

見た目ショボイ><

ブラウザで確認

Page 20: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

イケてるテンプレート使いたい

www.getskeleton.com/

Page 21: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

http://html2haml.heroku.com/

HamlとSassに変換

Page 22: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

rm -f app/views/layouts/application.html.erbgit clone git://gist.github.com/1012788.gitmv 1012788/application.html.haml app/views/layouts/rm -rf 1012788

git clone git://gist.github.com/1012756.gitrm -rf 1012756/.gitmv 1012756 public/stylesheets/sass

レイアウトとスタイルを入れ替え

Page 23: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

http://localhost:3000/

ブラウザで確認

イイ感じ(^^)v

Page 24: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

Rails3dojo::Application.routes.draw do  # You can have the root of your site routed with "root"  root :to => "welcome#index"    resources :pagesend

config/routes.rb

PageのResource Routingを追加

追加

Page 25: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

% rake routes

root /(.:format) {:controller=>"welcome", :action=>"index"}

pages GET /pages(.:format) {:action=>"index", :controller=>"pages"}

POST /pages(.:format) {:action=>"create", :controller=>"pages"}

new_page GET /pages/new(.:format) {:action=>"new", :controller=>"pages"}

edit_page GET /pages/:id/edit(.:format) {:action=>"edit", :controller=>"pages"}

page GET /pages/:id(.:format) {:action=>"show", :controller=>"pages"}

PUT /pages/:id(.:format) {:action=>"update", :controller=>"pages"}

DELETE /pages/:id(.:format) {:action=>"destroy", :controller=>"pages"}

rake:routes で確認

Page 26: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

Resource Routing

Collection Member

index GET pages_pathnew GET new_page_path create POST pages_path

show GET page_path(id)edit GET edit_page_path(id)update PUT page_path(id)destroy DELETE page_path(id)

Pages Page

Page 27: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

rails g controller pages index new

Pageリソース用のコントローラを生成

Page 28: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

http://localhost:3000/pages

ブラウザで確認

Page 29: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

http://localhost:3000/pages/new

ブラウザで確認

Page 30: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

テストspec/controllers/pages_controller_spec.rb

# -*- coding: utf-8 -*-require 'spec_helper'

describe PagesController do

  describe "#index'" do    ...    it "GET pages_path にマッチ" do      { :get => pages_path }.should route_to(:controller => "pages", :action => "index" )    end  end

  describe "#new'" do    ...    it "GET new_page_path にマッチ" do      { :get => new_page_path }.should route_to(:controller => "pages", :action => "new" )    end  end

end

Page 31: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

ショートカットメニューを追加app/views/layouts/application.html.haml

<!doctype html>...        %h3 Shortcuts        %ul          %li= link_to "Home", root_path          %li= link_to "Pages", pages_path          %li= link_to "New Page", new_page_path

Page 32: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

http://localhost:3000/

ブラウザで確認

Page 33: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

今回の開発はここまで

Page 34: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

More Resource Routing

Page 35: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

config/routes.rb

Namespace付きResource Routing

Rails3dojo::Application.routes.draw do  # You can have the root of your site routed with "root"  root :to => "welcome#index"    resources :pages    namespace "admin" do    resources :pages  endend

http://localhost:3000/admin/pages

Page 36: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

リソース名の前にネームスペース名が追加される

Namespace付きResource Routing

% rake routes... admin_pages GET /admin/pages(.:format) {:action=>"index", :controller=>"admin/pages"} POST /admin/pages(.:format) {:action=>"create", :controller=>"admin/pages"} new_admin_page GET /admin/pages/new(.:format) {:action=>"new", :controller=>"admin/pages"}edit_admin_page GET /admin/pages/:id/edit(.:format) {:action=>"edit", :controller=>"admin/pages"} admin_page GET /admin/pages/:id(.:format) {:action=>"show", :controller=>"admin/pages"} PUT /admin/pages/:id(.:format) {:action=>"update", :controller=>"admin/pages"} DELETE /admin/pages/:id(.:format) {:action=>"destroy", :controller=>"admin/pages"}

pages_pathedit_page_path(id)

admin_pages_pathedit_admin_page_path(id)

ネームスペース無し ネームスペース有り

Page 37: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

config/routes.rb

ネストしたResource Routing

Rails3dojo::Application.routes.draw do  # You can have the root of your site routed with "root"  root :to => "welcome#index"    resources :pages do    resources :comments  endend

http://localhost:3000/pages/2/comments

Page 38: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

子リソース名の前に親リソース名が追加される親リソースの指定は必須

ネストしたResource Routing

rake routes... page_comments GET /pages/:page_id/comments(.:format) {:action=>"index", :controller=>"comments"} POST /pages/:page_id/comments(.:format) {:action=>"create", :controller=>"comments"} new_page_comment GET /pages/:page_id/comments/new(.:format) {:action=>"new", :controller=>"comments"}edit_page_comment GET /pages/:page_id/comments/:id/edit(.:format) {:action=>"edit", :controller=>"comments"} page_comment GET /pages/:page_id/comments/:id(.:format) {:action=>"show", :controller=>"comments"} PUT /pages/:page_id/comments/:id(.:format) {:action=>"update", :controller=>"comments"} DELETE /pages/:page_id/comments/:id(.:format) {:action=>"destroy", :controller=>"comments"}

comments_pathedit_comment_path(id)

page_comments_path(page_id)edit_page_comment_path(page_id, id)

親リソース無し 親リソース有り

Page 39: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

config/routes.rb

Resource Routingにアクションを追加

Rails3dojo::Application.routes.draw do  # You can have the root of your site routed with "root"  root :to => "welcome#index"    resources :pages do    get 'freeze', :on => :collection    get 'preview', :on => :member  endend

http://localhost:3000/pages/freezehttp://localhost:3000/pages/2/preview

Page 40: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

リソース名の前にアクション名が追加される

Resource Routingにアクションを追加

rake routes(in /Users/kato/sandbox/rails3dojo) root /(.:format) {:controller=>"welcome", :action=>"index"}freeze_pages GET /pages/freeze(.:format) {:action=>"freeze", :controller=>"pages"}preview_page GET /pages/:id/preview(.:format) {:action=>"preview", :controller=>"pages"} pages GET /pages(.:format) {:action=>"index", :controller=>"pages"} POST /pages(.:format) {:action=>"create", :controller=>"pages"} new_page GET /pages/new(.:format) {:action=>"new", :controller=>"pages"} edit_page GET /pages/:id/edit(.:format) {:action=>"edit", :controller=>"pages"} page GET /pages/:id(.:format) {:action=>"show", :controller=>"pages"} PUT /pages/:id(.:format) {:action=>"update", :controller=>"pages"} DELETE /pages/:id(.:format) {:action=>"destroy", :controller=>"pages"}

freeze_pages_pathpreview_page_path(id)

Page 41: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

Resource Routingで大体OK

結論

Page 42: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

実演

Page 43: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

Q&A

Page 44: 浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編

多分、ActiveRecord

次回予告