チュートリアルをやってみる。Asset PipelineとSass編

以下はチュートリアルをやってみたログである。

railstutorial.jp

SassはCSS生成ツールでAsset Pipelineの一部である。

三つのキーワード

アセットディレクトリ
マニフェストファイル
プリプロセッサエンジン

アセットディレクトリ

三つのアセットディレクトリがある。

app/assets/ アプリ固有
lib/assets/ ライブラリ用
vender/assets/ サードパーティ用

アセットディレクトリの中身

images
javascripts
stylesheets

マニフェストファイル

Sprockets gemがマニフェストファイルを利用してアセットディレクトリのcssやjavascriptをまとめる。

アプリ固有のcss用マニフェストファイルを見てみる。
app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

この

 *= require_self
 *= require_tree .

がSprocketsで解釈される。require_selfで、application.css自身、require_tree .でapp/assets/stylesheetsのサブディレクトリを含むすべてのcss。

プリプロセッサエンジン

.coffee CoffeeScript用
.erb 埋め込みRuby (ERb) 用
.scss Sass用

railsはそれぞれに応じて実行される。二つつなげることもできる。

hoge.js.erb.coffee

で、Coffieスクリプトの実行のあとでerbが実行される。

Sassの使い方

Sassはスタイルシートの記述言語。

要素のネスト

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

のようなルールを

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

のように書ける。
h1は、centerのルールを継承して text-align: center;も持っている。

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  line-height: 1;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

を&表記で

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #999;
  a {
    color: #555;
    &:hover {
      color: #222;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 10px;
    }
  }
}

と書ける。

変数

h2 {
 color: #999
}
footer {
 color:#999
}

を

$lightGray: #999
h2 {
 color: $lightGray;
}
footer {
 color: $lightGray;
}

とできる。Sassでは$マークで変数、LESSでは@マークで変数という違いあり。

レイアウトのリンク

<%= link_to "About", about_path %>

のように、パスは直書きしないでおくのが良い。
これで、

contactページの追加

コントローラに
app/controllers/static_pages_controller.rb

class StaticPagesController < ApplicationController
  def home
  end

  def help
  end
  
  def about
  end
  
  def contact
  end
end

ビューに
app/views/static_pages/contact.html.erb

<% provide(:title, 'Contact') %>
<h1>Contact</h1>
<p>
  Contact Ruby on Rails Tutorial about the sample app at the
  <a href="http://railstutorial.jp/contact">contact page</a>.
</p>

ルーティング
config/routes.rb

SampleApp::Application.routes.draw do
    root  'static_pages#home'
    match '/help',    to: 'static_pages#help',    via: 'get'
    match '/about',   to: 'static_pages#about',   via: 'get'
    match '/contact', to: 'static_pages#contact', via: 'get'
....

ルートをhomeに
他は例えばlolalhost:3000/helpというGETでstatic_pages#helpへなどという設定がされる。
そして、help_pathという変数にパスが、help_urlにはURLが入る。

#で書いていた部分を変更する。

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <%= link_to "sample app", '#', id: "logo" %>
      <nav>
        <ul class="nav pull-right">
          <li><%= link_to "Home",    root_path %></li>
          <li><%= link_to "Help",    help_path %></li>
          <li><%= link_to "Sign in", '#' %></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

app/views/layouts/_footer.html.erb

<footer class="footer">
  <small>
    <a href="http://railstutorial.jp/">Rails Tutorial</a>
    by Michael Hartl
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   about_path %></li>
      <li><%= link_to "Contact", contact_path %></li>
      <li><a href="http://news.railstutorial.jp/">News</a></li>
    </ul>
  </nav>
</footer>

ユーザ登録ページを作る。

Usersコントローラの作成

新規ユーザ用のアクション newとして

rails generate controller Users new --no-test-framework

users_controller.rb
new.html.erb
が生成される。

ルーティング

/singupでusersコントローラのnewアクションが実行されるようにしたい。
config/routes.rb

SampleApp::Application.routes.draw do
  get "users/new"

  root  'static_pages#home'
  match '/signup',  to: 'users#new',            via: 'get'
  match '/help',    to: 'static_pages#help',    via: 'get'
  match '/about',   to: 'static_pages#about',   via: 'get'
  match '/contact', to: 'static_pages#contact', via: 'get'
  .
  .
  .
end

とすれば良い。

get "users/new"はまだ必要なのでそのままにしておく。後の章で消せる。

ユーザ登録ページ

app/views/users/new.html.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<p>Find me in app/views/users/new.html.erb</p>

ホームページからのリンク

app/views/static_pages/home.html.erb

<div class="center hero-unit">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", signup_path, class: "btn btn-large btn-primary" %>
</div>

<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>

のようにsignup_pathを追加した。

ローカルサーバで確認

rails server

Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。