Ruby on Rails 部分テンプレート

ログインしていないときにサイドバーにログインフォームを表示し、ログイン時にヘッダーにログアウト機能を設定、ついでにフッターもつけてみた。


①application.html.erbのbodyを下記のように修正する
\app\views\layouts\application.html.erb

<body>
<div id="container">
<% if current_user %>
  <div id="header">
<%= render "shared/header" %>
  </div>
<% end %>

  <div id="content">
<%= yield %>
  </div>

<% if current_user == nil %>
  <div id="sidebar">
<%= render "shared/login_form" %>
  </div>
<% end %>

  <div id="footer">
<%= render "shared/footer" %>
  </div>
</div>
</body>

※今回、ログインしている場合のみヘッダーを表示し、ログインしていない場合のみサイドバーにloginフォームを表示する。


②部分テンプレート用のフォルダを作成
\app\viewsフォルダの下に、sharedフォルダを作成する。


③ヘッダーファイル作成
\app\views\sharedフォルダの中に_header.html.erbファイルを作成し、下記のように記述する。

<div class="login_user">
<%= current_user.name + "さん" %> |
<%= link_to "ログアウト", :login,
      :method => :delete, confirm: "ログアウトしますか?"  %>
</div>


④ログインフォーム(サイドバー)作成
\app\views\sharedフォルダの中に_login_form.html.erbファイルを作成し、下記のように記述する。

<h2>ログイン</h2>
<% if flash.alert %>
<p class="alert"><font color=red><%= flash.alert %></font></p>
<% end %>

<%= form_tag :login do %>
<table id="login_form">
<tr>
<td align="right">ユーザー名:</td>
<td><%= text_field_tag :name, params[:name], style: "width: 120px" %></td>
</tr>
<tr>
<td align="right">パスワード:</td>
<td><%= password_field_tag  :pass, params[:pass], style: "width: 120px" %></td>
</tr>
<tr>
<td colspan="2" align="center">
<%= submit_tag "ログイン" %></td>
</tr>
</table>
<%= hidden_field_tag "from", request.path %>
<% end %>


④フッター作成
\app\views\sharedフォルダの中に_footer.html.erbファイルを作成し、下記のように記述する。

Copyright (C) ayaketan 2012


スタイルシートの設定
\app\assets\stylesheets\application.cssに下記のように記述する。

/* 全体の枠 */
div#container {
  margin: 0 auto;
  padding-top: 5px;
  width: $container_width;
}

/* 左の枠(コンテンツを入れる) */
div#content {
  float: left;
  width: $container_width - $sidebar_width - 20px;
  padding: 10px 10px 10px 0;
}

/* 右の枠(サイドバーを入れる) */
div#sidebar {
  float: left;
  width: $sidebar_width;
  background-color: #e8ffff;
  padding: 5px;
  font-size: 86%;
}

/* ヘッダー */
div#header {
  border-top: 4px solid #6bb;
}

/* フッター */
div#footer {
  clear: both;
  font: 11px Verdana;
  color: #888;
  padding: 8px 0;
  border-top: 4px solid #6bb;
  text-align: center;
}

/* ヘッダーのログインユーザー */
div.login_user {
  width: 300px;
  float: right;
  font-size: 80%;
  text-align: right;
  padding-top: 6px;
}

<ログイン前>
f:id:ayaketan:20121220112944p:plain

<ログイン後>
f:id:ayaketan:20121220112950p:plain