WEBデザイナーズNEXT

Webデザイナー

サクラインターネットのサーバーでSSIを使用してhtmlのままインクルード

カテゴリー:HTML
Pocket

はじめてのSSI
私はテスト環境でサクラインターネットのレンタルサーバーを使用しているのですが、SSIのインクルードではまったのでメモしておきます。
サクラのサーバーでphpを使用せず、htmlのままインクルード(include)する事を目的としています。

スポンサードリンク

共通ページをhtmlのままインクルードさせたい

大量ページのサイトを作成する時、ヘッダーやフッターなどの共通部分をincludeさせたいと思う事はありませんか?
phpを使えば簡単だけど、納品ファイルやクライアント確認なども考えると、phpではなくhtmlのままやりたいんですよね。
サクラインターネットのサーバーがちょっとやっかいなのですが、SSIでなんとか実装する事ができました。

SSIとは?

SSIとは「Server Side Includes(サーバーサイドインクルード)」の略で、HTMLファイルの中にコマンドを書くことによって他のHTMLを読み込んだり、CGIを読み込んで実行させたりする事ができます。

私はプログラマーじゃないので詳しい事はググってみてください…。とにかく、phpで言うとrequire_onceとかincludeのような事ができるんです!すばらしい!

普通にSSIを使用する

普通にSSIを使用する時は拡張子を「shtml」とか「shtm」などにします。SSI対応のサーバーであればそれだけで簡単にSSIが使用できます。
でも、それでは納得できませんよね…。そう、ほとんどの方は拡張子を「html」のままSSIを使用したいんです!

SSIをhtmlのままでさっそく実装してみる

実は意外と簡単なんですよね。大きく分けて3つの作業だけなんです。

・SSIをhtmlのまま使用できるようにする
・htmlの中に実際にコマンドを書く
・ファイルをサーバーにアップロードする

SSIをhtmlのまま使用できるようにする

まずは「.htaccess」ファイルを用意します。

.htaccess


この.htaccessファイルを使用したい環境にアップロードします。

htmlの中に実際にコマンドを書く

今回はindex.htmlの中にinclude.htmlを読み込ませてみました。各ファイルの中身は以下のような形になります。※HTMLタグやBODYタグなどは省略

index.html


include.html


.htaccessファイルはhtmlファイルのままSSIを使用できるようにするファイル、index.htmlはページのファイル、include.htmlはインクルードするファイルになります。

ファイルをアップロードする

私がテストした環境は以下のような感じです。ルートに全部設置しました。
ファイルアップロード

URLを叩いてアクセスしてみる

index.htmlを叩いて以下のようなテキストが表示されればばインクルードが成功しています。

このテキストはinclude.htmlに書かれているものです。
当然ですが、htmlタグなども使用できます。

index.htmlからinclude.htmlに値を渡したい

SSIには色々なコマンドがあるのですが、私がやりたいのは以下のような事でした。

  • ・index.htmlにヘッダーをインクルードする
  • ・そのインクルードされたヘッダーの中身を一部書き換えたい

もっと具体的に説明すると、複数ページの制作を行っている中で、ヘッダー部分は共通ではないんですよね。
ヘッダーの中に設置するcssを個別に設定したいし、タイトルの部分も当然ページによって違う…。だからヘッダーを一括インクルードできないわけです。ページ毎に変数のようなものを設定して、個別のhtmlページからインクルードするヘッダーのファイルに値を渡したかったんです。

この部分で悩んでいる人もいるんじゃないでしょうか?

これで解決!SSIで変数のようなものを使って値を渡す

まず、index.htmlの中に以下のような記述をします。

index.html


「var」が変数名、「value」が変数の値という感じだとわかりやすいですかね。
phpで書くと、「$css_value = ‘sample.css’」と同じです。

そして、include.htmlに以下のような記述をしてみます。

include.html


これはすごくわかりやすいですよね。
phpで書くと、「echo $css_value」と同じです。

index.htmlとinclude.htmlを先ほどアップしたサーバーに上書きしてみましょう。
index.htmlにアクセスして、以下のテキストが表示されていたら値がきちんと渡っています。

このテキストはinclude.htmlに書かれているものです。
当然ですが、htmlタグなども使用できます。
index.htmlから受け取った値は「sample.css」です。

サクラインターネットのサーバーでSSIを使用してhtmlのままインクルード まとめ

サクラのレンタルサーバー
今回はサクラインターネットのレンタルサーバーという事を前提です。
他のサーバーでは「SSIをhtmlで使用する」部分のやり方が違うかもしれないので、他サーバーの方はGoogle先生に聞いてみてください。すいません…。

今までphpやjavascriptを使用したincludeしかやった事がなかったので、勉強になりました。
これができれば100ページ規模のフッター修正なんて事がなくなりますよね。

スポンサードリンク

Pocket

カテゴリー:HTML
WEBデザイナーズNEXT TOP