SSIを使ってヘッダーやフッターなど、
共通のhtmlファイルをインクルードして使う方法

WordPressなどの制作に慣れていると、つい共通ファイルであらゆるページに読み込むというのが一般的でありごくごく当たり前のように使っていきますが、PHPなどを使わないいわゆる静的ページによるサイト制作の場合、この共通部分をどう取り扱うかで頭を悩ませる方も多いです。

そんな時に使い勝手が良いのがSSIを使ったファイル管理です。
これを使う事で、WordPressのように共通ファイルを外部ファイル化して呼び出すことが可能になります。

WordPressから制作を始めたという方の場合は知らなかったという方もいるかもしれませんので、今回はそんなSSIを使って、共通ファイルを外部ファイル化して読み込む方法について見ていきたいと思います。

改めてSSIをおさらい

SSIとは「Server Side Include」と呼ばれるもので、Webサーバなどの機能の1つになります。HTMLのコードの中にSSIのコードを記載することで、その指定された内容に置き換わってくれるものになります。

このSSIの中のinclude機能を使う事で、WordPressなどのように簡単に共通ファイルを各htmlで呼び出して使う事が可能になります。

htmlで共通ファイルをしない場合どうなるか

今はWordPressでサイト制作をするというケースが多いかもしれませんが、それでもランディングページであったりサービスサイトなどを作る際、WordPressではなく通常のHTMLとCSSでサイトを作るというケースもまだまだ多くあります。

そんな時、WordPressのようにヘッダーはヘッダー、フッターはフッター、サイドバーはサイドバーなどそれぞれ外部ファイル化して共通のファイルとして1つ用意しておき、それを呼び出したいページで呼び出せれば良いのですが、HTMLファイルではそのままでは対応できません。

1ページや2ページほどのページ数であれば、それぞれコピペして同じコードを貼り付ければなんとか対処できるかもしれませんが、5ページ、10ページなど下層ページなどファイルが増えていけばいくほど、その管理などは難しくなってしまいます。

必ずミスがどこかで生じてきますし、何かヘッダーを修正する度に全ファイルを修正するなどは時間の無駄でもあるため、そういう時のためにSSIを使ったincludeのファイル管理が役立ちます。

SSIのincludeを使ってファイルを読み込む事前準備

それでは実際にファイルを読み込んでいく方法の前に、SSIには少し事前準備というか確認事項があるため、実際にincludeを解説する前に見ておくポイントをおさらいしておきます。

まずはサーバーがSSIを許可しているかを確認

SSIはサーバーの設定に依存してしまいます。
何よりもまず、サーバーがSSIの利用を許可しているかどうかが全てになります。

ここでサーバー側によってSSIの利用が許可されていないという場合はどう頑張っても使う事ができませんので、サーバーにSSIの利用が許可されているかを確認しましょう。

とはいえ今のサーバー事情的にSSIを許可していないサーバーというのはかなり少数かと思われますし、逆に言えば許可していないサーバーというのは、今のいわゆる王道的な機能を備えていないという事でもあるため、移転を考えてみても良いと言えるかも知れません。

.htaccessファイルにてSSIをHTMLファイルで使うための設定を記述

SSIというのは以前に別のSSI関連のブログ記事でも解説していますが、本来は「.shtml」という拡張子で使われるものになります。そのためSSIを使う場合はファイルの拡張子を.shtmlとする必要があるのですが、今shtmlで作られているサイトというのはまず見る事はありません。

そのため、SSIを.shtmlではなく.htmlで使えるようにするために、.htaccessに下記の記述が必要になります。

Options +Includes
AddHandler server-parsed html

1行目でSSIを有効にして使えるようにする記述となり、2行目がSSIをHTMLファイルでも使えるようにするための記述になります。実際はサーバーでSSIが使える場合は1行目が無くても問題ないケースもありますが念のため入れておきましょう。

HTMLファイルにインクルードするコード

上記の確認および設定にてSSIがhtmlファイルで使えるようになったら、実際のコードを見ていきたいところですが、実はSSIによるインクルードには下記の2種類の方法があります。

• include file
• include virtual

それぞれに特徴があるのですが、1つ1つ見ていきましょう。

include file

書き方としては下記になります。

<!--#include file="./file.html" -->

こう書けば、同じ階層にあるfile.htmlを読み込む事ができます。

include virtual

書き方としては下記になります。

<!--#include virtual="../include/file.html" -->

こう書けば、1つ階層を上がったincludeディレクトリ（フォルダ）にあるfile.htmlを読み込む事ができます。

file と virtual の違い

これだけだとfileとvirtualで何が違うのかがわからないかもしれませんが、明確な違いは

• fileは上階層のディレクトリを読み込めない（同階層以下のみ）
• virtualは上階層のディレクトリを読み込め、絶対パスでの指定も可能

という違いがあります。そのため、

<!-- file:問題なし -->
<!--#include file="./file.html" -->

<!-- file:読み込めない -->
<!--#include file="../include/file.html" -->

<!-- virtual:問題なし -->
<!--#include virtual="../include/file.html" -->

<!-- virtual:問題なし -->
<!--#include virtual="/assets/include/file.html" -->

このようになります。
fileで指定する場合は、読み込む階層より同階層以下のファイルのみ読み込む事ができます。

