SSI を拡張子 .html のファイルでも使えるようにする (Apache・XAMPP)

SSI (Server Side Includes) は、HTML の中に書いた特別なコメントを、サーバーが送信の直前に処理する仕組みです。共通のヘッダーやフッターを別のファイルにしておき、各ページから読み込めます。Apache では mod_include というモジュールが担当し、標準的な設定では、拡張子が .shtml のファイルだけが処理されます。ここでは XAMPP (Apache や PHP などをまとめて入れられる、手元の開発環境) を例に、.html のファイルでも SSI を使う設定を紹介します。

SSI の書き方

読み込みたい場所に、次のように書きます。

<!--#include virtual="/inc/header.html" -->
<main>
  <p>ページごとの内容</p>
</main>
<!--#include virtual="/inc/footer.html" -->

• virtual には URL のパスを書きます。/ で始めると公開フォルダーのいちばん上から、/ で始めないと今のページからの相対的な位置になります
• file という書き方もありますが、../ を含められず、上の階層のファイルを読み込めません。公式の資料でも virtual を使うよう勧めています
• 書き始めの <!--# は 1 つのまとまりなので、あいだに空白を入れません。逆に、終わりの --> の前には空白を入れておきます

SSI が無効のままだと、この行はただの HTML のコメントとして送られ、画面には何も表示されません。表示されないときは、ブラウザーでページのソースを開き、コメントがそのまま残っていないかを確かめます。

httpd.conf で .html を有効にする

XAMPP の Apache の設定ファイルは、標準では C:\xampp\apache\conf\httpd.conf にあります。まず、mod_include が読み込まれているかを確かめます。

LoadModule include_module modules/mod_include.so

この行の先頭に # が付いていればコメントになっているので、外します。

Apache の標準的な設定ファイルには、.shtml 用に次の 2 行が用意されています (コメントになっていることもあります)。

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

AddType は、拡張子と MIME タイプ (ファイルの種類を表す名前) の対応を決める指定です。.shtml は標準では HTML として扱われないので、この行が要ります。AddOutputFilter INCLUDES は、その拡張子のファイルを SSI の処理 (INCLUDES フィルター) に通す指定です。

.html でも有効にするには、公開フォルダーの <Directory> の設定の中に、次の 2 行を書き加えます。

<Directory "C:/xampp/htdocs">
    # (既存の設定はそのまま残す)
    # SSI を許可する
    Options +Includes
    # .html を SSI の処理に通す
    AddOutputFilter INCLUDES .html
</Directory>

.html はもともと text/html として扱われるので、AddType は書かなくても動きます (書いても問題はありません)。設定を変えたら、XAMPP のコントロールパネルで Apache を停止し、起動し直します。

.htaccess で有効にする

設定ファイルを編集できないレンタルサーバーなどでは、.htaccess に書きます。

Options +Includes
AddType text/html .html
AddOutputFilter INCLUDES .html

.htaccess で Options を使うには、サーバー側の AllowOverride で Options が許可されている必要があります。AddType や AddOutputFilter には FileInfo の許可が要ります。許可されていない指定を書くと、ページ全体が「500 Internal Server Error」になります。使えるかどうかはサーバーしだいなので、サーバー会社の説明を確かめてください。

XBitHack で、必要なファイルだけを処理する

AddOutputFilter INCLUDES .html では、すべての .html が SSI の処理を通ります。SSI を使っていないページの中身も調べるので、そのぶん少し遅くなります。対象を絞りたいときは、XBitHack を使う方法があります。

Options +Includes
XBitHack on

XBitHack on にすると、MIME タイプが text/html のファイルのうち、所有者の実行権限 (x ビット) が付いたものだけを SSI として処理します。Linux などのサーバーでは、SSI を使うファイルにだけ実行権限を付けます。

# SSI を使うファイルにだけ、所有者の実行権限を付ける
chmod u+x index.html

Windows のファイルには、Linux のような実行権限の x ビットが無いため、Windows で動かす XAMPP では、この方法は使いにくいです。

注意点と、今の選択肢

• SSI には、サーバーのコマンドを実行する exec という命令もあります。使わないなら、Options +Includes の代わりに Options +IncludesNOEXEC を指定すると、exec が無効になって安全です
• SSI で組み立てたページは、標準では Last-Modified ヘッダーが送られないため、ブラウザーなどにキャッシュされにくくなります。必要なら SSILastModified などの指定で調整します
• 手元の環境と公開するサーバーで SSI の設定がそろっていないと、公開したとたんに共通部分が表示されない、ということが起きます

共通部分をまとめる方法は、SSI だけではありません。Hugo などの静的サイトジェネレーター (テンプレートと原稿から HTML を前もって作る道具) を使えば、公開前に HTML を組み立てておけるので、サーバーの SSI の設定に左右されません。PHP が使えるサーバーなら、PHP の include で読み込む方法もあります。サーバーの設定を変えられないときや、ページ数が多いときは、こうした方法も検討するとよいでしょう。

まとめ

• SSI は、<!--#include virtual="..." --> で共通の部品をサーバー側で読み込む仕組み
• .html でも有効にするには、Options +Includes と AddOutputFilter INCLUDES .html を書く
• .htaccess で使えるかどうかは、サーバーの AllowOverride の設定しだい
• 対象を絞るなら XBitHack、exec を使わないなら IncludesNOEXEC
• 公開前に HTML を組み立てる静的サイトジェネレーターも選択肢になる

参考

• mod_include - Apache HTTP Server Version 2.4
• Apache httpd Tutorial: Introduction to Server Side Includes