［特集］

P o

u
Y o
home
99年はこの機能で差をつけろ！

ホームページ
だれもがホームページを持つのは当たり前のことになった。HTML の書き方に頭を悩ませたり、画像やプラグインを表示させて喜んだりしていた時代はもう過ぎた。充実した参考書や便利なソフトウェアは世の中にあふれている。
ロゴを作った。
アニメーションGIFも付けた。JavaScriptにも挑戦して164 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e rupy o u rhomepage

w e r
大改造計画
p
u r
page
みた。それでも今のページに何かもの足りなさを感じてはいないだろうか？ 差が付くホームページ作りを目指す人のために、これ以上はないパワーアップの方法をお届けしよう。
これさえ読めば、ホームページがさらに楽しく、一段とかっこよくなるはずだ。

編集部編

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

165

「見せる」
だけではつまらない1999年、ホームページ
これまで以上にホームページを魅力的にするにはどうすればいいだろうか？
画像を作り直したり、デザインに凝ってみたりしただけでは今までとあまり変らないものになってしまう。今年のホームページに差を付けるものは、ページの作成者と訪れる人をダイナミックに結び付けるさまざまな「機能」だ。

P o w e rupy o u rhomepage
166 INTERNET magazine 1999/4

クッキーを活用する
ページを読んだ相手の情報をすぐに忘れてしまうのがWWWのよい点だが、弱点でもある。この弱点を補うために発明されたのがクッキーだ。訪れた人とのつながりをさらに強くするためにクッキーを積極的に活用しよう。
ページが以前に訪れた人を覚えているかのような動きを作り出せる。有名ポータルサイトのような高機能ページも夢ではない。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage

は
「機能」
で勝負！
最近は高機能な掲示
板サービスを提供するプ

もっとインタラクティブに

ロバイダーやウェブサイ

掲示板を作るトが増え、自分でCGI

いつまでも一方通行の情報ばかり載せていては、ページを見に来る人を用意する必要はなくな

は興味をなくす。それでは「自己満足」と悪口を言われてもやむをえなった。今こそ自分のホーい。情報を発信するだけでなく、やり取りする場となってこそホームペムページに掲示板を付けージを持つ意味が出てくる。オープンでインタラクティブなインターネッ

る絶好のチャンスだ。ペトの特長を活かせるような機能をホームページに組み込もう。読んでくージの内容と連動した話

れた人の感想を募集するコーナーや掲示板を設置すれば、同じ話題に関題で参加者を集めよう。

心を持つ人が自然と集まるようになる。ホームページを中心にして情報

多くの人が訪れて書き込が交換されるようになれば、ただのHTML ファイルだったものが世界中みが蓄積されていけば、の人が参加できる「場」に変わるだろう。

個人のページも濃い情報が満載のサイトになる。

ページのスタイルにもこだわる
どんなページでも、作ればすぐにだれかの反応がほしく

ページにコンテンツが増えてきたら、全体の設計を見直して、なるものだ。読んだ人のメッ

統一感のあるスタイルを追求してみよう。フレームを使う場合

セージを送ってもらうのにもでもテーブルを使う場合でも、デザインに加えてナビゲーション

っとも手軽なのは、電子メー

機能にも気を配りたい。訪れた人が「このページなら情報を見ルの機能をホームページに取つけやすい」という印象を受けるようなスタイルを考えよう。

り入れることだ。インターネ
ットでもっともよく利用されているWWWと電子メールの2 つを組み合わせてハイブリ

読者の意見をもらう

リンクで差を付ける

ッドなページを作ってみよう。
ただ項目を並べただけでは、訪れた人はどこをクリックすればいいか迷ってしまう。そもそもリンクがあることもわからないかもしれない。ト

CGI に挑戦する

ップページしか見てもらえないサイトでは意味がページにインタラクティブな機能をない。ホームページを生かすも殺すもリンク次第

自由に付けるには、さまざまなデータだ。用意したサブページのすみずみまで見てもらをサーバー側で保存できるCGIを使う

えるように、リンクに工夫をこらしてみよう。

のがベストだ。CGI は難しいものとあきらめている人が多いかもしれないが、覚えるのは一定の手順だけでいい。あソースコードをCD-ROMに収録とはCGIプログラムを入手して手を加えれば、だれでもCGI のパワーを手に入れられる。試しに本誌の付録 CDR O M に収録したリアルタイム投票
CGIを使ってみよう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+CD-ROM

この特集で使用したサンプルのソースファイル
は付録CD-ROMに収録している。ちょっと手を加えて自分のページに追加するだけでいい。最小限の手間でホームページがパワーアップだ。

INTERNET magazine 1999/4

167

だれもが操作しやすい工夫をする

スマートな構成のページにしたい
ホームページの機能でもっとも重要なのが「ナビゲーション」だ。
いくらすばらしいコンテンツを作っても、訪れた人がメニューをたどれないと意味がない。
そこで、最近の定番とも言える3つの枠（ペイン）で構成されたスタイルのページを作ってみよう。

最新のスタイル は 3 ペ インで決まりだ
現在、人気があるサイトの多くはページを3際の情報が記述された部分という具合だ。た

スタイルを取り入れている理由もここにある。

つの部分に分けて構成しているのに気が付いてくさんの情報があるページでは、全体のメニュ

自分のホームページでもコンテンツが増えてきいるだろうか。メインメニューが記述された部

ーや関連するメニューが常に見えているこの形

たら、この形を取り入れてみよう。きっと読者分、サブメニューが記述された部分、そして実がナビゲーションに最適だ。人気サイトがこのは情報を探しやすくなるはずだ。

フレームで 3 ペ インのスタイルを作る
index.htm
3 ペインのページを作るには、フレームを使うのが最適だ。トッ
プメニューとサブメニューに対応したHTMLを用意すれば、今あるページをすぐに3ペインにできる。
このサンプルで必要なHTMLフ
ァイルは次のとおりだ。フレームの土台となるHTML（index.htm）とトップメニューの H T M L<HTML><HEAD><TITLE> 私のホームページ </TITLE></HEAD>
上下に表示する指定

トップメニュー

トップメニューの高さを指定<FRAMESET ROWS="100,*"><FRAME SRC="top.htm" NAME="top"><FRAME SRC="new/index.htm" NAME="bottom"><NOFRAMES>
このページを見るにはフレームの表示ができる
ブラウザーが必要です。
</NOFRAMES></FRAMESET></HTML>（top.htm）を同じディレクトリー

newの下のindex.htm（フォルダー）に置く。この2 つのHTML と同じディレクトリーに「new」というサブディレクトリーを作る。そのディレクトリ
ーの中に、サブメニューのフレームの土台となるHTML（index.htm）と左のサブメニューとな
るHTML（side.htm）を置き、さらに情報ペー
ジ（new1.htm）を1つ作っておく。

<HTML><HEAD><TITLE> サブフレーム </TITLE></HEAD>
左右に表示する指定

サブメニューの幅を指定

サブメニュー<FRAMESET COLS="200,*"><FRAME SRC="side.htm" NAME="side"><FRAME SRC="new1.htm" NAME="main"></FRAMESET>

情報ページ</HTML>

次にフレームの土台となる2 つのindex.htmの内容を書こう。フレームの土台となるので、フレームのメリットとデメリット<BODY> タグの代わりに<FRAMESET> タグ

フレームのメリットはユーザーがリンクをた

かれたHTML）のURLだけが表示され、ユーで全体を囲う。その中に<FRAME> タグのどりやすいことのほかに、作成する側にとっザーが今何というファイルを見ているのかがわ

SRC 属性でフレームの内容となるHTML ファては、変更されることが少ないメニュー部分

かりにくくなる点だ。また、リンクを作る際イルを指定する。最初の土台となるindex.htm

をあまり気にせずに、日々更新される情報ペにはどのフレームに表示させるか、あるいはウでは、sub.htmとnew/index.htmが上下に表ージだけに作業を集中できる点にある。デメィンドウ全体に表示させるのかと気を配る必示されるように指定する。newディレクトリー

リットは、どのページを見ていてもブラウザー

要がある。実作業は少なくなるが、構成をよの下にあるi n d e x . h t m では、s i d e . h t m とにはトップページ（<FRAMESET> タグが書く考えてからページを作ろう。

168 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepagenew1.htm が左右に表示されるように指定すnew の下のside.htm には、次のようなリンからは、「<A HREF= "question/index.htm"

る。<FRAME>タグにはすべて、フレームの内クを作る。TARGET属性の「main」はnew1.

TARGET="bottom"」というリンクを作る。

容を切り替えられるようにNAME 属性で名前

htmに付けた名前だ。

newのサブメニューに項目を増やしたければ、同じディレクトリーにnew2.htmを置き、サブメを付けておく。
<A HREF="new1.htm" TARGET="main">
最新のニュース </A>

最後に、3 ペイン構成のメニューがうまく動くように、フレームの間にリンクを貼ろう。ト

ニューを表示するside.htmから「<A HREF="new2.htm" TARGET="main">」というリンクを作ればいい。

ップページであるtop.htmには、次のようなリ以上で3 ペインのフレームページの完成だ。

ンクを作る。TARGET 属性の「bottom」はあとは応用でHTMLファイルやリンクを増やし