特に理由がなければvirtualで問題ない

2種類のインクルードの仕方を解説しましたが、正直なところファイルのパスをしっかりと理解できていれば、SSIのインクルードを使う際は、virtual一択で問題ないと言えます。

実際に、自分も様々なサイト制作においてSSIのインクルードを使っていますし、何を隠そうこの裏方ワークスのデモページでも実際に使っていますが、virtualでしか読み込みは使っていません。

なにより共通ファイル化したいものは、ヘッダーやフッターなどの共通ファイルとなり、割と上階層でファイルをまとめている事も多いと思いますので、virtualを使ったインクルードで問題ありません。

SSIを使ったインクルードの特徴や注意点

使い方を理解して活用していければ非常に便利ですが、特徴や注意点も存在します。特にSSIのincludeが効かない、表示されないといった場合は後述している注意点のところを確認してみましょう。

ソースでも表示され直書きしたのと同じ見え方

JavaScriptなどの場合は、スクリプトタグがそのままソース上に表示されますが、SSIの場合はサーバー上で実行されそのまま表示されるため、HTMLソースを見たとしても、インクルードしたファイルの中身がそのまま表示されます。

そのため、SEO的に見てもなんらデメリットはありませんし、外部からはSSIを使ってインクルードしているのか、直書きして作られているのかなどの判断はつかず、安心して使えます。

外部のファイルは読み込めない

よくincludeしたのに表示されない！と悩む方も多いのですが、これが原因の方も一定数いるというくらいです。「インクルード」というと、よくPHPでの読み込みと比較されがちですがPHPのように外部サイトのファイルを読み込んだりというのはできません。

あくまでも自分たちのサーバー上にあるファイルのみインクルードができます。別ドメインのファイルや別サーバーのファイルなどを読み込むことはできませんので注意しましょう。

デフォルト状態のローカルでは確認ができない

SSIはサーバーサイドインクルードという名の通り、サーバー上で動くものになります。
そのため、デフォルト状態のローカル環境ではhtmlファイルをブラウザで開いて確認するといったような事は行えません。

ローカルでインクルードしたhtmlファイルをブラウザで開いたら、ただそのままコードが表示され、実際には何も読み込まれないため空の状態で表示される事になりますので、意図した表示にならないため注意しましょう。

ローカルでも確認できるようにしたい場合は、ローカル環境を構築するか、実際にサーバーにアップして確認するかなどする必要がありますが、今ではエディタの定番のVisual Studio Codeの「Live Server」というプラグインを使うことでも対応が可能になっています。

インクルードされるファイルのパスに注意

インクルードしたのに表示されないという多くの原因はこれかなと感じます。
そして、このあたりがややこしく感じてしまうため、あまりSSIのインクルードが使われていない原因なのかとも思うのですが、読み込まれるファイルは、読み込む側のソースにそのまま記載されると思ってください。

そのため、インクルードする共通ファイルの画像や内部リンクなどを相対パスで書いてしまうと、読み込む場所によってパスが異なることになるため意図した通りに表示されない可能性が高いです。インクルードされる元のファイルのhtmlは、全て絶対パスで書いておくことをオススメします。

例えば、/assets/include/header.html という共通化して利用するファイルがあった場合、これを、/index.html のトップページでインクルードできますし、/about/index.html のページでインクルードも当然できます。

しかしながら、/index.html でインクルードした場合は、/assets/include/header.htmlのコードも、全て/index.html で展開されることになるため、/index.html から見たパスになります。

同じように、/about/index.html でインクルードした場合は、/assets/include/header.html のコードは、全て/about/index.html で展開されることになるため、先ほどの/index.htmlとでは当然階層が1つ異なる形となります。

インクルードされるファイルの画像や内部リンクを「../」や「./」などの相対パスを使って書いてしまうと、読み込む階層毎で変わってしまうため注意しましょう。

下記にSSIを使ったデモページを用意してみました。
ただSSIでインクルードして読み込んだデモにはなりますが、実際に見ても、SSIで読み込まれたのかというのを確認することはできないのでその点だけご了承ください。

ただ実際にはデモページは色々なコード解説のページで用意していますが、デモページ用のヘッダーもフッターも全て、共通化したファイルを1個用意してSSIのインクルードを使って全ページで呼び出して使っています。

デモページ

まとめ

SSI使った共通化ファイルのインクルードの方法を解説してみました。
意外とこの解決法を知らずに、静的ファイルのサイト制作時では、共通ファイルをコピペや一括置換などで対応している方がいたりします。

ファイル数が少なければ一括置換したりコピペでなんとか対応できるかもしれませんが、結局はミスに繋がりやすいですし、管理も複雑で良いことはありませんので、ファイル管理の面から見ても、SSIのインクルードを使えるようになるに越した事はありません。

実際にランディングページの制作などでも、同じコールトゥアクション的な要素をページ内で何度も呼び出す際には、それを1つのhtmlファイルにして呼び出すと、修正があった際なども非常に楽に管理ができます。

慣れるまでは注意点などパスのところなどで戸惑うことも多いかもしれませんが、慣れれば非常に便利で使い勝手も良いものでもありますので、ぜひ覚えて活用できるようにしておきましょう。