本気のインターネットショップ開業派
ホーム - 初めての方へ - カートを見る/清算 - お問い合わせ  
info2015
     

トップ > 通販ショップの作り方 > SSIをマスターしよう

SSIをマスターしよう


ネットショップでは、商品数が増えてくると、比例してページ数も増えます。ページ数が増えると、管理の手間も増えます。商品説明の変更や価格の変更、ページデザインの変更、カラーの変更、やまもりてんこ盛りです。

ネットショップを全部制作ソフトなんかで作ってしまうと、運営中は編集作業の度に、ソフトを立ち上げては編集、FTPでサーバーにアップしてはチェック。こんな面倒な作業が待ち構えています。商品数1000点以上ともなれば、サイト管理のために1人雇わないといけないハメになるかも知れません。

そこで、そういった管理の手間を一気に省いてくれる技術の1つ、SSIを紹介したいと思います。特別変わったテクニックでも何でもなくて、昔からあるサーバー上の機能です。以下、データベースCGI活用講座(商品ページをCGIを使って自動作成するための方法を解説)の一部です。


実際にやってみよう

前回のSSIで便利を実感された方も多いと思います。でも、前回ピンと来なかったかたは以下の実験をするとピン!と来るでしょう。用意するのは2つのHTMLファイルです。

(1) a.html
(2) test.shtml 
(拡張子にご注意“.shtml”です。)

そして、それぞれのファイルの中に以下の内容を書きます。

(1) a.html

<h1>すげぇ!</h1>

これだけです。

<HTML>も<BODY>もなしです。(これがミソ)

「<h1>すげぇ!</h1>」これだけ書いて「a.html」で保存です。

次に、

(2) test.shtml

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


この2つのファイルをセットでサーバの同じフォルダない(ディレクトリ)にアップロードします。

そして、test.shtmlにアクセスします。

いかがですか?

「test.shtml」にアクセスしているにもかからず「すげぇ!」と表示されていますよね。

「すげぇ!」と書いたのは「a.html」です。

不思議ですよね?

それでは、「test.shtml」のソース(HTML部)を見てください。
(右クリック→ソースの表示)

「test.shtml」のページの中に「a.html」のHTMLが読み込まれて表示されているのが分かりますか?
まるで、「test.shtml」が「a.html」をパックリ食べた感じです。これを、「SSIのファイル読み込み機能」と言います。読み込めるのは、「.html」以外「.txt」ファイルもOKです。


SSIの書き方



さて、SSIのコメントの書き方です。「CGIの実行結果などを読み込ませる」場合は

<!--#include virtual="〜〜〜" -->

としますが、(“virtual”と書くのがポイントでした。)今回のように、「同一フォルダ内」の単なる静的ファイルを読み込ませる場合は、

<!--#include file="〜〜.html" -->

とします。(“file”と書くのがポイントです。)

同じファイルを読み込ませる場合でも、「相対パス」や「絶対パス」になる場合は場合は、

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

と“virtual”を使うのがポイントです。


当サイトでも使ってます。当サイトの左部分を見てください。メイン・メニュー(グローバルナビゲーション)がありますよね。

・HOME
・ネットショップの開業方法
・ネットショップの仕入れ
・ネットショップの運営




当サイトのページ数は、今20ページ以上はあると思います。「各ページ」の左側には、このメイン・メニューを配置しています。ほとんどのページのこの場所にメイン・メニューが配置されています。

一見、何でもないことなんですが、ある日、メイン・メニューに「特定商取引法」を追加しようとします。あるいは「お問合せ」でもいいでしょう。

どうでしょ。

ページは50ページ以上です。昔ながらのサイト作り方をしていると、50ページのメニューの部分全部に変更を加えないといけませんよね。

HP編集ソフトを使っても、コピペでシコシコ作業をしないといけません。1000ページ以上もあれば、その作業だけで1日が終わってしまいます。そこで、当サイトでは各ページSSIを使っています。

メインメニューは「menu.html」として1つのファイルを別に用意しています。(外部ファイルと言います。)そして各ページのメニューを配置する場所に、SSIのコメント

<!--#include file="menu.html" -->

この一行を入れています。

結果、メイン・メニューに追加、変更があった場合、「外部ファイル」の「menu.html」だけを変更してやれば、20ページ上のメニューの箇所は一瞬にして変更できるわけです。

どうですか?

理屈分かりますでしょうか??
「どのページでも同じ部分」にSSIを使えば、何ページになろうが編集作業は一発です。いや一瞬です。

以上、好評を博したメルマガからの抜粋でしたがいかがでしょうか。

SSIでファイルの大きさを測定したり、日付を表示させる方法は、多く書かれていることがあるんですが、こういった使い方を解説しているページはあまり見かけません。

今回紹介したものは、単にファイルの中身を読み込む機能だったんですが、SSIはCGIの実行結果も読み込むことができます(これは号泣の機能ですよ)。

また、Java Scriptを使って、同じように外部ファイル読み込む方法があります。これも非常に便利です。Java Scriptのファイル読み込み機能は、当サイトのサンプルショップで使っています。

ソースをじっくり見ると何かおかしなことに気づくと思います(笑)



TOP| ネットショップ開業方法| ネットショップの仕入れ| ネットショップの作り方| 運営| メルマガ| ブログ
ショッピングカートCGI| レンタルサーバー比較
当サイトは、さくらインターネットのサーバーで快適運用しています。

当サイト内の記事や写真、文章などすべてのコンテンツの無断複写・転載等を禁じます。
Copyright(c) 2005-2017 本気のインターネットショップ開業派(Netshop7.com) All Rights Reserved.