【Ruby on Rails】チュートリアル「第５章レイアウトを作成する」をやってみた

Ruby on Rails チュートリアルの第５章のメモです。第５章では、MVCフレームワークのVことViewモデルを中心に学びます！レスポンシブデザインが簡単に導入できるCSSフレームワークのBootstrapや、CSSをキレイに構文的に書くためのSassなど盛りだくさんの内容になっています！

第5章レイアウトを作成する | Rails チュートリアル

Railsチュートリアル第５章をやってみた

HTMLの条件付きコメント

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->

IEのバージョンが9より小さい場合という意味

Railsヘルパーのlink_to

link_to(リンクテキスト, URL, オプションハッシュ)

画像を置く場所

app/assets/images
Railsは該当する画像ファイルを、アセットパイプラインを通してapp/assets/imagesディレクトリの中から探してくれる
ブラウザから生成されるパスは/assets/rails-XXXXXXXXXXXX.pngとなる
ファイル名がランダムな文字列にハッシュされているのは、画像ファイルを新しくしたときにブラウザのキャッシュと意図的にヒットさせないようにするため
Railsは自動的にやってくれる
imagesディレクトリが抜けているのは高速化のため、assets以下にすべてのファイルをリンクしている

RailsでのBootstrap導入方法

Bootstrapは動的なスタイルシートを生成するためLESSを使っている
RailsのAsset PipelineはデフォルトでSass言語をサポート
Q. LESS言語とは？
Q. Sass言語とは？

追加はGemfileを変更するだけで簡単にできる

...
gem 'bootstrap-sass',       '3.2.0.0'
...

CSSの自動インクルード

app/assets/stylesheetsに置かれたスタイルシートはapplication.cssの一部として自動的にWebサイトのレイアウトにインクルードされる

Gemfileを変更した時の注意点

Gemfileを変更した時に、rails serverを再起動しないとエラーになる場合がある

File to import not found or unreadable: bootstrap-sprockets.

partialを使ってViewをリファクタリング

散らかっているレイアウトファイルを部分的に切り離してキレイにするための機能
Railsヘルパーのrender関数を使ってスタイルシートを置換する

<%= render 'layouts/shim' %>

app/views/layouts/_shim.html.erbというファイルを探してその内容を評価し、結果をビューに挿入
アンダースコアがパーシャルで使用するための命名規則
Simfonyのinclude_partailとほぼおなじ

Sass と Asset Pipeline

Asset Pipelineとは静的コンテンツの生産性と管理を大幅に強化するRailsの機能

アセットディレクトリ

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

マニフェストファイル

アプリケーション固有のCSS用マニフェストファイル
app/assets/stylesheets/application.css
適切なファイルをインルードするようコメントで指定

プリプロセッサエンジン

ここらへんよくわからない
なんとなくRails側でごにゃごにゃして静的ファイルをまとめてくれる感じ？

フィーリングでのまとめ

アセットパイプラインを利用すると、CSSやJavaScriptをわけて用途別に開発をすることができる
そのため開発はしやすいがファイル数がおおくなるため、本番環境で非効率
そこでCSSやJSのファイルを最終的に１つにまとめて最小化してくれるのがアセットパイプライン

Sassを使って素晴らしい構文に

SCSSはCSS本体を抽象化したフォーマット

Sassはネストを使える

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

を以下のようにネストでかけるようになる

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

BootstrapにおけるLessの変数

$light-gray: #777;

BootstrapはSassではなくLessを使っている
[slidenote url="http://getbootstrap.com/customize/#less-variables" slideId="34"]
にLessの変数一覧表がある

レイアウトのリンク

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

ではなく

<%= link_to "About", about_path %>

とし、about_pathの定義を変えればabout_pathが使用されているすべてのURLを変更できるため、柔軟性が高まる

ルーティングの設定

config/routes.rbで行う

get 'help' => 'static_pages#help'

のようにgetルールを使って変更すると、
GETリクエストが/helpに送信されたときに
StaticPagesコントローラのhelpアクションを呼び出してくれる
また、help_pathやhelp_urlのような名前付きルートも使えるようになる

Railsにおける統合テスト

rails generate integration_test site_layout

Ruby on Rails チュートリアル「第５章レイアウトを作成する」のまとめ

HTML5とBootstrapを使ってコーディング
Railsはパーシャルを使ってビューを別ファイルに分割できる
Railsのルーティングでは自由にルールを定義できて、名前付きルートが使えるようになる
統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする

HTMLとCSSのコーディングは時間がかかる
Sassはいじったことがなかったから面白かったので実際に使ってみたい
第５章にかかった時間は2時間
Ruby on Rails チュートリアル第５章までかかった合計時間は7時間

次の記事はこちら！
Ruby on Rails チュートリアル「第６章ユーザのモデルを作成する」をやってみた

Ruby on Railsのおすすめ書籍はこちら！

Ruby on Rails 4 アプリケーションプログラミング

パーフェクト Ruby on Rails

【Ruby on Rails】チュートリアル 「第５章 レイアウトを作成する」をやってみた