Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【初心者】SSIエラーが出たけど実はそうじゃなかった件

More than 1 year has passed since last update.

はじめに

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

sun19008
医療IT業界からWeb業界にキャリアチェンジして1年半経ちました。株式会社サンシーアでフロントエンドエンジニアとして半年経験してから、あるWebサイトのプロジェクトに関わっています。WordpressやPHP勉強中。Qiitaには、日々学んだことをアウトプットしていくために活用しています。よろしくお願いします!
http://www.sunseer.co.jp/
sunseer
ソリューション型システム開発として、大手中古車ポータルサイトの構築や、BtoB Java開発・AWSクラウド構築・AI/RPAなどのIT技術支援を行う会社です。
https://www.sunseer.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away