ソースコードと実際に表示されるページがどnewの下のindex.htmに付けた名前だ。

ていけばいい。トップメニューに項目を追加しのような関係になっているか、左ページの図をたければ、questionというディレクトリーを作

見てしっかり理解しよう。

<A HREF="news/index.htm"
TARGET="bottom">What's New</A>

り、 n e w の下 と同 じように i n d e x . h t m 、
side.htm、question1.htm を置く。top.htm

もっと簡単に 3 ペ インのフレームを使う
フレームについて説明しているHTMLの参考

クから下部の2つのフレームを一度に切り替え

ずに、ロゴや広告だけを置くのに使うのなら、

書では、下のソースのように<FRAMESET>〜

るには、次のようなJavaScriptが必要になる。

この作り方のほうがおすすめだ。上部のフレー</FRAMESET>の中にまた<FRAMESET>を書いて3 ペインのフレームを作成する例が多い
はずだ。左ページのサンプルでは1 ページを構成するのに最少でも5つのHTMLファイルが必要だったのに比べ、これなら4つですむ。
ただし、上部のフレーム（top.htm）内のリン<A HREF="javascript:
parent.side.location.href = 'qa/side.htm ';parent.main.location.href = 'qa/qa1.htm ';void(0);">Question</A>

ムにリンクを置かない場合は、デザイン上は3ペインだが機能的には2ペインのページとなる。
つまり、左側がトップメニューでサブメニュー
なしに右側が情報ページとなるわけだ。

上部のフレームをトップメニューとして使わ<HTML><HEAD><TITLE> 私のホームページ </TITLE></HEAD><FRAMESET ROWS="100,*"><FRAME SRC="top.htm" NAME="top"><FRAMESET COLS="200,*"><FRAME SRC="new/side.htm" NAME="side"><FRAME SRC="new/new1.htm" NAME="main"></FRAMESET><NOFRAMES>
このページを見るにはフレームの表示ができる
ブラウザーが必要です。
</NOFRAMES></FRAMESET></HTML>

ソースの収録先+CD-ROM

ウィンドウズ

CD-ROM A Special→Win→Frame
マッキントッシュ

CD-ROM A Special→Mac→Frame

覚えると便利！ フレームの属性
FRAMESETとFRAME共通の属性
BORDERCOLOR

フレームの枠線の色を「#FF8000」のように指定する。

FRAMEBORDER

フレームの枠線を表示するかどうかを「YES」または「NO」で指定する。

FRAMESETの属性
BORDER

フレームの枠線の幅を指定する。0にすると枠線が消える。1番外側のFRAMESETにのみ指定できる。

FRAMEの属性
MARGINHEIGHT

枠線からフレームの内容まで上下方向にどれだけスペースを空けるか数字で指定する。

MARGINWIDTH

枠線からフレームの内容まで左右方向にどれだけスペースを空けるか数字で指定する。

NORESIZE

フレームのサイズをユーザーが変更できないようにする。
「=」を付けずにタグの中にNORESIZEとだけ書く。

SCROLLING「YES」を指定するとフレームにスクロールバーが付く。
「NO」を指定するとスクロールバーを消してスクロールを禁止できる。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

169

テーブルで 3 ペ インのスタイルを作る
フレーム機能を使わなくても2 ペインや3 ペ

セルとし、2 行目に2 つのセルを置いて左はサ

インのメニューをレイアウトできる。現在では、ブメニュー用のセル、右は情報を表示する部分

特にニュースなどの情報系サイトではフレームのセルとする。左右のセルの幅（<TD>タグのを使わないケースが多くなっている。インプレ

WIDTH 属性）は、合計で<TABLE> タグのスの「インプレスウォッチ（h t t p : / / w w w .

WIDTH属性と同じになるようにしておく。

watch.impress.co.jp/）」もその1つだ。フレすべてを1 つのテーブル内に置かないで、トームには168 ページに挙げたような欠点がある

ップメニュー用のテーブルとサブメニュー用＋からだろう。

情報表示用の2つのテーブルを上下に並べるのフレームを使わなくても、テーブル（表組み）

テーブルのメリットとデメリット
テーブルを使ってページを構成した場合、あまりテーブルを入れ子にして複雑にしてしまうと表示に時間がかかる。またHTML 内のタグはフレームよりも明らかに多くなるので、修正などで手間取るかもしれない。それでも、HTML ファイルの数がフレームの場合より少なくなるぶん管理はしやすいはずだ。

もよく見られる書き方だ。

を使って各セルにフレームと同じようなの役割

また、<BODY>タグでは、テーブルのセルがをさせれば、3ペインのページと同じナビゲーシ

ブラウザーのウィンドウの枠にぴったりと収まョン機能を持つページが作成できる。

っているように見せるために、マージンを指定

まず、HTML の<BODY> タグのすぐ内側をする属性の値を0 にする。下のサンプルでは使<TABLE> タグで囲む。WIDTH 属性を指定しっていないが、テーブルを利用して3 ペインのて幅を固定するのがポイントだ。幅を変えたい

スタイルを作る場合は、背景画像やテーブル内

場合は、サンプルの640という数字を変えればに配置した画像を効果的に使ってデザインするいい。テーブルの1 行目はトップメニュー用のといいだろう。

フレームと比べたときのデメリットは、メニューなど各ページで共通の部分に追加や削除の必要がある場合、すべてのHTMLフ
ァイルを修正する必要が出てくることだ。
ページ数が多いサイトでは苦労することも覚
悟しなくてはならない。

<BODY TOPMARGIN=0 LEFTMARGIN=0
MARGINHEIGHT=0 MARGINWIDTH=0><TABLE WIDTH=640 BORDER=0 CELLSPACING=0 CELLPADDING=8><TR><TD BGCOLOR="#60FF60" COLSPAN=2 VALIGN=TOP>
トップメニュー用のセル
</TD>
</TR>
<TR>
<TD WIDTH=150 HEIGHT=800 BGCOLOR="#60FFFF" VALIGN=TOP>
サブメニュー用のセル</TD><TD WIDTH=490 HEIGHT=800 BGCOLOR="#FFFFC0" VALIGN=TOP>
情報用のセル</TD></TR></TABLE></BODY>

自分の情報に合ったメニューを作り上げる
ウェブではどのページからでも好きなページのファイルならプロジェクトごとに同じ系列で「情報ページ」とする。これでフレームやテーにリンクできる。しかし、どのようにリンクをフォルダーに整理するだろう。自分が持っていブルで表すのに適した3階層のメニュー構造が配置すれば、見ている人が見たい順番に情報る情報も、まずおおまかなカテゴリーに分けてできあがる。

に本当にたどり着けるのだろうか？ ページ数がみる。ある情報が1ページに収まりきらなけれ

多くなればなるほどこの問題は難しくなる。

ば、さらにカテゴリーに分ける。

さらにこの下を細かく分類してメニューにすることもできるが、見る人はおそらく混乱する

そこで、身近にある自分のコンピュータを見

こうして情報を分類するとホームページのツことになるだろう。自分の見ている情報が3階てみよう。ホームページにファイルを置くのも、リー構造ができあがる。この状態から上位のカ

層目のページなのか4階層目のページなのか判

要領はハードディスクの整理と同じだ。アプリ

テゴリーを「メインメニュー」とし、その下の断がつきにくく、以前の階層に戻るのに何回ケーションならアプリケーションごとに、仕事カテゴリーを「サブメニュー」、実際の情報を戻ればいいかわからなくなってしまうからだ。

170 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
JavaScript を活用して手間を省く
フレームを使わずにテーブルを使ってページ

一番上の行の「sourcenumber =」で埋め込を作ると、メニューを修正するときにいくつもむ行数を指定する。JavaScriptの文字列にす

なお、J a v a S c r i p tを使う方 法 のほかに、のページを直す作業が必要になる。複数のるときには、「"」を「¥"」に変える。次に、H T M L ファイルをサーバー上で処 理 させる

HTMLファイルで共通の部分を1つのファイル

HTML ファイルには埋め込みたい位置に空の「Server Side Include（SSI）」を使っても同ですませられれば、手間が省けて楽だ。それに<SCRIPT>タグを書いてSRC属性に「.js」フじことができる。HTML 内に以下のようなSSIはJavaScript を使って共通するタグを自動的

ァイルの名前を指定する。

呼び出しの命令を1行書くだけで、ページの途

この方法ならメニューページなど共通する部に書き込むようにすればいい。
まず、HTMLファイルとは別に拡張子が「.js」

分の使いまわしが簡単にできる。ただし、ネッのテキストファイルを作り、その中にJavaScript

トスケープナビゲーター、IEともに<SCRIPT>える作業がやや面倒だ。

中にmenu.htmの内容を埋め込める。
<!--#include file="menu.htm"-->を書く。具体的には、共通の部分となるHTML

タグのSRC属性をサポートしているのは3.0以

ただし、SSI にはセキュリティー上の問題がの行をJavaScript の文字列に直してサンプル

上 なのでブラウザーが限 定 される。 また、発生しやすいため、サポートしているプロバイのように「source [数字] =」の後に書いていき、HTML のタグをJavaScript の文字列に書き換

ダーは少ない。

