SSI（Server Side Include）の利用
AngularJSなどのMVCフレームワークにまだ慣れていない頃、手軽に共通のパーツを利用できるようにできないかと思い、存在自体は以前から知っていたSSIを利用してみることにしました。
SSIは複雑な動的コンテンツを作成するには向きませんが、比較的簡単に導入できるので、ちょっとしたものであれば利用してみてもいいと思いますが、SSIを利用したサイトは最近ではほとんど見かけないですね。
バージョン）
Apache 2.2
目次
- SSIを有効にする
- SSIを利用して共通のパーツを埋め込む
- 参考リンク
SSIを有効にする
SSIを利用するためにはApacheの設定でSSIを有効にする必要があるので、SSIを利用したいディレクトリ配下に以下の設定情報を追記した「.htaccess」ファイルを配置します。
Options +Includes
AddType text/html shtml
AddHandler server-parsed shtml
SSIを利用して共通のパーツを埋め込む
共通のヘッダー情報「head.html」と共通のメニュー「menu.html」をページ「page01.shtml」に埋め込む場合、以下のように作成します。
◆ 共通のヘッダー情報「head.html」
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="common.css" />
<script type="text/javascript" src="common.js"></script>
◆ 共通のメニュー「menu.html」
<div>
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</div>
◆ ページ「page01.shtml」
<html>
<head>
<title>ページ１</title>
<!--#include virtual="head.html" -->
</head>
<body>
<!--#include virtual="menu.html" -->
<div>
ページの内容
</div>
</body>
</html>
4行目で共通のヘッダー情報「head.html」を埋め込み。
8行目で共通のメニュー「menu.html」を埋め込み。
SSIによって動的に作成するコンテンツは拡張子「shtml」で作成する。
SSIで利用できる機能は他にもあるので、それについては下記のリンクを参照。