コーディングメソドロジー

第40回 SSIについて

SSIとはServer Side Includeの略でサーバー側に予め組み込まれたコマンドを利用する仕組みのことです。ウェブページで共通の部分(ヘッダーやフッター、メニュー等)などを別ファイルに作成して複数ファイルに取り込ませたり、ファイルサイズや更新日時、環境変数などを表示させたりすることができます。

SSIを有効にするには

サーバーでSSIが有効で無い場合、サーバー設定ファイル(httpd.conf)内の記述を変更する必要があります。レンタルサーバーの多くは直接設定ファイルを編集できないことが多いのでhtaccessファイルを作成し、そこにSSIを有効化するコードを記述します。

※ホスティング会社やプランによりhtaccessの設置に制限がある場合や記述方法に指定がある場合があるので事前に確認が必要です。
※htaccessファイルとはapacheなどのWebサーバーで使用できるサーバーをディレクトリ単位で制御(設定)できるファイルです。SSIやCGI、BASIC認証を使用する際、必要に応じてディレクトリに設置したりします。

SSIによるファイル取り込みイメージ

Apache 2.0でのhtaccess記述例)

1)

SSIを実行できるようにする
Options +Includes

2)

拡張子がshtmlのファイルでSSIを有効にする場合
AddHandler server-parsed .shtml

3)

拡張子がhtmlのファイルでSSIを有効にする場合
AddHandler server-parsed .html

上記をまとめると『.htaccess』内の記述は下記のものとなります。
Options +Includes
AddHandler server-parsed .shtml
AddHandler server-parsed .html

※すでにSSIが有効で、拡張子がhtmlのファイルにSSIを有効にさせたい場合は一行目の"Options+Includes"は不要です。
※ローカルマシンでファイル名『.htaccess』で作成できない場合は一旦『htaccess.txt』とtxtファイルとして作成し、サーバーにアップ後にファイル名を『.htaccess』とします。

htmlから外部ファイルを読み込む

htmlから外部ファイルを読み込むには、下記のコードを取り込ませたい
html内の表示させたい箇所に記述します。

<!--#include virtual="外部ファイル" -->

記述例)
header.htmlという外部ファイルを作成し、incというディレクトリに設置した場合。
<!--#include virtual="/inc/header.html" -->

※パスをサイトルートで記述することで階層が異なるhtmlにも共通ファイルを読み込ませるようにしています。また、外部ファイルの拡張子はhtmlにて作成しています。

メリット:ページ数が多いサイトを作成する場合には、SSIを利用して共通部分を別ファイルとして制作作業をすることで変更や追加の記述を複数のファイルにする必要がなくなるため、制作時間の短縮・ミスの軽減に繋がります。

デメリット:サーバー側ではSSIのコマンドを実行するためにファイル(デフォルトでは拡張子がshtml)内を解析しながら処理をするためサーバーに負荷がかかります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム