- Coding Methodology
- 第26回 ローカルナビゲーションの設計と作成
第26回 ローカルナビゲーションの設計と作成
多種多様のWebサイトの中でも、グローバルナビゲーション（通称 gnav）と共に頻出するローカルナビゲーション（通称 lnav）。 サイトのコーディングを進めるに辺り、ローカルナビゲーションのコーディングをいかにシンプルに記述するかがコーダーの腕の見せ所となります。今回はローカルナビゲーションの設計の方法をご紹介致します。
ローカルナビゲーションの記述をシンプルにする必要性とは・・・
CSSのスタイルは通常ごく一部のスタイルを除いて下位要素へスタイルが継承される特性がありますが、その特性がゆえにCSSの記述が思わぬところでスタイルが適用される事が頻繁に発生します。そして、そのスタイルを打ち消す為にまた新たにスタイルを追加するという連鎖が起こります。その結果としてCSSの記述が複雑になりメンテナンス性が悪くなります。さらには、ちょっとしたデザインの変更がメンテナンスに丸一日かかる事や、挙句の果てにはローカルナビゲーションを設計し直す必要性が出てきます。
カレント表示をbody class="lnn_nn"で制御する
ローカルナビゲーションをモジュール化した場合、その親要素やbody要素などにページのカレント用クラスを記述する事でカレントを設定できますが、カレント用のCSSを数十行も用意しなければいけません。また、新たにページが追加になった場合にはCSS知識のある作業者が必要になってしまいます。
カレント表示をclass="current"へ
複雑になるCSSへの対策として、a要素へclass="current"などをページ毎に付ける方法もありますが、この方法では、ローカルナビゲーションのソースがページ毎に分離してしまう為、リンク先の追加などの変更を伴うと複数ページのメンテナンスする必要が発生してしまいます。
両方の利点を合わせ持ったJavaScript
上記2つの方法の利点をそれぞれ生かす為に生まれたJavaScriptです。このスクリプトは次の様な動作をします。
- 1．ページを読み込み後、bodyに記述されたクラスを取得します。
- 2．取得したクラスを正規表現を用いて"l03_01"の様に定型化されたクラスを変数へ格納します。
- 3．同じ様に定型化されたクラス"lNav03_01"を持つa要素を探し class="current"を設定します。
- 4．ローカルナビゲーションが入れ子になっており、親ページがある場合は、.parent().show().addClass("parent")の様に、追加のクラスを付ける事も簡単に設定できる様になります。
まだまだ改善の余地のあるスクリプトですが、この様なローカルナビゲーション用のスクリプトを１つ用意しておくだけで、コーディングのソースもシンプルになります。
今回ご紹介した手法とは違った、ブラウザのアドレスバーのURLとa要素のhref属性を比較した上でclass="current"設定をするスクリプトなどWeb上には他にも様々な方法が公開されています。この様にローカルナビゲーション一つをとっても、CSSとJavaScriptそれぞれの利点を上手く利用し設計・準備をしておく事で作業時間を節約する事ができます。
