SSI（Server Side Includes）の基本・入門

更新：2017-05-16

遠い昔、自サイトでSSI（Server Side Includes）を使っていたことがあった。 PHPやJavaScriptなどが充実する昨今需要があるか分からないが、基本的な使い方を記録しておく。

SSIの詳しい説明はApacheの公式サイト Server Side Includes（SSI）入門（Apache）などにある。

事前準備

.htaccess

SSIが使えるように .htaccess に以下のように書く。

Options +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

さくらインターネットのレンタルサーバでは既に設定されているので、これらを記述する必要はない。 .htmlでSSIを動作させたい場合は.shtmlを.htmlにする。

基本的な記述例

SSIは以下のようにHTML中に命令を記述して使用する。

<html>
<body>

現在の日時：<!--#echo var="DATE_LOCAL"-->

</body>
</html>

日時

現在の日時とファイルの最終更新日時

以下のように現在の日時やファイルの最終更新日時を表示できる。

現在の日時 <!--#echo var="DATE_LOCAL"-->
SSIを実行しているファイルの最終更新日時 <!--#echo var="LAST_MODIFIED"-->
指定したファイルの最終更新日時 <!--#flastmod file="example.html"-->

最終更新日時というのは Windows など別の端末で編集したファイルの更新日時ではなく、サーバー上での更新日時。

フォーマット

時間は好きなようにフォーマット（書式）を指定でき、以下のようなものがある。

%y　・・・年（00～99）
%m　・・・月（01～12）
%d　・・・日（01～31）
%H　・・・時（00～23）
%M　・・・分（00～59）
%S　・・・秒（00～59）
%A　・・・曜日（Monday～Sunday）
%p　・・・午前・午後（AM・PM）
%B　・・・月（January～December）
%h　・・・略した月（Jan～Dec）
%a　・・・略した曜日（Mon～Sun）

最初にフォーマットを指定してから日時を表示させる。

<!--#config timefmt="20%y-%m-%d"-->
<!--#echo var="DATE_LOCAL"-->

CSS（スタイルシート）を更新したら新しいCSSを自動的に反映させる

CSSを更新しても、ブラウザのキャッシュをクリアしたり、ブラウザをリロードするなどしないと新しいスタイルシートが反映されない。そこで新しいCSSを読み込ませるため、以下のようにCSSのファイル名の後（引数）に日時などを書く場合がある。

<link rel="stylesheet" type="text/css" href="index.css?20170516" />

こうすることで、ファイル名が同じCSSでも別物として扱われて強制的にCSSを読み込ませることができる。そこでSSIを利用してCSSファイルの更新日時を引数に付加すれば、手作業で引数を書き換えなくても、CSSファイルを更新したときに自動的に新しいスタイルシートを反映させられる。

<!--#config timefmt="%y%m%d%H%M%S"-->
<link rel="stylesheet" type="text/css" href="index.css?<!--#flastmod file="index.css"-->" />

引数に現在の日時を書いて毎回新規にCSSを読み込ませることもできるが、サーバーに無駄な負荷がかかるのであまり良くない。

ファイル

ファイルの情報

ファイル名やファイルサイズを表示できる。

自身のファイル名 <!--#echo var="DOCUMENT_NAME"-->
自身のファイルのURI <!--#echo var="DOCUMENT_URI"-->
ファイルサイズ <!--#fsize file="example.html"-->

フォーマット

ファイルサイズのフォーマットには以下のようなものがある。

bytes　・・・バイト
abbrev　・・・K（キロ）やM（メガ）などを使った短縮表示

最初にフォーマットを指定してからファイルサイズを表示させる。

<!--#config sizefmt="bytes"-->
<!--#fsize file="example.html"-->

他のファイルを読み込む

外部のファイルの内容を挿入して表示（インクルード）できる。ファイルのパスは相対パスや絶対パス（ルートからのパス）を指定できる。相対パスはカレントディレクトリ以下の階層を指定でき、../ を使って上の階層は指定できない。

相対パス <!--#include file="data/example.html"-->
絶対パス <!--#include virtual="/hoge/example.html"-->

ページのヘッダやフッタなど各ページ共通のものを別のファイルとして用意して読み込ませるなどの使い方ができる。

プログラムを実行する

CGIプログラムを実行し、その結果を表示できる。

HTML側

<!--#exec cmd="counter.cgi"-->

Perl側

#!/usr/bin/perl

$cntlog = "counter.txt";

open(LOG,"$cntlog");
	while(<LOG>){
		$cnt=$_;
	}
	$cnt++;
close(LOG);

open(LOG,">$cntlog");
	print LOG "$cnt\n";
close(LOG);

print $cnt;
exit;

はてな

Bluesky

カテゴリ