「SSI」Server Side Includingの設定と使い方（サーバーサイドインクルード）

ホームページの更新管理に大変便利な「SSI」Server Side Includingの機能を紹介します。

これによりヘッダーやフッターなど全ページ共通となる部分を固有の実行ファイル内にまとめるができるので、共通部分の一括更新が可能になります。HTMLサイトの更新に大変便利です。

本来shtmlファイルで可能な機能ですが、.htacessファイルでの制御によりhtmlファイルでも動作させる事ができます。

SSI（サーバーサイドインクルーディング）とは？

今はあまり使われなくなったという事ですが、HTMLホームページを制作する際によく使える便利な機能として、今回はSSI（サーバーサイドインクルーディング）という機能をご紹介します。

HTMLタグ中に以下のようなコメントタグを挿入することにより、サーバー側がコメントの場所に実行結果を表示してくれる機能です。

HTMLタグ内に実際に記述されたSSIの例

SSIを使用することにより次のようなことが可能

この中でも特に、全ページに同じヘッダー・フッター・サイドメニューなどを表示できる機能が重宝します。

SSIのメリット

通常HTMLサイトはWordpressサイトと違い、各パーツごと（例えばヘッダー部分やフッター部分など）に構成がわかれている訳ではありません。

ヘッダー・内容部分・サイドメニュー部分・フッターが一つのHTMLファイルに記載されており、各ページそれぞれ同じ部分が存在しています。

つまりHTMLが完成した後にヘッダーの一部分を書き換えようとすると、通常は全てのHTMLファイルの該当箇所を全て更新する必要があるのですね

※grep機能など一括検索・一括変更できるソフトなどを利用する事でも対処できますが、ここでは考慮しません。

共通ファイルとして独立させる事ができる

このSSI機能を使うと、各ページに共通する部分を一つのファイル（.txtや.htmlなど）に記述して分けておくことができるようになるのです。

それを各ページの対象位置（ヘッダーの位置やフッターの位置）に表示させるようコメントを設置しておきます（設置した時に元の記述は消しておきます）。

WEBサイトの表示時にサーバー側がそのコメント位置に記述されたコマンドを実行しますので、ヘッダーやフッターが自動で表示されるようになるのです。

情報更新時は共通ファイルを変更するのみ

情報変更が必要になったら、その共通ファイルの中身を変更する事で全てのページの対象箇所が一括更新できるようになる便利な機能です。

ホームページにおいてあらかじめ共通の記述になる部分というのはたくさんあるはすですよね。

ですのでその個所ごとに別ファイルにまとめ、そのファイルを実行できる様にその個所にコメントを付けておけば良いのです。

クライアントサイトの更新管理に便利

SSIは他にもファイルサイズを表示したり、最終更新の時刻、変数設定、CGIの実行、IF等の制御文などなど様々な用途がありますが一番有効なのはこの共通ファイル表示ですよね。

クライアントからHTMLサイト管理を担当した際、特に全ページ共通になっている箇所で頻繁に更新の依頼がある場合などには有効です。

SSIを反映させるため全ページの対象箇所に一度コメントを入れる作業は大変かもしれません。

ですが一度終わらせておけば、あとは更新依頼があっても1か所書き換えるだけで済むので大変簡単になります。

SSIが利用できるかの環境確認

SSIを使用する前に、SSIが利用できる環境を準備する必要があります。

基本はWEBサーバーがSSIをサポートしており、SSIの機能実行を許可しているかどうかの確認が必要です。

※プロバイダによってはセキュリティのために使用禁止をしているところがあります。

.htaccessでSSIを利用可にする

このために使うのが「.htaccess」ファイルです。このファイルの中に設定を書く事で、その.htaccessの効果がおよぶ範囲でSSIが利用できます。

※この.htaccessの設定は自分で行わなければなりません。.htaccessを置いているディレクトリ配下でのみ効果が発動します。

.htaccessに以下のように記述して下さい。

Options +Includes
AddHandler server-parsed .html

これにより「.html」ファイルでもSSIが利用できる様になります。

この.htaccessには他にも別の目的でいろいろな記述をしている可能性がありますので、追記という形で大丈夫です。

SSIは本来shtmlファイルの機能

本来SSIの機能はWEBページファイルの拡張子が.shtmlになっている場合に使えるものです。

「.html」ではなく「.shtml」です。いきなりファイルの拡張子を変えろと言われてもアドレスが変わってしまうので、なかなか難しいですよね。

そこで「.html」ファイルを「.shtml」ファイルとしても判定するようにサーバーに命令を掛ける必要があります。

SSIの設定方法

実行ファイルへの共通部分の記述

例えば共通の実行ファイルとなる「aaa.txt」内に以下の様に記載しているとしましょう。

このテキストファイルにはヘッダーやフッターなどは必要ありません。直接表示したい箇所のみを書けばそれでOKです。

今回はテストですので1行のみですが、必要であれば何行書いても大丈夫です。改行やTabインデントなども反映されますので、通常のhtmlタグを書く感じで記述できます。

html内の読み込みたい部分にコメントを書く

パソコンでの状態

上記は上下にあるpタグの間に、aaa.txtに書いてある情報を読込させる場合です。

これはローカルPCだと上記の通りにしか見えませんが、実際にサーバー上にUPすると以下の様に表示されます。

サーバー上での状態

SSIはサーバー上でのみ確認ができる機能です。ですので手元のパソコン上では機能しません。

作業中はヘッダーやフッターが常に表示されていない状態になるので、やりにくい面はあるかも知れません。

コメントの書き方

同じ配下にあるファイルであれば「file=」で読み込みできますが、基本は同じディレクトリ位置にある場合です。ですので一つ上や下にあるファイルは読み込みができません。

その場合は「virtual=」に変更し、../aaa.txtや、bbb/aaa.txtなどと相対パスで記述をする事になります。

<!--#include file="aaa.txt" -->
同じディレクトリ内にあるファイルの読込
<!--#include virtual="../aaa.txt" -->
一つ上のディレクトリにあるファイルの読込
<!--#include virtual="test/aaa.txt" -->
一つ下のtestディレクトリにあるファイルの読込

文字コードに注意

この時表示元となるページの文字コードと、読込実行するファイル（aaa.txt）の文字コードは揃えておかないと文字化けを起こしてしまいますので注意しましょう。

表示元がsjisなら実行ファイルもsjis、utf8ならutf8にしておく必要があります。

ヘッダーやフッターはないので、テキストファイル（サクラエディタ）自体の文字コード確認をしておきましょう。

あわせて読みたい参考記事

SSI利用時の注意

サーバーに負荷が掛かります。

TOPディレクトリの.htaccessに対してSSIを使用可能な設定にしておくと、WEBサーバーがほぼ全てのファイルに対して常にSSI処理を行うことが必要となります。

それはサーバーに負荷が掛かりパフォーマンスが下がるなどの影響を与えます。

常にサーバー負荷が掛かっていますので、現在お使いのレンタルサーバーの状態などを確認した上で利用するようにしましょう。

一押し人気コーナー紹介