メニューバーの表示機能を見直す。 - ザリガニが見ていた...。

今までもメニューバーを一応表示していたが、機能が不足しているのは明らかだ...。

現状の機能

ログインすると点線で挟まれたメニューもどきが出現する。
ユーザー情報、ログアウト、パスワード変更へのリンクを表示している。

問題だと思うこと

UserEngineの管理画面へのリンクが提供されていない。その管理画面を表示するために、URLを直接アドレスバーに入力していた。
LoginEngine/UserEngineの管理画面ではメニューバーが消えてしまう。ソフトウェアブックのページに戻るリンクもない。ブラウザの戻るボタンに頼っている。
各種メッセージが、メニューバーの上に表示されてしまう。メニューは常に、操作環境の一番上にあるべきだ。
見た目も悪い。

そんな問題を解決したくて、以下のように作業してみた。

メニューバー表示の描画ファイルを分けた。(app/views/layouts/_menu.rhtml)

メニューバー描画用のパーシャルファイルを作成した。実現したいのは以下の機能。

Admin、User、Guestの権限によって、表示を変更する。
- Admin権限では、LoginEngine/UserEngineの管理画面へのリンクを表示する。（権限管理、ユーザー管理、アクセス権管理）
- 管理画面のときは、ソフトウェアブックに戻るリンクを表示する。（トップ）
- ログアウトしても、メニューバーは常に表示する。

<%# ------ファイル名: app/views/layouts/_menu.rhtml ---- %>
<dl class="menu">
<% if session[:user] %>
  <dt>ようこそ！<%= link_to "#{current_user.lastname} #{current_user.firstname}",
                          :controller => 'user', :action => 'edit' %> さん</dt>
  <dd> |
  <%= link_to 'ログアウト', :controller => 'user', :action => 'logout' %> |
  <%= link_to 'パスワード変更', :controller => 'user', :action => 'change_password' %> |

  <% if session[:user].admin?() %>
    <%= link_to '権限管理', :controller => 'role', :action => 'list' %> |
    <%= link_to 'ユーザー管理', :controller => 'user', :action => 'list' %> |
    <%= link_to 'アクセス権管理', :controller => 'permission', :action => 'list' %> |
  <% end %>
  
  <% unless controller.controller_name == "softwares" %>
    <%= link_to 'トップ', :controller => 'user', :action => 'home' %> |
  <% end %>
  </dd>
<% else %>
  <dt>ようこそ！ ゲストユーザー さん</dt>
  <dd>　</dd>
<% end %>
</dl>

LoginEngine、UserEngineからのメッセージの描画ファイルを分けた。(app/views/layouts/_flash.rhtml)

LoginEngine、UserEngineからのフラッシュメッセージを表示する部分。

<%# ------ファイル名: app/views/layouts/_flash.rhtml ---- %>
<% for name in [:notice, :warning, :message] %>
<% if flash[name] %>
<div align="center">
  <div class="flashNotice">
    <p style="color: green"><%= flash[name] %></p>
  </div>
</div>
<% end %>
<% end %>

レイアウトファイルの修正(app/views/layouts/)

今まで直接描画していた部分をrender :partialに置き換える。
_menu.rhtmlをまず最初に描画する。描画順に気を付ける。
layoutsフォルダ内の_menu.rhtmlを描画するには、render :partial=>"layouts/menu"と指定する。
もし、render :partial=>"menu"と指定すると、app/views/softwares/_menu.rhtmlを描画することになる。

<%# ------ファイル名: app/views/layouts/softwares.rhtml ---- %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Softwares: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= javascript_include_tag :defaults %>
</head>
<% store_location %>
<body>
<%= render :partial=>"layouts/menu" %><%# <---パーシャルファイルに置き換え %>
<%= render :partial=>"common/notice" if flash[:notice] -%>
<%= render :partial=>"common/error"  if flash[:error] -%>
<%= render :partial=>"layouts/flash" %><%# <---パーシャルファイルに置き換え %>

<%= @content_for_layout %>

</body>
</html>

user.rhtml、role.rhtml、permission.rhtmlには、以下のレイアウトを設定した。（内容は3ファイルとも、すべて同じ）

<%# ------ファイル名: app/views/layouts/user.rhtml、role.rhtml、permission.rhtml ---- %>
<html>
<head>
  <title><%= controller.controller_name %>: <%= controller.action_name %></title>
  <%# スタイルシートは、後の設定が優先される %>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= engine_stylesheet "login_engine" %>
  <%= engine_stylesheet "user_engine" %>
  <%= engine_javascript "user_engine" %>
</head>
<body>
<%= render :partial=>"layouts/menu" %><%# <---追加 %>
<%= render :partial=>"layouts/flash" %><%# <---追加 %>

<%= yield  %>

</body>
</html>

スタイルシートの設定(public/stylesheets/)

メニューバーに上下のラインと背景色を設定してみた。

/* ------ファイル名: public/stylesheets/scaffold.css ---- */
.menu {
  border-top: 2px honeydew solid;
  border-bottom: 2px honeydew solid;
  background-color: ghostwhite;
}

jascaffold、LoginEngine、UserEngineのフォントや書式の統一感を出すために、以下の変更を行う。（標準のscaffoldのフォントに統一した。）

/* ------ファイル名: public/stylesheets/scaffold.css ---- */
body{
  color:#333;
  background-color: #fff;
  /*margin:10px 5% 30px 5%; <---削除 */
  /*font-size:85%; <---削除 */
}

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

以上で、見た目はこんな感じに。あんまり変わらないかな...。