cd siliconvalley

I will startup at San Francisco !

Ruby on Rails Tutorialに挑戦中!レイアウトを作っています!

どうも。続いて、5章の勉強にそのまま移っていきます。

 
これからはレイアウトを作成していくことにします。
HTMLの概念をRubyに当てはめて作っていくことになりますが、
ここではTwitterが配布しているTwitter Bootstrapを使っていきます。
 
・ページビューをそれぞれ作成します
> app/vieews/layout application.html.erb
→ このページは共通して見える枠となります
 
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag "application", media: "all",
                                           "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
    <!--[if It IE 9]>
    <![endif]-->
// IEがバージョン9未満の場合は適用される
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
// Bootstrapを使う際のクラスを当てはめる
        <div class="container">
          <%= link_to "sample app", "#", id: "logo" %>
          <nav>
            <ul class="nav pull-right">
              <li><%= link_to "Home", '#' %></li>
              <li><%= link_to "Help", '#' %></li>
              <li><%= link_to "Sign in",  '#' %></li>
            </ul>
// navを入れているが、埋め込みRubyのコードを利用する
          </nav>
        </div>
      </div>
    </header>
    <div class="container">
    <%= yield %>
    </div>
  </body>
</html>
 
同様に、home.html.erb、about.html.erbと順に作成をしていきます。
Bootstrapを採用する為に、Gemfileに書き込みを加えます。
 
アプリケーションにカスタムCSSを追加する為に、
まず「custom.css.sccs」をapp/assets/stylesheetに格納します。
そこに「@import bootstraps;」と記載します。
 
ここまで、rails sでサーバーを再起動します。
しかし、下記のようなエラーが出てしまいました。

Showing /Users/ユーザー名/Sites/rails_projects/sample_app/app/views/static_pages/home.html.erb where line #9 raised:

undefined method `linnk_to' for #<#<Class:0x007f84a909d320>:0x007f84a909c768>

Extracted source (around line #9):

6
7
8
9
10
11
12
          
sample application.
</h2>
 
<%= linnk_to "Sign up now!", '#', class: "btn btn-large btn-primary" %>
</div>
 
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
 
 
 
これはlinnk_toとなっており、どうやら記述ミスだったみたいです。
こうしたスペルミスもちゃんとキャッチしてくれます。
 
直すと、なんとかページが表示されました。
 
・カスタムCSSを書いていく
 
@import "bootstrap";
 
/* universal */
 
html {
overflow-y: scroll;
}
 
body {
padding-top: 60px;
// ページの上部に60ピクセルの余白を追加します
}
 
section {
overflow: auto;
}
 
textarea {
resize: vertical;
}
 
.center {
text-align: center;
// .center冒頭のドットは、このルールがクラスに対してスタイルを適用することを指す
}
 
.center h1 {
margin-bottom: 10px;
}
 
続けて、/* typography */や/* header */など次々にコーディングをしていきます。
見かけの悪さはパーシャルを使うことによって、変えていくことができます。application.html.erbでは、以下のようにrenderと呼ばれるRailsヘルパー呼び出しだけを使って、HTML shimのスタイルシート行を置換しています。
 
<%= render 'layouts/shim' %>
 
layouts内に「_header.erb.html」と「_footer.erb.html」をそれぞれパーシャルとして作成します。
 
・Asset Pipeline
> アセットディレクトリ
標準的なjavascriptcssimageが置かれています
app/assets: 現在のアプリケーション固有のアセット
lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
vendor/ assets: サードパーティのアセット
 
マニフェストファイル
アセットを上記の論理的な場所へ配置すれば、マニフェストファイルを使用して、それらをどのように1つのファイルにまとめるのかをRails指示することができます。
 
プリプロセッサエンジン
必要なアセットをディリクトリに配置してまとめた後、Railsは様々なプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します。
 
・リンクをする
HTMLでは<a href="/static_pages/about">About</a>と記述していましたが、Rubyでは下記のように記述することになります。
 
<%= link_to "About", about_path %>
 
Railsのルートへの書き換え
まず、visit '/static_pages/about'から下記への記述変更を行います。
 
visit about_path
 
テストの書き換えが終了すれば、次はconfig/routes.rbの書き換えを並行して行っていかなければなりません。get 'static_pages/help'を下記のように変更します。
 
match '/help', to: 'static_pages#help', via: 'get'
 
これは'/help'へのGETリクエストにマッチします。次にStaticPagesコントローラのhelpアクションにルーティングされます。
 
Homeページへのルーティングは下記のようになります。
 
root 'static_pages#home'
 
RSpecを洗練させる
 
  subject { page }
 
  describe "Home page" do
    before { visit root_path }
 
    it { should have_content('Sample App') }
    it { should have_title(full_title('')) }
    it { should_not have_title('| Home') }
  end
 
・コントローラを作成
 
$ rails generate controller Users new --no-test-framework
 

 

 
新しいコントローラを生成します。新規ユーザー専用のものとなります。
 
$ rails generate integraion_test user_pages
 

 

 
同じように、ユーザーテストを生成します。
 
require 'spec_helper'
 
describe "User pages" do
 
  subject { page }
 
  describe "signup page" do
    before { visit signup_path }
 
    it { should have_content('Sign up') }
    it { should have_title(full_title('Sign up')) }
  end
end
 
上記のようにテストを作っていきましたが、
テストに失敗してしまいました。
 

1) User pages signup page 

     Failure/Error: before { visit signup_path }

     ActionController::RoutingError:

       uninitialized constant UsersController

     # ./spec/requests/user_pages_spec.rb:8:in `block (3 levels) in <top (required)>'

 

  2) User pages signup page 

     Failure/Error: before { visit signup_path }

     ActionController::RoutingError:

       uninitialized constant UsersController

     # ./spec/requests/user_pages_spec.rb:8:in `block (3 levels) in <top (required)>'

 

これら2つはRouting Errorとなっています。つまり、UsersControllerが初期化されていないという話です。UsersControllerとなっている為、ファイル名をapp/controllers/users_controller.rbで、クラス名をUsersControllerと変更すれば解消します。