【決定版】MAMP環境でSSI（サーバーサイドインクルード）を使う方法。

投稿日：2025年11月12日

MAMP環境下では、SSI（サーバーサイドインクルード）を使うために、MAMPのコアファイルへ設定を追記する必要があります。
正確にいつ設定したのか記憶にありませんが、会社のWindows PCでは特に意識せずに使えていました。
しかし、自宅で新しく購入したMacBook Airで同じように使おうとしたところ、思いのほかハマってしまいました。
同じように困っている方の参考になればと思い、備忘録としてこの記事にまとめておきます。

色々と調べてみたところ、有用な記事は多く見つかりましたが、どれも設定内容が微妙に異なっており、数記事分試しても解決には至りませんでした。
最終的には ChatGPT（GPT-5）に相談したところ、一発で解決！
そのときに行った具体的な手順をGPT-5との対話を再現する形でここにまとめておきます。
なお、検証環境は macOS Tahoe 26.0.1（25A362）、MAMP Mac版（Versiion7.2(2737)）になります。

Macを使っています。
VS CodeでSSIを使いたいのですが方法はありますか？

良い質問です。
Mac＋VS Code で SSI（Server Side Include, サーバーサイドインクルード） をローカルで動かすには、通常の静的HTMLだけでは機能しないため、Apacheなどのサーバーを経由してHTMLを処理する必要があります。
以下で、Mac環境でSSIを使うための代表的な方法を説明します。

1. MAMPを使う方法（最も簡単）

MacにはすでにApacheが入っていますが、設定が面倒なので MAMPを使うのが楽 です。

手順：

MAMPを起動
- 「Preferences（環境設定）」→「Web Server」→「Document Root」でプロジェクトのフォルダを指定。
SSIを有効化
1. /Applications/MAMP/conf/apache/httpd.conf を開きます。
2. 以下の行を探してコメントアウトを解除します（#を削除）：
```
LoadModule include_module modules/mod_include.so
```
3. 次に <Directory> セクション内に以下を追加（または修正）します：
```
<Directory "/Applications/MAMP/htdocs">
    Options +Includes
    AllowOverride All
    Require all granted
</Directory>
```
4. .shtml をSSIとして認識させる設定も追加： AddType text/html .shtml AddOutputFilter INCLUDES .shtml
```
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
```

SSIファイルを作成

例：index.shtml

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

MAMPのApacheを再起動
- その後、ブラウザで
  http://localhost:8888/index.shtml
  を開くと、header.html と footer.html が読み込まれるはずです。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ▼ 共通head -->
    <!--#include virtual="include/head.html" -->

    <!-- 略 -->

  </head>

  <body>
    <!-- ▼ 共通header -->
    <!--#include virtual="include/header.html" -->

▲5行目でheadをinclude、13行目でheader（グローバルナビゲーション）をincludeしています。
virtual="xxxx/xxxx" という書き方で上層のディレクトリや絶対パスを読み込むことが可能です。
file="xxxx/xxxx" という書き方で同階層、下層のディレクトリのファイルを読み込むことが可能です。上層のディレクトリは読み込むことはできません。

<header>
  <section id="hamburger">
    <div class="btn-trigger" id="btn07">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </section>
  <nav>
    <ul>
      <li>
        <a href="/"><img src="images/lp_mainlogo.png" alt="Logo" /></a>
      </li>
      <div>
        <li><a href="news.html">新着情報</a></li>
        <li><a href="about.html">企画概要</a></li>
        <li><a href="award.html">AWARD</a></li>
        <li><a href="archives.html">開催実績</a></li>
        <li><a href="contents.html">関連記事</a></li>
        <li><a href="download.html">ダウンロード</a></li>
        <li>
          <a href="https://www.instagram.com/factorysgoods/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        </li>
      </div>
    </ul>
  </nav>
</header>

▲includeしているheader.html

▲header（グローバルナビゲーション）が表示されます。

まとめ

冒頭でも書きましたが、少々ハマってしまいました。
思考力低下を避けようと、自力で検索し、トライ＆エラーを繰り返しましたが、どれも的外れ……。
時間だけが過ぎていく中、「もう相談してみよう」とGPT-5に助けを求めたところ、あっさりと解決してしまいました。
思わず「今までの苦労は何だったんだろう」と苦笑いです。

少し本題から逸れますが、感想を一つ。
「考える力が落ちる」と敬遠する声もありますが、それは使いこなせていない人の言葉だと今では感じます。
私自身、以前はそう思っていました。
しかし実際に活用してみると、「問題を早く解決できるなら、その分の時間を別の創造的なことに使えばいい」と考えるようになりました。

これからも、もっと積極的にGPTを使いこなしていきたいと思います。

今回、サンプルとして取り上げさせていただいたのは、日刊工業新聞社様のファクトリーズグッズサイト。
2025年12月3日（水）〜6日（土）に東京ビッグサイト（東京国際展示場）で開催される2025国際ロボット展の1ブースとして出展されます。
ぜひ訪れてみてください。

最後までお読みいただき、ありがとうございました。