更新するのが面倒！サイトの共通部分を簡単に作る様々な方法

がんばって直に書いてるものを置換する

とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。

数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。

<footer>
<p><small>copyright © All Rights Reserved.</small></p>
</footer>

Dreamweaverのテンプレート機能を使う

多くの制作マシンには入っているであろうAdobe Dreamweaverのテンプレート機能を使います。

これは共通部分をテンプレートファイルとして保存し、それを元にそのページ独自のオリジナル部分をコーディングしていきます。
共通部分は他のhtmlファイルでは触れないようになりますので、うっかりそのページだけ共通部分を消してしまうということもありません。共通部分の修正はテンプレートファイルを修正すれば他の全ページも変更してくれます。

ただしhtmlファイル内にテンプレート用のタグが出来てしまいます。一応、[修正→テンプレート→マークアップを省略して書き出し]という手順でテンプレートタグを取り除いたファイルを書き出すことが可能なようです。

Dreamweaver以外でもこのような機能があるソフトであれば同じことが可能と思います。

• テンプレート機能を使ってみよう　パート1：「編集可能領域」と「オプション領域」の使い方 | デベロッパーセンター
• [超いまさら]Dreamweaverテンプレートって便利だね – 日々平穏

JavaScriptを使う

共通部分をJavaScriptを使って同じものを表示させる方法です。

方法としてはまず以下の例のように、共通部分を読み込むhtmlファイルでテンプレートに使用するJavaScriptファイルを読み込みます。

<script type="text/javascript" src="js/template.js"></script>

そして配置したい箇所で以下の記述をします。

<script type="text/javascript">footer();</script>

そしてJavaScript（上記の例ではtemplate.js）に記述する方法が以下になります。

function footer(){
var html = "";
html += '<footer>';
html += '<p><small>copyright © All Rights Reserved.</small></p>';
html += '</footer>';
document.write(html);
}

function footer(){
$.ajax({
url: "footer.html",
cache: false,
success: function(html){
document.write(html);
}
});
}

<script type="text/javascript">footer('../');</script>

function footer(rootDir){
$.ajax({
url: rootDir + "footer.html",
cache: false,
success: function(html){
html = html.replace(/\{\$root\}/g, rootDir); //footer.htmlの{$root}を置換
document.write(html);
}
});
}

<a href="{$root}index.html">TOP</a>

PHPを使う

サーバーサイドプログラムのPHPを使って共通部分のファイルを読み込む方法です。

共通部分は普通にコーディングをして、読み込むhtmlの読み込みたい場所にphpの記述をします。

<?php include ('footer.html'); ?>//相対パス

こちらも共通部分のリンクや画像がルートなら大丈夫ですが、相対パスの場合はもう一工夫必要です。

• htmlファイルのままphp includeし、相対パスで読み込めるようにする | yusk -ユースク-

上記の記事を参考に、階層によってこのように記述します。1階層下の場合は、

<?php $Path = "../"; include ('../footer.html'); ?> //$Pathにルートまでの階層を記述

そして、footer.htmlのリンクや画像のパスの部分をこのようにします。

<img src="<?php print $Path; ?>text.png" alt="">

SSIを使う

SSI（Server Side Include）を使う方法です。使用方法はPHPと似ています。

共通部分は普通にコーディングをして、読み込むhtmlの読み込みたい場所にincludeの記述をします。

<!--#include virtual="/footer.html" --> //ルートからのパス

共通部分の画像やリンクを相対パスにする場合の方法はわかりませんでした。

Node.jsやRubyのツールを使う

Node.jsやRubyのツールを使って共通部分の管理ができます。

自分が知ってるのはJade（テンプレートエンジン）やMiddleman（静的サイトジェネレータ）ぐらいですが、探せばいろいろあるようです。Gruntなどで黒い画面を使い慣れてる人はこちらも少し試せばすぐ使いこなせるのではないでしょうか。

こちらはまだ試してみたことがないので、触る機会があったら別途記事にしたいと思います。