My Color　「ダンクハーツ-谷春樹Blog-」

一度制作したWebサイトの更新のしやすさを向上するために、プログラムのインクルードを利用して「サイドメニュー」や「ヘッダー」をテンプレート分けしている人も多いと思います。

簡単にHTMLをインクルードする方法として、phpが利用できるサーバーであれば<?php include"ファイル名" ?>と記述したり、SSIが利用できるのであれば<!--#include file="header.html" --> と記述する方法があります。

今回、phpもSSIも利用できないサーバーでサイトのパーツをテンプレート化できたらなぁ・・といろいろ探していたらついに発見！
Javascriptを利用してHTMLのインクルードを実現している方法があったのでご紹介。

参考サイトは「Displaying source code with Ajax」
上記のサイトで配布している、Ajaxフレームワークの「jquery-1.2.2.pack.js」と「ajaxcodedisplay.js」を利用すれば簡単な記述でHTMLをインクルードできます。

ただ、上記で配布されているjsだとHTMLをインクルードした際にHTMLタグがエンコードされてしまい、「<br />」が「&lt;br /&gt;」のようにエンコードされて表示されてしまうので、使いやすいように修正しました。

ダウンロードはこちらから

• jquery-1.2.2.pack.js
• ajaxcodedisplay-or.js

記述方法

使用するために、まず「jquery-1.2.2.pack.js」と「ajaxcodedisplay-or.js」を読み込みます。

<script type="text/javascript"　src="jquery-1.2.2.pack.js"></script>

<script type="text/javascript"　 src="ajaxcodedisplay-or.js"></script>

あとは簡単！a要素のclass指定で"codeexample"を指定すれば、リンク対象のファイルがインクルードされます。

<a href="sample.html" class="codeexample"></a>

これだけで簡単にHTMLをインクルードできます。
仕組みは、javascriptでiframeを記述して、その中に対象ファイルを読み込んで・・・みたいになってますが、正直よくわかりません（汗

また、「ajaxcodedisplay.js」ファイルを利用すると「class="codeexample lines[1,5,9-14,18-19]"」のように記述すれば特定の行を指定してインクルードもできるようです。