index.htm<SCRIPT LANGUAGE="JavaScript1.2" SRC="topmenu.js"></SCRIPT>

topmenu.js//ソースの行数を指定する
sourcenumber = 10;
source = new Array(sourcenumber);
共用するソース//ソースの内容を記述する
source[0] = "<FONT SIZE=5>Internet Magazine のホームページ </FONT>";
source[1] = "<TABLE BORDER=0 ALIGN=CENTER>";source[2] = "<TR BGCOLOR=¥"#FFFF00¥" ALIGN=CENTER>";source[3] = " <TD WIDTH=100><A HREF=¥"new/index.htm¥">New</A></TD>";source[4] = " <TD WIDTH=100><A HREF=¥"qa/index.htm ¥">Question</A></TD>";(中略)source[9] = "</TABLE>";//実際の書き込み処理
for(i = 0 ; i < sourcenumber ; i++) document.write(source[i] + "¥n");

ソースの収録先+CD-ROM

ウィンドウズ

CD-ROM A Special→Win→Table
マッキントッシュ

CD-ROM A Special→Mac→Table

ページサイズと読みやすさ
ページのサイズについて考 えてみよう。

は表示される情報量にも依存している。大量の中に文字を入れて読みやすくしていることがHTML は基本的に見る人の環境（ブラウザーの情報を扱うときには面積を多く取らざるをえ多い。もっと突き詰めていけば、文字の大きのウィンドウサイズ）に合わせて表示される。

ないが、うまく分類してメニューを作れば、そさや行間をコントロールできるCSS（スタイル

ひと昔前までは、ノートパソコンのディスプレれほど多くの面積が必要になることはない。

シート）の導入も検討してはいかがだろうか。
スタイルシートでも上記のJavaScript の例とイに合わせてVGA（640 ×480 ピクセル）のそれよりも、文章を読ませることを目的にし横幅で収まるように作るのが定石だった。現ているなら、文字のほうに気を配るのが重要

同じように、外部ファイル（拡張子「.css」）

在は状況も変わり、ポータルサイトではデスクだ。もし1行が画面いっぱいに広がっていたらを作って複数のページで使う文字の大きさや行

トップパソコンの画面を埋め尽くすようなレイ

どうだろうか。とても読みにくいはずだ。読み間が設定できる。こだわる人は一度ためしてほ

アウトも登場している。もちろん、レイアウト

物的なページでは、幅を指定したテーブルタグ

しい。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

171

思わずクリックしたくなる

ひと味違うリンクを作りたい
ウェブページのウェブページたるゆえんは「リンク」にある。
そしてどんなウェブサイトにも必ず「リンク集」がある。
「たかがリンク」とあなどってはいけない。
このリンクをもっと高機能なものにすればページ全体の見栄えや使い勝手が変わるはずだ。

プルダウンメニューでコン パクトなリンク集を作る

3ペイン構造の場合、サブメニューを表示する部分にリンクが増えていくととても見づらくなってしまう。これを解決してくれるのがプル
ダウンメニュー式のリンクだ。左図のようにプ
ルダウンメニューにしておけば、リンクをコン
パクトにまとめられる。
プルダウンメニューはフォーム用のタグの1つである<SELECT> を使ったものだ。このタグは複数の選択肢から1つを選んでその結果をサーバーに送るためのもので、CGI プログラムと組み合わせて使うのが一般的だ。今回はCGIを使わずに<SELECT>とJavaScriptを組み合わせて選択肢の部分がリンクになったプルダウ
ンメニューを作ってみよう。実際には左の図のようにプルダウンメニューからそれぞれの項目を選択するだけで、リンク先にジャンプするようになる。
このHTML ファイルは左下図のようになる。
ポイントは2行目の<SELECT>タグの中にある「onChange」以下のJavaScriptだ。ここは間違いのないように記述してほしい。
「<OPTIONVALUE=" "」の「" "」の中にリンク先のURLをを次々と書いていけばいい。
比較的簡単な記述でリンクがコンパクトにまとまるのでレイアウトがすっきりするはずだ。

pulldown.htm<FORM><SELECT onChange="location=this.options[this.selectedIndex].value">

JavaScript部分はそのまま入力<OPTION SELECTED> リンク先を選んでください<OPTION VALUE="http://internet.impress.co.jp/"> インターネットマガジン

プルダウンメニューに表示させる文字列
リンク先のURL<OPTION VALUE="http://www.watch.impress.co.jp/internet/"> インターネットウォッチ<OPTION VALUE="http://www.watch.impress.co.jp/pc/">PC ウォッチ
<OPTION VALUE="http://www.forest.impress.co.jp/"> 窓の杜<OPTION VALUE="http://www.infoseek.co.jp/"> インフォシーク<OPTION VALUE="http://www.goo.ne.jp/">goo<OPTION VALUE="http://www.hotwired.co.jp/"> ホットワイアード

ソースの収録先+CD-ROM

ウィンドウズ</SELECT>

CD-ROM A Special→Win→ Link → PULLDOWN.HTM</FORM>

マッキントッシュ

CD-ROM A Special→Mac→ Link → PullDown.htm

172 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
マウスを載せたときにリンクボタンの色を変える
リンクをボタンなどの画像にした場合、読者がウェブページを見てはたしてそこがただの画像なのかリンクなのかがわからないことがある。
このような場合、マウスをリンクボタンに合わせたときにリンクボタンの色や形が変わるようにしておけば、そこが何かの「ボタン」だといマウスを画像に合わせるとうことがはっきりわかる。
この仕掛けには通常の状態で表示される画像とマウスが載ったときに変化する画像をペアで使うので、必要な数だけ用意しておこう。
HTMLファイルは下図のようになる。ヘッダ
ー部分のJavaScript はおまじないだと思えばいい。1 つだけ注意したいのは用意するリンク
ボタンの数だ。このHTML で「15」（青い文字）となっている数は、リンクボタンの数（右の画面では16個のリンクボタン）より1つ少ない数となっている。自分が用意したボタンの数
から1を引いた数に書き換えよう。

通常のリンクボタン

画像のファイル名は、通常表示させるものは「LinkX.gif」（Xは0から15までの数字）とし、マウスが載ったときのリンクボタン

マウスが載 ったときに表 示 させるものはソースの収録先「ULinkX.gif」としておく。ボディー部分の+CD-ROM

ウィンドウズ<A>タグ内の青の数字が画像のファイル名（先CD-ROM A Special→Win→ Link → IMGLINK.HTM
マッキントッシュ

ほどのXという数字）に対応しているので、同じ

CD-ROM A Special→Mac→ Link → Imglink.htm

数字（この例では0から15まで）を指定しよう。

imglink.htm

ヘ
ッ
ダ
ー
部
分

<HEAD>

リンクの項目より1少ない数（例の場合、WHAT'S NEWからUPDATEまで16）<SCRIPT LANGUAGE="JavaScript">

リンクボタンにマウスが載ったときに新しい画像を表示させる関数

ULink = new Array();

リンクボタンからマウスが離れたときに新しい画像を表示させる関数

for (i = 0; i <= 15; i++) {ULink[i] = new Image(); ULink[i].src = 'ULink' + i + '.gif';}

マウスがリンクボタンに載ったら関数LinkI(0)を呼び出す

function LinkI (n) {document.images['Link' + n].src = ULink[n].src;}

マウスがリンクボタンから離れたら関数LinkO(0)を呼び出す

function LinkO(n) {document.images['Link' + n].src = 'Link' + n + '.gif';}

初期状態に表示される画像</SCRIPT></HEAD>

画像のファイル名に注意!

<BODY><A HREF="http://www.impress.co.jp/" onMouseOver="LinkI(0);" onMouseOut="LinkO(0);"><IMG SRC="Link0.gif" NAME="Link0" BORDER=0 ALT="WatsNew">
ボ
デ
ィ
ー
部
分

ここで紹介した内容は画像のファイル名とHTML内に書いてあるファイル名</A><BR>との対応が重要になる。さらに、画像

省略には数字の入ったファイル名を使わなけ<A HREF="http://www.impress.co.jp/" onMouseOver="LinkI(15);"

onMouseOut="LinkO(15);"><IMG SRC="Link15.gif" NAME="Link15" BORDER=0 ALT="Update">

ればならない。もし、ファイル名を変えたければHTML 内の'ULink'+i+'.gif'と</A>'Link'+i+'.gif'の「ULink」や「Link」</BODY>の部分を変更したファイル名に変えておこう（i は数字を意味しているのでこのままにしておく）。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

173

マウスを載せたときにリンクの説明を表示させる
リンクをクリックする前にリンク先ページの内容がわかれば、読者は自分に必要のないページを見てまわる必要がなくなる。そこでここでは、リンクにマウスを載せるとウェブページ内の特定の場所に、そのリンク先の簡単な説明を表示させるという仕掛けを紹介する。

マウスを持ってい
くと内容表示これを実現するHTMLファイルは下のようになる。ヘッダー部分のJavaScriptでは、IE4.0とネットスケープナビゲーター4.0とで処理の仕マウスを持ってい
くと内容表示方を変えている。なぜなら今回の仕掛けはIEとネットスケープナビゲーターで同じ方法が使えないからだ。この部分に関してはこのまま記述してほしい。
ボディー部分の<A>タグ内のonMouseOver
以下の部分が、マウスを載せたときに表示させるリンクの説 明 を記 述 するところだ。
「Message（）」の括弧内に「'」（シングルクォ

