通販ショップを始めよう。現役店長が教える開業運営きほんのきほん

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のコメントの書き方です。「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のファイル読み込み機能は、当サイトのサンプルショップで使っています。ソースをじっくり見ると何かおかしなことに気づくと思います(笑)

通販システム切り替え組

ショップサーブ資料請求

楽天なんか退店しちゃえ!

↑ PAGE TOP