PHPを使わずにヘッダーなど共通パーツを一元管理できるSSI(Server side include)の実装方法【備忘録】

  • デザイン/Tech
  • 2023/06/18
PC作業環境のイメージ写真

静的ページでもheaderやfooter、asideなどを共通パーツにして埋め込めるSSI（Server Side Include）の設置手順をご紹介します。
出産子育て後ブランクありの中「あれなんだっけ？」と思い出す作業の中で、自身の備忘録としてまとめました。

始める前の注意点

サーバー上で動かす必要があるのでローカル環境でのVS Codeでの確認は「Open with live server」など使ってもできません（includeした部分だけ抜けた状態で表示されます）。
なので、テスト環境で表示確認をできることが前提条件になります。

WEBサーバー側で一つ処理が入るため、そのままHTMLを返すよりも仕事が増えレスポンスが遅くなるといったデメリットがあります。

今回編集する必要がある.htaccessは必要な項目を消してしまうとインデックスされない、表示がおかしくなるなどの影響が出てしまうのでファイルの取り扱いは注意しましょう。

手順１ サーバー側の設定

.htaccessに下記を記述

①Xserverの場合
.htaccess

AddHandler server-parsed .html .htm
②ConohaWingの場合
.htaccess

AddType text/html .html
AddHandler server-parsed .html

よく使われている２つのサーバー用の記述方法を紹介しましたが、その他サーバーごとに記述が微妙に違う場合があるので、導入前に必ず公式のサポート情報を確認してくださいね。

手順２

ヘッダーやフッターなどの記述部分を切り出して下記のファイルを作成する

header.html
HTML

<header class="header fadeIn">

    <nav id="nav1" class="navbar">
        <p class="logo"><a href="/">サイト名</a></p>
        <ul class="menu">
            <li><a href="#profile">プロフィール</a></li>
            <li><a href="#service">サービス</a></li>
            <li><a href="#blog">ブログ</a></li>
            <li><a href="#ask">お問い合わせ</a></li>
        </ul>
    </nav>

</header>
footer.html
HTML

    <footer>
        <p class="copyrights">
            サイト名 <span>©</span> all rights reserved.
        </p>
    </footer>

手順３

Index.html内のヘッダーとフッターの入る位置に下記の記述を挿入する。

絶対パスまたは上層のディレクトリを読み込む場合
HTML

<!--#include virtual="../include/header.html"-->
<!--#include virtual="../include/footer.html"-->
同階層または下層ディレクトリを読み込む場合
HTML

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

※includeファイルが表示させたいページの上層にあるか下層にあるかで記述の一部が「Virtual」または「file」と違ってきますので注意が必要です。

引っかけ問題になりやすい部分ですので、うまく表示されないときは階層の確認もしてみてください。

記述例
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--#include file="include/header.html"-->  

    メインコンテンツ

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

まとめ

共通部分をインクルード化する方法は、PHPやその他gulpやGruntなどフロントエンドの開発ツールを使う方法などの選択肢もあります。

デザインから入ったWebデザイナーさんでサーバーサイドの言語は守備範囲ではない方向けの方法としては、こちらのSSIを使ったインクルードが一番扱いやすいのではないかと思います。

最後に、大事なことなので2回言いますが…
.htaccessの記述などサーバーサイドに関わる記述ですので、書き間違いにはくれぐれもご注意を。

Blog