affiliate.ks-product

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

【JavaScript】ヘッダーなどHTMLの共通部分をJSで外部化してメンテナンス性を高めよう

      2016/03/03

近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上の為にヘッダー、フッター、グローバルナビゲーション等、各ページの共通部分は外部ファイル化してインクルード(読み込み)することが多いと思います。

しかし、WordPressやMovableTypeが使えない、ましてやPHPなどのサーバーサイド言語が使えない案件も多いかと思います。そこで紹介するのが今回のテクニックです。

サーバーサイド言語が使えなくてもJavaScriptがあるじゃない

共通部分の外部化・インクルードはサーバーサイド言語でなくてもJavaScriptで行えます。iPhoneの登場以降JavaScriptの地位はかなり向上してデファクトスタンダード的な存在になりましたし、サーバーサイドJavaScriptなんてものもありますから、その人気にあやかりましょう。

とりあえずJavaScriptを使ってヘッダーを表示してみる

早速、JavaScriptでインクルードするソースコードサンプルをご紹介します。

まずはHTML側のソースコード。

<!--head要素内に記述-->
<script type="text/javascript" src="js/common.js"></script>

<!--body要素内のヘッダーを埋め込みたい箇所に記述-->
<script type="text/javascript">
	writeHeader();
</script>

続いてJavaScript側(common.js)のソースコードを下記のように記述。

	function writeHeader(){

		var html = "";

		html += '<div id="header">';
		html += '<ul id="gnav">';
		html += '<li><a href="about/index.html">About</a></li>';
		html += '<li><a href="product/index.html">Product</a></li>';
		html += '<li><a href="policy/index.html">Policy</a></li>';
		html += '</ul>';
		html += '</div>';

		document.write(html);
	}

これでグローバルナビゲーションが表示されたかと思います。

ヘッダー用HTMLを外部化してみる

上記のソースコードではJavaScript内に直接HTMLを埋め込んでしまっているので、メンテナンス性がよくないですよね。というわけでHTMLも外部化してしまいましょう。HTMLの外部読み込みは少々ハードルが高いのでjQueryを使います。

なお、外部HTMLの読み込み(Ajax)はローカルでは動作しません。テストサーバーで確認するか、XAMPP導入でPCをサーバー化する必要があります。

<!--common.js読み込み前にjQueryを読み込みます-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

HTML側の修正はこれだけ。続いてcommon.jsを下記のように変更します。

	function writeHeader(){

		$.ajax({
			url: "header.html", //パスはcommon.jsが読み込まれたHTMLファイルが基準になります
			cache: false, //キャッシュを利用するか(お好みで)
			async: false, //非同期で読み込むか(お好みで)
			success: function(html){
				document.write(html);	
			}
		});

	}

外部化したヘッダー用ファイル(header.html)の中身はこちら(html、bodyタグ等は記述しないでください)。今回の例ではheader.htmlはメインのHTMLと同階層に配置します。

<div id="header">
	<ul id="gnav">
		<li><a href="about/index.html">About</a></li>
		<li><a href="product/index.html">Product</a></li>
		<li><a href="policy/index.html">Policy</a></li>
	</ul>
</div>

これで、JavaScriptとHTMLが分離されメンテナンス性が大幅に向上しました。
しかし、現時点ではこのソースコードはある問題を抱えています。

階層によるパスの変化に対応する

ここまでのソースコードで問題なく動くケースも多く存在しますが、サイトの階層が多層になっている場合、階層ごとにパスを書き換えないとリンク切れを起こしてしまいます。

テスト用サーバーまたはサブドメインが用意されている場合はこれで解決

各パスをサイトルート「/」から始まる形式にします。
テスト用サーバーまたはサブドメインが用意されている場合はこの方法を選択してください。これで解決です。

同じドメイン内にテスト用ディレクトリを設ける場合

同じドメイン内にテスト用ディレクトリを設ける場合は上記の方法ではうまくいきません。
例えば、「http://example.com/test/」と、このようにtestという名前でテスト用ディレクトリを作成します。こうすると本番環境ではうまく動作しますが、テスト環境ではうまくいきません。本番であろうとテストであろうとサイトルートは「http://example.com/」だからです。

困りましたね。でも安心してください。
現在いるファイルから見たサイトルートの位置を引数として渡す」ことで解決可能です。

早速ソースコードを見ていきましょう。まずはHTML側から。

<script type="text/javascript">
	writeHeader("./"); //先述のサンプルからこの部分だけ変更しています
</script>

writeHeader関数に「./」を引数として渡しています。ちなみに「./」は現在位置を表します。つまり、現在位置がサイトルートであるということをwriteHeader関数に伝えています。

上記はルート上にあるindex.htmlに記述した例ですが、/about/index.htmlといった2階層目のファイルなら「../」3階層目のファイルなら「../../」を指定してください。

続いてJavaScript側は下記のように変更します。

	function writeHeader(rootDir){

		$.ajax({
			url: rootDir + "header.html", 
			cache: false,
			async: false, 
			success: function(html){

				html = html.replace(/\{\$root\}/g, rootDir);
				document.write(html);
			}
		});

	}

解説の前にheader.htmlの内容も見ていきましょう。

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

まず、header.htmlの解説をします。変更点は1つだけ、パスの前に「{$root}」という文字列が追加されています。この文字列自体には特別な意味はありません。任意の文字列に変更することが可能です。

次に、JavaScript側。

HTML側で指定された引数がrootDir格納されています。html.replaceの部分では何をしているのかというと、rootDirの値でheader.html内の「{$root}」を置換しています。

この部分の記述は少々特殊で「正規表現」というものを使用しています。とりあえず今は置換を行っているということが分かれば大丈夫です。

以上で完成です。

ページごとにルートディレクトリの位置を指定する必要こそあるものの、一度作ってしまえばヘッダーの修正があってもheader.htmlを修正すれば済んでしまいます。

また、このテクニックはヘッダー以外にもフッター、ローカルナビゲーション、ちょっとしたガジェットというように様々な箇所で活用できますので是非お試しください。


サンプルデータを用意しましたので参考にしてみてください(上記の例題よりも実践的なものに手直ししています)。改変等ご自由にしていただいて問題ありません。ローカルでは正常に動作しませんのでご注意ください。また、ダウンロードされる前にこちらの記事も是非ご覧ください。本記事の完結編的な内容となっています。

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

JavaScriptでインクルードすることの問題点と解決策

最後にJavaScriptでインクルードすることの問題点を書いておきましょう。

JavaScriptで動的に生成された部分は基本的にクローラーは認識しません。つまり対策を施さないとクローラーが巡回出来ないということです。

2015年6月現在クローラーの進化によりJavascriptによって生成されたコンテンツも解析されるようになりました。今まではSEOを考え、サイトマップを送信したり、PHPやSSIでヘッダーフッターを出力したりしていましたが、そんな面倒な事は一切必要ありません。Javascriptだけで完結します。

より便利により柔軟に使える改良版も有ります。もちろん無料!

このライブラリの問題として、各ページで共通のファイルを利用しているため、現在いるページを示すためのナビのアクティブ化が難しいという欠点があります。

それを解決するのがこの改良版です。

サンプルをダウンロード
ヘッダー外部化のサンプル(改良版)をダウンロードする

使い方はについてはこちらで解説していますのでご利用の際はご覧ください。

いかがでしたでしょうか?
ぜひ、制作・更新の効率化に是非お役立てください。

また、あなたがWebデザイナーであれば以下の記事もオススメですよ。是非ご覧ください。

このデザインは本当に正しい?あなたは『商品が売れない Webデザイナー』ではありませんか?

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