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; }
<ログイン前>
<ログイン後>