ソースの収録先ーテーション）で囲んだものが表示内容となる。

ウィンドウズ

実際に説明を表示させるウェブページ内の場
所の指定はIEとネットスケープナビゲーターで+CD-ROM

CD-ROM A Special→Win→ Link → COMMENT.HTM
マッキントッシュ

CD-ROM A Special→Mac→ Link → Comment.htm

異なる。<DIV> タグ部分がIE のための表示場
所の指定方法で、top、
left、width はそれぞれcomment.htm

表示場所の上からの距
離と左からの距離、そ<HEAD>

して表示場所の横幅を<SCRIPT LANGUAGE="JavaScript">

ピクセルで指定していvar ver = navigator.appVersion.charAt(0);る。<LAYER>タグ部分

var ie = 0, nn = 0;がネットスケープナビゲ

if(navigator.appName == "Netscape") nn = 1;

ーターのための表示場所の指定方法で、TOP、

if(navigator.appName == "Microsoft Internet Explorer") ie = 1;function Message(s){else if(nn && ver >=4) {document.infobox1.document.open();<DIV> と同様に表示場

document.infobox1.document.write(s);所の上からの距離と左からの距離および表示場
所の横幅をピクセルで表document.infobox1.document.close();}}IE4.0 の場合 infobox にs の内容を表示
ネットスケープナビゲーター4.0の場合 infobox1にsの内容を表示
マウスがリンクの上に載ったとき表示させる内容</SCRIPT>

マウスがリンクから外れたときしている。それぞれの数</HEAD>

字を調整すれば好みの場<BODY>

所に説明を表示させら<A onMouseOver="Message('ここは私が選んだリンク集があります。役に立つものかられる。うまくいくまで何暇な時間をすごすためのものまでさまざまです。よかったら見ていってください。')"

度か試してみてほしい。

IEの場合sの内容を表示させる関数

if(ie && ver >= 4) {infobox.innerHTML = s;}

LEFT、WIDTH は

ネットスケープナビゲーターの場合

onMouseOut="Message('')" HREF="link.html"> リンク集 </A><BR><BR><DIV ID="infobox"
STYLE="position:absolute; top:200px; left:10px; width:130px; font-size:8pt;" >IEのためのコメント表示領域</DIV><LAYER NAME="infobox1" TOP=200 LEFT=10 WIDTH=130></LAYER></BODY>174 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ネットスケープナビゲーターのためのコメント表示領域

P o w e r
ホームページ
u 大改造計画py o u rhomepage
ワンクリックでサブメニューを表示させる（IE4.0 以上のみ）
プルダウンメニューのところでも触れたが、リンクが増えるとそれを表示させるのに場所がとられてしまう。そこでここでは普段はサブメ
ニューを隠しておいて、カテゴリー名をクリッ
クしたときだけサブメニューを表示させるという方法を紹介しよう。
右図ではメニューの「What's New」というテキストをクリックするとサブメニューが表示され、メニューテキストが赤くなって書体が太字になる様子を表している。残念ながらこの仕掛けだけはネットスケープナビゲーターでは実行できない。IE4.0のみの対応となる。
HTMLは以下のとおりになる。ヘッダー部分にはサブメニューを表示させる命令とメニュー
テキストの色と書体を変更する命令が書かれている。ボディー部分はサブメニューの領域とサブメニューを含むメニュー全体の領域を<DIV>
タグを二重に使って指定している。内側のソースの収録先<DIV>タグがマウスを載せたときに表示させる

ウィンドウズ+CD-ROM

CD-ROM A Special→Win→ Link → TREE.HTM

サブメニューの内容だ。

マッキントッシュ

CD-ROM A Special→Mac→ Link → Tree.htm

tree.htm<HEAD><SCRIPT LANGUAGE="JavaScript">function tree (a, b) { if (a.style.display == 'none') {a.style.display='';b.style.color="#AA0000";b.style.fontWeight="bold";}
else {

a.style.display='none';b.style.color="Black";b.style.fontWeight="normal"}}

サブメニューの表示
メニューテキストの色の変更
メニューテキストの書体の変更
サブメニューの非表示
メニューテキストの色を戻す
メニューテキストの書体を戻す</SCRIPT></HEAD><BODY><DIV onClick="tree(T1, MENU1)">

メニューテキストをクリックする動作を定義<FONT ID="MENU1" STYLE="color:black;font-weight:normal"> ▲ What's New</FONT><DIV ID="T1" STYLE="display:none;">

初期状態は非表示

・ <A HREF="main1.htm"> ページデザインの変更 </A><BR>
・ <A HREF="main2.htm"> リンクの追加 </A><BR>
・ <A HREF="main3.htm"> メニューの追加 </A><BR>
・ <A HREF="main4.htm"> 掲示板追加 </A><BR>

表示するサブメニュー

・ <A HREF="main5.htm"> アクセス 1000 人突破 </A><BR>
・ <A HREF="main6.htm"> ページオープン </A></DIV></DIV></BODY>

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

175

インタラクティブなしかけに挑戦

読者の声を集めたい
ただ読ませるだけのホームページはもうつまらない。
インタラクティブな機能を持たせたホームページ作りの第一歩として訪れた人に自分のページの感想を電子メールで送ってもらう機能を追加してみよう。

フォームから電子メールを送信する
ホームページから読者に意見を送ってもらう
のにもっとも手軽なのは、フォームから電子メールを送信させる方法だ。特にFORM タグの
ACTION属性にメールアドレスを指定する方法
なら、CGIを使わなくてもHTMLを書くだけでsできる。
ポ イ ン ト は 、F O R M タ グ の 属 性 に「ENCTYPE="text/plain"」も指定することだ。フォームを使ったメール送信では、何も指定しないと日本語が「%83e%83X%83g」のホームページからの投稿が電子メールで届くようにエンコードされてしまい、専用のデコードツールを使わないと読めなくなる。この属性を指定すれば、ふつうに読める文字で電子メー
ルが送られる。また、作成したHTMLファイルを保存するときは、「秀丸エディタ」などのテ
キストエディターで文字コードをJIS（ISO2022-JP）にしておけば、正しい文字コードのメールが送信できる。
ただし、この方法で確実にフォームから電子メールを送信できるブラウザーは、ネットスケ
ープナビゲーター3以上とIE4.0とアウトルック<FORM METHOD=POSTACTION="mailto:****@****.ne.jp"
ENCTYPE="text/plain"><P> ご意見・ご感想： <BR>
<TEXTAREA ROWS=5 COLS=40 NAME="iken"></TEXTAREA><P> あなたの好きなのは？
<INPUT TYPE=RADIO NAME="animal" value="猫"> 猫<INPUT TYPE=RADIO NAME="animal" value="犬"> 犬 <BR>
<P><INPUT TYPE=SUBMIT VALUE="送信する"></FORM>

必ずPOSTを指定
mailto:のあとに自分のメールアドレスを記述
この指定によって、
簡単に読める電子メールが届く

ソースの収録先+CD-ROM

ウィンドウズ

CD-ROM A Special→Win→Mail
マッキントッシュ

CD-ROM A Special→Mac→Mail

エクスプレスの組み合わせだけだ。

「このページを友達に紹介」ボタンをつける
左のHTML ソースは、電子メールを送信す<FORM METHOD=POST ACTION="" ENCTYPE="text/plain"
onSubmit="this.action='mailto:'+this.email.value;this.submit();">
お友達のメールアドレス： <BR>
<INPUT TYPE=TEXT NAME="email" SIZE=40><BR><INPUT TYPE=HIDDEN NAME="msg"
VALUE="このページ見てください！"><INPUT TYPE=HIDDEN NAME="url" VALUE="http://internet.impress.co.jp/"><INPUT TYPE=SUBMIT VALUE="送信する"></FORM>

176 INTERNET magazine 1999/4

るフォームにJavaScript を加えて、入力されたメールアドレス宛てに電子メールを送信する
送信先を変えるJavaScriptようにしたものだ。これを使えば、訪れた人が自分のページを気に入ってくれたら友達にもURLを電子メールで知らせるという機能を追加できる。ただし、このスクリプトを使うと、ネッ

ホームページのURL

トスケープナビゲーターのバージョン4ではJavaが起動して送信まで時間がかかるので注意。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
プロバイダー のメール 送信サービスを使う
左ページのように、FORM タグのACTIONSERVE の例だが、左ページのサンプルにある属性にメールアドレスを指定する方法では、どACTION 属性の「mailto:〜」という部分をうしてもブラウザーや電子メールソフトの種類「http://〜」というプロバイダーが用意したCGIやバージョンが限定される。そこで、プロバイプログラムのURLに変えている。また、宛て先

ダーが会員用に用意しているCGIサービスを使や件名などは、プロバイダーが指示するとおりってみよう。どんなブラウザーにも対応したメに<INPUT>属性で設定しないとうまく送信でール送信フォームが作れるので便利だ。自分できないので注意しよう。
メール送信などのCGIサービスが利用できる

