ナビゲーションバー
2019-06-02
今回は、ナビゲーションバーの実装について紹介します。
スクールの最終課題をチームで開発中と以前、記事で書きましたが、
具体的にいうとフリマアプリのメルカリのクローンサイトを作りました。
私が担当したのは、
・新規登録ページのフロントエンド
・商品詳細ページのサーバーサイド
・パンくず機能
です。
今回は、新規登録ページで実装したナビゲーションバーについて紹介いたします。
まず、見た目は下記の通りです。
新規登録は複数ページに渡る為、フローを可視化させる役割を持ちます。
例えば、3ページ目まで行くと、今中間地点の「お届け先住所入力」の段階まで来てると、一目でわかります。
実装
使用機能：
Haml, Scss
今回は、マークアップのみの設定で実装しました。
JavaScriptなどで自動的に更新されるようにしたかったのですが、調べてみるとマークアップのみで設定するのがメジャーらしく、それに倣いました。
大まかな流れとしては、
・各ページに対応するフローの設定を１ページごとにビューファイルを作り記述する
・各ページに対応するビューファイルにrenderで差し込む（管理しやすくするためにやったので必須ではない）
・Scssでレイアウトを設定
（hamlは各ページ毎に作りscssは１ファイルのみでした）
下記実際のコードを紹介します。
3ページ目の「お届け先住所入力」ページを例に説明します。
まず、新規登録ページは3つのステータスに分けることができます。
・完了（completed)
・現在のページ（active)
・これからのページ
「お届け先住所入力」ページについて言えば、「会員情報」〜「電話番号認証」までが完了、「お届け先住所入力」が現在、「お支払い方法」〜「完了」がこれからとなります。
つまり、今回は５段階ある訳ですが、各ページで組み合わせが変わることになります。
それらを各ビューファイルに記述してあげて、あとはScssでcompletedの部分はこう、activeの部分はこう、これからの部分はこうと色やつくりを
設定してあげれば良さそうです。
Scss (一部省略）
次回は、新規詳細ページで使ったslickというスライダープラグインについて書きます。
