SSIを使ってHTML中に別ファイルを合成する記述
それでは、実際にSSIを使ってファイルを合成するようにHTMLを記述してみましょう。
ここで作成するファイルは、次の3ファイルです。
- 表示用ページを作るHTMLファイル（show.shtml）
- 印刷用ページを作るHTMLファイル（print.shtml）
- コンテンツ本体を記述したファイル（contents.html）
呼び出す側の記述（＝SSIの記述）
表示用ページのHTMLや、印刷用ページのHTMLには、次のような感じでSSIを記述します。
SSI部分は、たったの1行です。
<head>
<title>表示用ページ</title>
</head>
<body>
<div>ヘッダとか</div>
<div>メニューとか</div>
<!--#include virtual="./contents.html" -->
<div>広告とか</div>
<div>フッタとか</div>
</body>
</html>
▲表示用 ／ 印刷用▼
<head>
<title>印刷用ページ</title>
</head>
<body>
<div>シンプルなヘッダ</div>
<!--#include virtual="./contents.html" -->
<div>シンプルなフッタ</div>
</body>
</html>
上記の表示用HTMLと印刷用HTMLには、同じSSIの記述があります。以下のようなものです。
この記述によって、（この行を記述した箇所に）「contents.html」ファイルの中身がそのまま合成されます。
とても簡単ですね。
SSIの書き方
SSIは、HTMLのコメント内にコマンド（命令）を埋め込む形で記述します。 ですから、「 <!-- 」～「 --> 」で囲まれているのです。
「#include」（インクルード）は、ファイルを合成する命令です。 合成するファイルは、「virtual=」（バーチャル）の後に記述します。
「シャープ(#)・インクルード(include)・バーチャル(virtual)」と覚えておきましょう。
ファイルは、絶対パスでも相対パスでも記述できます。
たとえば、1つ上のディレクトリにあるtomoyoディレクトリの中にあるsakura.txtを合成したい場合は、次のように記述します。
このように、相対パスで記述できます。
「/」で始まる絶対パスでも記述できますが、「 http:// 」から始めて他のサーバにあるファイルを指定することはできません。
コンテンツ本体を記述したファイルの書き方
さて、SSIによって合成される側（呼び出される側）のファイルの記述にも注意点があります。
以下の点に注意して下さい。
- 本当に中身だけを書く
たとえば、以下のように書きます。
<p>
余計なヘッダは付けずに、合成したい中身だけを記述します。
</p>
SSIは、ファイルの中身をそのまま合成します。 ですから、合成される側のファイルは、HTMLとして成立している必要はありません。 本当に中身だけを記述しておきます。
おわりに
今回は、SSIを使って表示用ページと印刷用ページを楽に作成する方法をご紹介致しました。
SSIは、簡単に使えて便利な機能ですから、ぜひいろいろ活用してみて下さい。
なお、印刷時に余計なメニューなどを印刷させない方法としては、スタイルシートを活用する方法もあります。 スタイルシートを活用すれば、わざわざ「印刷用ページ」を用意しなくても印刷時に不要なものを隠せますので無駄がありません。 （ただし、「表示されているままに印刷したい」という場合に対応できなくなってしまうデメリットもありますが。）
スタイルシートを活用した方法は、記事「印刷用に別デザインを用意！ 印刷専用のスタイルシートを作る」をご参照下さい。
