Ruby on Rails チュートリアルって長いのでサマリー(5章)〜レイアウト〜


Ruby on Rails チュートリアル
http://railstutorial.jp/

# 前提
* Mac OS X Yosemite
* Homebrewは入ってる
* gemは入ってる
* gitとかHerokuとかruby以外でも使うものは知ってる

# Bootstrap

## Bootstrapのインストール

```rb:Gemfile
# 追加
gem 'bootstrap-sass'
gem 'sprockets'
```

```config/application.rb
module SampleApp
    .
    .
    .
    # bootstrap-sassとAsset Pipelineの互換性確保のため追加
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
  end
end
```

```
bundle install
```

## Bootstrapの読み込み

次のファイル追加

```app/assets/stylesheets/custom.css.scss
@import "bootstrap";
```

## Bootstrapを使ってレイアウトを設定

テンプレートにはhtml5shivとrespondを追加。後は好みだけど、containerを入れてみた。

```app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>ProgressReport</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

  <!-- Bootstrap -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="container">
	<%= yield %>
	</div><!-- /.container -->
</body>
</html>
```

個別ファイルは個別に好みで。
http://getbootstrap.com/

# パーシャル

共通で使うものはパーシャルとして定義して、renderで読み込むことができる。
以下は、scaffoldで自動生成されたものにBootstrapを適用してみた例。

```app/views/users/_header.html.erb
<%= form_for(@user) do |f| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% @user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field form-group">
    <%= f.label :name %>
    <%= f.text_field :name, class: "form-control" %>
  </div>
  <div class="field form-group">
    <%= f.label :email %>
    <%= f.text_field :email, class: "form-control" %>
  </div>
  <div class="field form-group">
    <%= f.label :password %>
    <%= f.text_field :password, class: "form-control" %>
  </div>
  <div class="field form-group">
    <%= f.label :created_at %><br>
    <%= f.datetime_select :created_at, class: "form-control" %>
  </div>
  <div class="field form-group">
    <%= f.label :updated_at %><br>
    <%= f.datetime_select :updated_at, class: "form-control" %>
  </div>
  <hr>
  <div class="actions">
    <button class="btn btn-default"><%= link_to 'Back', users_path %></button>
    <%= submit_tag name, class: "btn btn-primary" %>
  </div>
<% end %>
```

```app/views/users/new.html.erb
<h1>New User</h1>

<%= render 'form', name: 'Create' %>
```

# SassとAsset Pipeline

## Asset Pipeline

以下のとおり、Assetは分類して保存しておく。

* public/stylesheets
* public/javascripts
* public/images
* app/assets: 現在のアプリケーション固有のアセット
* lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
* vendor/assets: サードパーティのアセット

マニフェストファイルでSprocketsを使った読み込みを指定する。
例えば、CSSの場合、コメントの中の`require_tree .`で`app/assets/stylesheets`を読み込み、`require_self`で`application.css`を読み込む。

```app/assets/stylesheets/application.css
/*
 ...
 *= require_self
 *= require_tree .
*/
```

## Sass

ネスト、変数、ミックスインなどが使える。

参考：
http://sass-cheatsheet.brunoscopelliti.com/

# リンク

```html
<a href="/static_pages/about">About</a>
```

は以下のように書くのがRails流。

```erb
<%= link_to "About", about_path %>
```

以下のコマンドでroutesを確認できる。
Prefixに'_path'をつけたものがパス。
パスはcontrollerで定義したものが自動生成される。

```
rake routes
```

# Railsのroute

`config/routes.rb`で定義。

参考：
http://railsguides.jp/routing.html