特集

Grade up your web pages!
180 INTERNET magazine 2000/2

Grade up your web pages!

人気サイトで見た あの最新機能 を盗め！
冬休みは、今まで更新をサボってきたホームページをリニューアル
する絶好のチャンス。どうせなら、人をあっと言わせるページを作って、アクセス数アップにつなげたいところだ。それにはデザインや構成を少々いじるだけでは物足りない。訪れた人がページ作者とコ
ミュニケーションできるページや、ポータルサイト並みの高性能な機能が欲しい。プロも顔負けの最新の技を使って、ホームページをグ
レードアップするさまざまな方法をお届けしよう。

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

冬休みの

KENT（P.184〜P.187）、Studio BEAMS（P.188〜P.189）、大内 勇（P.192〜P.193）、
吉田 敬（P.196〜P.197）、太田 剛（P.200〜P.201）、椿 浩和（P.198〜P.199、P.202〜P.203）＋編集部

Photo :Nakamura Tohru

ホームページ

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

INTERNET magazine 2000/2

181ホームページで「これがしたい」にすべて答える！
2
いよいよ西暦2000年。ホームページも90年

オリジナリティーのある掲示板を作りたい

代のままではいられない。ほこりをかぶった自apeboardをデザインしよう

分のページと世の中の人気ページを比較して、
いったい何が足りないのかを考えてみよう。
「自レンタル掲示板でも自分でCGIを用意して分のページにもこんな機能がほしい、でもやりも、掲示板のデザインは平板なものになりが方がわからない」というものがきっとあるだろちだ。自分の個性を活かした掲示板で訪問者う。そこで今回はあなたのホームページをグレにアピールしたい。そんな人には色や画像をードアップさせる9個の技を用意した。冬休み

自 由 に指 定 してデザインを変 えられるが明けるまでに、人に差を付けるホームページ

apeboard を紹介しよう。CGI スクリプトをを作ってみよう。

書き換えるような難しさはない。用意された

SSP.188

HTML ファイルを自分の好みに合わせて編集するだけで、オリジナリティーあふれる掲示板
ができ上がる。

1

掲示板にもっと人を集めたい

YY-BOARDを設置しよう SSP.184

3

どんな人が見ているのか知りたい

アクセス解析を利用しよう SSP.190

ホームページを持っている人なら一度は掲示板を作ってみたこ

アクセスカウンターの数とがあるだろうが、いまいち盛り上がりに欠けてしまったのではな

字だけでは物足りない。もいだろうか。何か楽しい仕掛けのある掲示板を作って、参加者がっと細かく訪問者の傾向を気軽に書き込めるような雰囲気にしたい。そんな人は、発言に好つかんでホームページを改善

きなアイコンを付けて会話を楽しめるYY-BOARD で掲示板を盛したい。そんなときはアク

り上げてみよう。

セス解析を使って、何時にどこからどんなブラウザーでアクセスがあるのかを調べてみよう。

4「あなたの○○度チェック」を作りたい

JavaScriptで仕掛けを作ろう SSP.192

最近ウェブ上で流行しているのが人の性格を判断する「あなたの○○度チェック」。訪れた人がマウスでチェックしてボタンを押すだけで、「あなたは○○な人です」のように表示する仕掛けだ。
これを自分のページにも付けるにはどうすればいいだろうか。この記事で用意したJavaScript を自分のセンスに合わせて改造すれば、簡単に楽しい仕掛けができ上がる。ページの人気度アップは間違いなしだ。

182 INTERNET magazine 2000/2

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

掲示板：ブラウザー上で投稿した話題に返信を付ける形でコミュニケーションができるようにしたページ。開設するにはサーバー上で動くプログラムが必要になる。
自分でCGIスクリプトを設置するほかに、プロバイダーが提供するサービスや無料や有料のレンタル掲示板も利用できる。
©1994-2007 Impress R&D

冬
休
み
の

6

携帯電話でも読めるページにしたい

iモード用のページを作ろうSSP.196

5

自分のホームページのウリを「新しさ」に求めたいなら、流行のiモ

ホームページ

グレードアップ！

大作戦

ポータルサイトのように
カスタマイズできるページを作りたい

JavaScriptとクッキーを使いこなそう SSP.194

ード用ページを作って、携帯電話

Yahoo!のような強力なカスタマイズ機能を備えたポータルサイ

でも使えるようにしてはどうだろう。

トはどうすれば作れるのだろう。実は個人のページでも同じサービ

難 しいことは何 もない。 普 通 のスはできるのだ。この記事で用意したクッキーを扱うJavaScript

HTMLの知識とちょっとしたコツがのサンプルを使えばプロに近づける。

あればだれにでも簡単にできる。パ
ソコン用のブラウザーとi モード用

7のページを共通にしたり、ページの人気を高めたりするためのさまざまな工夫も紹介しよう。

ホームページを作って収入を得たい

バナー広告を貼ろう

SSP.198

ただページを作って自己満足するだけでは時間がもったいない。
趣味のページを作りながらお金も手に入る方法はないだろうか。そ9

訪問者と気軽に交流したい

んな人は個人向けのバナー広告掲載サービスを使ってひと稼ぎし最新ツールを使ってチャットをしようてみよう。
SSP.202

テンポの遅い掲示板では物足りない。ページを訪れた人からもっとダイレクトに感想を聞いてみたい。そんな人に、ホームページを見ながら訪問者とチャットができる最新のツールをいくつか紹介しよう。

8

覚えられやすいページを作りたい

マイドメインを取ろう SSP.200

ホームページを作っている人ならだれでも「自分の名前.com」というURLを持ちたいものだ。マイドメインの取得は個人でも簡単にできるようになってきた。究極の夢をかなえる方法を紹介しよう。

ホームページをグレードアップするための環境を整える
ホームページで何ができるかは、プロバイ

CGIが利用できないと使えない。会員数の多やアクセス解析などの豊富に用意されたぷら

ダーによって変わる。ホームページの容量がいプロバイダーでユーザーCGIが使えるとこ

ら提供CGIを使えばいい。

少ないプロバイダーだと、コンテンツが増えろには、 @ n i f t y 、 B I G L O B E 、 ぷらら、

さらに本格的にホームページを運営したいていくとたちまちアップロードができなくな

Panasonic Hi-HOがある。こうしたプロバという人は、月2,000円から5,000円程度でってしまう。現在の標準的な容量は初期状

イダーには1 か月1,000 円以下のコースがあ

使える個人向けのホスティングサービスの利態で10Mバイトなので、たいていの人はこれるのでホームページ専用のセカンドプロバイ用も考えよう。容量は20M バイトから50Mで十分だろうが、10Mバイトより少ないプロ

ダーとして使うのもいいだろう。

バイトでCGIやSSIが自由に使えるところが

この4 つのプロバイダーの中で一番おすす多い。プロバイダーのホームページでCGIがめなのはぷららだ。1 か月800 円のプレミア

使えなかったり、容量が足りなかったりする

容量のほかにプロバイダーのサービスでチ

ムセットでCGIとSSIが利用可能な5Mバイ

人にはおすすめだ。独自ドメインを自分のホェックすることは、ユーザーが自分で用意しトのホームページとメールアカウントが手にームページに付けることもできる。ホスティ

たCGIが使えるかどうかだ。この特集で紹介入る。自分でCGIを用意するのが面倒なら、

ングサービスに関しては、200 ページからのしている掲示板やアクセス解析は、ユーザー

アクセスカウンターや掲示板、投票フォーム

記事を参考にしてほしい。

バイダーのユーザーは追加料金を払って容量を増やすことも検討しよう。

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

ポータルサイト：「入り口サイト」の意味。Yahoo!のように、検索を中心として、ニュースや株価情報、コミュニティーなどさまざまなサービスを集め、ユーザーのスタートページとなることを狙ったサイト。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

183

グレードアップ

1
イア
ンイ
タコ
ラン
ク付
テき
ィの
ブ掲
な示
ペ板
ーで
ジ
を
作
ろ
う
184 INTERNET magazine 2000/2

ホームページのグレードアップの第 1弾として、自分のホームページに掲示板を設置してみよう。HTMLだけのホームページなら一方通行の情報発信にすぎな
いが、掲示板を作れば、ホームページの制作者と訪問者との間にコミュニケーシ
ョンが生まれる。それでは、CGIを使ったウェブ掲示板の作成方法を順を追って紹介していこう。

掲示板を作るには自分の掲示板を作るには、どのような方法があるだろうか。
まず考えられるのは、Tea Cupなどの「レンタル掲示板」を利用する方法だ。ウェブ上で簡単な申し込み手続きを行うだけで、即座に自分の掲示板を無料で作成できる。
2番目の方法としてはプロバイダーの提供する掲示板を利用する手がある。
しかし、どちらの方法をとるにせよ、それな
りに運営上の制限があり、また掲示板を自分なりに改造したくても、それは無理な話だ。
掲示板を作るベストな方法は、無料で入手できるCGIスクリプトを使って、自分のホーム
Tea Cupページ内に設置することに尽きる。前記の方法

www.tcup.comに比べて難しさはあるが、自由にカスタマイズ
できるし、また開設できたときの喜びも大きい。

今一番人気はKENT WEB
KENT WEBは掲示板などのCGIスク

リプトを公開して配布しているホームページだ。
掲示板のほか、チャット、カウンターなどのCGI スクリプトをおもに無料でダウンロードできる。ダウンロードできるCGI スクリプトとしては、次のものがある。

1 掲示板 11種
2 チャット 5種
3 カウンター 5種
4 パスワード制限付き掲示板 3種
5 データ収集、検索関連 3種

KENT WEB

6 ゲーム関連 2種

www.kent-web.com

また、CGIを設置するうえでの質問を受け付けるサポート掲示板やFAQコーナーも用意されているので初めての人でも安心だ。

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

CGI（シージーアイ／Common Gateway Interface）：WWWサーバーで、外部プログラムを起動して、その結果をWWWクライアント（ブラウザー）に返す仕組み。
ユーザーのリクエストによってウェブページの表示内容を変えたり、ユーザーの入力したフォームのデータをサーバー側へ読み込んだりできる。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