CGIプログラムを書く必要もない。
プロバイダーのマニュアルに従ってフォームを作成するだけだ。下のサンプルはN I F T Y

主なプロバイダーについては下記の表を参考にしてほしい。

NIFTY SERVEの例<FORM METHOD=POSTACTION="http://mdec.nifty.ne.jp/cgi-bin/mdecmail.cgi"><INPUT TYPE=HIDDEN NAME="ok̲page"
VALUE="http://member.nifty.ne.jp/****/thank.html"><INPUT TYPE=HIDDEN NAME="to̲mail" VALUE="****@nifty.ne.jp"><INPUT TYPE=HIDDEN NAME="sub" VALUE="感想メール">
お名前： <BR><INPUT TYPE=TEXT NAME="name" SIZE=40><BR>
メールアドレス： <BR><INPUT TYPE=TEXT NAME="from" SIZE=40><BR>
メッセージ： <BR><TEXTAREA NAME="body" ROWS=5 COLS=60></TEXTAREA><BR>
猫と犬のどちらが好きですか？ <BR>
<INPUT TYPE=RADIO NAME="animal" value="cat"> 猫<INPUT TYPE=RADIO NAME="animal" value="dog"> 犬 <BR>
<INPUT TYPE=SUBMIT VALUE="送信する"></FORM>

プロバイダーのCGIプログラムのURL

送信後に表示されるページのURL
送信先のメールアドレス
メールの件名
送信者の名前入力欄
送信者のメールアドレス入力欄
メッセージ入力欄

自由に追加できる項目

青字はプロバイダーによって設定する
文字列が異なるので注意。

主なプロバイダーのCGIサービス
3Web
AIRインターネット
ALLESNETASAHIネット
AT&T WorldNet
BEKKOAME/INTERNETBIGLOBEDREAM★NET
DTI
harmonix
Highway Internet
IIJ4U
InfoSphere
InfoWeb
INTERLINK
JustNetNIFTY SERVEOCNダイヤルアクセス
ODNダイヤルアップ
Panasonic Hi-HO
SANNETインターネットサービス
So-netThe FSI Network
ドルフィンインターネット
ネットラピュタ
ぷらら

アクセス
カウンター
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○

メール送信
×
○
×
○
○
○
○
×
×
○
○
×
○
○
○
×
○
×
○
○
○
○
○
×
○
○

掲示板
×
×
×
×
×
×
○
×
○
×
○
×
○
×
×
×
○
×
×
○
×
×
×
×
○
○

その他

アクセス制御アンケート

チャット、全文検索、投票システム

メーリングリスト参加フォーム

アンケート

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ユーザーが作成
したCGI
○
○
×
×
×
×
○
×
×
○
×
×
×
○
○
×
×
×
×
○
×
×
×
○
○
×

INTERNET magazine 1999/4

177

ホームページに読者が集まる掲示板で情報交換したい
読者が集まってさまざまな情報を交換する掲示板は、最近のホームページの花だ。
掲示板と言えばCGIを連想する人も多いだろうが簡単に利用できる掲示板サービスが増えてきた今、だれでも簡単に開設できる。

プロバイダー の掲示板サービスを使う

ぷらら
jhttp://www.plala.or.jp/

加入しているプロバイダーが会員用に掲示板

設定の変更、発言の削除ができる。Panasonic

サービスを用意しているなら、それを利用する

Hi-HO のように、自分でHTML ファイルを修のがもっとも手軽だ。掲示板サービスを提供し正しなければならないが、その代わり画面を自ているプロバイダーについては、前ページの表

由に変更できる掲示板もある。

を参照してほしい。たいていは無料で利用でき

また、掲示板を使う際には、文字の色や背るが、BIGLOBEのように追加料金がかかるプ

景画像の設定機能のほかに、いくつの発言まロバイダーもある。

で書き込めるか、セキュリティー機能があるかなどをチェックしてから利用を決めよう。

以下の例は、NIFTY SERVEとぷららのもの
だが、どちらもウェブ上から簡単に新規作成や

NIFTY SERVE
jhttp://www.nifty.ne.jp/f
背景画像

戻り先のURL

背景色

戻り先の
URL

s
いたずらの書き込みを防ぐ機能
クッキーを使って書き込んだ人の名前やメールアドレスを保存する機能

178 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
無料の掲示板サービスを使う
プロバイダーの掲示板サービスは手軽で使い掲示板ネットjhttp://www.keijiban.net/

示板のリンク集やチャットコーナーも用意されやすいが、先に紹介したメール送信サービスにている。
「掲示板ネット」では、発言の横に表比べてサポートしているプロバイダーは少ない。

示されるアイコンを選べる顔付き掲示板がウリ

加入しているプロバイダーにサービスがなく、だ。Tea Cupと掲示板ネットの両サービスに自分でCGIプログラムを設置することもできな

は、無料掲示板より機能が強化された有料掲い場合は、無料で掲示板サービスを提供して示板（一月あたり100 円から200 円程度）もいるサイトを利用しよう。第二、第三の掲示用意されている。

板を作るために使うのもいいだろう。こうした掲示板を使う際に注意することは、第三者サービスでは、利用が無料である代わりに掲示による悪質な内容の書き込みだ。掲示板を開板の画面に広告が表示される。

設している人は、書き込まれた内容をこまめに

無料掲示板サービスの中でも有名なのがチェックしよう。

「Tea Cup」で、カテゴリー別に分けられた掲

Tea Cupjhttp://www.tcup.com/

s

背景画像

背景画像

d

題名の色を7つ指定
顔のアイコンを選べる

背景色

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

179

ホームページ作りの最終兵器CGIを使う

リアルタイムに内容を更新したい
HTMLやJavaScriptだけでは、読者の反応はどうやっても保存されない。サーバーに情報を残すには、
どうしてもCGIが必要だ。アクセスカウンターやメール送信ならプロバイダーが用意してくれるが、オリジナリティーを出したいならCGIにチャレンジしてみよう。

読者投票ページを作る
読者が意見を二者択一で投票すると、集計s

結果が自動的に表示されるページがあれば面白い。ここでは本誌の付録CD-ROMに収録した
CGIプログラムを使って、ウェブ上でリアルタイムに結果が表示される投票ページを作ってみよう。手順どおりにやってみれば、それほど難
しくないことがわかるだろう。

ソースの収録先+CD-ROM

ウィンドウズ1

プロバイダーのサービスを確認する

まず、自分のプロバイダーがユーザーの作っ

2

CD-ROM A Special→Win→CGI

必要なファイルを編集するサーバーにアップロードするCGI プログラム

たCGIプログラムの設置を許可しているかどうのファイルと関連するファイルを用意しよう。

かを確認しよう。このページのサンプルが有効

本誌の付録 CD-ROM に収録したvote.cgi

なのは、ユーザーのCGIを許可しているプロバ（CGI プログラム）、vote.htm（投票ページ）、

イダーに限られる。プロバイダーがユーザーのvote.txt（データファイル）の3つのファイルをCGIを許可していたら、次のことをプロバイダ

ハードディスクにコピーし、vote.cgi をテキスーに確認しよう。

トエディターで開いて必要であればPerlのパス・Perlのパスを変更する。また、vote.htmを開いてFORM

・CGIプログラムを設置する位置（ディレクタグのACTION属性で指定されているCGIプロトリー）が指定されているかどうか

マッキントッシュ

vote.cgi

CD-ROM A Special→Mac→CGI#!/usr/local/bin/perl
Perlのパスをプロバイダーが指定したものに変える。

vote.htm<FORM METHOD=GET ACTION="vote.cgi">
CGIプログラムのURLは、HTMLファイルと同じ位置に置ける場合はそのまま、そうでない場合は、プロバイダーの指示に従って「/cgi-bin/usr/username/vote.cgi」などと変える。

グラムのURLを必要に応じて変更する。

・.htaccessファイルが必要かどうか

投票の項目を変えるには
CD-ROMに収録したファイルでは、投票の項目は「猫」と「犬」になっているが、ユーザーのCGIプログラムを設置できるプロバイダー
perlのパス.htaccess場所

パーミッション

vote.htm とvote.txt を書き換えれば、
「ラ

3Web

/usr/local/bin/perl

必要public̲html

自分で変更ーメン」と「カレー」など好きな項目に変AIRインターネット/usr/local/bin/perl

必要public̲html

自分で変更

更できる。

BIGLOBE/usr/local/bin/perl

不要

自由

自分で変更

vote.htm

harmonix/usr/local/bin/perl

不要

自由プロバイダーに変更してもらう

InfoWeb/usr/local/bin/perl

不要

要問い合わせ自分で変更

INTERLINK

要問い合わせ不要

要問い合わせ

自分で変更

KCOM

/usr/local/bin/perl

不要

public̲html

自分で変更

Panasonic Hi-HO/usr/local/bin/perl

不要

cgi-bin

自動的に変更ドルフィンインターネット/usr/local/bin/perl

不要

自由

自分で変更

ネットラピュタ

/usr/local/bin/perl

不要

要問い合わせ

自分で変更

リムネット

要問い合わせ要問い合わせ要問い合わせ要問い合わせ180 INTERNET magazine 1999/4<INPUT TYPE=RADIO NAME="opt"
VALUE="1"> 猫
ラーメン<INPUT TYPE=RADIO NAME="opt"
VALUE="2"> 犬カレー

