酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

Bootstrap対応のナビ/パンくずリスト作成Gem Simple-navigation-bootstrap

Boostrapを使えばカッコイイナビゲーションやパンくずリストのパーツを設置出来ます。しかしRails側で多レイヤーのナビゲーション、パンくずリストの仕組みを構築するとそれなりに作りこみが必要です。

そんな悩みを解決してくれるのが、ナビゲーション作成の『simple-navigation』と、Bootsrapのテーマ対応の『simple-navigation-bootstrap』です。


simple-navigationのサンプル

まずは、simple-navigationのサンプルデモです。デザインはbootsrapが適用されていないですがほんの少しのコードでナビゲーションの仕組みが構築できている事がわかります!

スクリーンショット 2013-02-07 14.40.49

Gemのインストール

いつもどおりGemfileに以下を追加して、bundle installを実行してください。

1
2
3
# ナビゲーション&パンくずリスト
gem "simple-navigation"
gem "simple-navigation-bootstrap"

初期設定

次のコマンドを実行すると設定ファイルのconfig/navigation.rbが生成されます。

1
rails g navigation_config

メニューが手作業で登録できる場合の設定

メニューが手作業で登録できる静的なメニューの場合は、config/navigation.rbファイルを使ってメニュー編集します。

1
2
3
4
5
6
7
8
9
10
11
12
13
# -*- coding: utf-8 -*-
SimpleNavigation::Configuration.run do |navigation|
  navigation.items do |primary|
    primary.item :key_1, 'name', root_url
    primary.item :key_2, 'name', root_url do |sub_nav|
      sub_nav.item :key_2_1, 'name', root_url
      sub_nav.item :key_2_2, 'name', root_url
    end
    primary.item :key_3, 'name', root_url, :class => 'special'
    primary.item :key_4, 'name', root_url
  end
  primary.dom_class = 'nav'
end

そして、view側に次のコードを設置。

1
2
3
4
5
6
7
-# ナビゲーション
.navbar.navbar-fixed-top
  .navbar-inner
    = render_navigation(expand_all: true, level: 1..2, renderer: :bootstrap)

-# パンくずリスト
= render_navigation(:renderer => :breadcrumbs, :join_with => " > ")

メニューが動的に変わる場合の設定

メニューが動的に変更される場合は、/app/helpers/navigation_helper.rbなど(場所は任意)に次のようなコードを設置します。

1
2
3
4
5
6
7
8
9
10
11
12
def my_menu_items(dom_class)
  Proc.new do |primary|
    primary.item :key_1, 'name', root_url
    primary.item :key_2, 'name', root_url do |sub_nav|
      sub_nav.item :key_2_1, 'name', root_url
      sub_nav.item :key_2_2, 'name', root_url
    end
    primary.item :key_3, 'name', root_url, :class => 'special'
    primary.item :key_4, 'name', root_url
  end
  primary.dom_class = dom_class
end

でもってview側に次のコードを設置。

1
2
3
4
5
6
7
-# ナビゲーション
.navbar.navbar-fixed-top
  .navbar-inner
    = render_navigation(expand_all: true, level: 1..2, renderer: :bootstrap, &my_menu_items("nav"))

-# パンくずリスト
= render_navigation(:renderer => :breadcrumbs, :join_with => " > ", &my_menu_items("breadcrumb"))

ちなみに、配列とハッシュでもメニューを表現できますが多レイヤーでやった場合にうまくクラスを指定出来ませんでした。(僕の技術力不足です)僕としては、Procでの指定をオススメします。

追記:URLに日本語を使う場合はモンキーパッチング

URLに日本語を使う場合はapp/controllers/application_controller.rbに以下を追記して下さい。(環境によって発生するっぽいです。もっとスマートな方法を知ってる方がいらっしゃればぜひ教えて下さい^^)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module ActionView
  module Helpers
    module UrlHelper
      def current_page?(options)
        unless request
          raise "You cannot use helpers that need to determine the current " \
                "page unless your view context provides a Request object " \
                "in a #request method"
        end

        return false unless request.get?

        url_string = url_for(options)

        if url_string.index("?")
          request_uri = request.fullpath
        else
          request_uri = request.path
        end

        if url_string =~ /^\w+:\/\//
          url_string == "#{request.protocol}#{request.host_with_port}#{request_uri}"
        else
          url_string.upcase == request_uri.upcase
        end
      end
    end
  end
end

公式サイト

最後に公式サイトの紹介です。simple-navigationはwikiのドキュメントが相当充実しているので、もし時間があればぜひwikiを見て下さい。

simple-navigation wiki

simple-navigation

simple-navigation-bootstrap

Special Thanks

Railsで使える便利なナビゲーション~simple-navigation | Scimpr Blog

変更来歴

02/15 追記:URLに日本語を使う場合はモンキーパッチング

おすすめの書籍