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

その他

サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。

この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。

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

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

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

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

メリット

  • たくさんのコードを触るので仕事してる感がある

デメリット

  • ファイルが増えるごとに大変になる
  • リンクや画像が相対パスだと階層が増えてさらに大変になる
  • ソフトによる一斉置換がちゃんと動いているか不安になる

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

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

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

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

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

メリット

  • 共通部分はひとつのファイルを修正すればOK

デメリット

  • Dreamweaverを使うことが前提

JavaScriptを使う

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

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

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

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

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

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

1:JavaScriptに共通部分を直接書く

その読み込むJavaScriptファイル(上記の例ではtemplate.js)に直接内容を記述します。

function footer(){
    var html = "";

    html += '<footer>';
    html += '<p><small>copyright © All Rights Reserved.</small></p>';
    html += '</footer>';

    document.write(html);
}

2:$.ajaxを使う

他には前にブログでも紹介した$.ajaxを使う方法です。

function footer(){

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

}

こちらはfooter.htmlを用意し、そこに共通部分を記述しておき、そのhtmlファイルをajaxで読み込むタイプです。

相対パスで記述しなければならない場合

リンクや画像の指定がルートパスなら特にこのままで問題ないのですが、相対パスで指定しなければならない場合、このままだと階層が違う時にリンク切れになってしまいます。 その場合どうすればいいのか悩んでいたのですが、こちらの記事にその方法が書いてありました。

「現在いるファイルから見たサイトルートの位置を引数として渡す」とのことで、参考にいままでのコードに当てはめるとそれぞれ

<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);
		}
	});

}

そしてリンクがある場合はfooter.htmlに

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

のように記述すると出来ます。

メリット

  • 共通部分はひとつのファイルを修正すればOK

デメリット

  • JavaScriptをオフに設定されると表示されない
  • 検索エンジンがJavaScript内のリンクをどの程度解析してるかがよくわからないので、SEO的に弱いかもしれない
    (最近はリンクを解析してるという話もあるので今後は気にしなくてもよいかも)

PHPを使う

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

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

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

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

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

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

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

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

メリット

  • 共通部分はひとつのファイルを修正すればOK
  • サーバーで処理されて表示されるので、検索エンジンに影響はない

デメリット

  • サーバーの環境に依存する
  • 拡張子をhtmlで設置したい場合は、htmlファイル内でphpコードを使えるようにするhtaccessの設定が必要な場合がある

SSIを使う

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

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

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

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

メリット

  • 共通部分はひとつのファイルを修正すればOK
  • サーバーで処理されて表示されるので、検索エンジンに影響はない

デメリット

  • サーバーの環境に依存する
  • 拡張子をhtmlで設置したい場合は、htmlファイルでSSIを使えるようにするhtaccessの設定が必要な場合がある

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

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

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

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

メリット

  • 共通部分はひとつのファイルを修正すればOK
  • 最終的にはただの静的ファイルなのでサーバーの環境に左右されない

デメリット

  • ツールの導入にひと手間かかる

様々な方法がありますので、その案件にあった方法をとれれば良いと思います。