【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などを用いてもうちょっとレイアウトを作り込みたいと思いますー。