SSI を 拡張子 .html のファイルで使う方法

SSI（ Server Side Include ）を使う場合HTMLファイルの拡張子を .shtml に変更するのが一般的ですが、.html のまま SSI を有効にする方法をご紹介します。Web サーバが Apache で、自由に .htaccess を設置できる場合に使える方法です。

SSI（ Server Side Include ）とは？

SSI は、HTMLページ上に他のファイルの内容を組み合わせて表示するために使う技術です。

【重要】SSI 設定時の注意点

設定方法は Apache のバージョンによって異なります。また、サーバ環境によって設定が有効にならなかったり、エラーが出たりしますので、必ず下記の事前確認とテストを行って下さい。

.htaccess の設定方法のみを確認したい方はこちら

SSI 設定前の事前確認

.htaccess 設定権限の確認

サーバ管理者に .htaccess による SSI の設定が可能かどうか問い合わせて下さい。許可されていない場合、設定は行わないで下さい。エラーになる場合があります。

Web サーバのバージョンの確認

Web サーバが Aapache である事と、Aapache のバージョンを確認して下さい。Apacheのバージョンが 1.3 で始まる場合と、2 で始まる場合で設定方法が違います。

.htmlでSSIの利用が可能かのテスト

まず下記のテストを行い、お使いのサーバでこのページでご紹介する設定が可能かを確認して下さい。

テスト用ディレクトリのダウンロード

以下のファイルをダウンロードして解凍して下さい。テスト用のファイルが含まれています。大抵の環境ではダウンロードしたファイルをダブルクリックすると解凍ができます。

SSI 設定テスト用ファイル（ZIP）

含まれているファイル

ファイルには、以下のディレクトリとファイルが含まれています。

