List-O-Maticでメニューバーを作ってみる。

Ruby on Rails

そろそろメニューバーが欲しくなってきた。良さそうなデザインが無いか検索してみると、オサレなメニューバーを作ろうのページで、List-O-Maticの存在を知る。いくつかの質問に答えてデザインを選ぶと、HTMLとCSSのコードを出力してくれる。そのコードをコピーして自分のページに貼付ければ、あっという間にメニューの完成、ちゃんと使える！早速、CSVサーバーにも利用してみた。

レイアウトの作成

  • softwarebookの時と同じように、メニューの表示は、パーシャルファイル_menu.rhtmlで描画する。
  • メニュー用のスタイルシートも、新たにlist_o_matic.cssを用意して、そこで設定するとこにした。
<%# ---------- app/views/layouts/csvs.rhtml ---------- %>

<html>
<head>
  <title>Csvs: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= stylesheet_link_tag 'list_o_matic' %><%#<------ メニュー用のスタイルシートを読み込み %>
</head>
<body>
<%= render :partial=>"layouts/menu" %><%#<------ メニューを表示 %>
<%= render :partial=>"layouts/flash" %>
<%= yield  %>

</body>
</html>
メニューの描画
  • _menu.rhtmlは、実際にメニューを描画するところ。ユーザーのログイン情報を表示する部分と、メニューリンクを表示する部分の2部構成にした。
  • link_if_authorizedは、user_engineが提供してくれるヘルパメソッド。
    • ログインユーザーに操作権限がある場合だけ、リンク表示を生成してくれる。操作権限が無い場合は、何も表示しない。
    • :show_text => trueオプションを指定すれば、操作権限が無い場合でも、文字列だけ表示する。
    • :wrap_in => "li"オプションを指定すると、＜li＞タグで囲んだリンク表示を生成してくれる。
<%# ---------- app/views/layouts/_menu.rhtml ---------- %>

<%# ログイン情報を表示 %>
<div id="info_bar">
<% if session[:user] %>
  ようこそ！
  <%= link_if_authorized "#{current_user.fullname}", :controller => 'user', :action => 'edit' %> 
  さん
  <%= "（権限 = #{current_user.roles.map {|role| role.name}.join(', ')}）" %>
<% else %>
  ようこそ！ ゲストユーザー さん
<% end %>
</div>

<%# メニューリンクを表示 %>
<div id="navcontainer">
<ul id="navlist">
  <%= link_if_authorized 'CSVリスト', {:controller => 'csvs', :action => 'list'}, :wrap_in => "li" %>
  <%= link_if_authorized 'パスワード変更', {:controller => 'user', :action => 'change_password'}, :wrap_in => "li" %>
  <%= link_if_authorized '権限管理', {:controller => 'role', :action => 'list'}, :wrap_in => "li" %>
  <%= link_if_authorized 'ユーザー管理', {:controller => 'user', :action => 'list'}, :wrap_in => "li" %>
  <%= link_if_authorized 'アクセス権管理', {:controller => 'permission', :action => 'list'}, :wrap_in => "li" %>
  <%= link_if_authorized 'ログアウト', {:controller => 'user', :action => 'logout'}, :wrap_in => "li" %>
</ul>
</div>
  • ＜div id="navcontainer"＞ブロックは、以下のList-O-Maticが生成したコードが元になっている。

List-O-Maticが生成したコード

<div id="navcontainer">
<ul id="navlist">
	<li><a href="href1" title="title1">text1</a></li>
	<li><a href="href2" title="title2">text2</a></li>
</ul>
</div>
スタイルシートの設定
  • スタイルシートも、ほぼList-O-Maticが生成したコードを利用した。修正したのは右側にコメントしている行だけ。
  • 今後、もしメニューバーのデザインを変えたくなったら、このスタイルシートの設定を変更するだけでOKだ。
/* ---------- public/stylesheets/list_o_matic.css ---------- */

#navlist
{
margin: 0;
padding: 0 0 22px 10px; /*修正前 0 0 20px 10px*/
border-top: 1px solid #000; /*追加*/
border-bottom: 1px solid #000;
background-color: whitesmoke; /*追加*/
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 16px; /*修正前 14px*/
font-weight: bold;
margin: 0 10px 4px 10px;
padding: 2px 0 0 0; /*追加*/
text-decoration: none;
color: #999;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 0px; /*修正前 2px*/
background: transparent;
color: #000;
}

#navlist a:hover 
{ 
border-bottom: 4px solid #888; /*追加*/
color: #666; /*修正前 000*/
}


以上で、メニューバーが追加できた。現在の表示はこんな感じ。