前のパートに戻る 完了して次のパートへ  

  2-5 ナビゲーションヘッダーの作成

このパートではナビゲーションヘッダーを作成していきます。今回のナビゲーションヘッダーはBootstrapの公式ドキュメントのNavbarを参考に作成しています。


本教材はRailsの大まかな流れを把握することを一番の目的としているので、HTML/CSSの解説は省略しています。細かく知りたい方はご自身で調べましょう。

本パートの目標物


本パートでは下記の画像のように画面上部にナビゲーションヘッダーを表示させるところまでやっていきます。

目標物を作成するまでの流れ


  1. ナビゲーションヘッダーのビューを作成
  2. ナビゲーションヘッダーのscssファイルをインポート
  3. ナビゲーションヘッダーのscssを追加
  4. 部分テンプレートを使って共通化

では実際に進めていきましょう。

1. ナビゲーションヘッダーのビューを作成


上記のBootstrapの公式ドキュメントのNavbarのコードを参考に、app/views/layouts/application.html.erbにコードを追加していきます。

(HTMLのソースコードに関しては本教材のメインではないので、コピー&ペーストをしても構いません。)

app
└── views
    └── layouts
        └── application.html.erb

<a>タグの箇所はrailsのヘルパーメソッドであるlink_toメソッドに書き換えます。link_toメソッドを使うことでシンプルに記述することが可能になります。

【例】

参考)link_to

2. ナビゲーションヘッダーのscssファイルをインポート


ナビゲーションヘッダーの見た目を整えるためにナビゲーションヘッダーのscssファイルをインポートします。

application.scssに以下のコードを追加してください。

app
└── assets
    └── stylesheets
        └── application.scss

上記のコードを追加することでlayouts/navbar.scssファイルのコードを読み込めるようになります。

3. ナビゲーションヘッダーのscssを追加


次にapp/assets/stylesheets/ディレクトリの中にlayoutsフォルダを作成し、作成したlayoutsフォルダの中にnavbar.scssファイルを作成します。作成したらnavbar.scssに以下のコードを追加してください。

(CSSのコードの関しては本教材のメインではないので、コピー&ペーストをしても構いません。)

app
└── assets
    └── stylesheets
        └── layouts
            └── navbar.scss

上記のコードを追加したら、http://localhost:3000/ にアクセスしてみてください。下記の画像のようになっていればうまく動作してます。

4. 部分テンプレートを使って共通化


ビューで共通パーツや繰り返し処理をするパーツは部分テンプレート(複数箇所で使う一部分をテンプレート化してまとめる)を使います。

Navbarはトップページ以外でも使うので部分テンプレートにします。まずapp/views/の中にpartialというディレクトリを作成してください。

作成したpartialというディレクトリに今度は_navbar.html.erbというファイルを作成します。

部分テンプレートのファイル名は先頭にアンダーバーをつけます。

_navbar.html.erbファイルには以下のコードを追加してください。

app
└── views
    └── partial
        └── _navbar.html.erb

上記のコードは先ほどapplication.html.erbに追加したコードと全く同じコードになります。

また、app/views/layouts/application.html.erbで先程貼り付けた<nav>... </nav>の間を下記のコードに変更します。

application.html.erbを以下のように編集してください。

app
└── views
    └── layouts
        └── application.html.erb

下記の一行のコードがpartialフォルダー配下の_navbar.html.erbファイルを呼び出しています。

部分テンプレートについては以下の記事を参考にしてください。

参考)Action View の概要

では、http://localhost:3000/ にアクセスしてみてください。下記の画像のようになっていればうまく動作してます。


以上で今回のパートは終了です。

お疲れ様でした。

議論
4 質問