Hyurakuのエンジニア日誌

SE出身Webエンジニアのブログ

Navberのタブを見ているページによってアクティブにできるようにしたい #4

連絡先管理アプリケーションを作っているときに'クリックしているページによってnavberのタブに色を付け足いな'と考えたので、そのときの実装を解説します。

作成したアプリのリンク f:id:hyuraku:20181006155015p:plain

1. 実際の画面

クリックしたページによって各タブがアクティブになっていることが確認できます。

  • Dashboradをクリック時 f:id:hyuraku:20181006155139p:plain

  • All Contactsをクリック時 f:id:hyuraku:20181006155151p:plain

  • 各連絡先をクリックした時 f:id:hyuraku:20181006155206p:plain

2. 実装の解説

流れとしては次のとおり。 - 現在のページのuriを取得 - classにactiveを設定 - bootstrap3の使用によりアクティブなメニューの色が変わる というようになっています。

まずはnavbar.html.slim(manageContact/app/views/layouts/navbar.html.slim)のコードを解説。

--< 省略 >--

ul.nav.navbar-nav
  li class="#{active_item('dashboard')}"
    = link_to 'Dashboard',dashboard_path
  li class="#{active_item('contacts')}"
    =link_to 'All Contacts',contacts_path

--< 省略 >--

該当するページによってactive_itemメソッドを実行させています。

次にactive_itemのメソッドについて解説 ファイルはapplication_helper.rb(manageContact/app/helpers/application_helper.rb)

--< 省略 >--

  def active_item(uri)
    uri_segment = request.fullpath.split(/\/|\?/)
    uri_segment[1] === uri ? 'active' : ''
  end

--< 省略 >--

ここで注目したい点は2つ。 - request.fullpath
request.fullpathは次に遷移したいurlを示している。urlによって次のように取得できます。

"/dashboard"
"/contacts"
"/contacts/99/edit"

そして取得した値をsplitすることでurlが単語単位で分割された配列を取得できます。

["", "dashboard"]
["", "contacts"]
["", "contacts", "99", "edit"]
  • uri_segment[1] === uri ? 'active' : ''
    そして取得した配列の2番目の要素が指定したuriと一致すればclassはactiveにする、という流れになっています。