【ホームページ作成】HTMLの共通部分をSSIで効率管理

共通部分を毎回書くのは非効率的！

サイト内の各ページに「共通部分」が存在する場合、全てのHTMLファイルに同一のHTMLソースを記述（コピー）するのは非効率的ですね。その共通部分を更新したい場合には、全てのHTMLファイルの中身を同時に更新しなければなりませんから。

もし、共通部分を別ファイルに独立させることができれば、効率的だと思いませんか？それなら、共通部分を更新したい場合でも、たった1ファイルを更新するだけで、全ページに更新が反映されることになりますから。

SSIと呼ばれる方法を使うと、上記のことは簡単に実現できます。
今回は、SSIを使って効率よく共通部分の管理を行う方法をご紹介致しましょう。
※SSIが利用できないサーバも存在します。（後述）

SSI（Server Side Include）とは？

「SSI」とは Server Side Include の略です。一般的には、HTMLファイルの拡張子を「 .shtml 」にすることで使用できます。
※拡張子が「 .html 」でもSSIを利用することは可能です。（後述）

SSIは、HTMLソース中に「コメントの形式」でコマンド（命令）を記述して使います。そのコマンドはサーバ側で解釈され、実行結果がその位置に挿入されます。
サーバ側で実行されるため、スクリプトなどとは異なり、閲覧者の表示環境にはまったく依存しません。（どんな環境からアクセスされても、同じようにファイルの合成が可能です。）

具体的には、HTML中に次のような感じで記述します。

<!--#COMMAND OPTION="xxxxx"-->

見ての通り「<!--」と「-->」で挟まれていますので、HTMLの「コメント」の形式ですね。通常、このコメントの記述は無視されます。しかし、SSIを使うと、サーバ側がコメントの中身を読んで、指示を実行してくれるわけです。

どうやって使う？

※SSIには様々な機能があるのですが、ここでは今回の「各ページの共通部分を別ファイルに独立させて運用する」という目的に必要な点だけについて解説します。

共通部分のHTMLを別ファイルに独立して保存しているわけですから、 実際に各ページを表示する際には、共通部分のHTMLを格納したファイル（以下、「共通HTMLファイル」と呼びます）を、動的に挿入しなくてはなりませんね。

それを実現するためには、各ページのHTML内に、「ここに共通HTMLファイルの中身を挿入してね」というコマンド（命令）を記述しておきます。
すると、サーバがそのコマンドを解釈して、挿入してくれるわけです。

そのコマンドとは、次の通りです。

<!--#INCLUDE FILE="common.html"-->

上記の1行で、「この位置に common.htmlの中身を挿入してね」というコマンド（命令）になります。
※この例では「common.html」というファイル名になっていますが、ファイル名は何でも構いません。また、拡張子も「.html」である必要はありません。「.txt」でも何でも構いません。

1ページ中に、いくつ書いても構いませんので、必要なだけ記述して下さい。
例えば、各ページのヘッダとフッタが共通の場合は、それぞれ head.html , foot.html などとして独立したファイルにソースを記述しておき、ページの上部と下部に挿入されるように作ると良いでしょう。

SSI専用フォルダを用意する場合の注意

ファイル数が多くなってくると、SSIで挿入するHTML専用のフォルダを作成した方が、サーバ内をわかりやすく整頓できるでしょう。その際に、注意点があります。

先ほどの「 #INCLUDE FILE="xxx" 」という指定では、そのHTMLファイルよりも浅い階層にあるファイルを挿入できない場合があります。
例えば「 FILE="../ssi/common.html" 」というような指定はできない場合があります。（できる場合もあります。）
※深い階層（＝サブフォルダ（＝そのファイルがあるフォルダの中に存在するフォルダ））なら問題ありません。

そのような場合は、次の記述方法を使って下さい。

<!--#INCLUDE VIRTUAL="/ssi/common.html"-->

「 FILE 」ではなく「 VIRTUAL 」を使うと、フルパス名での指定ができます。

■例1：
もし、あなたのサイトのURLが、 http://allabout.co.jp/~me/ だったとすれば、

<!--#INCLUDE VIRTUAL="/~me/ssi/common.html"-->

などのように記述することになります。

■例2：
もし、あなたのサイトのURLが、 http://me.allabout.co.jp/ だったとすれば、

<!--#INCLUDE VIRTUAL="/ssi/common.html"-->

などのように記述することになります。

それでは、次のページへ！ →