こんにちは！まろんぼーいです。
今回の記事は、ナビバーの設定方法についてのメモです。
このブログでは、過去に完全初心者の僕が作ったWebアプリを参考に、
初心者なりに試行錯誤しながらその改良版を作っていく過程をお見せしています。
このシリーズを追っていくだけで、初心者なりのRailsを使ったWebアプリの作り方が見ていただけると思います。
同じ初心者の方の参考になればうれしいです！
〇ナビバーとは？
ナビバーとは、よくWebサイトに見られる、
サイト上部にあるメニューのバーのことです（雑）。
だいたいどのサイトにもありますよね！
今回は、Railsでこのナビバーを設定する方法について書きたいと思います。
〇ナビバーのパーシャルファイルを作成
まずは、ナビバーを表示するファイルを作る必要があります。
だいたいどのサイトもそうですが、ナビバーはどのページにもついていますよね。
つまりこれは、サイトの各ページに対応しているviewページそれぞれでナビバーのファイルをrenderし適用させているんです。
よって、ナビバーのファイルはパーシャルファイルとなります。
ナビバーのパーシャルファイルについては、views/layoutsのフォルダ内に格納します。
ファイル名は、「_navbar.html.erb」が通例のようです。
それでは早速ですが、_navbar.html.erbの例を以下に示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<header class="mb-4"> <nav class="navbar navbar-expand-md navbar-light bg-light"> <div class="col-1"> <a class="navbar-brand" href="/">MyHobby</a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end col-9 flex-column" id="navbarSupportedContent"> <ul class="navbar-nav w-100 nav-justified"> <li class="nav-item"><%= link_to 'Signup', new_user_path, class: 'nav-link' %></li> <li class="nav-item"><%= link_to 'Login', new_session_path, class: 'nav-link' %></li> </ul> </div> </nav> </header> |
中身を簡単に説明していきます。
マージンの設定
まず1行目と最終行目で<header class=”mb-4″>と</header>で囲っています。
これは、ナビバーのバランスを整えるためにマージン（空白）を設定しているものです。
ナビバーを表示するコード
つぎは、<nav class=”navbar navbar-expand-md navbar-light bg-light”>と</nav>で囲っています。
これが、ナビバーを表示するための記述です。
例によって、bootstrapを使っています。
classでnavbarを定義することでナビバーを作ることができます。
ちなみに、classは何個でも設定することができ、
今回はnavbar、navbar-expand-md、navbar-light、bg-lightの4つを設定しています。
それぞれナビバーをデザインするものなので、気になった場合は調べていただければと思います。
グリッドシステムの設定
続いて見えるのが、こちらの文
|
1 2 3 |
<div class="col-1"> <a class="navbar-brand" href="/">MyHobby</a> </div> |
ここではclassをcol-1としたグリッドシステムを使っています。
中の文は<a></a>で囲まれた文なのでリンクを示す文となっています。
囲んでいる文が「MyHobby」なので、アプリ上では「MyHobby」の文をクリックするとリンク先に飛ぶようになるのですが、
肝心の飛ぶリンク先は 「href=」で指定します。
今回はリンク先を「/」としています。
「『/』？リンク先ないやん。。。」と最初の僕は思っていましたが、
「/」はトップページを指します。
つまり、これはトップページへのリンクとなっているのです。
トグルの設定
どんどんいきましょう。
次はコチラ。トグルと呼ばれるやつですね。
|
1 2 3 |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> |
これは中身を覚える必要はありません。
コードをコピーして使えばオッケー。
これ何をしているのかというと、画面が小さくなった時にメニューを折りたたむためのものです。
ほら、あるじゃないですか。
スマホなんかでメニュー右端に三本線があって、それをクリックするとメニューが開くやつ。
説明が下手ですね…
あきらめて画像で示します。
例として僕が以前作ったアプリShareWayで見てみましょう。
上が普通のパソコンで見たナビバー
そしてこれがより小さい画面で見た場合。
ほら！右端に三本線！これです！
これを実装するためのコードというわけです。
メニュー項目の設定
最後にコチラ。
|
1 2 3 4 5 6 |
<div class="collapse navbar-collapse justify-content-end col-9 flex-column" id="navbarSupportedContent"> <ul class="navbar-nav w-100 nav-justified"> <li class="nav-item"><%= link_to 'Signup', new_user_path, class: 'nav-link' %></li> <li class="nav-item"><%= link_to 'Login', new_session_path, class: 'nav-link' %></li> </ul> </div> |
こちらは実際にナビバーの中に入れる項目を設定するコードです。
ちなみにclassで「collapse」と設定しています。
collapseは英語で「崩壊する」のような意味を持ちますが、
コチラの項目は普段ナビバーに表示されていません。
ではどんなときに表示されるかというと、さきほど設定したトグル（右端の三本線）を押したときです！
実は先ほどのトグルのコード、
|
1 2 3 |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> |
の1行目を見ると、「data-toggle=”collapse”」としています。
この文によりcollapseと連携しているんです！
というわけであとはトグルをクリックした際に出る項目を設定するのですが、
今回は例として、ユーザ新規登録とログインの画面リンクを設定しています。
このあたりはHTMLのリスト機能を使っています。
これでナビバーのパーシャルファイルができました！
application.html.erbにrender
パーシャルファイルができたので、適用するためにはrenderしなくてはいけません。
個々のページにrenderすることもできますが、アプリ全体に適用したい場合はapplication.html.erbにrenderします。
application.html.erbは基本views/layoutsフォルダ内にあります。
renderするには、application.html.erbの<body>内に以下の一文を追加します。
|
1 |
<%= render 'layouts/navbar' %> |
これでrenderができました！
今回は以上となります。