vote.txt

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

猫 0
犬 0

ラーメン
カレー

P o w e r
ホームページ
u 大改造計画py o u rhomepage

3

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

vote.txtをCGI 用のディレクトリー（フォルダ

用 意 ができたら、 F T P ソフトを使 ってトリーに置く。位置が指定されていないプロバ.htaccess
ファイルの用意

vote.cgi、vote.htm、vote.txtの3つのファイイダーでは3つのファイルを同じディレクトリー

プロバイダーによっては、「.htaccess」とルをプロバイダーのサーバーにアップロードすに置く。

いうファイルをサーバー上に置かないとCGIー）に置き、vote.htm をHTML 用のディレクる。ここではFTP ソフトとしてウィンドウズで

vote.cgiとvote.txtをアップロードする際にプログラムが起動しない場合がある。次のはNextFTPで、マッキントッシュではFetchでは、FTP ソフトのファイル転送モードを必ずような内容のテキストファイルを作成し、適説明する。

「テキスト」にしておかないとうまく動作しない

当な名前を付けてアップロードしてから、CGIプログラムとHTMLファイルを置く場所ので注意しよう。サーバーとパソコンでは使用

FTP ソフトで「.htaccess」というファイが分かれているプロバイダーではvote.cgi としている文字コードや改行コードが違うためだ。

ル名に変更しよう。

AddType application/x-httpd-cgi .cgi

FTPソフトのテキストモード

NextFTP収録先+CD-ROM

CD-ROM A Win→Nextftp

NextFTPの場合：ツールバーの「テキスト転送モード」ボタンをクリック。

4

Fetchの場合：「ファイルを送る」ダイアログの「フォーマット」で「テキスト」を選ぶ。

Fetch収録先
CD-ROM A Mac→Fetch-J

パーミッションの変更

ファイルのパーミッションを変える員）の実行（Execute）をオンにする。データファイルのvote.txtでは、投票結果が書き込

サーバーに置かれたHTMLファイルは単に読めるようにグループとその他（全員）の書き込

み込まれるだけだが、CGIを使う場合はファイ

み（Write）をオンにする。これでウェブ投票

ルを実行したり書き込んだりできるようにFTP

ページは完成だ。

ソフトでパーミッション（ファイルの属性）をこの設定を正しく行っていないと、CGIを実変 更 する必 要 がある。 C G I プログラムの行したときにサーバーエラーが起こる。もし、vote.cgiでは、プログラムが起動できるように、

サーバーエラーが起こったならば、まず最初にユーザー（オーナー）、グループ、その他（全ファイルの属性を確かめてみよう。

フリーのCGIプログラムを利用しよう

NextFTPの場合：ファイルを選択し、メニューの「コマンド」→「属性の変更」を選ぶ。

自分でCGIプログラムを書くのはたいへんだ。
Perlなどのプログラミング言語やUNIXの知識が必要になるからだ。勉強しているひまはな
いという人は、ウェブ上で公開されているフリーのCGIプログラムをダウンロードして使うといいだろう。CGI 関連サイトの中でも有名なのが「ネットサーフレスキュー Web裏技」
だ。アクセスカウンターから掲示板やチャットまでさまざまなCGI プログラムが利用法の説明とともに公開されている。また、メール
送信CGI のサービスも行っている。本誌で説明したCGI プログラムの設置がうまくいった

Fetch の場合：ファイルを選択し、メニューの「リモート」→「Permissionsの設定」を選ぶ。

ら、次はぜひこのサイトへ行って新しいCGIプログラムを試してみてほしい。

ネットサーフレスキュー Web裏技

URL http://www.rescue.ne.jp/

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4181

見る人に合わせてページをカスタマイズ

クッキーでパーソナライズされたページを作りたい
ホームページを作る際にはページを見る人への配慮が必要だが、不特定の人を相手にするわけだから配慮といっても限界がある。
そこで、ここではページを見る人ごとに表示する内容を変化させたり見る人の側でページをカスタマイズしたりする「パーソナライズ」の機能にチャレンジしてみよう。
ソースの収録先+CD-ROM

ウィンドウズ

CD-ROM A Special→Win→ Cookie

クッキー の仕組みを理解しよう

マッキントッシュ

CD-ROM A Special→Mac→ Cookie

図1 クッキーの仕組み
ウィンドウズのオンラインソフト紹介サイト
窓の杜（http://www.forest.impress.co. jp/）

WWWブラウザー1http://www.xx.jp/にアクセス

http://www.xx.jp/

5クッキーをもとにしたページを送信には、ダウンロードサイトを選ぶプルダウンメ
ニューがある。このメニューは一度ダウンロー
ドサイトを選んでおけば、次に訪れたときにも前回と同じサイトからダウンロードできる仕組みになっている。この仕組みは、クッキーといサーバー

2www.xx.jpに関するクッキーの問い合わせ
www.xx.jp

前回アクセス日：1999/01/01

ハードディスク内のクッキーファイル 2か月ぶりのご訪問ありがとうございます
www.xx.jp
date1999/01/01
3ファイルからwww.xx.jpに
www.yy.net
関するクッキー情報を検索
4クッキーを送信
color
green
date: 1999/01/01

う技術を使っている。クッキーを使ったウェブ
サイトではWWW サーバーやページごとにアクセスしたユーザーの情報をユーザーのPCにファ

図2 クッキーの保存場所
ブラウザー

機種

場

NN4.0

Win

C:¥Program Files¥Netscape¥Users¥(ユーザー名)¥cookies.txt

Mac

システムフォルダ：初期設定： Netscape Users：(ユーザー名)：MagicCookie

イルとして保存しておき、そのユーザーが次にアクセスした際にはサーバー側でそのファイル

IE4.0

所

Win

C:¥Windows¥Cookie

Mac

IEのメニュー「編集」→「受信ファイル」→「Cookie」

から必要な情報を読み出す。これによって窓のcookie.js

杜のようなユーザーごとにパーソナライズされた機能を提供できるようになる（図 1）。クッ
キーにどのような情報が記録されているかは、

クッキーから情 報を読 み出 している部分

実際にハードディスクの中にあるクッキーのファイルを見てみよう（図2）。多くのサイトがクッキーを利用しているのがわかるだろう。ただし、クッキーはプライバシーやセキュリティー
の問題を引き起こしやすく、ブラウザーの設定
をクッキーが利用できないようにしている人も多い。自分のページでクッキーを使う場合には、あらかじめクッキーを利用していることを断っ

クッキーに情 報 を書き込む部分

ておいたほうがいいだろう。
今回の記事では、クッキーを扱うスクリプトを「cookie.js」という別のファイルにまとめてある。使用する場合にはHTMLファイルと同じディレクトリーに置いておくだけでいい。このファイルを使えばクッキーを使ったページの作成はとても簡単になるので、今回の記事をもとにさらにいろいろとチャレンジしてみたいという人は、このファイルを参考にしてほしい。

182 INTERNET magazine 1999/4

クッキーの内 容 を消去する部分function readCookie(name) {allcookie = document.cookie + ';'start1 = allcookie.indexOf(name);if (start1 != -1) {target = allcookie.substring(start1, allcookie.length);
start2 = target.indexOf( '=', 0) + 1;
end = target.indexOf( ';', start2);
return(unescape(target.substring(start2, end)));}return( " ");}function writeCookie(name, value) {クッキーを保存しておく日数。クッキーには寿命があり、
expdays = 30;
この日数を過ぎたものについては自動的に削除される
t = new Date;t.setTime(t.getTime() + expdays * 24 * 60 * 60 * 1000);
document.cookie = name + '=' + escape(value) + '; expires=' + t.toGMTString();}function clearCookie(name) {if (document.cookie != " ") {t = new Date;t.setTime(t.getTime() - 1 * 24 * 60 * 60 * 1000);
document.cookie = name + '= ; expires=' + t.toGMTString();}
alert( 'このページに関する Cookie を消去しました');}

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
見に来てくれた回数によってペ ージの内容を変化させる
test.htm「あなたは○○人目の訪問者です」といった
アクセスカウンターをよく見かける。しかし全部で何人がページを見てくれたかという情報は、ページの作者には意味があっても、ページを見る側の人にとってはあまり意味を持たない情報
ではないだろうか。
そこで紹介したいのが、クッキーを使った訪問者ごとのアクセスカウンターだ。トータルではなく、特定の読者にとって何回目のアクセスかを調べることができ、アクセス回数によって表示内容を変えることもできる。これによって、初めて来た人には注意事項をお知らせしたり、
10 回以上来てくれた人には感謝のメッセージを表示したりといったことが可能になる。
test.htm は、このカウンターの簡単な使用例だ。1 が前ページの「cookie.js」を呼び出している部分、2 がカウンター本体、3 がカウンターをリセットするボタンで、この2 の部分を改良してアクセス回数に応じてさまざまなメッセージを表 示 するようにしたのがcount.htm だ。4 が初めて来た人向けのメッ
セージ、5 が10 回ごとに表示されるメッセー
ジ、6 がそれ以外の場合に表示されるメッセージだ。さらに細かく条件を増やしたい場合には、7 の部分を増やせばよい。条件を指定する部分が8 で、代表的な条件式の書き方は図<HTML><HEAD><TITLE>Cookie Sample No.1</TITLE><SCRIPT LANGUAGE= "JavaScript " SRC= "cookie.js "></SCRIPT></HEAD><BODY><H1>Cookie のサンプル・その 1</H1><SCRIPT LANGUAGE= "JavaScript "><!-times = readCookie( 'times');
if (times == " ") times = 1;
document.write(times);
times++;
writeCookie( 'times', times);//--></SCRIPT><FORM><INPUT TYPE= "button " VALUE= "クリア "onClick= "clearCookie( 'times') "></FORM></BODY></HTML>

