【所感】WEBサイトのヘッダ・フッタの描画方法

今制作している自サイトは、PHPやRuby等を使わずに、極力ピュアなHTMLとJavaScriptで作ることをモットーにしている。将来的な負荷に備えるというあまり現実味のない理由と、可搬性の高さを目指して。

プログラミング言語が必要になる場合は、最低限の値だけを吐くコードを書いて、Ajax通信でその値を取得するようにしている。これもビューとビジネスロジックの分離と呼ぶのだろうか。きっと呼ばない。

あと、全てのHTMLをStrictにして、HTML ValidatorにOKと言ってもらうことを義務としている。無駄なことにこだわることこそ、プログラマの本分と知る。


で、そういったサイトを作る場合、コンテンツのヘッダ的な部分やフッタ的な部分、パンくずなどの、全てのページで共通の項目を、どうまとめるべきか悩む。PHPとかJSPなら共通ファイルを一言includeするだけなわけですが、HTML+JavaScriptだと、どうするのが適当なのだろう。

1. 全部ベタ書き
ベタで全てのHTMLファイルにヘッダとフッタを書いていく。共通部分に変更が生じた際は、全部まとめて置換することになる。ありえん。

2. インラインフレーム
宗教的な理由で使えません。

3. Objectタグ
宗教的には問題ないのだけど、FirefoxでもSafariでもChromeでもOperaでも問題なく表示できるのに、ヤツで表示すると変な枠線が出てしまう。いろいろ試してみたけど、今のところうまくその枠を外せないでいます。どうやるのだろう。そしてまたお前か。またお前は私の行く手を遮るのか。

4. 別ファイルにしてAjax通信で取得
header.htmlとかfooter.htmlみたいなのを作って、それをAjax通信で読み込む。悪い方法ではないけど、リクエスト数が増えることと、描画が若干遅れて発生するのが好みじゃない。

5. 外部jsファイル内で描画
innerHTML=ごにょごにょと書く。レスポンス的には4よりは全然良いと思う。但し可読性は4の方が良い。

6. スタイルシートで背景として描画
ヘッダ、フッタが画像の場合限定なので使う場面は少なそうだけど、最も良い感じに描画が始まってくれる。

7. SSIを使う
確か今のレン鯖でも使えたような気はするけど、SSI使うならPHP使ってしまっても良いような気が……


というわけで、とりあえず、5かな？
3でIEで綺麗に表示する方法が見つかれば、そちらが良いのだけど。明日、暇なときにさらっと調べてみよう。