ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。今回は番外編としてホームページ内の共通部分をSSIを活用して一つのファイルにする方法をご紹介します。
ホームページ内の共通部分を一つのファイルにするとは？
ホームページにはトップページ以外にも多くのページがあると思いますが、それらには各ページで共通した部分があると思います。例えばヘッダーのメニュー部分や、フッター部分です。
これらの共通した部分のみ別のHTMLファイルとして作成し、各ページでその一つのファイルを読み込むことができます。
そうすることにより共通部分を一つのファイルにできます。
共通部分を一つのファイルとして作成するメリットは？
これはずばり、更新作業を行なう時に各段に作業量を減らすことができることです。
例えば、フッターのメニュー部分に項目を一つ追加したいと思った場合、通常は全HTMLファイル（全ページ）のメニュー部分の記述を変更する必要があります。ウェブサイトのページ数が10ページ以上になってくると、作業量は増えていきますし、その分ミスも増えます。
しかし、共通部分を一つのファイルにしておけば、更新したいときはそのファイルだけ調整すればOKです。各ページはその共通ファイルを読み込んでくれるため、一か所更新するだけで、全ページを調整できるということです。
この共通部分を一つのファイルとして作成し、各ページで読み込む方法はいろいろあるのですが、今回はSSIを使用して実現してみましょう。
SSIとは？
「SSI」とはServer Side Includesの略です。
といっても、これらの処理はサーバー側で処理されますので、作成するときには何も難しいことはなく
１）共通部分のみのHTMLファイルを作成。
２）各ページに「<!–#include virtual=”共通部分のファイル名.html” –>」と記入する
だけです。詳しい手順はこのページの下でご説明します。
※ ご使用になっているサーバーによっては「SSI」の使用が制限されている場合もありますので、ご利用のサーバーのヘルプページなどをご確認ください。
SSIのメリットは？
JavaScriptなどページ閲覧者のブラウザで実行される方法とは異なり、このSSIを使用した方法は、2つのHTMLファイル（共通部分を記入したHTMLファイルと、各ページのHTMLファイル）を合成する作業はサーバー側で実行されます。
そのため、ページを閲覧する側からはまったく通常のHTMLファイルとして表示さることに加え、閲覧者の表示設定には影響をうけません。
そして、なおかつとても簡単です。
では、実際に作成してみましょう。
手順① 共通部分のみのHTMLファイルを作成
これはすでに、メニュー部分など共通部分がある場合には非常に簡単です。共通部分だけ「切り取り」し、「新規ファイル」に「貼り付け」、名前を付けて保存します。
なお通常のHTMLファイルに必要とされる、<head> 部分は不要です。共通している部分だけのファイルを作りましょう。
保存する場所ですが、共通部分のHTMLファイルは他の各ページと同じサーバー内であれば動きます。通常は、各ページと同じ階層に置くか、任意の名前を付けて作成したフォルダの中に保存する形が多いと思います。
なお、保存する場所によって次の手順で作成する「ファイルの名前」の部分を調整してください。
共通部分のHTMLファイルを作成するときのワンポイント
通常、同じ階層にある場合には共通部分はすべて同じになりますが、階層が異なる場合、特にリンクなどの記述が異なる場合がありますので、注意してください。例えば index.html （トップページ）のメニュー部分と、その下の階層にある別のファイルでは、同じメニュー部分でもリンク部分が一つ上の階層に戻る「../」と付いていたりします。
つまり、一つのウェブサイトの中に、複数の階層にHTMLファイルがある場合、その階層ごとに共通部分のHTMLファイルを作成する必要があります。
手順② 各ファイル（各ページ）の共通した部分を 「<!–#include virtual=”共通部分のファイル名.html” –>」 に置き換える
作業はとっても簡単。各ページの共通部分を「<!–#include virtual=”共通部分のファイル名.html” –>」に変更しましょう。
なお、多くのテキストエディタでは、この「<!– –>」で囲われた部分が「コメントアウト」として認識され、色が薄く表示されると思いますが、サーバー側では問題なく動きますのでご心配なく。（今後ファイルを更新する際には、単なるコメントアウトと勘違いして消さないように注意してください）
「<!–#include virtual=”共通部分のファイル名.html” –>」に置き換える時のワンポイント
この「共通部分のファイル名」の部分は、必要に応じて調整してください。もちろん、各ページと共通する部分だけのHTMLファイルが同じ階層の場合、「共通部分のファイル名」はそのままのファイル名になります。
一方、その2つのHTMLファイルの階層が異なる場合、「/」をファイル名の前につけて絶対パスにしましょう。通常リンクなどで用いられる「http://」や「../」などは使用できませんので注意してください。
手順③ 動作テスト
さて更新したファイルすべてをサーバーにアップして、ブラウザで確認してみましょう。 問題なく設定ができていれば、表示されるはずです。
なお、最初にも記述した通り、この「SSI」の処理はサーバー側で実行されますので、更新したローカル環境にあるファイルをブラウザで開いても共通部分は表示されません。動作を確認する際にはサーバーのテスト環境などを活用して表示してみましょう。
まとめ
ウェブサイトのページ数が増えていくにしたがって共通部分の更新作業は大変になっていきますので、上記の方法をもちいて共通部分を一つのファイルとして実行することをお勧めします。
もし、上記の通りに設定しても表示がうまく行われない場合には、以下のサイト（外部サイト）などを参考にサーバーの設定をご確認ください。
