SSIで共通部分を管理する

SSIを使って、ヘッダーなどの共通部分をまとめて管理してみます。

サンプルコード

SSIはサーバによって使用が許可されていない場合もありますので、まずはSSIを使えるようにしてみます。
.htaccessを使って、ApacheでSSIを使えるようにする想定で試してみます。

.htaccessに以下を記述して、SSIを使用するルートディレクトリにアップロードします。

Options +IncludesNOEXEC
AddHandler server-parsed html

今回はhtmlファイルでインクルードするのみの想定で設定しています。
　

これでSSIが使用できるようになったはずなので、次に共通管理用のファイルを作成してみます。
今回はヘッダーとフッターをSSIでインクルードする想定で作成してみます。

/includes/header.html

<header class="header">
	<p class="header_sitename">サイト名</p>
</header>

/includes/footer.html

<footer class="footer">
	<small class="footer_copy">copyright aaaaa.</small>
</footer>

ヘッダーとフッターをインクルードしてみます。
SSIでインクルードする場合、指定形式がfileとvirtualの2種類あります。

<!--#include file="インクルードするファイル名" -->
<!--#include virtual="インクルードするファイル名" -->

fileとvirtualの違いとして、fileは自身より上の階層にあるファイルの読み込みやルートパスでの指定ができません。
例えば、以下のようにヘッダーとフッターを読み込んでみます。

/index.html

<!--#include file="includes/header.html" -->
<div class="contents">
	<p>コンテンツ部分</p>
</div>
<!--#include virtual="includes/footer.html" -->

この場合、読み込むファイルは自身より下の階層にあるため、ヘッダー・フッター共にインクルードできます。
ブラウザで確認すると、以下のように表示されました。

HTML

<header class="header">
	<p class="header_sitename">サイト名</p>
</header>
<div class="contents">
	<p>コンテンツ部分</p>
</div>
<footer class="footer">
	<small class="footer_copy">copyright aaaaa.</small>
</footer>

次に自身の階層を一つ下に移動させてみます。

/test/index.html

<!--#include file="../includes/header.html" -->
<div class="contents">
	<p>コンテンツ部分</p>
</div>
<!--#include virtual="../includes/footer.html" -->

この場合、fileで指定しているヘッダーはエラーが表示されて読み込めません。
ブラウザで確認すると、以下のように表示されました。

HTML

[an error occurred while processing this directive]
<div class="contents">
	<p>コンテンツ部分</p>
</div>
<footer class="footer">
	<small class="footer_copy">copyright aaaaa.</small>
</footer>

最後に階層を一つ上に戻し、読み込みをルートパスに変更してみます。

/index2.html

<!--#include file="/includes/header.html" -->
<div class="contents">
	<p>コンテンツ部分</p>
</div>
<!--#include virtual="/includes/footer.html" -->

この場合も先ほどと同様に、fileで指定しているヘッダーはエラーが表示されて読み込めませんでした。

HTML

[an error occurred while processing this directive]
<div class="contents">
	<p>コンテンツ部分</p>
</div>
<footer class="footer">
	<small class="footer_copy">copyright aaaaa.</small>
</footer>

【参考サイト】

• とほほのSSI入門
• SSI(Server Side Include)で外部ファイルを読み込んでみよう – Webシステムのツボ