html

共通化を行なってhtmlの運用をスマートに!

halloween

初めまして!マークアップエンジニアのAkihisaです。

制作時にも役立ちますが運用で必須のhtmlの共通化のお話です。

数ページならともかく、中規模サイト~大規模サイトで必要不可欠なhtmlの共通化…
ヘッダーやフッターなどでよくお目にかかると思います。

共通部分をベタ書きで行なっている場合、軽微な修正でも大変な修正作業と確認が必要となりとても不便で面倒です。

可能なら共通化出来る部分はなるべく共通化をしてサイト制作・運用をスマートに行いたいものです。
今回はその共通化の方法をいくつかご紹介致します。

 

JavaScript

共通化する部分をすべて外部JavaScriptに記述してしまう方法です。

<script type=”text/javascript” src=”js/header.js”></script>

この方法の良いところは、サーバ環境に依存しないのでどんなサーバでも使用出来ることです。
しかしその反面、ブラウザ環境に依存してしまうのが欠点です。

JavaScriptを使用する場合は、ユーザがブラウザのJavaScriptを切っていることも想定しないといけないので、
この方法はそこまで良いとはいえません。

 

 

 

PHP

共通化する部分をphpのinclude関数を使って外部phpから呼び出す方法です。

<?php
include $_SERVER[‘DOCUMENT_ROOT’].’/include/header.php’;
?>

$_SERVER[‘DOCUMENT_ROOT’]というのは、ドキュメントルートを呼び出す関数です。

PHPが使えるサーバ環境である必要がありますが、ブラウザ環境に依存しません
使用する場合は拡張子を「.php」にするか、「.htaccess」の設定で「.html」でもPHPを動くようにする必要があります。

 

 

 

SSI

IT用語にはSSではじめるワードが多いですね…SSL、SSH、SSI etc…
SSIというのは、Server Side Includeの略でその名の通りincludeを簡単にすることができます。

 <!––#include file=”/include/header.html” ––>

SSIの記述方はちょっと変わっていてhtmlのコメントのような書き方をします。
実際のhtmlソースはinclude先が埋め込まれた状態ものものが表示されるため、
外部からはSSIが使われているかどうかはわかりません。
PHP同様、ブラウザ環境に依存しない反面、サーバでSSIが使えるようにする必要があります。
通常SSIを使う場合は「.shtml」という拡張になりますが、「.htaccess」の設定で「.html」でも使用出来ます。

 

 

iframe

「アイフレーム」とよく言ってしまいますが正式には「インラインフレーム」と読みます。

<iframe src=”/include/header.html” frameborder=”0″ width=”900″ height=”50″></iframe>

書いておいてアレですが、お薦めしません。

<iframe>はブラウザによって差異が起きることがあり、非常に扱いづらいhtml要素です。
htmlソース的にも<iframe>としか表示されないので、SEO的にもよろしくないと思われます。

 

 

 

Dreamweaverのテンプレート機能

Adobe製品のDreamweaverには、テンプレート機能というものがあります。
サイト全体の共通部分と各ページの「編集可能領域」を分けることで、スマートにサイト制作・運用が行えます。
ただし、複数人によるサイト運用…特にクライアント側でhtmlをいじる場合などには注意が必要です。
使い方の詳細は、Adobeの公式サイトに使用例が掲載されていましたのでそちらを参照ください。
ほんとDreamweaver便利ですよね…私は使っていませんけど。

 

 

まとめ

結局どれがいいのか?と聞かれればPHPかSSIがお薦めです。
なぜなら、htmlソースが実際の表示に準拠するものになっているのでSEO的にも問題なく、
可読性も良いからです。
今時PHPもSSIも使えないサーバも珍しいので、可能であれば積極的に導入していきたいです。

おわり。

photo by mauricesvay