Hatena::ブログ(Diary)

taryaの雑記帳 RSSフィード Twitter

2011-07-12

Rails3道場の復習:其の壱 プロジェクト作成〜Routing編

Rails3道場の復習

開発環境

アプリケーション準備

RailsWizard で新規アプリケーション作成

http://railswizard.org/

ほしいライブラリをポチポチと選択

そして、コマンド実行

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 に変更する)


そして、

のうち、<head>までのうちの<link>タグ以外を、以下のツールで 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.rb

Hamlのバージョンは、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)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tarya/20110712/1310489784