自分に合った掲示板を選ぼう
KENT WEBで公開されている掲示板には、
ゲストブック的なもの、アイコンを使用したもの、返信機能付きのものなど、多種多様なものがそろっている。
たとえば「ASKA BBS」は設置のしやすさを意識した、シンプルで飽きのこない掲示板で、初心者向け。「Fantasy Board」はコメントを「ふきだし」形式にしたアイコン付きの掲示板だ。 管 理 人 は各 記 事 に返信 を付 けられる。
ASKA BBS

Fantasy Board

www.kent-web.com/bbs/aska.html「YY-BOARD」はアイコンと返信機能が使え

www.kent-web.com/bbs/fantasy.html

る掲示板。「Web Forum」はツリー表示式の掲示板で、ワード検索、過去ログ、ログ編集など、多機能がウリだ。
中でもYY-BOARDは、現在KENT WEBでもっとも人気があるCGIスクリプトで、98年9月の公開以来すでに50000 本以上がダウンロードされている。アイコンを使用したことで全体的に柔和な雰囲気が生まれ、返信を簡単に付けられることが人気の要因のようだ。
今回はこのYY-BOARDを取り上げ、設置方法を紹介することにしよう。

YY-BOARD

Web Forum

www.kent-web.com/bbs/yybbs.html

www.kent-web.com/bbs/wforum.html

掲示板を設置するときのチェックポイント
CGI掲示板を自分のホームページに設置する場合に注意する点がある。

第二に、CGIスクリプトを置けるサーバー上

第一にユーザーが自分でスクリプトを設置できる「ユーザーCGI」にプのディレクトリー（フォルダー）はどこかをチ

ロバイダーが対応していることを確認しよう。プロバイダーによっては、ェックする必要がある。ホームページ用のディ用意されたCGIしか設置できないところも少なくない。ユーザーが自分でレクトリー内ならどこに置いても構わないとい

CGI を設置してよいかどうかを確認する必要がある。たとえば@nifty や

うところもあれば、CGI は「cgi-bin」のよう

BIGLOBE、ぷらら、Panasonic Hi-HOなどではこうしたユーザーCGI

な決まったディレクトリーにしか置けないとこが認められている。

ろもある。前者の代表はBIGLOBEであり、後者は@nifty やHi-HO が該当する。また、ぷら

CGIを使うときの注意点

らではCGI スクリプトをアップロードするFTP

1 プロバイダーのCGIサポートをチェック

サーバーが普通のFTPサーバーとは別に用意さまずプロバイダーがユーザーCGIに対応しているか確認する。プロバイダーによっては規定のCGIしか設置できないところも少なくない。

れている。
第三に、CGI を動かすPerl とその場所を確

2 CGIの設置場所をチェック認する必要がある。KENT WEBで配布する

CGIスクリプトを置けるディレクトリーはどこかをチェックする。どこに置いてもいいというプ
ロバイダーと、「cgi-bin」ディレクトリーなどに限定されているプロバイダーがある。

CGIスクリプトはすべてPerl用に書かれている。

3 Perlのパスをチェック

サポートされており、プロバイダーがユーザースクリプトファイルの1行目で指定するPerlのパス（「/usr/local/bin/perl」のように示される）を確認する。CGIが使えるプロバイダーなら、ホームページ作成について説明しているページに記述があるはずだ。

CGIについて説明しているページで「Perlのパ

4 .htaccessをチェック

CGIが使えるプロバイダーではたいていPerlがス」と書かれているものをチェックしよう。
そして第四に「.htaccess」ファイルという特殊な設定がいるかどうかを確認する必要があ「.htaccess」ファイルという特殊な設定が必要かどうかを確認する。@niftyやBIGLOBE、ぷらら、Hi-HOなどでは.htaccessは必要ない。

インターネットマガジン／株式会社インプレスR&Dる。@niftyやBIGLOBE、ぷらら、Hi-HOなど
では.htaccessは必要ない。

Perl（パール）：ラリー・ウォールによって開発されたプログラミング言語。当初、テキスト処理に重点を置いた言語として開発されたが、言語仕様の拡張がなされ、ファイル操作やネットワークプログラミングなども可能となっている。最近ではウェブページに双方向性をもたらすために、CGIに利用されることも多い。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

185

YY-BOARDとアイコンをダウンロード

1

圧縮ファイルはLHA形式とZIP形式の2種類が用意されているので、一般的にはウィン
ドウズユーザーならLHA形式を、マッキントッシュユーザーならZIP形式を選ぶとよいだろう。

ではまずCGI スクリプトをダウンロードしよう。ファイルはYY-BOARDのページ

Jump 01から入手できる。ファイルのダウンロードと解凍の方法は右図の説明を参考にしてほしい。
同じページからアイコンファイルもダウンロ

3

書庫ファイルを解凍すると、yybbs.cgi、
yybbs.log、count.dat、jcode.pl、
home.gif、yybbs2.cgi、pastno.dat、1.htmlの8つのファイルが展開される。yybbs2.cgi以下の3つのファイルは過去ログを生成するのに必要なファイルだ。

ードしよう。YY-BOARD では同ページで配布している「まきまき」さんのアイコンを推奨し、初期設定もそれに合わせているため、以降の解説は「まきまき」さんのものを使うということで進める。ただし「まきまき」さんのアイコンを使用するには「登録」が必要だ。詳細規定を含めたアイコンの使用規定

Jump 02 を確認

2

Lhasa（ウィンドウズ用）、StuffIt
Expander（マック用）などの解凍ソフトを利用するとよい。どちらも、ソフ
トウェアアイコンに圧縮ファイルをドラッ
グアンドドロップするだけで解凍できる。

のうえ必ず登録を行ってほしい。
Lhasa
Jump 01

www.kent-web.com/bbs/yybbs.html

vCD-ROM 収録先（A）Win→Lhasa

Jump 02

village.infoweb.ne.jp/~fwhf2602/yy.htm

vCD-ROM 収録先（A）Mac→StuffIt Expander

StuffIt Expander

スクリプトを自分に合わせて書き換える
次に展開されたファイルを編集する。これはプロバイダーの環境に合わせるためと、自分な

yybbs.cgi

りにカスタマイズするためという2 通りの目的#!/usr/local/bin/perlがある。

この行はもっとも重要な箇所だ。ここはプロバイダーで定められたPerlのパスを指定する。ちな
みに、@nifty、BIGLOBE、ぷらら、Hi-HOなどは上記のままでOKだ（修正は必要ない）。

ファイルを編集するためには「テキストエデ
ィター」が必要となる。ウィンドウズユーザー
は、ウィンドウズに標準で付属されている「メ$title = "YY-BOARD";
ここでは掲示板のタイトルを指定する。

$backgif = "";モ帳」や「ワードパッド」でよい。
KENT WEBで配布するCGIスクリプトは改行コードをウィンドウズ形式（CR+LF）で記述しているため、マッキントッシュユーザーはJedit などの専用エディターを使用することをおすすめする。
エディターの準備ができたら、yybbs.cgiをエディターで開いて右のリストに挙げた部分を掲示板に壁紙を指定したいとき、画像のURLを指定する。
ちなみに、壁紙を指定しない場合にはそのままでOKだ。

