小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

SSI を .html ファイルで使う方法

最終更新日: 2016-04-22

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の利用が可能かのテスト

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

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

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

161-ssi-ext-html-testdir.zip

含まれているファイル

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

testdir/
|-- .htaccess              Apache 2.x用に調整した設定ファイル(dot_htaccess_2x.txtと同じ)
|-- dot_htaccess_13.txt    Apache 1.3用の設定
|-- dot_htaccess_2x.txt    Apache 2.x用の設定
|-- included.txt           SSI で組み込まれるファイル
`-- index.html             SSI テスト用ファイル


.htaccess ファイルの編集

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

サーバの Apacheのバージョンが 1.3.x の場合は、dot_htaccess_13.txt の内容をコピーして .htaccess の内容を全て置き換えて下さい。
なお、各バージョン用のファイルの内容は下記のようになっています。

Apache 1.3.x 用: dot_htaccess_13.txt

Options +IncludesNOEXEC
AddHandler server-parsed .html


Apache 2.x 用: dot_htaccess_2x.txt、初期設定の .htaccess

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(Server Side Include)で読み込まれました。】」と表示されていれば設定がうまく行っています。

この表示が無い場合やエラー(500 Internal Server Error)になってしまう場合は、お使いのサーバではこの設定はできません。

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

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

.htaccess ファイルのコピー

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

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

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

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

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

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

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

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

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

SSI を有効にしたい .html ファイルのパーミッションを 755 にして下さい。
SSI が不要なファイル .html のパーミッションは 644 にして下さい。

SSI コマンドの追記

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

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

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


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

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

関連リンク

さらに詳しく