【50歳からのRailsアプリ開発 vol.3】トップページのhtmlを作成。パーシャルで分割。
はじめに。
忘れていませんよRails。 早いところ静的要素を仕上げて進みたいのです。 今回はセマンティックなHTLを作成して、それをパーシャルを使って分割するところまで進めます。
工程
1. トップページのhtmlを作成する。
作成したいページのワイヤーフレームはこちら。
これを横目に見ながらカタカタカタカタ。
<header>
<h1>Name Surname</h1>
<nav>
<ul>
<li>Your-menu</li>
</ul>
</nav>
</header>
<main>
<seciton id="prof">
<figure><img src="#" alt="Thumb"></figure>
<h1>John Doe</h1>
<p>San Fransico. CA</p>
<h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2>
<dl>
<dt>qualification</dt>
<dd>14</dd>
<dt>experience projects</dt>
<dd>140</dd>
<dt>files</dt>
<dd>240</dd>
</dl>
<a href="#">MORE PROFILE</a>
</seciton>
<section id="feed">
<h1>My Feed</h1>
<section>
<figure><img src="#" alt="your-feed-img"></figure>
<dl>
<dt>LIKE</dt>
<dd>609</dd>
<dt>COMMENT</dt>
<dd>120</dd>
</dl>
<h2>Excepeteur sint occaecat.</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
</section>
<a href="#">MORE FEED</a>
</section>
<section>
<figure><img src="#" alt="your-feed-img"></figure>
<dl>
<dt>LIKE</dt>
<dd>609</dd>
<dt>COMMENT</dt>
<dd>120</dd>
</dl>
<h2>Excepeteur sint occaecat.</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
</section>
<a href="#">MORE FEED</a>
</section>
<seciton id="carrier">
<h2>Carrier</h2>
<section>
<p>
Excepteur sint occaecat cupidatat non proident, sunt.
</p>
<span>1 h ago</span>
<figure><img src="#" alt="your-carrier-thumb"></figure>
</section>
<section>
<p>
Excepteur sint occaecat cupidatat non proident, sunt.
</p>
<span>1 h ago</span>
<figure><img src="#" alt="your-carrier-thumb"></figure>
</section>
<section>
<p>
Excepteur sint occaecat cupidatat non proident, sunt.
</p>
<span>1 h ago</span>
<figure><img src="#" alt="your-carrier-thumb"></figure>
</section>
<a href="#">MORE CARRIER</a>
</seciton>
<footer>
<a href="#">CONTACT ME</a>
<small>©Name Surname</small>
</footer>
</main>
はい、できあがり。 最近5.2になったHTMLですが、最終的には構造的に正しい作りにしたいと思います。
2. ページごとに正しいtitleタグを出力するようにする。
RailsTutorialに従った内容です。
説明を復唱しても意味がないので、結果を貼り付けます。
/app/app/views/static_pages/home.html.erb
<% provide(:title, "Home") %>
<header>
<h1>Name Surname</h1>
<nav>
<ul>
<li>Your-menu</li>
</ul>
</nav>
</header>
// 後方省略
/app/app/views/layouts/application.html.erb
<html>
<head>
<title><%= tag_title(yield(:title)) %></title>
// 後方省略
/app/app/helpers/application_helper.rb
// 前方省略
# title tagを返すヘルパー
def tag_title(title="")
base_title = "MyResume"
if title.empty?
base_title
else
title + " | " + base_title
end
end
// 後方省略
この、application_helper の使いどころがいまいちわかっていません。 とりあえず「html表示時のメソッドはここに書く」程度の理解です。。。
3. パーシャルでheaderを分ける。
今回のレイアウトでは、<header>``<footer>は使い回し。なのでパーシャルを使って分割します。
/app/app/views/layouts/_header.html.erb
<header>
<h1>Name Surname</h1>
<nav>
<ul>
<li>Your-menu</li>
</ul>
</nav>
</header>
/app/app/views/layouts/_footer.html.erb
<footer>
<a href="#">CONTACT ME</a>
<small>©Name Surname</small>
</footer>
/app/app/views/static_pages/home.html.erb
<% provide(:title, "Home") %> <%= render 'layouts/header' %> <main> // 中間省略 </main> <%= render 'layouts/footer' %>
今日はここまでですー。 とりあえず、gitにpushして、herokuに公開します。
さいごに
次回はBootstrapなどを用いてもうちょっとレイアウトを作り込みたいと思いますー。
