Rails3道場の復習：其の壱 プロジェクト作成〜Routing編
Rails3道場の復習
- https://github.com/hamamatsu-rb/hamamatsu-rb.github.com/wiki/%E6%B5%9C%E6%9D%BErails3%E9%81%93%E5%A0%B4
- 其の壱 プロジェクト作成〜Routing編
開発環境
- Windows
- ruby 1.8.7
- rails 3.0.7
アプリケーション準備
RailsWizard で新規アプリケーション作成
ほしいライブラリをポチポチと選択
- jQuery
- SASS
- ActiveRecord
- HAML
- RSpec
そして、コマンド実行
rails new rails3dojo -m http://railswizard.org/b89823fec9358dccd1d0.rb -J -T
rails3dojo アプリが作成される
すごく楽ちん
Gemfile を編集
gem "rake", "0.8.7"
を最後の行に追加
rails server で、rakeバージョンを指定できずエラー
c:\dev\rails_app\rails3dojo>rails server e[31mYou have requested: rake = 0.8.7 The bundle currently has rake locked at 0.9.2. Try running `bundle update rake`e[0m
rake-0.9.2 をアンインストール
0.8.7 はインストール済みなので、0.9.2 をアンインストールしてみる。
c:\dev\rails_app\rails3dojo>gem uninstall rake -v='0.9.2' Successfully uninstalled rake-0.9.2
それでも rails server で失敗
c:\dev\rails_app\rails3dojo>rails server e[31mYou have requested: rake = 0.8.7 The bundle currently has rake locked at 0.9.2. Try running `bundle update rake`e[0m
ということで、諦めて gem update rake をして、Gemfile の設定も戻した
すなわち、結局rakeのバージョンは 0.9.2 を使用。
普通に rails server が成功した。
http://localhost:3000/ も正しく開けた！
controller, view の追加、編集
トップページ用のコントローラを生成
c:\dev\rails_app\rails3dojo>rails g controller welcome index
create app/controllers/welcome_controller.rb
route get "welcome/index"
invoke haml
create app/views/welcome
create app/views/welcome/index.html.haml
invoke rspec
create spec/controllers/welcome_controller_spec.rb
create spec/views/welcome
create spec/views/welcome/index.html.haml_spec.rb
invoke helper
create app/helpers/welcome_helper.rb
invoke rspec
create spec/helpers/welcome_helper_spec.rb
テスト実行したら、何かWarningらしきものが出る
c:\dev\rails_app\rails3dojo>bundle exec rspec spec\controllers\welcome_controller_spec.rb You must use ANSICON 1.31 or later (http://adoxa.110mb.com/ansicon/) to use colour on Windows . Finished in 3.7 seconds 1 example, 0 failures
ANSICON をインストールすると、コンソールで色を付けられるようになるようだ。
http://d.hatena.ne.jp/hs9587/20110612/1307856635
今までの文字化けみたいなコンソールが綺麗になった。うれしい。
イケてるテンプレート
http://www.getskeleton.com/
からテンプレートをダウンロード
index.html stylesheets\ base.css layout.css skeleton.css
がある
の3ファイルを、以下のツールで、SASS へ変換する
http://css2sass.heroku.com/
それを、public\stylesheets\sass フォルダに入れる（拡張子は sass に変更する）
そして、
- index.html
のうち、
までのうちのタグ以外を、以下のツールで HAML へ変換するhttp://html2haml.heroku.com/
<!doctype html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> <head> <!-- Basic Page Needs ================================================== --> <meta charset="utf-8" /> <title>Your Page Title Here :)</title> <meta name="description" content=""> <meta name="author" content=""> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> </head>
が、以下になる
<!doctype html>
/[if lt IE 7 ] <html class="ie ie6" lang="en">
/[if IE 7 ] <html class="ie ie7" lang="en">
/[if IE 8 ] <html class="ie ie8" lang="en">
/ [if (gte IE 9)|!(IE)]><!
%html{:lang => "en"}
/ <![endif]
%head
/
Basic Page Needs
\==================================================
%meta{:charset => "utf-8"}/
%title Your Page Title Here :)
%meta{:content => "", :name => "description"}
%meta{:content => "", :name => "author"}
/[if lt IE 9]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
/
Mobile Specific Metas
\==================================================
%meta{:content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport"}/
また、app\views\layouts\application.html.erb も、HAML に変換する
<!DOCTYPE html> <html> <head> <title>Rails3dojo</title> <%= stylesheet_link_tag :all %> <%= javascript_include_tag :defaults %> <%= csrf_meta_tag %> </head> <body> <%= yield %> </body> </html>
が、以下になる
!!!
%html
%head
%title Rails3dojo
= stylesheet_link_tag :all
= javascript_include_tag :defaults
= csrf_meta_tag
%body
= yield
そして、いいとこどりする。
- / から始まるものはコメントなので、不要なものは削除する。
- また、HTMLで閉じていないタグは、html2hamlではインデントされてしまうので、それも修正する
- のように、略記した方法でタグを閉じていると、行末に無駄な / が書かれるので、これも消す
- タイトルについては、 %title= yield :title で置き換える
<!doctype html>
/[if lt IE 7 ] <html class="ie ie6" lang="en">
/[if IE 7 ] <html class="ie ie7" lang="en">
/[if IE 8 ] <html class="ie ie8" lang="en">
/ [if (gte IE 9)|!(IE)]><!
%html{:lang => "en"}
/ <![endif]
%head
%meta{:charset => "utf-8"}
%title= yield :title
%meta{:content => "", :name => "description"}
%meta{:content => "", :name => "author"}
/[if lt IE 9]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
%meta{:content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport"}
= stylesheet_link_tag :all
%body
= yieldこれを、 app\views\layouts\application.html.haml へ保存する
SASS, HAML をもっと使う
以下のファイルを public\stylesheets\sass に保存する
application.sass
#logo margin-top: 30px color: #c00 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif letter-spacing: -1px font-weight: bold
app\views\layouts\application.html.haml の body 部分をかっこよくする
%body
.container
.sixteen.columns
%h1#logo Rails3dojo
%hr
.twelve.columns= yield
.four.columns→ #logo の部分がかっこよくなる
と思ったのだが、なぜか色が付かない
なぜだろう？
とりあえず、無視して次へ進む
PageのResource Routingを追加
config\routes.rb に以下を追加
resources :pages
確認
c:\dev\rails_app\rails3dojo>rake routes
WARNING: Global access to Rake DSL methods is deprecated. Please include
... Rake::DSL into classes and modules which use the Rake DSL methods.
WARNING: DSL method Rails3dojo::Application#task called at C:/ruby/ruby-1.8.7/lib/ruby/gems/1.8/gems/railties-3.0.7/lib/rails/application.rb:215:in `initialize_tasks'
root /(.:format) {:controller=>"welcome", :action=>"index"}
pages GET /pages(.:format) {:controller=>"pages", :action=>"index"}
POST /pages(.:format) {:controller=>"pages", :action=>"create"}
new_page GET /pages/new(.:format) {:controller=>"pages", :action=>"new"}
edit_page GET /pages/:id/edit(.:format) {:controller=>"pages", :action=>"edit"}
page GET /pages/:id(.:format) {:controller=>"pages", :action=>"show"}
PUT /pages/:id(.:format) {:controller=>"pages", :action=>"update"}
DELETE /pages/:id(.:format) {:controller=>"pages", :action=>"destroy"}WARNINGが出ている。なぜだろう？
とりあえず、またもや無視して次へ進む
Pageリソース用のコントローラを生成
rails g controller pages index new
を実行する
c:\dev\rails_app\rails3dojo>rails g controller pages index new
Sass is in the process of being separated from Haml,
and will no longer be bundled at all in Haml 3.2.0.
Please install the 'sass' gem if you want to use Sass.
Haml will no longer automatically load Sass in Haml 3.2.0.
Please add gem 'sass' to your Gemfile.
create app/controllers/pages_controller.rb
route get "pages/new"
route get "pages/index"
invoke haml
create app/views/pages
create app/views/pages/index.html.haml
create app/views/pages/new.html.haml
invoke rspec
create spec/controllers/pages_controller_spec.rb
create spec/views/pages
create spec/views/pages/index.html.haml_spec.rb
create spec/views/pages/new.html.haml_spec.rb
invoke helper
create app/helpers/pages_helper.rb
invoke rspec
create spec/helpers/pages_helper_spec.rbHamlのバージョンは、3.1.2 なので、上記警告文の意味がよく分からないが、とりあえず sass をインストールしてみることにする
gem install sass
また、Gemfile に以下を追加する
gem 'sass'
結局、haml, sassのバージョンは以下のようになった。
c:\dev\rails_app\rails3dojo>gem list haml (3.1.2) haml-rails (0.3.4) sass (3.1.4) ...
そして、rails server を実行しなおす
- (実行しなおさないと、sass が反応しない)
すると、先ほど変化しなかった #logo に色が付いた！
- (RailsWizard で作成しただけでは、sass がインストールできていなかったようだ)
ショートカットメニューを追加
app\views\layouts\application.html.haml
に以下を追加
%h3 Shortcuts
%ul
%li= link_to "Home", root_path
%li= link_to "Pages", pages_path
%li= link_to "New Page", new_page_pathどのページでもショートカットが見られるようになる。
すごい！
gem listの最終状態
c:\dev\rails_app\rails3dojo>gem list *** LOCAL GEMS *** abstract (1.0.0) actionmailer (3.0.7) actionpack (3.0.7) activemodel (3.0.7) activerecord (3.0.7) activeresource (3.0.7) activesupport (3.0.7) annotate-models (1.0.4) arel (2.0.10, 2.0.9) builder (2.1.2) bundler (1.0.13) diff-lcs (1.1.2) erubis (2.6.6) haml (3.1.2) haml-rails (0.3.4) httpclient (2.2.0.2) i18n (0.5.0) jquery-rails (1.0.12) mail (2.2.19) mime-types (1.16) nokogiri (1.4.4 x86-mswin32) polyglot (0.3.1) rack (1.2.3, 1.2.2) rack-mount (0.6.14) rack-test (0.5.7) rails (3.0.7) railties (3.0.7) rake (0.9.2, 0.8.7) rspec (2.6.0, 2.5.0) rspec-core (2.6.4, 2.5.1) rspec-expectations (2.6.0, 2.5.0) rspec-mocks (2.6.0, 2.5.0) rspec-rails (2.6.1, 2.5.0) rubygems-update (1.8.0) sass (3.1.4) soap4r (1.5.8) sqlite3 (1.3.3 x86-mswin32-60) sqlite3-ruby (1.3.3, 1.2.5 x86-mswin32) thor (0.14.6) treetop (1.4.9) tzinfo (0.3.29, 0.3.27) webrat (0.7.1) will_paginate (3.0.pre2)
