affiliate.ks-product

アフィ収入月10万円以下の初心者を対象に、アフィリエイト、SEO、セールスライティング、マーケティングなどネットで安定して稼ぐ方法を分かりやすくまとめています!関連書籍のレビューも書いています

【サンプル付】外部化したヘッダー・グロナビの現在位置をアクティブにするテクニック【自動化】

      2015/06/28

javascript-common-parts-external-activate3

以前投稿したヘッダーなどを外部化するテクニックの記事が大変好評のようでご利用いただいた皆様ありがとうございました。今回はその続編記事になります。事前知識として前回の記事をご覧いただくことをお薦めします。

実はヘッダーなどの共通パーツを外部化すると一つ問題が発生します。それは全ファイル共通の記述になる為、例えばグロナビ(グローバルナビゲーション)の現在いるページに対応するボタンをアクティブにしたいという場合頭を悩ませることになるかと思います。

今回はカレントページに対応するボタンのアクティブ化、さらにはそれを完全自動化するテクニックを解説します。サンプルファイルと合わせてご覧ください。

まずは、BADケースからご覧いただきましょう。

従来のボタンアクティブ化の方法

グロナビをアクティブ化する方法として最も一般的なものといえば該当ページに対応したボタンにclassを設定することではないでしょうか。例えばこのようなものです。

<ul>
	<li>メニュー1</li>
	<li class="active">メニュー2</li>
	<li>メニュー3</li>
</ul>

この例では2番目のボタンがアクティブになっています。
オーソドックスな方法ですが、今回のようにグロナビを外部化している場合は個別にclassを設定できませんのでこの方法は使えないわけです。

以降ではこの問題の解決策をお教えします。

各HTMLファイル手動で識別子を設定する方法

外部化したヘッダー・グロナビをアクティブ化するには各ページに識別子を設定することです。まずはソースコードをご覧ください。こちらの解説はサンプルファイルの【case1】ディレクトリのファイルを元に行っています。

<div id="header">
	<ul id="gnav">
		<li class="about"><a href="{$root}about/index.html">About</a></li>
		<li class="product"><a href="{$root}product/index.html">Product</a>
		<ul>
		<li class="product-car"><a href="{$root}product/car/index.html">Car</a></li>
		</ul>
		</li>
		<li class="policy"><a href="{$root}policy/index.html">Policy</a></li>
	</ul>
	<div class="home"><a href="{$root}">Home</a></div>
</div>

上記は外部化したヘッダーのソースコードです。各リストが識別できるようにそれぞれにclassを指定しています。「{$root}」に関しては前回記事をご覧ください。

<body class="product">

各ページのbody要素にはページを一意に識別するためにclassを設定しています。勿論idでも大丈夫です。命名はわかり易いように外部化したヘッダーのリストに設定されているものと同じにしています。

body.about #gnav li.about>a { background:#CF9; }
body.product #gnav li.product>a { background:#CF9; }
body.product-car #gnav li.product-car>a { background:#CF9; }
body.policy #gnav li.policy>a { background:#CF9; }
body.home .home>a { background:#CF9; }

セレクタの記述はbody要素から指定してどのページのどのボタンをアクティブにすればいいか一意に識別できるようにします。例えば、1行目の例ではaboutページのaboutボタンがアクティブになるといった具合です。

ある程度自由もきくので、ヘッダーを外部化した場合、この方法が最も活用されるかと思います。しかし、1ページ1ページbodyにclassを設定するのが面倒くさいというわがままな人もいるかと思います。そんなあなたは次を読みましょう。

識別子の設定を完全自動化する方法

サンプルファイルの【case2】では先ほどの例で行っていた各ページのbody要素にclassを設定する作業を自動化しています(配布しているサンプルでは活用しやすいように記述を多少増やしています)。ここではその説明を行います。

body要素にclassを設定しないこと以外は先ほどの内容と変わりませんので割愛します。ここでは自動化するスクリプトについて解説します。前回記事のcommon.jsに下記のスクリプトを追加しています。

$(function(){

	var base = "/ex_header_activate/case2/"; //各々設定してください
	var path = location.pathname.replace(base,""); 
	var file = "";
	path = path.replace(/index\..*?$/,""); 

	if(path.match(/[php|html|htm]$/) !== null){ 
		file = path.replace(/.*\//,""); 
		file = file.replace(/\..*?$/,""); 

		if(path.match(/.*\//) !== null){ 
			path = path.match(/.*\//)[0]; 
		}
	}

	path = path.replace(/\/$/,""); 
	path = path.replace("/","-"); 

	if(!path) path = "home"; 
	if(path.match(/\./) !== null) path = ""; 

	if(path && file){ 
		$("body").addClass(path+"_"+file);
	}else if(path && !file){ 
		$("body").addClass(path);
	}else if(!path && file){
		$("body").addClass(file);
	}

});

ブログの体裁上コメントを入れると改行でソースが読み難くなるため削除しています。サンプルファイルにはコメントは付いていますので合わせてご覧ください。

まず始めに、このサンプルをご利用いただく為には3行目にあるパスの記述を配置するディレクトリに応じて変更する必要があります。また、本サンプルは商用利用・改変はご自由にしていただいて問題ありませんが、あくまでもサンプルであるためディレクトリ構造や命名の仕方によっては動作しなくなる場合があります(ファイル名にハイフンやピリオドを含める等)。自己責任でご利用ください。

この記事を読んでいる方であれば1行1行解説する必要は無いと思いますので、何をやっているかだけ説明します。大まかに言うと処理の工程はこの3つです。

  1. 現在いるページのパスを取得
  2. 正規表現を使いパスをクラス名に変換
  3. クラス名をbody要素に設定

1についてはlocation.pathnameでパスを取得するわけですが、どこに設置しても使えるように変数baseとの差分のパスを取得しています。

2ついてはパスを変換してクラス名として利用できるようにします。
例えば、「/product/car/」を「product-car」変換しています(スラッシュはクラス名には利用できません)。また、クラス名に不要な文字列(ファイル名等)を削除しています。

3については1、2で生成したクラス名を設定しているだけです。

正規表現を活用しよう

結構ゴリ押しなかんじのソースですが肝はやはり正規表現でしょうか。正規表現はミニ言語と言われるくらいなのでJavaScriptとはことなる知識が求められますが、文字列操作には抜群のパフォーマンスを発揮します。正規表現はJavaScriptに限らず様々な言語、さらにはテキストエディタやDreamwevarにも組み込まれていて活用の幅はかなり広いです。利用したことが無い人は覚えましょう。世界が変わりますよ。

↓正規表現について書かれている書籍で特に評価の高いものを紹介します。よかったら参考にしてみてください。


サンプルデータを用意しましたので上記の解説と合わせて参考にしてみてください。改変等ご自由にしていただいて問題ありません。ローカルでは正常に動作しませんのでご注意ください。またご利用いただくにはjsファイルのパスの記述を設定していただく必要があります。詳細は記事本文をご覧ください。

サンプルをダウンロード
ヘッダー外部化のサンプルをダウンロードする

おわりに

いかがでしたでしょうか?
うまく利用すれば作業の効率化、メンテナンス性の向上が見込めると思うので是非試してみてください。また、今回はJavaScriptによる外部読み込みの例ですが、SSIやPHPでインクルードした場合でもそのまま使えるはずなので活用してみてくださいね。

 - Web制作テクニック , , , , ,