1

2

2
3

3

図3 条件式の例
times == 5

5 回目

times <= 10

10 回目まで

times >= 30

30 回目以降(times % 50) == 0

50 回目ごと3のようになる。

count.htm（一部）<SCRIPT LANGUAGE= "JavaScript "><!-times = readCookie( 'times');
if (times ==") {times = 1;
document.write( '<H3> はじめての方へのご注意 </H3>');
document.write( 'このページは○○○ですので、あらかじめご了承ください。<BR>');} else if ((times % 10) == 0) {document.write( '<H3>', times, '回目記念!!</H3>');
document.write( '本当にありがとうございます。これからもよろしくお願いします。<BR>');} else {document.write(times, '回目のご来訪、まことにありがとうございます。<BR>');}
times++;
writeCookie( 'times', times);//--></SCRIPT>

4

8

5

7

6

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

183前回の訪問のあとに更新されたリンクを知らせるページが増えてきた場合には、リンクの横に「○月○日更新」と書き添えたり、最近更新したリンクには「NEW」、「UP」といったマークを付けたりするのが一般的な方法だ。しかし、前回そのページを見たのがいつだったかを覚えている人はあまりいないだろうし、「NEW」
マークがあっても一度そのページを見た人にとってはNEW ではなくなる。そこで、読者ごとにアクセスした日付をクッキーで覚えておき、
それ以降に更新されたリンクには「New」マークを表示する方法を紹介する。この方法ならば、見にきた人にとっての新しいリンクを確実に伝えることができる。
update.htmがそのソースファイルで、使う場合には1 と4 の部分を書きなおせばよい。

1 が各リンクの更新日時を書いておく部分だ。
「//」から後ろの部分にはそのリンク先のファイル名を書いておき、間違えないようにしておこう。 4 が実 際 に表 示 される H T M L で、
<SCRIPT> 〜</SCRIPT> の部分が更新日と書きかえる。今回はレイアウトの都合で、更新これが必要ない場合にはまるごとこの行を削除

マークを自動的に表示する仕組みになっていされていないリンクには「NEW」マークと同じすればいい。

る。表示するマークを変えるには2 の部分を

大きさの透明な画像を表示しているが（3 ）、update.htm<HTML><HEAD><TITLE>Update Check</TITLE><SCRIPT LANGUAGE= "JavaScript " SRC= "cookie.js "></SCRIPT><SCRIPT LANGUAGE= "JavaScript "><!-var UP = new Array();
UP[1] = '1999/01/01'; // top.htm
UP[2] = '1999/02/01'; // prof.htm
UP[3] = '1999/03/01'; // bbs.htm
UP[4] = '1999/04/01'; // link.htm//--></SCRIPT></HEAD><BODY><H1>Welcome to My Homepage</H1><SCRIPT LANGUAGE= "JavaScript "><!-visit = readCookie( 'lastvisit');if (visit == " ") visit = '1970/01/01';
document.write( '前回訪問日: ',visit);v = new Date;yy = v.getYear();if (yy < 2000) yy = yy + 1900;
mm = v.getMonth() + 1;
if (mm < 10) mm = '0' + mm
dd = v.getDate();if (dd < 10) dd = '0' + dd
newvisit = yy + '/' + mm + '/' + dd;
writeCookie( 'lastvisit', newvisit);

2

3

1

184 INTERNET magazine 1999/4

function checkUpdate(up) {document.write(up, '更新');
if (up >= visit) document.write( '<IMG SRC= "gif/new.gif ">');
else document.write( '<IMG SRC= "gif/blank.gif ">');}//--></SCRIPT><HR><CENTER><A HREF= "top.htm "><IMG SRC= "gif/top.gif " ALT= "TOP "></A><SCRIPT LANGUAGE= "JavaScript ">checkUpdate(UP[1]);</SCRIPT><BR><A HREF= "prof.htm "><IMG SRC= "gif/prof.gif " ALT= "PROF "></A><SCRIPT LANGUAGE= "JavaScript ">checkUpdate(UP[2]);</SCRIPT><BR><A HREF= "bbs.htm "><IMG SRC= "gif/bbs.gif " ALT= "BBS "></A><SCRIPT LANGUAGE= "JavaScript ">checkUpdate(UP[3]);</SCRIPT><BR><A HREF= "link.htm "><IMG SRC= "gif/link.gif " ALT= "LINK "></A><SCRIPT LANGUAGE= "JavaScript ">checkUpdate(UP[4]);</SCRIPT><BR></CENTER><HR><P><FORM><INPUT TYPE= "button " VALUE= "クリア "onClick= "clearCookie( 'lastvisit') "></FORM></BODY></HTML>4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
どのペ ージを最初に表示するかを決められるようにする
frame.htm<HTML><HEAD><TITLE>Sample of Flame</TITLE><SCRIPT LANGUAGE= "JavaScript " SRC= "cookie.js "></SCRIPT></HEAD><SCRIPT LANGUAGE= "JavaScript "><!-url = readCookie( 'url');
if (url == " ") url = 'top.htm';
document.write( '<FRAMESET ROWS=25%,*>');
document.write( '<FRAME SRC= "menu.htm " NAME= "menu ">');
document.write( '<FRAME SRC= "', url, '" NAME= "contents ">');
document.write( '</FRAMESET>');//--></SCRIPT></HTML>1

menu.htm
フレームを使ったページで問題になるのは、
リンク先やブックマークにはトップページしか指定できないという点だ。見に来た人がブックマークに入れておきたいのは、多くの場合にはトップページではなくその下のページではないだろうか。そこで、トップページをどのページにするかは見る人に決めてもらう、という方法を紹介しよう。これにより、同じURL にアクセスしているのに、Aさんが見た場合には掲示
板が、Bさんが見た場合にはリンク集がトップページになるといったかっこいいページが作れる。ここまでやれば、見る人によってページが動的に変化する「パーソナライズ」といえるのではないだろうか。
frame.htm が全体のフレーム構造を定義しているファイルで、ここでクッキーを参照して各フレームにどのファイルを表示するかを指定している。トップページの指定がない場合に表示するファイルは1 の部分で指定する。上に表示されるメニューの部分がmenu.htmで、トップページを指定するボタンのスクリプトはこちらに記述している。
ただし、この方法はフレームに表示するページが同じサーバーになければ使えないという制限がある。掲示板を他のサーバーから借りてい<HTML><HEAD><TITLE>TOP MENU</TITLE><SCRIPT LANGUAGE="JavaScript" SRC="cookie.js"></SCRIPT></HEAD><BODY><CENTER><A HREF="top.htm" target="contents"><IMG SRC="gif/top.gif" ALT="TOP"></A><A HREF="prof.htm" target="contents"><IMG SRC="gif/prof.gif" ALT="PROF"></A><A HREF="bbs.htm" target="contents"><IMG SRC="gif/bbs.gif" ALT="BBS"></A><A HREF="link.htm" target="contents"><IMG SRC="gif/link.gif" ALT="LINK"></A></CENTER><BR>「記録」ボタンを押すと、次回訪問時に現在のページを表示します。<BR><SCRIPT LANGUAGE="JavaScript"><!-function storeFrame() {url = parent.frames[1].location.href;
writeCookie( 'url', url);alert( '現在のページを記録しました');}//--></SCRIPT><FORM><INPUT TYPE="button" VALUE="記録" onClick="storeFrame()"><INPUT TYPE="button" VALUE="クリア" onClick="clearCookie( 'url')"></FORM></BODY></HTML>る場合などは使えないので注意してほしい。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

185掲示板・カウンター・チャットルームすべてが揃う

ジオシティーズをマスターしたい
プロバイダーに加入していなくても、ホームページを無償で持てるサービスとして有名なのがジオシティーズだ。
しかも、単なるウェブページだけでなく、掲示板やカウンターの設置、チャットルームも用意されているのだ。
ここではウェブページの編集方法を解説しよう。

ウェブペ ージ編集ツール のファイルマネージャをマスターする
ホームページの開設は登録が済めば簡単にで「ファイルマネージャ」にたどり着いたら、ファいだろう。HTMLの知識がある人はアドバンス

きるようになっている。特筆すべきは、HTML

イルと編集に使う「エディタ」を選んで編集ボ

H T M L エディタよりも、 P C で動 く好 みのの編集を含むすべての操作がWWWブラウザー

タンを押すだけだ。エディタは3 種類あるが、HTML作成ソフトを使ったほうが作業の効率がからできるところだ。

初心者には定型のウェブページが作れるEZ エ

よくなるはずだ。この場合ftp.geocities.co.jp

