SSI(サーバーサイドインクルード)とは。

こんにちは！ 湘南 藤沢の小さなWeb制作所、S-Create Garageです。

今回は「SSI(サーバーサイドインクルード)」について書いてみようと思います！

これを利用できるようになると、HTMLでのWeb制作がとっても楽チンになります(‘◇’)ゞ

SSI(サーバーサイドインクルード)とは。

皆さんはHTMLでサイトを作る際に、ヘッダーやフッターってどうされていますか？

マルチページの場合はコンテンツが増えてくると、いちいちメニューのリンクの書き換えや追加作業が出てきますよね。
毎度全ページのHTMLを開いて書き換えて… とても大変ですよね。

ページが少なければまだ把握しやすいけど、ページ数が増えるにつれて記入漏れもあるかもしれないし、リンクがうまくつながっていないかもしれない。

phpファイルやWordPressみたいに「一つのヘッダー」「一つのフッター」を各ページに自動的に反映できれば、手間も間違いのリスクも減らせます。

では、phpファイルやWordPressのように各パーツをテンプレート化し共通化するにはどんなことが必要なのか？を説明していきます(‘◇’)ゞ

まず最初にメリット、デメリットの紹介

それでは、SSIのメリットとデメリットを簡単に紹介していこうと思います。

◎メリット

最初に少し書きましたが、メリットの一つとして

・手間が省ける
・間違いのリスクが減る
・ファイルの管理がしやすい

主に、これが大きな特徴ではないでしょうか。

僕はインクルードフォルダを作し、その中に該当するファイル(headerやfooter)を入れ込んでおき、各HTMLファイルにインクルードさせています。

↑↑参考例です

×デメリット

・htaccessに記述をする必要があり、初心者の内は理屈がわからないと難しく感じる。
・ローカル環境での作成時に、通常のプレビュー方法では表示の確認ができない。

主に不便に感じるのは、通常のようにプレビューができないところかと思います。
殆どの場合cssファイルやjsファイルのリンクがheadタグ内にいる事が普通ですので、実際の表示を確認するためにはサーバーに一旦アップする必要があります。

実装のやり方。>実装のやり方。

※SSIを使用するには契約しているサーバーのSSIが許可されている必要があります。 実装してもうまくできない場合はSSI対応のサーバーか確認をしてください。

① .htaccessファイルにSSIを有効にするコードを記述する

Options +Includes
AddHandler server-parsed html

.htaccessファイルに上記のコードを記述して、サーバーにアップロードしましょう。
1行目の「 Options +Includes 」はSSIを使えるようにする記述です。
2行目の「 AddHandler server-parsed html 」はHTMLファイルに対してSSIを有効にしますよ。という記述になります。

②HTMLファイルにインクルードのコードを記述

インクルードするコードをHTMLファイルに記述するには、方法が2種類あります。次に説明する「 file 」、もしくは「 virtual 」を使います。

僕はちなみにVirtualしか使ったことはないです<(_ _)>

・fileの場合

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

「 file 」は上層のディレクトリを読み込むことができません。
少しややこしいですが、「同階層」また「下層ディレクトリ」のファイルを読み込むことができます。

  • 同階層を読み込む場合「 file=”〇〇〇〇.html 」
  • 下層ディレクトリを読み込む場合「 file=”inc/〇〇〇〇.html 」

・virtualの場合

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

「 virtual 」は上層のディレクトリや絶対パスを読み込むことができます。
ですので、こちらの方が汎用性は高いかと思います。

  • 上層ディレクトリを読み込む場合「 virtual=”../inc/〇〇〇〇.html 」
  • 絶対パスで読み込む場合「 virtual=”/inc/〇〇〇〇.html 」

この様に記述してあげることで、テンプレートパーツとして部分ごとに分離してあげる事ができ、ファイルの管理がとてもやり易くなります。

まとめ

毎度毎度、全部のHTMLファイルを開いて該当箇所の書き換えをするのもダメではないんですが、手間ですよね(;´･ω･)

そんな時は今回紹介した、SSI(サーバーサイドインクルード)を試してみましょう！

これを利用することでメリットとして

  • 書き換える手間が省ける
  • ファイルの管理が楽になる
  • 間違いのリスクが減る

またデメリットとして

  • htaccessファイルの書き換えが必要
  • ローカル環境でのプレビューができない。
  • そもそもSSI対応サーバーである必要がある。

上記の様な事があります。

S-CreateGarageではこのようなファイルの整理整頓、簡素化をしたサイト制作を行っております！
湘南、藤沢地区、もちろん全国からのホームページ制作、チラシデザイン等のご依頼等お待ちいたしております！

お仕事のご依頼はこちらから。

それではまた！

PAGE TOP