ナビゲーションバー

今回は、ナビゲーションバーの実装について紹介します。

 

スクールの最終課題をチームで開発中と以前、記事で書きましたが、

具体的にいうとフリマアプリのメルカリのクローンサイトを作りました。

 

私が担当したのは、

・新規登録ページのフロントエンド

・商品詳細ページのサーバーサイド

・パンくず機能

です。

 

今回は、新規登録ページで実装したナビゲーションバーについて紹介いたします。

まず、見た目は下記の通りです。

新規登録は複数ページに渡る為、フローを可視化させる役割を持ちます。

 

f:id:Arts91:20190602130624p:plain

 

例えば、3ページ目まで行くと、今中間地点の「お届け先住所入力」の段階まで来てると、一目でわかります。
f:id:Arts91:20190602131011p:plain

 

実装

使用機能:

Haml, Scss

今回は、マークアップのみの設定で実装しました。

JavaScriptなどで自動的に更新されるようにしたかったのですが、調べてみるとマークアップのみで設定するのがメジャーらしく、それに倣いました。

 

大まかな流れとしては、

・各ページに対応するフローの設定を1ページごとにビューファイルを作り記述する

・各ページに対応するビューファイルにrenderで差し込む(管理しやすくするためにやったので必須ではない)

・Scssでレイアウトを設定

hamlは各ページ毎に作りscssは1ファイルのみでした)

 

下記実際のコードを紹介します。

3ページ目の「お届け先住所入力」ページを例に説明します。

まず、新規登録ページは3つのステータスに分けることができます。

・完了(completed)

・現在のページ(active)

・これからのページ

「お届け先住所入力」ページについて言えば、「会員情報」〜「電話番号認証」までが完了、「お届け先住所入力」が現在、「お支払い方法」〜「完了」がこれからとなります。

つまり、今回は5段階ある訳ですが、各ページで組み合わせが変わることになります。

それらを各ビューファイルに記述してあげて、あとはScssでcompletedの部分はこう、activeの部分はこう、これからの部分はこうと色やつくりを

設定してあげれば良さそうです。

Haml

f:id:Arts91:20190602131848p:plain

Scss (一部省略)

f:id:Arts91:20190602133606p:plain


次回は、新規詳細ページで使ったslickというスライダープラグインについて書きます。