Rails Tutorialをやってみよう05
第5章の続きからやっていきます。
http://railstutorial.jp/chapters/filling_in_the_layout?version=4.2#sec-sass_and_the_asset_pipeline
5.2 SassとAsset Pipeline
Rails3.1以降と前のバージョンのファイル分類のちがいや
Sass構文のネストなどについて書かれていますが、詳細は本文に譲ります。
既に書いている
app/assets/stylesheets/custom.css.scss
を、Sassを使って書き直します。
比較のために修正前のファイルを載せておきます。
修正前のファイル
@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
/* footer */
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;
}上記のファイルを
以下のようにSassを使って編集します。
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
}ネストや変数を使って初期のSCSSファイルを書き直した結果
ブラウザで確認すると、修正前と後でページが変化していないことを確認できたと思います。
5.3 レイアウトのリンク
今度は’#’で代用していたリンクを書き換えてみましょう。もちろん、以下のようにリンクを直接記述することもできます。
ファイル：app/views/layouts/_footer.html.erbの
<li><%= link_to "About", '#' %></li>
を
<li><%= link_to "About", about_path %></li>
に修正します。
この修正をしたら、エラーがでたので、
とりあえず、
'#'に戻しておきました。
5.3.1 Contactページ
Contactページのルートを追加します。
config/routes.rbを以下のように編集します。
Rails.application.routes.draw do root 'static_pages#home' get 'static_pages/help' get 'static_pages/about' get 'static_pages/contact' end
Contactページ用のアクションを追加する
app/controllers/static_pages_controller.rbにて
def contact end
Contactページのビューを追加する
app/views/static_pages/contact.html.erbを新規作成して、
$ touch app/views/static_pages/contact.html.erb
以下のように内容を編集します。
<% provide(:title, 'Contact') %> <h1>Contact</h1> <p> Contact the Ruby on Rails Tutorial about the sample app at the <a href="http://www.railstutorial.org/#contact">contact page</a>. </p>
5.3.2 Railsのルート
getルールを使って変更すると、
GETリクエストが /help に送信されたときに
StaticPagesコントローラーのhelpアクションを呼び出してくれるようになります。
このgetルールを使うメリットは2つあります。
・/static_pages/help のような長いURLが /help のような短いURLになる。
・help_pathやhelp_urlといった「名前付きルート」が使える。
「名前付きルート」とは、
「パス_path」(ドメイン名より下のパスのみ)または「パス_url」(httpなどから始まるフルパス)という形式でURL形式を指定できます。たとえばContactページが/contactというパスにある場合、contact_pathまたはcontact_urlという名前付きルートを使用して指定できます。パスヘルパーやURLヘルパーとも呼ばれます。これにより、コード上でURL構造を意識せずにパスを指定できます。
なお似ているけど違うのは「名前付きスコープ」と「名前付きパラメータ」です。
参考：techracho.bpsinc.jp
5.3.3 名前付きルート
次に、
routes.rbをgetメソッドを使って編集したことにより、
名前付きルートが使えるようになりました。
layouts/_header.html.erbの'#'を編集しましょう。
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>同様に
layouts/_footer.erbの'#'を編集します。
<footer class="footer">
<small>
The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
</small>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
<li><a href="http://news.railstutorial.org/">News</a></li>
</ul>
</nav>
</footer>以下のように、ブラウザでaboutページを表示できたかと思います。
今日はこの辺で、次回へ続きます。