ディタかベーシックHTMLエディタを選ぶといにFTPでファイルをアップロードする。

具体的には以下の操作手順に従ってほしい。

1 インフォメーションセンターに行く

2 ファイルマネージャを選ぶ
3 編集するファイルを選ぶ（初期状態はindex.htmlのみ）

5 編集ボタンを押す

4 エディタを選ぶ
アドバンスHTMLエディタ

ベーシックHTMLエディタ

ベーシックHTMLエディタは、初心者向けにあらかじめ用意された定型ウェブページ作成用のもの。

アドバンスHTMLエディタはHTMLのタグの知識がある人向けのもの。特筆すべき機能はない。

ファイルのアップロード機能
ファイルの転送もWWWブラウザーからできる。この機能によって画像を転送したり、PCのエディタを使って編集したHTMLファイルを送ったりできる。これ以外にジオシティーズではFTPによるファイルの転送もサポートしている。

186 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
ウェブペ ージにさまざまな機能を追加する●掲示板●カウンター●チャットルーム

まずインフォメーションセンターに行ってみ掲示板のときと同様にインフォメーションセ

もうおわかりだと思うが、これもほかの場合

よう（行き方は前ページの手順 1）。ゲストブ

ンターに行く。
「カウンタ」というメニューをクと同様にインフォメーションセンターに最初にックというメニューをクリックするとログインリックすると、アクセスカウンターの開設の仕行く。チャットツールというメニューがあるのするように促されるので、市民IDとパスワード方が表示されるのでこれに従って進めていこう。

で、これをクリックして説明を読んでみよう。

最初に「http://www.geocities.co.jp/cgi-

これはやや詳しく解説されていて難しそうに見を入力する。
ゲストブックの作り方の開設されたページがbin/ counter/市民ID.パスワード」というURLえるが、基本的にはHTMLをコピーして自分の表示されるので、それに従って設定を行う。自にアクセスする。すると確認の意味で「1」とウェブページに貼り付けるだけでOKだ。

動的に作成されるファイル（addbook.htmlという画像が表示される。

リンク先をウェブページに張るだけで済む。

チャットツールを起動すると、Javaのウィン

次にアクセスカウンターを入れたいウェブペ

geobook.html）の簡単な設定をして、あとはージの好きな場所にドウが立ち上がる。このウィンドウ内の色などがカスタマイズできるので、試してみるといい<IMG SRC="/cgi-bin/counter/市民ID">だろう。

というタグを入れればいい。これだけでできあがりだ。

どの機能も手軽にできてしまう驚きのものばかりだ。これ以外にもまだまださまざまな機能が用意されている。ウェブページ作りになれてきたら、徐々にこういった機能を追加していくといいだろう。

addbook.htmlとgeobook.htmlは編集できるので、自分なりにカスタマイズしてみよう。

好きなときに好きな場所にアクセスカウンターを入れられる。

Javaで作られたアプレット。これ以外にも面白い仕掛けや機能が用意されている。

ほかにもある無料ホームページサービスを利用する
ジオシティーズ以外にも無料でホームページ

ディスクの容量が大きいなどサービス内容が充を持てるところはある。すべてのサービスが英実しているので、トライしてみるのもいいだろ

語のものだが、日本語のページを公開できる。

う。

名前

URL

機能

Angelfire

http://www.angelfire.com/

画像

サウンド ウェブベースエディター

XOOM

http://xoom.com/

チャット

GeoCities（米国）

http;//www.geocites.com/

画像

チャット 掲示板

ウェブベースエディター ほか

FTP

容量

電子メール

○

5MB

別サービス

○

11MB

○

○

11MB

○

NETTAXI

http://www.nettaxi.com/

ウェブベースエディター チャット

○

10MB

○

tripodhttp://www.tripod.com/

画像

○

11MB

別サービス

Freeservers.com

http://www.freeservers.com/

カウンター 掲示板

○

12MB

○

Netcolony

http://www.netcolony.com/

ウェブベースエディター

×

6MB

×

ACMEcity

http://www.acmecity.com/

画像

○

20MB

○

Fortunecity

http://www.fortunecity.com/

ウェブベースエディター

○

20MB

○

ウェブベースエディター

掲示板

ウェブベースエディター

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

187

ツールを選べばプロに近づく

ホームページ作成を快適にしたい
どんなにホームページ作成のテクニックを覚えても、作業を効率よくこなすためには、やはりツールが必要だ。
自動化できる処理は自動化したほうがいい。
最後にホームページ作成を支援する便利なソフトウェアやウェブサイトを紹介しよう。

サーバ ー のファイルを自動更新
日々のホームページ更新で一番面倒なのは、サーバーへのファイルのアップロードだ。特に+CD-ROM
CD-ROM収録先
CD-ROM A Win→ Ftpexch

ディレクトリー（フォルダー）をいくつも作ったり、いらないファイルを削除したりすると、どこをどう変えたのかわからなくなってしまう。
FTP Exchangeを使えば、面倒な更新作業もボタンを1回クリックするだけでOKだ。ハード

設定画面も親切でわかりやすい
ボタン一発でアップロード！

ディスク上のファイルを削除すれば、サーバー上のファイルも削除してくれる。拡張子を指定すれば、ファイルを自動的にテキスト（アスキー）モードで送信する機能もある。ただし、ファイルのパーミッションを変更する機能はない
ので、CGIプログラムを設置するには別のFTP
ソフトが必要だ。

FTP Exchange ver. 2.36
種別：フリーウェア（カンパ500円）
作者：鈴木聖史
関連ページ：

http://www.toyota.ne.jp/~kawauso/web/もうリンク切れの心配はいらない
どんなにページ数が多くてもチェックしてくれる

初めてホームページを作る人ならだれでも真っ先に作るのがリンク集だ。ところがリンクの管理はなかなかやっかいだ。ほかのホームペー
ジへのリンクは、そのページの引っ越しなどで+CD-ROM
CD-ROM収録先
CD-ROM A Win→ Weblink

すぐ変わるし、うっかりすると自分のページ内のリンクも間違えることがある。リンク切ればかりのホームページではあきれられてしまうだ
ろう。そこでWebLink の登場だ。ハードディ

FTPでファイルを転送する機能もある

スク上のHTML ファイルを指定すれば、そのHTML から始まるすべてのリンクをたどってチェックしてくれる。ほかのサイトへのリンクもチェックすればリンク集の管理は万全だ。簡単なFTP機能もあり、更新されたファイルを自動的にアップロードできる。

WebLink ver. 1.68
種別：シェアウェア（1,500円）
作者：金子敦関連ページ：

http://www.iris.dti.ne.jp/~a-kaneko/

188 INTERNET magazine 1999/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

P o w e r
ホームページ
u 大改造計画py o u rhomepage
HTML の間違い が一発でわかる
完璧なページを作ったつもりでも、ブラウザ

エラーメッセージをクリックすると、間違っている部分に色が付く。

ーを変えると表示が大きく乱れることがある。
ブラウザーがサポートしているタグが違ったり、間違ったHTMLでもブラウザーによっては正し

CD-ROM収録先

く表 示 されてしまったりするのが原 因 だ。

ウィンドウズ+CD-ROM

CD-ROM A Mac→JChecker

JCheckerでHTMLファイルをチェックすれば、一瞬で文法の間違いをリストアップしてくれる。

文法のデータをカスタマイズできる。
ある程度 HTMLの知識が必要だ。

チェックの際には、HTMLのバージョン（2.0、3.2、4.0）に加え、IE（3.0、4.0）とナビゲーター（2.0、3.0、4.0）の各バージョンの組
み合わせを選べる。上級者向けには、「どのタグや属性がどう書かれていたらエラーとするか」をユーザー自身が細かくカスタマイズできる機能まである。他のソフトと連携する機能もある
ので、同じ作者のテキストエディターJedit と組み合わせれば効果は抜群だ。

JChecker ver.1.0
種別：シェアウェア（2,300円）
作者：株式会社まつもと
関連ページ：

http://www.matsumoto.co.jp/

ウェブ上でホームページを評価してもらう
どうせなら作ったホームページのチェックも、URLとメールアドレスを入力するだけ

すべてインターネットですませたい。そんな人には、「ホームページ作成支援ホームページ」とも言えるサイトはいかがだろうか。Web Site
Garage で自分のページのURL を入力すると、ブラウザーの互換性、検索エンジンに登録されやすいか、ダウンロード速度、リンクが切れていないか、ほかのページからのリンク数、スペルの正しさ、HTML デザインの7 つのポイントについて評価してくれる。評価が低い項目はどうすればいいか具体的な改善点まで指摘してくれ

ホームページの評価が4段階で表示されるる。たとえば、ダウンロード速度では28.8kbps
や56kbpsなど通信速度による速度の違いが数字で表示され、HTML デザインでは「<IMG>
タグにALT属性がない」と警告されるといった具合だ。この評価サービスは無料だが、サイト全体のページを定期的に評価したり、18 種類のブラウザーでどう表示されるか見せたりするなどのサービスが有料で用意されている。ただし、無料のサービスも有用のサービスもすべて

Web Site Garage

英語だ。

運営元：AtWeb, Inc.

http://www.websitegarage.com/

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/4

189

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバー
アーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ
番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.