サイト内の共通部分を別ファイルに分離しておけると更新作業が効率的に
共通部分が全ページに存在すると、修正や更新作業が大変
そのようなサイト内の共通部分は独立したファイルに分離しておき、ウェブサーバ側で動的に合成できれば、共通部分の管理や更新作業が楽になります。共通部分を更新したい場合には、その独立した1ファイルを修正するだけで全ページの表示が更新されるからです。
独立したパーツファイルを書き換えるだけで、全ページの該当部分の表示が更新される
例えば、サイト内の全ページに共通する部分を下記のような3つのファイルに分離しておきます。これらの3ファイルを、上図のように各ページのHTMLに合成します。
- 共通ヘッダ領域の内容だけを記述したファイル common-header.html (上図の緑色)
- 共通サイドバーの内容だけを記述したファイル common-sidebar.html (上図の茶色)
- 共通フッタ領域の内容だけを記述したファイル common-footer.html (上図の青色)
このように、サイト内の共通部分を独立ファイルに分離しておいてウェブサーバ側で動的に合成する方法には、SSIという仕様があります。今回は、このSSIを使って効率よくサイト内共通部分の管理・更新ができるようにする方法を解説いたします。
複数のファイルを合成できるSSI(Server Side Includes)とは？
「SSI」とは、Server Side Includesの略です。SSIが有効に設定されているウェブサーバでは、指定の記述方法を使うことで、HTMLソースの中に指定の情報を動的に合成できます。合成できる情報には、「指定したファイルの中身」の他にも「指定したCGIを実行した結果」や「指定したファイルの更新時刻」などがあります。レンタルサーバなどでは、HTMLファイルの拡張子を「.shtml」にすることでSSIが使用できる設定になっている場合もあります。どのような拡張子でSSIを有効にするかは設定次第です。具体的には次のページでご紹介いたします。
■SSIは、HTMLのコメント記述方法を利用して、合成する情報を指定する
SSIは、HTMLソース中に「HTMLのコメントを記述する方法」を使ってコマンド(指示)を記述する形で使います。そのコマンドはウェブサーバ側で解釈され、コマンドの実行結果がコメントの位置に挿入されます。
(左上)HTMLソース中にコメントとしてSSIコマンドを記述、(右上)合成するHTMLソース、(左下)SSIによって合成された結果のHTMLソース
SSIは、HTML中に下記のような感じで記述します。
<!--#コマンド名 属性名="値"-->「<!--」と「-->」で挟まれているHTMLのコメント記述方法を使っています。通常であれば、このコメントの中身は無視されるだけです。しかし、SSIが有効なウェブサーバなら、このコメントの中身に記述されたSSIコマンドをサーバ側が読んで、指示を実行し、実行結果をこの位置に挿入してくれます。
■SSIの使用例
例えば以下のようにHTMLを記述すれば、sample.htmlファイルの更新日時を表示できます。
<p> このページの最終更新日時は、 <!--#flastmod file="sample.html" --> です。 </p>上記では、「flastmod」がSSIのコマンド、「file」が属性、「sample.html」が値です。
※日時の表記形態もSSIで指定できますが、ここでは本題ではないので割愛します。
■ウェブサーバ側で合成されるので、閲覧者の環境には依存しない
HTMLソース内のコメント部分を読んで合成する処理は、ウェブサーバ側で実行されます。ブラウザには合成後のHTMLソースが渡されますから、JavaScriptなどのブラウザ側で実行されるスクリプトとは異なり、閲覧者の表示環境には依存しません。どんな環境からアクセスされても、同じように合成できます。ですから、安心して使えます。
SSIを使って、HTMLソース内に別ファイルの中身を合成する方法
SSIを使って、別ファイルの中身を合成するには、以下のようにincludeコマンドを使います。<!--#include virtual="ファイル名"-->上記のように1行のコメントを記述するだけで、「この位置に『ファイル名』で示すファイルの中身を挿入してね」という指示(コマンド)になります。ここで指定するファイルの場所は、相対パスでも「/」で始まる絶対パスでも記述できます。ただし、同じサーバ内に存在するファイルしか指定できません。「http://」などで始まるURLは指定できませんので注意して下さい。
■別ファイルを合成するSSIの記述例
以下のようにSSIを記述すると、この位置にparts.htmlファイルの中身が挿入されます。
<!--#include virtual="parts.html"-->合成されるファイルは、中身がテキスト形式であればHTMLである必要はありませんから、例えば以下のように記述することもできます。
<!--#include virtual="addition.txt"-->上記なら、addition.txtファイルの中身が挿入されます。
SSIは同一HTML内にいくつ書いても構いませんので、必要なだけ記述できます。例えば、サイト内の全ページでヘッダ部分とフッタ部分が共通なのであれば、それぞれのHTMLソースを「common-header.html」と「common-footer.html」のファイル名で独立させておき、これらのファイルの中身が各ページの上部と下部に挿入されるようにSSIを記述すると良いでしょう。
合成するファイルをSSI専用フォルダに置いておく場合の注意
ファイル数が多くなってくると、SSIで挿入するHTML専用のフォルダを作成した方が、サーバ内をわかりやすく整頓できます。そのような構造を用意したなら、includeコマンドを使って別ファイルを合成する記述には、合成するファイルの場所を「/」から始まる絶対パスで記述しておく方が分かりやすいでしょう。
SSIで合成するファイルをすべて、ssiディレクトリにまとめておく構造例
上図のように、ウェブサイトが www.example.com であり、SSIで合成するためのファイルを http://www.example.com/ssi/ の場所に置いておくのであれば、サイド内のどのページからでも下記の記述でファイルを合成できます。
<!--#include virtual="/ssi/common-header.html"--> <!--#include virtual="/ssi/common-footer.html"-->このように、「/」で始まる絶対パスで合成ファイルの場所を示しておけば、現在位置に関係なく同じ記述でファイルを合成できて楽です。
■備考：includeコマンドにはvirtual属性の他にfile属性もあるが
SSIのincludeコマンドでは、virtual属性ではなくfile属性で場所を示すこともできます。
<!--#include file="outer.txt"-->しかし、file属性では現在位置(カレントディレクトリ)からの相対パスでしか場所を指定できません。「/」から始まる絶対パスは使えない上に、相対パスでも「../」を使って上位の階層(＝浅い階層)を示すことはできません。ですから、virtual属性を使う方が便利です。file属性を使わなければならない状況は特にないので、includeコマンドでは常にvirtual属性を使うと覚えておけば問題ないでしょう。
SSIを使えるようにする準備～共通部分をSSIで合成する具体例
上記では、SSIを使うことで簡単に別ファイルの中身をHTMLに合成できることをご紹介いたしました。しかし、SSIを利用できる状態にするには、事前に準備が必要な場合があります。その方法を次のページでご紹介いたします。また、具体的にどういう感じでHTMLを書けばよいのかという点についても、具体例を使ってご紹介いたします。それでは、SSIを準備してサイト内の共通部分を効率管理する方法を見ていきましょう。