testdir/
|-- dot_htaccess_13.txt    Apache 1.3用の設定
|-- dot_htaccess_2x.txt    Apache 2.x用の設定
|-- included.txt           SSI で組み込まれるファイル
`-- index.html             SSI テスト用ファイル

各バージョン用のファイルの内容は下記の通りです。

Apache 1.3.x 用: dot_htaccess_13.txt

コピー 
#Options +IncludesNOEXEC
AddHandler server-parsed .html

Apache 2.x 用: dot_htaccess_2x.txt

コピー 
#Options +IncludesNOEXEC
XBitHack on

【参考】SSI コマンド: index.html

※  SSI コマンドはバージョンに関わらず共通です。

コピー 
<!--#include virtual="included.txt" -->

アップロード

testdir/ を中身のファイルごとお使いのサーバにアップロードして下さい。

パーミッションの変更（Apache 2.x の場合のみ）

※ この作業は Apache 1.3.x の場合は不要です。

アップロードした以下のファイルのパーミッションを 755 に変更して下さい。

  • testdir/index.html

SSIの動作確認

無効表示の確認

アップロードした testdir/index.html にブラウザからアクセスして下さい。まだ SSI は有効になっていませんので、以下のような画面が表示されるはずです。

ファイル名の変更

アップロードした設定ファイルの名前を .htaccess に変更します。Apache のバージョンによって、それぞれ下記のファイルの名前を、FTPソフト等で「.htaccess」に変更して下さい。

Apache のバージョン対象ファイル
1.3系dot_htaccess_13.txt
2.x以上dot_htaccess_2x.txt

表示確認

testdir/index.html をブラウザで再読み込みして下さい。

下図のように「【この部分は SSI（Server Side Include）で読み込まれました。】」と表示されていれば設定がうまく行っています。「本番サイトで .html ファイルでSSIを有効にする」に進んで下さい。

うまくいかない場合

500 Internal Server Error

Apache 1.3 で「500 Internal Server Error」が出てしまう場合は、お使いのサーバではこの設定はできません。

Apache 2.x で「500 Internal Server Error」が出てしまう場合は、「Apache 2.x の場合の最終テスト」に進んで下さい。

表示が変わっていない場合

表示が変わっていない場合（＝SSI が無効の時と同じ）、引き続き以下のテストを試して下さい。

オプション設定を有効にする

始めにダウンロードして解凍したファイルのうち、以下のファイルを開いて青字の「#」を削除して保存して下さい。

これは、SSIを有効にするオプション設定を有効化する作業です。サーバによっては、これがあると却って動作がエラーになる事があるので、「#」を付けることによって無効にしてありました。

保存し直したファイルを、もう一度サーバにアップロードして下さい。

Apache 1.3.x 用: dot_htaccess_13.txt
コピー 
#Options +IncludesNOEXEC
AddHandler server-parsed .html
Apache 2.x 用: dot_htaccess_2x.txt
コピー 
#Options +IncludesNOEXEC
XBitHack on

ファイル名の変更

アップロードし直した設定ファイルの名前を .htaccess に変更して下さい。

表示確認

もう一度 testdir/index.html をブラウザで再読み込みして下さい。

「【この部分は SSI（Server Side Include）で読み込まれました。】」と表示されていれば設定がうまく行っています。「本番サイトで .html ファイルでSSIを有効にする」に進んで下さい。

うまくいかない場合（オプション設定有効化後）

Apache 1.3 の場合

Webサーバが Apache 1.3 で「500 Internal Server Error」が出てしまったり、表示が変わらない場合、お使いのサーバでは .html ファイルで SSI を動かすことはできません。

Apache 2.x の場合

Webサーバのバージョンが Apache 2.x であれば、もう一つ可能性があります。引き続き以下のテストを試して下さい。

Apache 2.x の場合の最終テスト

Apache 2.x では、Apache 1.3 の設定が使える場合があります。 dot_htaccess_13.txt の方の名前を .htaccess に変更して表示がうまくいくか試して下さい。また、Options の前の「#」の有無も変えて試して下さい。

どの設定でも「500 Internal Server Error」が出てしまったり表示が変わらない場合、お使いのサーバでは .html ファイルで SSI を動かすことはできません。

本番サイトで .html ファイルでSSIを有効にする

テストで設定がうまく行っていたら、うまくいった時の .htaccess の設定を SSI の設定が必要なディレクトリに反映させます。

.htaccess ファイルのコピー

SSI を使いたい .html ファイルがあるディレクトリに、テストの設定をコピーします。以下のように作業して下さい。

なお、対象ディレクトリが階層になっている場合は、一番上のディレクトリにのみ設定すればOKです。別々の場所に分かれている場合は、それぞれのディレクトリで設定して下さい。

設定するディレクトリに既存の .htaccess がある場合

設定したいディレクトリに既に別の .htaccess （---A）がある場合、testdir/.htaccess （---B）の内容を A の .htaccess に追記して下さい。

例えば、一旦 A の .htaccess をダウンロードし、B (testdir/.htaccess) に記載した内容をファイルの末尾に追記して同じ場所に上書きアップロードして下さい。

設定するディレクトリに既存の .htaccess がない場合

設定したいディレクトリには .htaccess がない場合、テストでうまくいった設定ファイルをそのまま、設定したいディレクトリに .htaccess としてアップロードして下さい。

パーミッションの変更（Apache 2.x の場合のみ）

※ この作業は Apache 1.3.x の場合は不要です。

dot_htaccess_2x.txt の設定がうまく動いた場合は、SSI を有効にしたい .html ファイルのパーミッションを 755 にして下さい。SSI が不要なファイル .html のパーミッションは 644 にして下さい。

SSI コマンドの追記

SSI が動くように設定したら、SSIを使って表示したいHTMLファイルに必要なSSIコマンドを追記して下さい。

例えばファイルを組み込んで表示する場合のSSIコマンドは以下の通りです。

コピー 
<!--#include virtual="(組み込んで表示するファイルへのパス)" -->

webdir/ で SSI を有効にした場合にSSIコマンドを追記するファイル

「すぐ使えるCMS」で書き出したファイルをSSIで処理するために書き出しディレクトリ webdir/ で SSI を有効にした場合は、SSIコマンドを追記するファイルはこのディレクトリ内のファイルではなく、元となるテンプレートファイルです。 templates/article/ 内にあるファイルにSSIコマンドを追記して下さい。