$homepage = "../index.html";
掲示板からの戻り先のURLを指定する。上記の初期値では相対パスで1つ上のディレクトリーのindex.htmlファイルを指定しているが、@niftyなどCGIファイルの置き場所が定められている場合はhttp://からの絶対パスで記述したほうが無難だろう。
例：(@niftyの場合）$homepage = "http://homepage?.nifty.com/ユーザー名/index.html";$max = 50;

修正して上書き保存する（主な箇所のみ）。
$backgif、$homepage、$icon̲dir などの箇所ではHTML ファイルや画像ファイルのURLを記述する。@niftyやHi-HOなど、CGIのディレクトリーが決められているプロバイダ
ーの場合は相対パスで記入するとややこしくな

親記事の最大記事数を指定する。これを超える記事は古い順に自動で削除されていく。

$pass = '0123';
管理用パスワード。半角の英数字で適当なパスワードを指定する。

$icon̲dir = ".";
アイコン画像のあるURL。yybbs.cgiと別ディレクトリーとなる場合は、http://から記述する。

るので、「http://」からの絶対パスで記述する$get̲remotehost = 0;

ことをおすすめする。これらのファイルのURL

投稿者のホスト名の取得の仕方。BIGLOBE などでは「1」に変更しないと取得できない。
@niftyでは「1」にしてもIPアドレスしか取得できない。

指定が誤っていると掲示板のCGI が正しく動作しないからだ。
Jedit

vCD-ROM 収録先（A）Mac→Jedit

186 INTERNET magazine 2000/2$lockkey = 0;
ファイルロック機能。これは同時に2つ以上のアクセスが重なるとログファイルが破損してしまことへの対策だ。基本的には「2」に変更する。プロバイダーのホームページなどでsymlink関数が使えることが明記されている場合は「1」とする。@niftyはsymlink関数が使えるので「1」。

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

テキストエディター：文字修飾やページレイアウトなどの情報を含まない、プレーンテキストを編集するためのアプリケーション。
もともとはプログラミング用のツールとして利用されていたが、コンパクトで軽快に動作することから、ワードプロセッサーの代わりに使われることも多い。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

アップロードは要注意@niftyでのファイルの配置
ファイルの修正が終わったらFTPソフトを使「パーミッション」を設定する。yybbs.cgi のって各ファイルをサーバーにアップロードする。

パーミッションをFFFTPで設定するには、リモ

FTPソフトはウィンドウズ用ではFFFTP、マッート側のファイルを右クリック→「属性変更」

ク用ではFetch-J が有名だ。ともに本誌付録とする。「属性の変更」という設定画面が現れ

CD-ROMに収録されている。

ftp?.nifty.com（?には数字が入る）
homepage / index.html(トップページ)

るので、「現在の属性」のところに「755」とファイルを転送する前に全体のディレクトリ

入れ、OK ボタンをクリックする。すると対象

ー構成とファイルを置く場所を理解しておく必

ファイルのパーミッションの設定が755に変更

要がある。これはプロバイダーによって規定がされる。同様に、yybbs.log とcount.dat はあるのでCGIの設置規定のページをよく読んで「666」にパーミッション設定を変更する。

理解しておこう。@nifty やHi-HO では、CGI

Fetch-Jの場合は、ファイルを選んで「リモの各ファイルとアイコンのGIF ファイルは異なート」メニュー→「Permissionの設定」をクる場所に置くので注意してほしい。ちなみに

リックし、下図で属性が「755」のファイルで

BIGLOBE とぷららでは、アイコンファイルを

は「検索/実行」をすべてチェックし、「666」アップロードする場所は、ほかのファイルと同のファイルでは「書込」をすべてチェックする。

img / home.gif kuma.gif...
（アイコン一式）
cgi-bin / yybbs.cgi [755]yybbs.log [666]count.dat [666]jcode.pl

FFFTPのパーミッション設定画面

じディレクトリーでOKだ。
それでは各ファイルを転送しよう。ここでは、代表的なFTP ソフトであるFFFTP とFetch-J

Fetch-Jのパーミッション設定画面

を例にとって説明していこう。
yybbs.cgi、yybbs.log、count.dat、
jcode.plの各ファイルは「アスキー（テキスト）モード」で、home.gif などのアイコン画像はすべて「バイナリーモード」で転送するのだが、
FFFTP、Fetch-J ともにモードの自動切り替

FFFTP（755の場合）

vCD-ROM 収録先（A）Win→Ffftp

えをサポートしているので、ユーザーは特に気Fetch-J

vCD-ROM 収録先（A）Mac→Fetch-Jにする必要はない。
ファイルの転送がすんだら、各ファイルに（666の場合）

掲示板を公開しよう
さて、いよいよ掲示板の公開だ。掲示板に掲示板の運営にあたっては、今日からあなた

トップページなど（HTMLファイル）からリンが責任者であり、ウェブ管理者だ。掲示板のクを張る場合は以下のように記述する。

運営に関しては絶対的な権限を持つことを認識しよう。

<a href="http://hpcgi?.nifty.com/ユーザー

管理者はすべての投稿者の「ホスト名」を名/yybbs.cgi">みんなの掲示板</a>（?の部分には数字が入る。@niftyの場合）

知る権利があり、そしてすべての投稿記事を「削除」する権利を持つ。具体的には、タイトル部の下の「管理用」というリンクをクリック
し、管理パスワードを入力して管理モードに入YY-BOARDのコメント削除画面

る。この画面で投稿者のホスト名を知り、記事の削除を行う。
ログファイル (yybbs.log) はマメにバックアップを取るようにしよう。同時アクセスやサー完成した「みんなの掲示板」

バー障害によるファイル破損など、不測の事態に備えるべきだ。バックアップはできれば1日1回は行いたいところだ。

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

パーミッション：許可、権利。あるユーザーがログインできるコンピュータにおいて、特定のディレクトリーやファイルなどにアクセスできる権利のこと。
ホームページで掲示板などのCGIを使うときは、ファイルごとに細かくパーミッションの設定を行う必要がある。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

187

グレードアップ2

掲示板を作ってはみたものの、思うように書き込みをしてもらえないという悩みを持っている人は意外に多い。最近はウェブ掲示板の数も増えているため、できあいのCGIを使った掲示板は、どこも同じ印象になりがちだ。ライバルに差を付けるために、個性的なオリジナルデザインの掲示板を作ってはいかがだろうか。

apeboardはこんな掲示板
インターネットで配布されているCGI掲示板

掲自
示由
板に
をデ
作ザ
ろイ
うン
で
き
る

のデザインを変更したい場合、Perlで書かれたものが大部分であるため、書き換えにはプログ
ラミングの要素が必要になる。このため初心者にとって掲示板のデザイン変更は事実上不可能だと言えるだろう。
その壁を取り除き、簡単に自分の好きなデ
ザインにカスタマイズできる掲示板、それが「apeboard」だ。apeboard は、見映えの部
分をHTMLファイルとして独立させているため、ホームページを作る感覚で掲示板のデザインを変えることができる。HTMLファイルを編集するだけで、だれでも簡単にオリジナル掲示板が作成できてしまうのだ。
初期設定の状態のapeboard

apeboardをダウンロード
それではまず、apeboard本体をダウンロー
ドしよう。「2apes.com」

から入手できる。EUC版とシフトJIS 版の2種類あるが、今回はシフトJIS 版のapbd̲sjs.lzh を使用す
ることにする。
apeskin̲SJS フォルダーには掲示板で使われる画像やHTML ファイル（header.html、
main.html、footer2.html など）が入っており、これらのファイルを変更すれば掲示板のデ
ザインを変えられる。
www.2apes.com

2apes.comで「Products」→「apeboard
Download」からダウンロードする

apeboard本体（apdb̲sjs.lzh）に含まれるファイルとフォルダーの一覧

188 INTERNET magazine 2000/2

ファイル／フォルダー

説明

apeboard.cgi

掲示板本体。書き込み、閲覧などの基本CGI

boardini.cgi

掲示板をカスタマイズするための設定ファイル

apeboard.dat

書き込まれた発言を保存するログファイル

apeboard̲mt.cgi

発言削除、コメントの付加を行う管理者用CGI

apeskin̲SJSフォルダー

掲示板で使用される画像やHTMLが入っているフォルダー

skinini.cgi

見映えを変更するapeskin用設定ファイル

jcode.pl

日本語コード変換ライブラリー

manualフォルダー

HTML形式のapebordマニュアル一式

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

シフトJIS（シフトジス）：漢字を2バイトで表現する文字コードで、半角英数字と漢字の文字セットの切り替えを不要にしたことが特徴。
JIS漢字コードで使っていなかった領域に文字コードをずらした（シフトした）ことから、この名で呼ばれる。ウィンドウズやマッキントッシュで幅広く使われている。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

掲示板をデザインしよう
上段（header.html）

項目

name属性名

題名<input type="text" name="subject">2apes.comでもユーザーが作ったHTMLデ

名前<input type="text" name="name">

ザインファイル（「apeskin」）が公開されていE-mail<input type="text" name="mail">

るが、今回は「Studio BEAMS」

URL<input type="text" name="url">

配布中の「BEAMS STYLE 3.0」を例に、自パスワード <input type="password" name="pwd">
メッセージ <textarea name="message">から分でデザインする方法を説明する。
まず掲示板全体をレイアウトしたHTMLファ（例 1）題名 <input type="text" name="subject" ……>イル（apeskin̲SJSフォルダーの下のsample.
html）を編集する。あとで上段、中段、下段（例 2）メッセージ <textarea name="message" ……>の3 つの部分に分けるのだが、最初に1 ファイルで作ったほうが、編集が容易でレイアウトを入力用フォームは、下記のように開始する。
<form method="post" action="./apeboard.cgi" name="header"><input type="hidden" name="command" value="write">
上の表のようなname属性がある<input>タグや<textarea>タグが必要だ。

イメージどおりに作成できるので都合がいい。
上段には投稿用のフォームが必要だ。編集するときは<form> タグと<input> タグ内のname属性は変えてはいけない。次に中段の発中段（main.html）

下段（footer2.html）

言表示の部分を作る。「subject<!--s-->」といった文字列を書いておけば、ページを表示するときに実際の発言のものに置き換わる。最後に下 段 を作 成 し、 パスワード入 力 欄 、 < ahref="TOP">と<a href="BACK">を記述する。デザインができたら上段（header.html）、中段（main.html）、下段（footer1.html とfooter2.html）に分割する。

（例3）題名 <font size="2"><b>subject<!--s--></b></font>（例4）メッセージ <font size="2">message<!--s--></font><a href="TOP"> <a href="BACK">
Backボタンは「TOP」、Nextボタンは「BACK」という文字列をリンク先にする。footer2.htmlからNextボタンを削除すればfooter1.htmlができる。

HTML内に決まった文字列を記述すると、apeboard.cgi
が実際の発言のものに置き換える。

なお、@niftyやHi-HOでは「cgi-bin」ディレクトリーに置いた画像はブラウザーから読めないので、画像は別のディレクトリーに置いてURLを「http://〜」から指定する。
web.macintosh.to/~beams/

アップロードして公開しよう
それでは実際にアップロードしてみよう。アップロードの前にapeboard.cgi、apeboard̲$mail̲image01 = '<img src="images/mail.gif"
width="30" height="12" border="0" alt="Mail">';mt.cgi、boardini.cgi、skinini.cgi の各ファ

$mail̲image02 = '<img src="images/shim.gif"

イルをテキストエディターで開き、設定箇所

width="1" height="12" border="0" alt="Mail">';（管理用パスワードや各ファイルのURL）を書$url̲image01 = '<img src="images/url.gif"
width="30" height="12" border="0" alt="URL">';き換える。右にskinini.cgiの例を挙げたので参$url̲image02 = '<img src="images/shim.gif"

考にしてほしい。

width="1" height="12" border="0" alt="URL">';

また、boardini.cgiをカスタマイズすることにより、掲示板のさまざまな機能が設定できるので、自分好みに書き換えてみてほしい。

メールアドレスとURLの表示を自分で用意した画像にリンクさせる場合、赤字の部分に合わせて変更する。なお、@nifty
やHi-HOでは緑字の部分は「http://〜」から始まるURLで記述する。

BIGLOBEやぷららでは、同じディレクトリ
ーにすべてのファイルをアップロードすればよ

各ファイルのパーミッション設定

い。@nifty やHi-HO では右の一覧にあるファ

ファイル名

イルを「cgi-bin」ディレクトリーに、それ以apeboard.cgi、apeboard̲mt.cgi
boardini.cgi、skinini.cgi

755

apeboard.dat

666

外の画像ファイルなどはHTMLファイル用のディレクトリーに置く。なお、187ページを参考にして各ファイルのパーミッションを変更する

jcode.pl、header.html、main.html
footer1.html、footer2.html

パーミッション

「BEAMS STYLE 3.0」を使って完成したapeboardの掲示板。
644のも忘れないでほしい。

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

URL（ユー・アール・エル／Uniform Resource Locator）：ウェブページなどのアドレスをいう。
WWWの場合はhttp://から始まる文字列で、ホスト名、ドメイン名、パス名、ファイル名を順に記述することで、世界中のWWW上のファイルを指示できる。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

189グレードアップ3

本格的にホームページを運営していくには、訪問者がどのページをどのように見ているかを分析するアクセス解析が欠かせない。どこからリンクされているかを調べたり、ページごとの人気度を計ったりすれば、ページ作りが効率よく行える。
アクセスカウンターではできないアクセス解析の機能を使ってホームページをパ
ワーアップしよう。

アクセス解析でわかるもの

ホア
ーク
ムセ
ペス
ー解
ジ析
をで
パ
ワ
ー
ア
ッ
プ

ブラウザーは、ウェブページを読むときにさがある。184ページからの掲示板の作成を参考

まざまな情報をサーバーに送っている。ブラウにしてほしい。CGIが使えない人は、199ペー

ザーの種類、ホスト名（インターネット上でのジの記事を参照してほしい。

マシン名）、どのページからジャンプしてきたかなど。
こうした情報を保存して、それを参考にしながら訪問

アクセスされた時間
昼間が多ければ、会社や学校からのアクセスが多く、夜間が多ければ自宅からのアクセスが多いことがわかる。

者の傾向を考えてページ

ホスト名を作成すれば、アクセス数

ホスト名の中のドメイン名を見れば、どのプロバイダーや会社からアクセスされているか、どの国の人が来ているかがわかる

アップの役に立つ。また、単純にアクセス状況を眺めて楽しむのもいいだろう。ただし、アクセス情報を保存するには、ホームページでCGIが使えるプロバ

ブラウザー名どのブラウザーを使っている人が多いか、どのOSのユーザーのアクセスが多いかがわかる。

ページの参照元
訪問者がどのページにあるリンクをクリックしてやって来たかがわかる。つまり、どのページからリンクされているかがわかる。

イダーに入会している必要

Access Reportをダウンロード
CGIでアクセス解析を行うには、184ページ

ファイルの先頭にある「Perlのパス」をチェッで紹 介 した KENT WEBから「 Access Re-

クするのは掲 示 板 と同 じ。それ以 外 では、

port」

をダウンロードするのが手っ取「report.cgi」では「リンク元除外ページ」とり早い。ファイルを解凍すると2つのCGIスク「ホスト名取得モード」を、「replist.cgi」ではリプトが出てくる。
「report.cgi」はアクセス情「グラフ画像」を修正しよう。ファイルの解凍報を保存するスクリプトで、「replist.cgi」はや編集の方法などは186ページを参照してほしアクセス解析の結果を表示するスクリプトだ。

い。 www.kent-web.com/data/report.html

report.cgi@myurl = ('http://www.xxx.yyy/˜foo/','');
リンク元除外ページを並べる。たとえば、下位のページから戻った場合をカウントしたくなければ、「http://homepage1.nifty.com/ユーザー名/」のようにホームページのURLを入れる。
$lockkey = 0;
ファイルロック機能。186ページ参照。
$get̲remotehost = 0;
たいていのプロバイダーでは、0を1に変えないとホスト名が取得できない。

replist.cgi$graph1 = "./graph1.gif";$graph2 = "./graph2.gif";
グラフ画像のURL。@niftyのようにCGIと同じ場所にある画像を読めない場合は、別のフォルダーに画像を保存して、「http://homepage1.nifty.com/img/graph1.gif」のように「http://〜」から指定する。

190 INTERNET magazine 2000/2

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

ホスト名：インターネットに接続されたコンピュータに付けられた名前。ダイアルアップ接続では、接続のたびに「mtk23.xxx.ne.jp」のようなホスト名が付くので、アクセス解析をすれば訪問者のプロバイダーが「xxx.ne.jp」であることがわかる。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

アクセス解析を使ってみよう
ファイルの編集が終わったら、ファイルをア@niftyでのファイルの配置

ップロードしよう。たいていのプロバイダーでは6つのファイルをすべて同じディレクトリーにftp?.nifty.com（?には数字が入る）

置けばいいが、@niftyやHi-HOでは2つのGIF

homepage / index.html(トップページ)

ファイルをHTML用の場所に置く。パーミッシ
ョン（属性）の設定は、掲示板の場合と同じ
くCGIファイルを「755」に、データファイル（report.log）を「666」に設定する。
Access Reportを動かすには、アクセスの解析をしたいページ（たとえばトップページの

img / graph1.gif graph2.gif（画像ファイル）
cgi-bin / report.cgi [755]replist.cgi [755]report.log [666]jcode.plindex.html）のHTML にCGI を呼び出す
JavaScriptを下のように埋め込む。<IMG>タ

欄でreplist.cgiのURLを直接入力してみよう。

グの「SRC=」にはreport.cgiを参照できるよ

アクセス解析の結果が表示されるはずだ。「リうに「http://〜」で始まるURLを指定する。

ンク元の取得」や「訪問者マシンOS」、「ブラ

準備ができたら、JavaScript を書き込んだウザ」、「ホスト名」、「アクセス時間帯」がグラページを一 度 表 示 させてみてから、フになって表示される。ただし、@nifty では、「 h t t p : / / h p c g i ? . n i f t y . c o m / ユーザー名

訪問者のホスト名情報は取得できず、代わり/replist.cgi」のようにブラウザーのURL 入力にIPアドレスが表示される。

「リンク元の取得」を見れば、どのページからリンクが張られていて、そのうちどこからジャンプしてくる人が多いのかがわかる。

HTMLに埋め込むスクリプト （@niftyの場合）<SCRIPT LANGUAGE="JavaScript"><!-document.write("<IMG SRC='http://hpcgi1.nifty.com/ユーザー名/report.cgi?");document.write(document.referrer+" ' width=1 height=1>");//--></SCRIPT>

訪問者のブラウザ―情報とホスト名情報。ブラウザ
ーはIE 5が、プロバイダーはODNが多いことがわかる。

さらに進んだ使い方
ここまでの例では、１つのページのアクセス

アクセス解析を2つ置いた例

情報しか保存できない。複数のページでアクセス解析を行ってページの人気度を比較するに

homepage / index.html

は、Access Reportを複数設置すればいい。
「report1」、「report2」……のようにサーバー上にディレクトリーを作ってそれぞれの中に必要なファイルをすべてアップロードする。アクセスを解析したいページに埋め込むJavaScript
アクセス時間帯の情報。午後 11時から午前 1時までと午前 9時から10時までの間にアクセスが集中している。

cgi-binreport1 / report.cgi ……
report2 / report.cgi ……

では、<IMG>タグのSRC属性でそれぞれ別の場所に置かれたCGIのURLを指定する。
ただし、CGIスクリプトを置きすぎるのは考えものだ。アクセスの集中する人気ページにな
ると、ページを表示させるたびにCGIスクリプ

1番目のコンテンツのHTML：
document.write( <IMG SRC= http://〜/report1/report.cgi? );：トが起動して動作の重いサイトになってしまう
し、アクセス情報のデータファイルでホームページの残り容量が足りなくなる。2 つか3 つ程度にしておいたほうがいいだろう。

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

IPアドレス：インターネットに接続されたコンピュータを識別するために付けられる世界で1つしかない番号。IPアドレスにわかりやすい名前を付けたのがホスト名。

©1994-2007 Impress R&D

2番目のコンテンツのHTML：
document.write( <IMG SRC= http://〜/report2/report.cgi? );：INTERNET magazine 2000/2

191

グレードアップ4

もう少しホームページに遊びの要素がほしいと思っても、CGIが使えないからといってあきらめてはいないだろうか。たとえCGIが使えなくても、JavaScript
ならHTMLファイルの中に記述するだけなので、どんなプロバイダーでも大丈夫だ。だれでも簡 単 に設 置 できて、見 に来 てくれた人 をあっと驚 かせる
JavaScriptを紹介しよう。

訪問者が遊べるページを作ろう

﹁
遊あ
べ
るな
ペた
ーの
ジ○
を○
作度
ろチ
うェ
ッ
ク
﹂
で

自分のホームページを充実させたいと思って

今回は、「あなたの○○度チェック」と、おいる人は、見に来てくれた人のためにちょっとみくじを表示するスクリプトを紹介する。どちした遊べる仕掛けを作ってみるのはどうだろう

らもJavaScriptなのでだれでも設置できるし、か。とはいえ、自分のプロバイダーはCGIに対これを改造すれば性格診断や占いなどにも応用応していないという人も多いだろう。そこで、可能だ。自分のページが堅苦しいと感じている

ここではJavaScriptを使ったテクニックを紹介

人は、ぜひこのページのスクリプトを試してみする。だれでも設置できて、改造も簡単だ。

てもらいたい。
ソース収録先vCD-ROM 収録先（A）Special→Script「あなたの○○度チェック」を作る
ウェブを見て回っているとよく見かけるペー

ページの作り方を解説する。次ページのスクリジがある。それは「性格診断」や「あなたの○プトが、サンプルページのソースだ。ソースを○度を判定します」といったような、訪問者が見 てもわかるとおり < H T M L > で始 まり

入力した値によって異なった結果を表示するコ</HTML>で終わっている。基本的にはこのサンテンツだ。このような仕掛けを自分のホーム

ンプルのままで動くので安心してほしい。しかページでも使ってみたいと思っている人は多い

しタイトル（判定する題材）や設問、判定結だろう。実際に筆者のところにも「どうやって果のコメントをカスタマイズしたい人も多いと作るの？」といった質問が頻繁に送られてくだろう。そこで、さらにこの点について詳しくる。そこでまず、訪問者の○○度を判定する

解説していこう。

あなたの○○度チェック

192 INTERNET magazine 2000/2

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

おみくじスクリプト

スクリプト：プログラムとほぼ同義語。いくつかの単純な動作からなるプログラムを、スクリプトという。スクリプトはテキストで書かれる。スクリプトを記述する言語をスクリプト言語といい、JavaScriptもこの一種だ。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

スクリプトをカスタマイズしてみよう
まずはタイトルを変える場合の設定から紹介
judge.html

しよう。1 の部分を書き換えると、タイトルと結果の「○○度」を変更できる。
質問の数を変えるには、2 の部分を変更す<HTML>

if (flag == 0) {<HEAD>

var percent = Math.round(point * (100/len));<SCRIPT LANGUAGE="JavaScript">

var ansWin = window.open("","","width=300,

る。7 項目にしたい場合は、単純に6 を7 に変

var ttl = "コンビニ依存度"; 1height=150");

えればいい。

var len = 6; 2

with(ansWin.document) {var Question = new Array(len-1);

各質問の内容が3 の部分になる。質問の数

open();

3

Question[0] = "新発売の商品はとても気になる";

write("<HTML><BODY BGCOLOR='white'>");を増やした場合には、この部分のうしろに

Question[1] = "好みの弁当がある";「Question[6]="〜";」のように追加する。番

Question[2] = "おにぎりの種類を全部知っている";

号は0 から始まっているので、最後の番号はQuestion[3] = "古い弁当と新しい弁当を見分けられる";「質問数-1」になることに注意。

Question[4] = "毎日一回は必ず行く";

write("<CENTER><FONT SIZE='+1'>あなたの",ttl,"
は");write("<B>",percent,"%</B>です。
</FONT></CENTER>");

Question[5] = "店員の名前を3人以上言える";

判定結果に対するコメントが 4 の部分だ。

var Comment = new Array(len);

質 問 を増 やしたときは、 コメントもComment[0] = "安心していいみたいですよ。";「Comment[7]="〜";」のように増やした数だ

Comment[1] = "一般人レベルです";

け追加していく。質問の数よりコメントの数がComment[2] = "ちょっとヤバイかも？";1 個多くなることに注意。「Comment[数字]」Comment[3] = "コンビニ通ですね。";

write("<DL><DT>作者からのコメント<BR><BR>");
write("<DD>",Comment[point],"</DL>");4

write("</BODY></HTML>");
close();}}

Comment[4] = "かなりコンビニを極めてますね。";の数字は、「はい」の数に対応しているので、

else { alert("チェックされてない項目があります"); }Comment[5] = "コンビニ無しでは生きていけませんね。";}

その内容は「○○度」が低い人から高い人にComment[6] = "店員になりましょう。";</SCRIPT>

対するものが順番に並ぶようにする。

var ansVal = new Array(len-1);</HEAD>

function check(val,n) { ansVal[n] = val.value; }<BODY>

1つのコメントが長すぎると、判定結果のウ5function ans() {ィンドウに収まりきらなくなる。ウィンドウのvar point = 0; var flag = 0;

大きさを変更するには、 5 のwidth（横幅）（中略）

for ( var i=0; i<len; i++ ){とheight（縦幅）の値を変更すればよい。ネ

if (typeof(ansVal[i]) == "undefined") { flag = 1; }</BODY>ットスケープナビゲーターとインターネットエ

else { point += parseInt(ansVal[i]); }</HTML>

クスプローラでは開かれるウィンドウサイズが}微妙に違うので、少し大きめの数値を設定しておいたほうが安全だ。

アイデアしだいでこんなことも先に紹介したサンプルは、フォームの入力にtell.html

よって結果を変化させるのでソースが少し長く<HTML><BODY BGCOLOR="white"><HEAD><CENTER><SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript">

い場合はもっと簡単にできる。その例として

var ttl = "本日の運勢"; 1

document.write("<H1>",ttl,"</H1>");「おみくじスクリプト」を紹介しよう。このサン</SCRIPT>

プルは「おみくじを引く」ボタンをクリックすvar len = 6; 2
var result = new Array(len-1);3

なっているが、ユーザーが入力する値が何もな<FORM NAME="field">

ると、その右にあるテキストボックスにおみく

result[0] = "大吉"; result[1] = "中吉";<INPUT TYPE="button" VALUE="おみくじを引く"

result[2] = "小吉"; result[3] = "末吉";onClick="tell()">result[4] = "凶"; result[5] = "大凶";<INPUT TYPE="text" NAME="box" SIZE="5">function tell() {</FORM>

2 がおみくじの種類の数、3 がおみくじの内

var num = Math.floor(Math.random()*len);</CENTER>

容なので、それぞれを変更すればよい。

document.field.box.value = result[num];</BODY>}</HTML>じの結果を表示するものだ。
カスタマイズする場合には、1 がタイトル、前のスクリプトが長いと感じて気遅れしてし</SCRIPT>

まった人は、まずはこちらのお手軽版からトラ</HEAD>イしてみるといいだろう。

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

ソース：HTMLやJavaScriptなど、アプリケーションに処理させるテキスト、またはそのファイル。

©1994-2007 Impress R&D

INTERNET magazine 2000/2

193グレードアップ5

Yahoo!などのポータルサイトには、「My Yahoo!」のようにユーザーが「モジュール」（ページに表示させる部品）を選んでページの構成を好きなように組み立てる機能がある。自分のページでも、訪問者がコンテンツの表示をカスタマイ
ズして、次に来たときにも同じ表示ができるようになれば、人気がぐっと高まる
こと間違いなしだ。

クッキーを使うには

ポカ
ース
タタ
ルマ
サイ
イズ
トで
をき
目る
指ペ
ー
そ
ジ
う
で

CGIを使わない限り、ブラウザーはユーザー

ROMに収録した。次のようなタグをHTMLにがページ上で何をしたかを保存できない。ただ

埋め込めば、クッキーデータの読み込み、保しクッキーを使えば、簡単なデータをパソコン

存、消去が簡単にできるようになる。対応して上に保存しておいて、次にそのページを見たといるブラウザーはインターネットエクスプロー

きにデータを取 り出 せるようになる。

ラのバージョン4 以上と、ネットスケープナビ

JavaScriptでクッキーを扱うと、ユーザーの設

ゲーターのバージョン3以上だ。

定に合わせてダイナミック

cookie.jsの埋め込みに内容を変更するページが作成できる。
JavaScript でクッキーを使 うのは面 倒 なので、だれでも簡単にクッキーを扱えるようになるファイル<SCRIPT LANGUAGE="JavaScript" SRC="cookie.js"></SCRIPT><SCRIPT LANGUAGE="JavaScript">s = readCookie("name");// 「name」というデータの内容を読み込む
writeCookie("name", "kurazono"); // 「name」というデータの内容を// 「kurazono」にして保存
clearCookie("name");// 「name」というデータを消去</SCRIPT>（cookie.js）を付録 CDソースの収録先

vCD-ROM A Special→Custom

カスタマイズの設定画面を作る
ここではサンプルとして、インターネットマ

ら、その月の内容が先頭に表示できるようなペガジンの記事をモジュールとして訪問者が自由ージだ。上記の収録先にあるindex.htm を見に選べるページを作ることにする。たとえばてほしい。まず、プルダウンメニューでユーザ「HTML TIPS & TRICKS」を愛読している人なーが設定を行うインターフェイスを作る。ソースのようにモジュールの数だけ<SELECT>タグを書き、それぞれの中にモジュールの数に「（なし）」を加えた<OPTION> タグを書く。また、設定を保存する
ボタンを作 り、 押 したときにJavaScript でクッキーを書き込
むようにする。

設定画面のインターフェイス（index.htm）
モジュール1: <SELECT SIZE=1 NAME="mod1"><OPTION VALUE="1">特集 <OPTION VALUE="2">集中企画<OPTION VALUE="3">i-Biz Today <OPTION VALUE="4">PRODUCT SHOWCASE<OPTION VALUE="5">HTML TIPS &amp; TRICKS <OPTION VALUE="6">（なし）</SELECT><BR>（中略）<INPUT TYPE="button" VALUE="設定"
onClick="for(i=0;i<num̲max;i++)writeCookie('mod'+(i+1),this.form.elements[i].selectedIndex);
location.reload();">

194 INTERNET magazine 2000/2

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

クッキー：WWWサーバーがブラウザーに対してデータを保存するように要求する仕組み。または保存されたデータ。
以前にページを訪れたユーザーを識別するためなどに使われる。JavaScriptでもクッキーを扱える。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

モジュールを書いてみよう
このサンプルは、ちょっと手を加えるだけでブロックでmodule[0][0]からmodule[0][7]のすべて用意ができたら、index.htmをブラウ同じ仕組みのページを簡単に作れるようになっようにモジュールの内容を「"〜"」で囲った文ザーで開いてみよう。ページの下にある設定画ている。前ページに掲載した設定画面のインタ

字列で指定する。各モジュールの最後は必ず空面で好きなモジュールを選んで「設定」ボタン

ーフェイスを編集したら、index.htmの最初の（「""」）にする。「"〜"」の中ではHTML のタを押せば、指定した順番で表示されるようになほうにある<SCRIPT>タグを見てみよう。これ

グを指定できるが、「"」は書けないので「 ' 」

る。もちろん次の日にもう一度ページを見ても、はcookies.jsの埋め込みと、クッキーデータのに置き換える。

前の日と同じ構成でページが表示される。

読み出しを行っている部分だ。「num̲max =cookie.jsの埋め込みとデータの読み出し（index.htm）

5」となっている数字はモジュールの数だ。数字は自分のページに合わせて書き換えてほしい。
index.htm の中ほどにある<SCRIPT> タグに注目。もう1つのjsファイルmodule.jsを呼び出している。モジュールの内容は設定した順
番どおりにここに表示されることになる。
それではmodule.jsを自分のページ用に編集<SCRIPT LANGUAGE="JavaScript" SRC="cookie.js"></SCRIPT><SCRIPT LANGUAGE="JavaScript">
var num̲max = 5; var num̲mod = new Array();for (i = 0; i < num̲max; i++) num̲mod[i] = i;for (i = 0; i < num̲max; i++) {s = readCookie("mod" + (i + 1)); if(s) num̲mod[i] = Number(s);writeCookie('mod'+(i+1), num̲mod[i]);}</SCRIPT>

してモジュールを作ってみよう。
「module[0][0]= ……」以下が表示される内容だ。モジュールの数はサンプルでは5 なので、module[0]からモジュールの内容が表示される部分（index.htm）<SCRIPT LANGUAGE="JavaScript" SRC="module.js"></SCRIPT>

module[4]までのブロックを作り、それぞれの表示するモジュールの記述（module.js）
module[0][0] = "<TABLE WIDTH='400' BGCOLOR='#009999'><TR><TD><FONT COLOR='#FFFFFF'><B>■ 特集</B></FONT></TD></TR></TABLE>";
module[0][1] = "<SMALL>いままでのブックマークじゃ満足できない</SMALL><BR>";
module[0][2] = "<B>これが新定番サービスサイトだ！</B><BR>";
module[0][3] = "<UL>";
module[0][4] = "<LI>一点豪華主義"Web2K"プロジェクト発進！";
module[0][5] = "<LI>ビジネスエリート必携の7大"新"定番サイトでライバルに差を付けろ!!";module[0][6] = "</UL>";
module[0][7] = "";module[1][0] = "<TABLE WIDTH='400' BGCOLOR='#009999'><TR><TD><FONT COLOR='#FFFFFF'><B>■ 集中企画</B></FONT></TD></TR></TABLE>";
module[1][1] = "<SMALL>時代はつなぎっぱなし！</SMALL><BR>";

module.jsで表示している部分

工夫次第でこんなこともここで紹介したcookie.js をページに埋め込

クッキーを使った背景色の変更

む方法を覚えれば、さまざまな応用を考えてさ<SCRIPT LANGUAGE="JavaScript" SRC="cookie.js"></SCRIPT>

らに高度なカスタマイズの工夫ができるだろう。

<FORM NAME="form1"><INPUT NAME="bg" TYPE="text">

たとえば次のようなJavaScript を書けば、ユーザーが設定したページの背景色をクッキーに保存して、ページを開くたびに背景色を再現できるようになる。

<INPUT TYPE="button" VALUE="設定"
onClick="writeCookie('bgcolor , this.form.bg.value);
document.bgColor = this.form.bg.value;"></FORM><SCRIPT LANGUAGE="JavaScript">
bgcolor = readCookie("bgcolor");if(!bgcolor) bgcolor = "white";writeCookie("bgcolor", bgcolor);
document.form1.bg.value = bgcolor;
document.bgColor = bgcolor;</SCRIPT>

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

カスタマイズ：ソフトウェアやウェブサイトのユーザーが、初期状態のままではなく自分の好みに合わせて色や配置などの設定を変えること。
ウィンドウズやマッキントッシュの壁紙を変えるのもカスタマイズの1つ。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

195

グレードアップ6

インターネットマガジンが創刊された5年前は、ホームページの黎明期だった。
まだすべてのページを見て回れるほどの数だったが、新しいページを見つけるたびにわくわくしたものだ。iモード対応ホームページの現状は、まさに5年前と同じだ。今から始めればあなたも先駆者だ。この特集を読んだら、すぐにトライしてみよう。

だれでも作れるiモードページ

ｉホ
モー
ーム
ドペ
対ー
応ジ
にを
し
よ
う

NTTドコモのiモードは、1999年2月の発売

ホームページを作ったことのある人にとっては、

以来すでに250 万台を突破するほどの（1999

作成はそれほど難しくはない。もし、あなたが年11月現在）大ヒット商品だ。競合サービス

すでにホームページを持っているのなら、そのに圧勝した1つの理由は、個人が簡単に、勝手URLをiモードでも見てみよう。画面の制約でに情報発信できるという点にある。

表示が崩れることはあるかもしれないが、表示

i モード対応と言っても、今までのHTML タ
グはほとんどそのまま流用できるので、普通のされる内容は見覚えのあるあなたのホームペー
ジのはずだ。

iモードページのここに注意
i モード対応のホームページを作るときには、にしたほうがよい。HTMLを書くときに画面に「ダイアルアップで見る人を意識し、軽いペーは表示されないタグを書く人も多いが、iモード

ジを作る」意識がより一層必要だ。i モードの用のページでは不必要な記述はなるべく少なく

転送速度は9600bps しかなく、ISDN や専用

したい。コメント行は削除し、<BR>を多用す

線を使っている感覚でページを構成してしまう

る場合は<PRE>タグを使うなど、細かな工夫と、とても見るに耐えない重いページになってをしてみよう。

しまうからだ。

最後に、CGIを使う場合には、フォーム入力

また、i モード端末側で受信できるデータ量のインターフェイスに気をつけよう。フォーム

は5Kバイトまでという制限があることも覚えてへの文字入力は、i モード端末からはとても面おこう。とくに画像ファイルはこの制約を受け倒だ。また、数字やカナ、アルファベットの切やすいので、画像を使う場合には、減色してフり替えも手間がかかる。入力フォームはなるべァイルサイズを極力小さくしよう。

く少なくするか、選択ボックス式で代替できる

もちろん、HTMLファイル自身もコンパクト

ならそのほうが望ましい。

iモードでは使えない機能

iモード独自のHTML・JavaScript <SCRIPT>
・テーブル <TABLE>
・フレーム <FRAME>
iモードではこの3つのタグが使えない点に要注意。
・画像ファイル対 応 している画 像 ファイルは GIF だけで、JPEGなどは表示できない。アニメーション
GIFや透過 GIFについては、一部の機種のみの対応となる。
・文字コード
シフトJISのみ。

・<A href="tel:電話番号">
指定の電話番号に電話をかけるタグ。
・<A href="〜" accesskey="1">
携帯電話の番号ボタンでリンク先にジャンプする。矢印で選ぶ動作を省略できる。1から9までの数字と「#」「*」が指定できる。
・絵文字（&H63647;など）
iモードには独自の絵文字があり、&H63647;のように記述する。ただし、これらはi モード以外では表示されない。絵文字の一覧はNTTドコモのページを参照。

www.nttdocomo.co.jp/i/tag/emoji/

196 INTERNET magazine 2000/2

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

フレーム：WWWブラウザー上で、複数のHTMLファイルを一度に表示する方法、およびそのタグ。
ネットスケープナビゲーターとインターネットエクスプローラ以外のブラウザーでは対応していない場合が多い。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

i1.cgi

同じURLでコンテンツを切り替える
通常のホームページとiモード用のホームペー
ジを作る場合は、普通は2つのファイルを用意#!/usr/local/bin/perl
print "Content-type: text/html¥n¥n";［2］JavaScriptを使う方法
iモードではJavaScriptが使えないが、発想

print '<html><head><title>テスト</title></head><body>';1

if($ENV{HTTP̲USER̲AGENT} =˜ /^DoCoMo/)2{

する。 i モード用 のU R L を「 w w w . n e . j p /を転換したJavaScriptの利用を考えよう。右˜abcde/i/」などとして、ディレクトリーを別のi2.htmlのようにJavaScriptの部分にブラウ

print 'あなたはｉモードからアクセスしてますね。

にする方法が一般的だ。しかし、i モードはたザー用のページを記述し、JavaScript 以外の<br>';

だでさえURL が入力しにくい。そこで、同じ部分にiモード用のページを記述する。ただし、テンツをお届けいたします。';

URL で通常ページとi モード用ページが切り替

ファイルを長くしないように、フレームを使っ} else {わる方法を紹介しよう。

て別ファイルを呼び出す4 。フレーム未対応のブラウザーも配慮して、5 で使用ブラウザー［1］CGIを使った手法

print '<h1 align="center">ようこそ</h1><br>';print 'このページではｉモードに最適化されたコン

print 'あなたはｉモード以外からアクセスしてます
ね。';

3

}
print "</body></html>¥n";をチェックする。

CGI はプロバイダーによっては使えないなどの制約があるものの、もっとも確実に切り替え［3］その他の方法

i2.htmlができる。右のi1.cgi の1 がi モードかどうか

通常のホームページをiモード対応のホームペを判別 している部分 だ。 2 でi モード用 のージに最 適 化 して見 せてくれる「 i F O X 」

HTMLをprintで表示させ、3 で通常のブラウのようなサービスもある。これを利用す

ザー用のHTMLを表示させている。このファイ

れば、入力は少々面倒だが自分では何もする

ルをプロバイダーで決められたCGIを置くディ必要はない。

4

<!--

if（
（ navigator.appName =="Microsoft Internet
Explorer"）¦¦（ navigator.appName =="Netscape"））{document.write（'<html>'）;5

document.write（'<frameset rows=100%,

レクトリーに置き、トップページのURLをそのファイルを参 照 するもの（ h t t p : / / w w w<SCRIPT LANGUAGE="JavaScript">

www2k.biglobe.ne.jp/~misawa/*>'）;
document.write（'<frame src="non̲imode.

.***.ne.jp/***/〜.cgi）にすればいい。

html">'）;
document.write（'</frameset>'）;document.write（'</html>'）;};// --></SCRIPT><PRE>
ここより以下に書かれた内容は、iモードからアクセスされたときに表示されます</PRE>

ソース収録先vCD-ROM 収録先（A）Special→Imode

メールマガジンとの連動がオススメ
iモードユーザーに情報を発信していくうえでポイントになるのは、電子メールマガジンの使

おそらくは100以上のiモード向けメールマガジ
ンがすでに始まっていると思われる。

い方だ。iモードのホームページは、一度は見てiモード向けのメールマガジンを発行するうえもらえたとしても、URL入力が面倒なのでブッで気をつけたいのは、購読を中止する方法を明クマークに登録されない限りは再訪があまり期記することだ。iモードのメールはパソコンに比待できない。こうした場合には、メールで更新

べれば読むにも削除するにも面倒で、読みたく状況などを配信するのが効果的な手法だ。

ないメールが来てしまったときのフラストレー

すでにこの仕組みに気付いた人も多く、i モ

ションはパソコンに比べてはるかに大きい。購ード専用のメールマガジンの発行も相次いでい読を中止する方法は必ず明記して、トラブルにる。電子メールマガジン発行支援システムの定ならないように注意しよう。逆に言えば、iモー番「まぐまぐ」

で「i モード」というキドのメールマガジンの読者層は熱心なユーザー

ーワードで検索をすると、29件のメールマガジであるということでもあり、読者の顔の見えるンが紹介される。これ以外のものも考えると、

発行しがいのある媒体だと言えるだろう。
www.mag2.com

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

メールマガジン：電子メールを使った雑誌のことで、企業が有料で発行するものから、個人が無料で不定期的に発行するものまで幅広く存在する。

©1994-2007 Impress R&D

INTERNET magazine 2000/2

197

グレードアップ7「自分の興味あるテーマを集めてホームページを作るだけではつまらない！」なんて考えている人も多いはず。そんな人に向けて、ここでは「ホームページに付
加価値を与える」バナー関連サービスを紹介しよう。ホームページ作りに活用す
れば、お金がもらえたりアクセス数が増えたりといいことずくめ？

個人でバナー広告を付けるには

ホバ
ーナ
ムー
ペ広
ー告
ジを
で貼
得っ
をて
し
よ
う

個人のサイトでもバナー広告を掲載すれば、気になる報酬だが、実際のクリック数、つま

実績に応じた報酬を得られる。広告システムをりバナーをクリックして広告主のサイトにアク運営する企業のサイトで登録する手続きは、代セスした数に応じて支払われる。１か月の平均

表的な「バリュークリック」

や「サイクリック数やサイトの充実ぶりなどで等級が分でほぼ同じ。ID をもらかれていて、バリュークリックが15 円から25うために、まず専用ページで申し込んで、サイ円、サイバークリックが20円から40円。バリトの内容やアクセス数などについて審査を受けュークリックには、特定のプロバイダーを使っる。合格するとHTML の一部分が送られてくている人に、通常よりも数円高い報酬額の優るので、これをホームページの決められた場所

待サービスもある。仮に毎日1000 アクセスあに貼り付ければOK。広告は運営側が入れ替えったうちの、1パーセントの人がバナーをクリッ

るので、いったんバナーを貼り付ければ、更新クしたとすれば、１か月で報酬は6,000円。ホやメインテナンスを気にしなくてもよい。

ームページの更新意欲もきっと上がるはずだ。

バークリック」

Jump 02

Jump 01

バリュークリック、サイバークリックのサービス概要
基本報酬額
上級報酬額
最上級報酬額
締め日
支払い日
支払い最低金額（未満の場合翌月繰り越し）
掲載不可の条件（内容）掲載不可の条件（対象者）
掲載不可の条件（アクセス数）
ページ上の位置提供しているバナーのサイズ

バリュークリック
15円（1日平均50回まで）20円（51回以上）25円（ファーストクラブ会員）
毎月月末
翌月25日（休日の場合翌営業日）
5,000円サイバークリック
20円（CyberClickメンバー）
30円（CyberClick Premium）
40円（パートナー契約を結ぶ）
毎月月末
翌々月末の第5営業日後まで
5,000円

アダルト、公序良俗に反するもの
著作権、知的所有権に違反するもの
出会い系サイト掲示板、チャットメインのもの
他社バナーが多数掲示されているもの
特定の利用者だけを対象にしたもの
アクセス数が著しく少ないもの
掲載するページの上から1/3以内（800×600で表示した時にスクロールせずにバナーが見られる範囲に収めること）
468×60ピクセル

アダルト、公序良俗に反するもの
著作権、知的所有権に違反するもの
出会い系サイトバリュークリックの申し込みページ
広告掲載サイトの登録ページ。申し込む前に、きちんと規約を確認しておこう。
Jump 01

198 INTERNET magazine 2000/2

www.valueclick.ne.jp/cgi-bin/getstarted/

特定の利用者だけを対象にしたもの＊規約上には記載なし
掲載するページの上から1/3以内

サイバークリック（468×60ピクセル）
サイバークリックロゴボタン（143×60ピクセル）
テキスト広告（30文字）
メール広告（クリックインカム・5行）

サイバークリックの申し込みページ
ホームページに掲載したいバナーの種類によって、申し込
みフォームが異なる。
Jump 02

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

regular.cyberclick.net/publish.html

バナー広告：「バナー」のもともとの意味は「横断幕」。ホームページ上に表示される、横長の四角形に収まるように作られた広告・宣伝用の画像のことを指す。
ロゴや動画を見て興味をひかれた人々がアクセスしやすいように、リンクを張っていることが多く、ウェブ上における宣伝の手段として広く使われている。
©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

バナー交換でアクセス数アップ
ホームページのアクセス数向上には、充実し主なバナー交換サービスた内容もさることながら、積極的な宣伝が欠か

サービス名称CSJバナーエクスチェンジ

www.csj.co.jp/BX/せない。宣伝の基本は、テーマの似ているサイ

リンクエクスチェンジ

japan.linkexchange.com

看板屋

www.kanbanya.com/kanban/

トにリンクをお願いするパターン。しかし、自X-Banners

www.media-wing.com/xbanners/

分でリンク先を探すのは大変だ。そこで「バナAccessPlusBannerwww.edit.ne.jp/˜agency/access/banner/

LinX Japan

www02.so-net.ne.jp/˜drache/search/urlsrch.html

Chibi Change Bannerwww.asahi-net.or.jp/˜fv7t-tbt/index2.html

ー交換サービス」をおすすめしたい。
これは、自分のホームページにほかの人のバナーを表示する代わりに、ほかの人のホームページに自分のバナーを載せられる仕組みのことだ。このサービスを使えば、リンク先を探さな
くても、同じバナー交換サービスに登録された
ほかのホームページに、自分のバナーが自動的に表示される。自分のバナーが表示される回数
は、「自分のホームページでほかの人のバナーを表示した回数」に応じて変動する。この割合
を還元率と呼ぶ。還元率はサービスごとに異な看板屋のアクセス解析

るが、自分でリンク先を探すのに比べれば、はサービスに登録、利用している人のサイトについて、アクセスログを自動的に解析してくれる。

るかに多くのサイトにバナーを表示できる。また、同時にアクセスログの解析サービスを提供しているところもあるので、サイトの管理や運バナー交換サービスを使ったページ

営のための資料としても、参考になるはずだ。

ほかのサイトを表示した回数が増えれば、自分のサイトのバナーが表示される回数も増える。

こんなサービスもある
ズームコムズ・ページカウント
無料カウンターと、アクセスログ解析グラフが使える。

ホームページに何かを追加することで得をす

www.hashi.com/pg/

るサービスは、まだたくさんある。基本的には、どれもページの一部にバナー広告を載せるのと引き換えに、便利なサービスが提供される。
たとえば、無料アクセス解析サービス。自分でログを収集することは不可能ではないし、解析したデータがサイト運営に役立つのも事実。
だが、ホームページ初心者にはちょっと敷居が高い。こんな不安も無料サービスを使えば一気に解消される。アクセス数アップのヒントを手
軽に引き出すことができるわけだ。

SITE-A
バナー広告を掲載することで、アクセスログを解析できる。

このほかにも、バナーが載る代わりに、カウ

site-a.net-plan.com

ンターや掲示板など、役立つ機能を無料で使えるサービスは数多い。広告付きとはいえ、どのサービスも「これだけアクセスを確保してほしい」という縛りはない。上手に使えば、「ユーザーCGI不可」のプロバイダーでも豊富な機能を持ったホームページ作りは十分に可能なのだ。「別にお金は儲からなくてもよい」と考えている人も、お得なツールはどんどん使ってみよう！

ジオシティーズ
無料ホームページサービスの代名詞的存在。
充実したパーツ類は利用する価値あり。

www.geocities.co.jp

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

ログ：コンピューターを使ったり、通信したりしたときに残される記録のこと。たとえばWWWの「アクセスログ」では、コンピュータ同士の交信内容から、いつどこからどのページを見たかなど、アクセスした人に関する詳細な記録をとることができる。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

199

グレードアップ8

ホームページ運用にとことんこだわるなら、マイドメインを持ってみるのはどうだろうか。プロバイダーの「/ ˜ u s e r n a m e /」付 きの URL よりも、「http://www.my-domain.com/」のような簡単なURLのほうが見る人にも覚 えてもらいやすい。今 回 は、NTTPC の個 人 向 けドメインサービス「WebARENA」を例に、マイドメインの取得方法を紹介する。

マイドメインを取るにはマイドメインを使うのはさほど難しいことで

マホ
イー
ドム
メペ
イー
ンジ
にの
しＵ
よＲ
うＬ
を

はない。マイドメインが使えるホスティングサービスを利用すれば、個人でも簡単にマイドメ

1 ドメイン名の取得
2 レンタルサーバーの契約
3DNSの設定

インが持てる。料金も月額数千円と、気軽にといった作業が必要となる。ただし、こうした利用できる。

作業はすべて業者が代行してくれる場合が多い

マイドメイン開設までの手順としては、

ので、あまり難しく考えることはない。

どんなドメインが取れるか
ドメインには、jpやukといった国別のドメイ

com やnet といったgTLD ドメインにはこう

ンと、comやnetのように世界中のだれでも利した制限は特になく、個人でも好きなドメイン用できるgTLD と呼ばれるドメインがある。日が利用できる。ただし、世界中で利用されてい本のドメインであるjp は組織の属性によってるドメインなので、希望の名前はすでにほかのco.jp、ne.jp、gr.jpなどに細分化されていて、人に使われている可能性も高い。

たとえばco.jp であれば会社としての法人登記

toやnuといったjp以外の国別ドメインでは、が必要になるといった制限がある。個人で利用

個人利用に際して特に制限のないところも多できるドメインは、任意団体向けのgr.jp か、い。個人で利用する場合には、こうしたドメイ

地域型ドメイン（xxxx.chiyoda.tokyo.jp なンを使うという方法もある。

ど）に限られる。
ドメイン

割り当て対象co.jp

日本国内の株式会社や有限会社などの営利法人

ne.jp

日本国内のネットワークサービス

gr.jp

日本国内の法人格を持たない任意団体（グループ）

com、net、org

世界中で利用できるドメイン

toトンガ王国の国別ドメイン

nu

ニウエ国の国別ドメイン

気になる費用は
まずはドメインの登録料が必要となる。jpドになる。今回紹介するWebARENA の場合にメインの場合は10,000 〜 20,000 円程度、は、jpドメインの取得代行料は15,000円、月

com やnet の場合は70 ドル程度（2 年間の保額料金は3,500 円（法人利用の場合は5,800

持料を含む）、toやnuといった国別ドメインの円）。jpドメインを利用する場合には使用料を場合にはそれぞれ所定の料金（50 〜100 ドル

支払うことになるが、この使用料も月額料金に程度）が必要になる。

含まれている。

さらに、ホスティングサービスの料金が必要

200 INTERNET magazine 2000/2

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

gTLD（ジー・エル・ティー・ディー／global Top Level Domain）：com、net、orgの3つのドメインの総称で、世界中のだれでも利用できるドメインのことを表す。
これに対して、jpやukのような国別ドメインをccTLD（country
codeImpress
Top Level Domain）と呼ぶ。
©1994-2007
R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

マイドメイン取得から利用まで
それでは、実際にマイドメインの取得から利用までの手順を紹介しよう。今回は、サーバー［3］DNSの設定(1)
マイサーバーとマイドメインの申し込みが終ホスティングにWebARENA Suite、ドメイン

わったら、あとはDNS の設定をするだけだ。

はcomドメインをDiscount-Domain.comで

DNS の設定は、WebARENA 側とDiscount-

取得する場合で説明する。

Domain側の両方で必要となる。

［1］マイサーバーの申し込み

スのページ3 から行える。サービスメニューのWebARENA 側の設定は、契約変更サービ
まずはWebARENAにオンラインサインアッ中から「ドメイン名設定依頼」をクリックしプで申し込む1。申し込みは住所や名前などて、設定パターンは「お客さま独自ドメインの必要事項を入力するだけなので、10 分もあ名」を選べば、設定依頼の画面になる。ここ

れば完了する。

で、さきほど取得したドメイン名を入れれば、オンラインサインアップが終 了 すると、

設定依頼は終了となる。あとは、5営業日ほど

WebARENAから開通のお知らせがメールで届

でWebARENAから設定終了のメールが来るのく。このメールには、管理者用のアカウントや

を待とう。

1

WebARENA Suiteに申し込む

https://signup.arena.ne.jp

サーバーの仮の名前（aa.st99.arena.ne.jpなど）が記載されているので必ず保存しておこう。

［4］DNSの設定(2)

この仮の名前でもすでにサーバーとして使うこ

最後に、Discount-Domain.com側のDNSとができる。届いたアカウントを使ってこの名を設する。Discount-Domain.com のトップ

前のサーバーにFTPでファイルをアップロード

ページの「ドメイン情報変更」から「登録情報

して、WWWブラウザーで表示されることを確変更」をクリックして、「ネームサーバー情報

認してみよう。

の変更」を選択する4。
ドメイン名登録業者には、普通プライマリー［2］マイドメインの申し込み

2

Discount-Domain.comでドメインを申請

www.discount-domain.comとセカンダリーの2つのDNSサーバー名とIPア

次はcom ドメインを、Discount-Domain.
com2 で申し込む。ドメイン登録料は2 年間有効で7,800円となる。jpドメインを使いたい
場合には、WebARENA で代行申請ができるのでそちらを利用しよう。WebARENA では、
代行手数料は15,000円となる。

ドレスを登録する。WebARENAでは、
プライマリーDNS

ns3.sphere.ad.jp（IPアドレス）202.239.113.22
セカンダリーDNS

ns4.sphere.ad.jp（IPアドレス）202.239.113.30

まずはトップページで、使いたいドメイン名となる。ただし、Discount-Domain.com のが空いているかをチェックしよう。その名前が場合はこうしたDNS情報を独自のID番号で管まだだれにも登録されていなければ、そのまま理しているので、DNS のID 番号を検索して、登録の画面になる。こちらの登録も、住所やそのID 番号での登録となる。今回検索した限名前などの必要事項を記入していけば、10 分

りでは、WebARENA のDNS は「NS-7」と程度で登録は終了する。ドメイン登録完了の「NS-8」だったので、これを登録する。

通知がメールで届くので、忘れずに保存してお3

WebARENAにDNSの設定を依頼

https://customer.arena.ne.jp

以上で、申し込みと設定は終了で、マイドメインでのホームページが公開できる。

こう。

WebARENA Suiteの仕様

web.arena.ne.jp

初期費用：3,000円
月額料金：3,500円
バックボーン：NTTPC（InfoSphere）の高速バックボーンネットワークに100Mbps
で直結

ホームページ容量 ：基本容量:25Mバイト（増設は5Mバイト単位で最大50Mバイトまで）
CGI・SSI：PerlとCで作成可能
メールアカウント数 ：無制限
マイドメイン使用 ：基本料金に含まれる

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

4

Discount-Domain.comでDNSの設定を変更DNS（ディー・エヌ・エス／Domain Name System）：インターネットで用いられるIPアドレスと名前を管理するしくみ。impress.co.jpなどといったインターネットで利用するドメ
インとマシンの名前は、すべてDNSによって管理されている。このDNSの運用を行うのがDNSサーバーで、クライアントのリクエストに応じて、名前やIPアドレスを返す。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

201

グレードアップ9

退屈な冬の長い夜。だれかとしゃべり合って過ごしたい人におすすめなのがチャット。いろいろな人たちとネット上で楽しく会話すれば、時が経つのも忘れてしまう。掲示板やメーリングリストとは違って、気軽に発言できるチャットは、ホームページの常連客づくりには欠かせない要素だ。最後に自分のページで読者とチャットをする方法を紹介しよう。

ホームページでチャットするには

ホ仲
ー間
ムを
ペ集
ーめ
ジて
で
チ
ャ
ッ
ト
し
よ
う

ホームページにチャットルームを開設するにットなだけに、これは致命的だ。場所も固定なはCGI が必要だ。初心者には大変だが、自由ので、いつものメンバーばかりで新鮮さに欠けに使えるスクリプトや無料開設サービスのおかる。そこで最近話題の「Gooey」やICQ のア

げで、チャットルームを作るのも、それほど難

ドイン「ICQ Surf」で、気分を変えてみてはい

しいことではなくなった。むしろ気になるのは、かがだろうか。チャットとインスタントメッセ

人が増えるにつれて、だんだんと表示が遅くな

ージソフトのよいところを併せ持つ、新しいタってしまうこと。リアルタイム性が魅力のチャ

イプのソフトを紹介しよう。

Gooeyで訪問者とチャットしよう
イ ス ラ エ ル の Hypernix Technologiesのユーザーがいたら、「こんにちは」とか「Hi」が開発したGooeyは、同じホームペーなどと気軽に挨拶してみよう。きっと反応が返ジを見ている人同士でチャットができるソフトってくるはずだ。スピードも速いので、とてもだ。「Let's Gooey」

快適に会話を楽しめる。

Jump 01

Jump 02など、活発なユー

ザーによる情報サイトも誕生していて、ブームの兆しを見せている。

利用のための設定は簡単。インストールする
ときに自分のニックネームやメールアドレスな

Gooeyをインストールした状態でブラウザー

どの情報を登録すればOK。これまで英語版だを起動すると、その脇にウィンドウが現れる。

けだったが、12月に日本語版がリリースされ、

どこかのページにアクセスすると、同じページ

これから日本国内のユーザーも増えることが期を見ているGooeyのユーザーがいるかがチェッ待できる。本誌の付録CD-ROMにも収録した

クされ、ウィンドウに名前が表示される。ほかので、試してほしい。
英語に自信があるならば、「hitwave」
ウィンドウの上位にランクされたサイトにも行ってチャットしてみよう。

vCD-ROM 収録先（A）Win→Gooey

202 INTERNET magazine 2000/2

Jump 01www.hypernix.com

Jump 02

member.nifty.ne.jp/KIIROSOUKIHEI/gooey/index_gooey.htm

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

アドイン：あるソフトに対して、元のソフトにはない機能を追加したり強化したりするためのソフト。

©1994-2007 Impress R&D

冬
休
み
の

ホームページ

グレードアップ！

大作戦

ICQユーザーならICQ Surf
ICQ Surfは、有名なメッセージソフトICQのアドインだ。基本的な特徴は、前ページで紹介したGooeyと同じ。ただし、ICQ Surf単体では動作しない点が大きく異なる。ダウンロード
サイト

Jump 01からICQ Surfだけをダウンロー

ドしても、ICQ本体がなければインストールできないので要注意。
ICQ Surfでは、ICQと同一のナンバーが利用できるので、いままでICQを使っているならば、改めてナンバーを取得し直す必要はない。設定
に迷ったときには「ICQ 道場」

Jump 02

をはじ起動すると、ブラウザーの表示が変わる。左の部分にアクセスしているユーザーが表示される。メッセージは下に入力して送る。

めとする、ICQについてのお助けサイトで情報を探すことができるのも強みだ。

法だろう。

気になる日本語への対応だが、そのままでも

ICQ Surfを起動すると、ブラウザーの表示そメッセージに日本語を使うことは可能だ。アイICQ Surfの長所は、何と言っても利用者ののものが変わり、メッセージの交換ができるよ

コンやボタンの表示が気になるなら、前述した数。ICQ自体が普及していることもあって、いうになる。基本的には、メッセージ欄に会話をお助けサイトなどで公開されている日本語化パ

ろいろなサイトで会話の相手を見つけられ、自入力していけばOKだ。

ッチをダウンロードして利用するのも１つの方分のサイトに呼び込むことも可能だ。

Jump 01

www.icq.com/icqsurf/

Jump 02

pockets.otto.to/icq/

自分のホームページに仲間を呼ぶには自分の使うソフトと行動パターンを書いておけば、チャット相手が見つけやすい。
もちろんサイト内容の充実もお忘れなく。

GooeyとICQ Surf、どちらを使うにしても、いておくだけでよい。ついでに、ソフトの使い

チャット仲間に出会えるかどうかは、自分のよ方やダウンロード先へのリンク、さらには前にく見て回るサイト次第だ。たくさんの人が訪れ紹介した「Let's Gooey」や「ICQ道場」なるサイトでは、ユーザーを見かけることも多い

どの有名サイトなどをリンクしておけば完璧。

が、必ずしも期待したとおりに話がはずむとは興味を持った人がホームページにアクセスして限らない。新たな出会いを求めるならば、自分くれるようになればしめたものだ。もちろん、来のホームページを使って積極的に宣伝をしてみてくれた人を飽きさせないよう、宣伝だけでなよう。

く内容の充実にも力を注ぐのを忘れずに。

宣伝と言っても、難しく考えることはない。

また、チャットでは積極的に「しゃべる」こ

自分のニックネームと、「何時ごろ」「どこのペと。だれかが話しかけてくれるのを待っていてージに」いることが多いか、ホームページに書は×だ。

ボイスチャットができるHearMe
音 声 付 きのチャットをしたい人 には、
HearMeJump 01

がおすすめ。これはホームページに埋め込むActiveXコントロールで、あらかじめインストールすれば、音声付きのチャッ

ジにチャットを設置して仲間を増やすのが、楽しく使うための第一歩だ。
ホームページにチャットを設置するには、設置したいURL

トが楽しめる。
HearMeを使ったチャットツールは無料。ダなどを書いて申し込む。所定のにアクセスし、いくつスクリプトがメールで送られてかの質問（住所など）に答えればインストール

くるので、ホームページに貼りできる。HearMeのサイトにリンクしている専

付ければOKだ。

ウンロードページ

Jump 02

用ページにアクセスすれば、日本語でも問題なく会話ができる。
こういったツールは、まず自分のホームペー

Jump 01

hearme.com

Jump 02

hearme.com/join/

ホームページにHearMeを設定した例。まずはここを基点に、友達を誘ったりして音声チャットに挑戦してみよう。

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

ActiveXコントロール（アクティブエックスコントロール）：インターネットエクスプローラで動画や音声を再生できるウェブページを見たり、対話的な操作を実行したりするために動くプログラム。
©1994-2007 Impress R&D

INTERNET magazine 2000/2

203［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.