見出し画像
Photo by qzqrnl

#19 SSIでHTMLの共通部分を管理する【ぴよぴよコーダーの開発日記】

em

ヘッダーやフッターなどの共通パーツを管理するときに、やり方はいろいろあると思いますが、jQueryならajaxのload関数でファイルロード※１したり、PHPならinclude関数※２とか、今回は昔懐かしSSI(Server Side Include)という方法で動的にコンテンツを生成する技術を使ってみます。

※１ jQueryのload関数を使った共通ファイルの読み込み

$("footer").load("footer.html?date=200322");

※２ PHPのinclude関数を使った共通ファイルの読み込み

<?php include "footer.html?date=200322"; ?>

さて、SSIを使うには、使用したいディレクトリに、まず.htaccessでSSIでhtmlを読み込めるようにするという設定を書く必要があります。ちなみにhtaccessとは、ディレクトリ単位のWebサーバー設定ファイルです。

Options +IncludesNOEXEC
AddHandler server-parsed html

上記のコード「IncludesNOEXEC」は、SSIを有効にするが、EXEC命令（CGIプログラムを実行する命令）は無効にするという意味。CGIを無効にすることで、CGIのセキュリティ上の問題を回避できる。

HTMLには、下記のように、コメントアウトの書き方で、header.htmlを読み込む。#include virtualとは自身より上の階層にあるファイルの読み込みが可能な命令文です。

<!DOCTYPE html>
<html>
<head>
 <title>SSI</title>
</head>
<body>
 <!--#include virtual="header.html" -->
</body>
</html>

今回つまづいたところといえば、header.htmlじゃなくて、header.txtのようなテキストファイルを読み込むには、「AddHandler server-parsed txt」かなと思ったのですが、そんなことはなく「AddHandler server-parsed html」でテキストファイルも展開されました。逆に、index.txtから(そんなファイルがある状況は思い浮かばないけど)、header.htmlを読むときに、「AddHandler server-parsed txt」という記述が使えます。

余談：.htaccessすら設定したくない場合は、htmlの拡張子を.shtmlに変更するだけで自動的にSSIで表示されます。

参考：SSIで共通部分を管理する

参考：SSIの仕組みと有効化・制限の設定

参考：.htaccessとは？

参考：【SSI】ssiを実装するにあたって

この記事が気に入ったらサポートをしてみませんか？