MB-Support

パソコン初心者のサポートページ

ホームページに SSI を組み込んでみる

 SSI は Server Side Include の略。 コンポーネント(部品)化を 静的な HTML ファイルに組み込む事が可能で、サーバーサイドで処理されます。 つまり、クライアントにアップロードするホームページファイルは、コンポーネントを組み込んだ後の HTML ファイルとなります。


はっきり言って私はホームページ製作に関しては素人であり、このページを作り初めて1年が経ちましたが、独学のためか未だに初心者の領域にあります。 この事実をふまえて日記をお読み下さい。

昨日までは解像度 800 × 600 に対応させるため横幅を狭めていました(正式にはまだ完了していません)。 これはページを閲覧していただいているクライアント様を考慮したホームページの修正です。 で、本日は管理人側の使いかってを考慮した修正を実験してみました。 「221B Baker Street」のページ構成は、上から「タイトル」「メニュー」「本文」と 3 つに分かれ、 その内 2 つの「タイトル」「メニュー」はどのページでも共通した内容になります。 「タイトル」は頻繁に修正する必要がないので、さほど気になりませんが、メニューの部分は新規ページを製作するたびに全ページを更新する必要があります。 ページ数が 5 〜 6 ページくらいなら問題にはなりませんが、数 10 ページにもなると重労働です。そこで「タイトル/メニュー」、「本文」と 2 つに分けようと考えました。 「タイトル/メニュー」の部分を 1 つにして、各ページで同じ物を表示する方法です。 これならば、新規ページを追加する時に、「タイトル/メニュー」の 1 箇所を修正すれば全ページに内容が反映されます。 で、ここですぐ思いつく事は「フレーム」で構成する方法です。


JavaScriptを使ったメニューの画像

ところが、このメニューは「JavaScript」を使用して、マウスを乗せると下にリンクが表示される仕組みです。 つまりフレームが使えないのです。 「タイトル/メニュー」部分を「IFRAME」で埋め込む事も無理となります(可能ではあるがフレームと同じで、JavaScript メニューの利点が死んでしまいます)。 そこで、昨日の日記にも書きましたが「SSI(Server Side Include)」を使用する方法です。 昨日は失敗に終わりましたが、本日は成功しました!!


まず共通させたい部分を「タイトル/メニュー」htm ファイルとして普通に保存します。 管理人の場合は外部 JavaScript を埋め込んでいますが、これからは直接書き込んでも問題はありません。 注意が必要なのは、HTML ファイルに入力するソースは、複数のページに挿入したいソースで、HTML ファイルだからといって、head や body を記入する必要はありません。

次に、各ページの本文を shtm で保存して、タイトル/メニューの部分に先に保存した HTML ファイルを埋め込みます。 ファイルの挿入タグは、例えば menu.htm を挿入したい場合の例は以下。

<!--#INCLUDE FILE="menu.htm"-->

「IFRAME」を使用した場合はページとして読み込まれるため、クライアント側が2つのページをダウンロードする事になります。 また上下 2 つに別けるフレームを使用した場合は、フレーム htm 、タイトル/メニュー htm 、本文 htm と 3 つのページをダウンロードする必要があります(普通のメニューの場合はこの方法で十分)。

しかし「SSI(Server Side Include)」を使用すると、本文 shtm をダウンロードするだけで「タイトル/メニュー」と「本文」を表示できます。 これは本文 shtm のソースに、タイトル/メニュー htm のソースを貼り付けだけであり、貼り付け作業はサーバー側が実行するからです。 つまりファイルは2つありますが、クライアントに渡すホームページファイルは1ページであり、SSI で組み込まれた後のソースになります。


これで、どんなにページが増えても、「タイトル/メニュー」htm ファイル、1 ページを修正するだけで変更が可能になり、管理人は大助かりです。 ただし、早い話がメニューをテキストリンクにしてしまえばフレームを使用して簡単にできた事です。 テキストリンクが増えたら、フレームにスクロールバーを表示させれば良いだけの事です・・・





BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2017 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項