はじめに

1つ1つ案件をやっていくうちに、予期せぬエラーにも出くわすようになりました（汗）
その中でも、なるほどなーって思ったことがあったので備忘録まで。

SSI（Server Side Include）

Server Side Includes はWebサーバの機能の1つです。
HTMLの中にWebサーバ側で実行するコマンドを埋め込んでおき、その実行結果をクライアントサーバに返す仕組みです。

どういう時に利用するかというと、複数ページに同じレイアウトが登場するときなどに便利です。例えば、ヘッダー・フッター・メニューについては、どのページに遷移しても、常に同じものが表示されているべきですよね。そいう時に、各ページに同じHTMLを記載するのではなく、ヘッダー部分を1つのファイルから読み込んで表示したほうがメンテナンスもしやすくなります。このファイルのことをインクルードファイルといいます。

ただ1つ注意しなければならいのは、Webサーバ自体がSSIに対応またはサービス利用可になっている必要があります。

インクルードファイルをもう少し詳しく

インクルードファイルには、ページのある一部分のソースコードが書かれているファイルということに勘がいい人はもう気付いていると思います。
先ほどの例で出したヘッダー・フッター・メニューをSSI機能を使って表示させるようにするためには、その部分だけを抜き出したファイル＝インクルードファイルを準備する必要があります。

インクルードファイルの形式はHTML形式でOKです。実際にはインクルードファイルを読み込んだ部分に内容を展開することになるので、本当に一部分を抜き取ったファイルが出来上がっていればインクルードファイルは完成になります！

早速、インクルードファイルを読み込んでみよう！

インクルードファイルの読み込みは簡単です。
下記のように、自分が作成しているHTMLファイルに記載すればいいだけです。めちゃ簡単です。

<!-- #include virtual="[ファイル名 or ファイルパス]" -->

この状態で、ブラウザを表示するとその部分にインクルードファイルの内容が読み込まれ、きちんとヘッダーやフッター・メニューなどが表示されます。

簡単なはずがエラー「an error occurred while processing this directive」が表示される！？

インクルードファイルの存在と設定の仕方がわかったところで、さっそくHTMLファイルにヘッダー部分のインクルードファイルの読み込みを追記して画面を確認！
ところが、「an error occurred while processing this directive」と表示されるではありませんか！？！！（なってこった…。）

このエラーが表示される原因を調べてみると、
「SSI は有効になっていて、何らかのエラーで SSI の処理ができなかった場合に表示される」とのこと。つまり、インクルードできなかったよ！ということなので、そういう場合は下記を疑ってみるのが通常のようです。

ファイル指定の間違い
ディレクトリを遡っている
サーバルートからのパスを指定している
http から始まる URL を指定している

でも、今回は全部合っていました。なんでーーーーー？？？

先頭に#を付けたコメントが原因だった！

結局何が原因だったかというと、超絶単純なミス。笑
インクルードファイルの読み込みは、HTML内に記載するコメントの書き方と同じです。

▼ただのコメント

<!-- header menu -->

▼インクルードファイルの設定

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

インクルードファイルかどうかの判断は、どうやら**#**の部分から判断しているみたいです。
みなさんも、HTMLファイルを作成したときに「ここからここまでが、〇〇〇の部分」などコメントを記載すると思います。
わたしは、クラス名やID名でそのコメントと記載するのですが、ID名を使用したコメントを

<!-- #send_format -->

なんて書いていました。
そのため、この先頭につけた**#**が原因で、インクルードファイルの読み込みエラーが表示されてしまっていました。そりゃ、インクルードファイルの読み込みを追記した部分を穴が開くほどみてもわからないわけです。

まとめ

今回のエラーは初心者のわたしが1人で勉強しているだけでは出くわさないエラーだと感じました。インクルードファイルの読み込みをするときは、コメントの先頭に#を使わないように気を付けましょう（笑）
未経験での中途入社はがんばらないといけないことがたくさんありますが、思い切ってこの業界に転職したことが正解だったと思えた瞬間でした！

参考URL

http://www.tohoho-web.com/wwwssi.htm
https://wa3.i-3-i.info/word12024.html
https://support.sugutsukaeru.jp/ja/troubleshooting/news-widget/93.html