interactive!!

BBS
dynamic HTMLCGI／SSI／ダイナミックHTMLも恐くない

CG I

access counterchat!!

ソースコードはすべてCD-ROMに収録！

+CD-ROM
谷中一朝（レスキュー）
藤井幸孝
白畑真

208 INTERNET magazine 1998/3

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

﹁
を
ホ
実こー
現れム
しがペ
ー
よ
うしジ
の
た
い
﹂

った仕掛けを作りたい」というユーザーの願い

よって設定を変えたりUNIXの知識が必要だっをかなえることだ。

たりすると述べたが、今回はある程度環境を限JavaScriptやCGIを一から勉強しなければできないなんてつまらない。どこかのページで見定することで簡単にセットアップできるように説明している。

た「あの仕掛け」を自分のページにも使えればそれでいいじゃないか。

まずウィンドウズ上やマッキントッシュ上だ
けで操作できるソフトについてのみ説明をし、というわけで、どこをどう変えれば自分のペUNIX関連の説明はいっさいしていない。さらージに合った仕掛けになるかだけを解説して、にプロバイダーのウェブサーバーがUNIX上で稼「あとはこのまま使ってください！」というあの働するNCSA-HTTPdもしくはApacheにつHTML TIPS & TRICKSのスタイルが生まれ

いてのみ環境があてはまるように説明している。

た。

もし自分が契約しているプロバイダーがどのウ

そして、もっと簡単にもっとすごいことがでェブサーバーを使っているのか分からない場合

きるようにと、このスペシャル版を企画した。

は、222ページのプロバイダー表を参考にする

レギュラー筆者陣の藤井、白畑両氏はこれまで

か直接プロバイダーに問い合わせてほしい。表にないほど強力な仕掛けを持ってきた。さらに、にはそのほかにも問い合わせすべき情報を掲載

ソースコードはすべてCD-ROMに収録。ほんのしておいた。おもなプロバイダーは網羅してい数文字を書きかえるだけで今すぐ使える。まさるので、ぜひ参考にしてほしい。

に、究極の「至れり尽くせり」なのだ。

ほかにも注意すべき点はあるが、その都度各章で説明しているのでよく読めば必ずうまくい

ついにCGIに挑戦！

くはずだ。

もっとインタラクティブに準備は整った。今すぐあなたのホームページ
そんなHTML TIPS & TRICKSでも1つだ

今では、なんらかの形で自分のホームページ

け手 を付 けていない分 野 があった。 それがを持っている人はかなりの数にのぼるのではな「CGI」だ。何度か掲載を試みたが一度も実現いだろうか。インターネットに接続するためにしなかった。プロバイダーによって対応状況がプロバイダーに入会すれば、たいていは「〜M

まるで違っていたりUNIXの知識が必要であっバイトまでホームページを持てます」といったたりと、中途半端な紹介の仕方ではかえって読たぐいのサービスが付いてくる。

をチューンアップしよう！！

者の方々に迷惑をかけてしまうというのが大きいったんホームページ作成を始めると、最初な理由だ。

は何をやっても新鮮でどんどん新しいテクニッ

でも、現時点で掲示板やアクセスカウンタークに挑戦していく。フレーム、表、GIFアニメなどの仕掛けを作りたいと思えば、どうしてもーション。ところがある日、「これがしたいのに

CGIを避けて通れない。やはり、やらないわけ

難しすぎてできない」という大きな壁にぶつかにはいかないだろう。

る。おそらくそれは、JavaScript、CGI、ダ

このために、今回は強力な助っ人に登場をおイナミックHTMLなどのプログラム言語の知識願いした。人気のCGIサイト「Web裏技」をを必要とする仕掛けに挑戦したくなったときだ

生んだレスキューこと谷中一朝氏だ。「プログろう。

ラムの知 識 がなくてもできるだけ多 くの方 に「ウェブ裏技」のホームページ
jhttp://www.ask.ne.jp/~rescue/

ページを見にきた読者とインタラクティブにCGIを使ったウェブサイトを作ってほしい」、こ対話できる仕掛け。ホームページを作り始める

う語るレスキュー氏はこのスペシャルのためにレスキュー作 CGIプログラムの使用についてと必ずこれがやりたくなるのだ。

自作のCGIプログラムを提供してくれた。もち・プログラムに記載されている著作表

ろん、これもすべてCD-ROMに収録されている。

「HTML TIPS & TRICKS
スペシャル」は究極の至れり尽くせり

不安な人は、今すぐこの記事をぱらぱらとめ
くってみてほしい。自分でプログラムを書く必
要がほとんどないことが分かるはずだ。ついに
CGIに挑戦するときがきたのだ。

本 誌 に 毎 月 連 載 の 「 HTML TIPS &TRICKS」をご存じだろうか。このコーナーがこれだけは注意しよう

目指しているのは、「プログラム言語が分からな
くてもJavaScriptやダイナミックHTMLを使示（およびレスキュー氏のサイトへのリンク）の削除を禁止します。
・プログラムを許可なく第三者に有償で貸与することと、有償／無償を問わず再配布することを禁止します。
・プログラムを利用して生じたいかなる
損害も弊誌およびレスキュー氏は責任を負い兼ねます。

先ほどCGIを扱うにはプロバイダーの環境に

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

INTERNET magazine 1998/3

2091基本知識を身に付けよう

Part

CGIで
スーパーチューンアップ+CD-ROM

CD-ROMで 自分のウェブサイトにインタラクティブな仕掛けを作るのに必要な仕組みがCGIだ。普通
すべてが
そろう

CGIを使うにはプログラムを作成しなければならないが、今回は付録CD-ROMにサンプルのプログラムを収録し、プログラミングの知識がなくても誰でも利用できるようにしてある。
セットアップ方法はいたって簡単だが、その前にまず準備が必要だ。そこでこの章では自分のマシンの環境設定から、必要なツールの使い方までを解説しよう。次のステップに進む前にじっくり読んでマスターしてほしい。

Windowsのみ

拡張子を表示させよう
エクスプローラの「表示」メニューから「オプション」 ※を選ぶ。

CGIで使うファイルを操作するにはファイルの拡張子を判別する必要がある。マッキントッ
シュでは拡張子のあるファイル名はそのまま表示されるので問題はない。しかし、ウィンドウ
ズ95やウィンドウズNTは、初期状態ではファイルの拡張子を表示しない設定になっている。
そこで拡張子を表示するように設定を変更しよう。「スタート」メニューの「プログラム」から「エクスプローラ」を選び、エクスプローラのオ
プションウィンドウで「登録されている拡張子

スタートメニューの「 プログラム」 から「エクスプローラ」を選ぶ。

は表示しない」のチェックボックスをはずして、

d

OKボタンを押せば完了だ。

オプションウィンドウの「登録されているファイルの拡張子は表示しない」のチェックボックスをはずしてOKボタンを押す。
※ IE4.0の「シェル統合」を選んだ場合は「フォルダオプション」

Windows & Mac

絶対パスと相対パスの違いを知ろう
パスとはあるファイルやディレクトリーを指「/」というディレクトリーを表しているが、そし示す表記法である。ディレクトリーはウィン

れ以外はディレクトリーの区切りを表している。

ドウズやマッキントッシュのフォルダーのことだと思ってほしい。

次に「test」というディレクトリーから同じ

/

usr

bin

home

test

perl

ように「perl」というファイルを指し示すことを

たとえば右の図「perl」というファイルを指し示す場合、一番根元にある「/」というディレクトリーを基準とすると考える。まず「usr」から「perl」までのパスはusr/bin/perlとなる。
「test」から「usr」までのパスは/usr/bin/perl../../usrと表せる。このような任意の場所からのパスをと表せる。「/」というディレクトリーの位置はとなる。「..」は上のディレクトリーを表すもの

不変なので、ここを基準としてファイルやディだ。最初の「..」は「home」を表し、次の記事中で絶対パスの指定について書かれてレクトリーの位置を表した絶対的な位置の表記「..」は｢home｣の上の「/」を表している。よいるところがある。絶対パスと相対パスを区別

方法を絶対パスと呼ぶ。ここで「/」という文字って「test」から「perl」までのパスはしなければCGIアプリケーションが動かない場について説明すると、パスの一番左の「/」は210 INTERNET magazine 1998/3../../usr/bin/perl

相対パスと呼ぶ。

合があるので、ここできちんとマスターしよう。

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

Windowsの場合+CD-ROMWS̲FTP収録先：
CD-ROM【A】→Win→WS̲FTP

ファイルを送ろう
自分のコンピュータからウェブサイトにファイルを送るのがFTPソフトだ。ウィンドウズで使 えるF T P ソフトは数 多 くあるが、今 回 は「WS̲FTP」を使ってみよう。WS̲FTPの利点は後述のファイルのパーミッションを変更できるところにある。CGIを利用するのにこの機

d能は必須のものだ。

21接続が済むと、図のウィンドウの右側に接続
先のファイルが表示される。左側は自分のコンピュータのファイルが表示されている。
WS̲FTPは初期設定のままでは日本語のファ
イル名やディレクトリー名を正しく表示することができないので、表示フォントを日本語フォントに変える必要がある。設定はまず、
図のウィンドウの「Options」ボタンを押して「WS̲FTP LEのプロパティ」ウィンドウを表示させる。

3「WS̲FTP LEのプロパティ」ウィンドウの「Display」タブを選び、「Listbox̲Font」から「Custom Font」を選ぶ。

WS̲FTPを起動させると2つのウィンドウが起動する。図のウィンドウで接続先（プロバイダーから指定されたFTPサーバー）とユー
ザー名、パスワードを入力し、OKボタンを押す。

5

ファイルを送るには、ウィンドウの左側から送りたいファイルを選び、右側の送り先のディレクトリーを決定して「→」ボタンを押すだけだ。このとき気をつけてほしいのは、ウィンドウ下部にある転送するファイルの種別の設定である。GIFなどの画像ファイルの場
合は「Binary」を指定し、CGIに用いる拡張子が「.cgi」や「.pl」のテキスト形式のファ
イルの場 合 「ASCII」で送 る必 要 がある。
「Auto」にチェックをすると自動判別するが、文字コードによってはテキスト形式のファイ
ルが「Binary」で送信されてしまうので手動で切り変えたほうが確実だ。

64「フォントの指定」ウィンドウが開くので、MSゴシックなどの日本語が表示できるフォントを選んでOKボタンを押す。これで日本語で書かれたファイルが文字化けせずに表示される。

d

あとで詳しく説明するが、転送先のファイルに次のようなパーミッ
ション（ファイルの操作許可）を設定する必要がある。
・読み取り（Read）
・書き込み（Write）
・実行（Execute）

7「Remote file permissions」ウィンドウが表示されるので、チェックボックスをチェックして適切なパーミッションを設定し、OKボタンを押す。
「Owner」、「Group」、「Other」については後述する。ここでは設定の仕方を覚えてほしい。

パーミッションの変更方法は、まずファイルをウィンドウの右側から選んでマウスの右ボタンをクリックし、 表 示 されたメニューの「chmod(UNIX)」を選ぶ。

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

INTERNET magazine 1998/3

211

Macintoshの場合+CD-ROM
Fetch収録先：
CD-ROM【A】→Mac→Fetch

ファイルを送ろう
自分のコンピュータからウェブサイトにファイルを送 るのがF T P ソフトだ。 今 回 は「Fetch」というFTPソフトを使ってみる。こ
のソフトはほとんどのマックユーザーが使っている定評あるソフトだ。

3
2

1「ファイルを送る」ウィンドウが開くのでファ
イル名を確認してOKボタンを押す。このとき気をつけてほしいのは、フォーマットの種別である。GIFなどの画像ファイルの場合は「生データ」を指定し、CGIに用いる拡張子
が「.cgi」や「.pl」のテキスト形式のファイルの場合は「テキスト」で送る必要がある。

ファイルを送るには、ウィンドウ中の送信ボ
タンを押し、送りたいファイルを選んで「開く」ボタンを押す。

Fetchを起動させる新規接続ウィンドウが起動する。接続先（プロバイダーから指定されたFTPサーバー）とユーザー名、パスワードを入力してOKボタンを押す。

4

あとで詳しく説明するが、転送先のファイルに次のようなパーミッション（ファイルの操作許可）を設定する必要がある。
・読み取り（Read）
・書き込み（Write）
・実行（Execute）

5「ファイル属性」ウィンドウが表示されるので、チェックボ
ックスをチェックして適切なパーミッションを設定してOKボタンを押す。「オーナー」、「グループ」、「全員」については後述する。ここでは設定の仕方を覚えて欲しい。

パーミッションの変更方法は、Fetchのメニ
ューバーから「リモート」を選び、「Permissionの設定」を選ぶ。

パーミッションを理解しよう
UNIXは、多くの場合複数のユーザーが同書き込み（Write）：ファイルに書き込みがリーの所有者が属するグループ。UNIXでは、一のコンピュータを使用するため、すべてのフできたり、ディレクトリーに書き込みができた

通常ユーザーは何らかのグループに所属する設ァイルやディレクトリーに対して操作の許可まり（新しいファイルの作成など）する権限。

定になっている。

たは拒否が設定されている。ディレクトリーと実行（Execute）：プログラムファイルを実

そのほか（Other）：ファイルの所有者、グは、ウィンドウズやマッキントッシュのフォル

行できる権限。権限を与えられたディレクトリ

ループ以外のUNIXサーバー上のユーザー。

ダーのことだと思ってほしい。この操作の許可

ーにアクセスできる。

すなわち「パーミッション」は用途によって3つに分かれていて、さらにユーザーごとに個別に割り当てられている。

またファイルやディレクトリーのパーミッシ
ョンは次のユーザーに個別に割り当てられる。

ファイルおよびディレクトリーのパーミッシ
ョンの種類には次の3つがある。

今回CGIで使う拡張子が「.cgi」や「.pl」のファイルは、すべてのユーザーが実行できるように説明している。
プロバイダーによっては、設定方法が違う場合があるので確認してほしい。

オーナー（Owner）：ファイルやディレクトリーの所有者。普通はUNIXサーバーでファイ

読み取り（Read）：ファイルを読んだり、デルやディレクトリーを作成した人。

ィレクトリーの中身を見たりできる権限。

グループ（Group）：ファイルやディレクト

212 INTERNET magazine 1998/3

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

CGIとはCGIの仕組み6

ストを処理するアプリケーションとウェブサー
バーとの間のソフトウェア的なインターフェイスである。ウェブサーバーからどのようにデータ

3 データ

データ

CGIとはCommon Gateway Interfaceの略で、WWWブラウザーから送られたリクエ

プロバイダーのサーバー

1

HTML

ウェブ
サーバー

CGI

2

4 結果（HTML）

5

WWW
ブラウザー

CGI
アプリケーション

インターネットを送り、アプリケーションがどのようにデータ

CGI
スクリプト

キック

を返すかを取り決めている。

WWWブラウザーで入力されたフォームのデータの処理方法が記述されている。

CGIがどのように使われるかを解説しよう。
プロバイダーのサーバーコンピュータにホー
ムページ制作者が作成したプログラムが置かれている。このプログラムはウェブサーバーから送

1WWWブラウザーで入力されたフォームのデられてくるデータを処理し、結果をウェブサー

ータは、CGIスクリプト宛てにウェブサーバ

バーに返すものだ。プログラムは大抵Perlやシーまで送られる。
2ウェブサーバーはデータを受け取り、CGIス

れていて、一般にCGIスクリプトと呼ばれる。

クリプトを起動させてCGIアプリケーションているプログラムすなわちCGIアプリケーショ
CGIアプリケーションの動きは次のような流仕組みを作ることができる。

を実行する。

SSIとは

4CGIアプリケーションは受け取ったデータをージの表を参考にするか、プロバイダーに直接問い合わせてほしい。

SSIの仕組み

プロバイダーのサーバー（OS）

SSIと は Server Side Includeの 略 で 、HTMLタグの中に埋め込まれた命令をサーバー側で実行し、その結果をHTMLの中に埋め込

CGIスクリプトを置くサーバー上のディレク
トリーはプロバイダーによって異なる。222ペ

処理して結果をHTMLで返す。

れになる。

する。
このようにCGIを使えばインタラクティブな

3さらにウェブサーバーはCGIアプリケーショ
ンにデータを渡す。

ンが実行される。

WWWブラウザーに返す。
6WWWブラウザーは結果のHTMLを表示ェルスクリプトというプログラム言語で記述さ
CGIスクリプトが起動するとファイルに書かれ5 ウェブサーバーは送られてきたHTML を

6

1HTMLファイル
2SSIの処理命令
5コマンドの結果

ウェブ
サーバー

んで表示する仕組みである。
WWW
ブラウザー

<html><body>
現在の時刻は<!--#exec cmd="date" -->です。
</body></heml>インターネット

3SSIの処理命
令の実行

4SSIの処理命
令の結果

HTML
SSIコマンドが埋め込まれている

図のHTMLの<!--#exec cmd="date" -->というタグがSSIである。これはサーバーのオ
ペレーティングシステムであるUNIXの「date」

SSIの処理の流れは次のようになっている。

というコマンドをサーバーで実行しろというこ

1SSIが埋め込まれたHTMLファイルをWWWとを表している。「date」は、UNIXで日付とブラウザーで読み込む。

5ウェブサーバーがWWWブラウザーに実行結果を送る。
6実行結果が埋め込まれたHTMLが表示される。

時刻を表示させるコマンドである。このHTML

2SSIの処理命令をウェブサーバーに送る。

SSIはUNIX標準のコマンド以外の実行ファ

ファイルをWWWブラウザーで表示させると次3ウェブサーバーは、
ウェブサーバーが稼働していイルも指定でき、セキュリティーホールになりるOSに対してSSIの処理命令を実行する。

やすいので使用を禁止しているプロバイダーものようになる。

4OSから返ってきた実行結果をウェブサーバ
ーが受け取る。

多い。実際にSSIが使えるかどうかを自分が契約しているプロバイダーに確認しておこう。

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

INTERNET magazine 1998/3

213

Tune Up 1

掲示板を作ろう

3.0

4.0

3.0

4.0

自分のホームページで掲示板システムを作ってみるのはどうだろうか。仲間同士のコミュニケーシ
ョンに、またさまざまな人と知り合うために、掲示板は大活躍するだろう。今回紹介する掲示板システムはたった3つのファイルを
自分のウェブサイトに置くだけでできてしまうすぐれものだ。難し
い知識も必要としないのでだれにでもできる。簡単に作れるといっても十分な機能を持った立派なシステムだ。これを設置すればアクセスが一気に増えること間違いなしだ。

+CD-ROM

CD-ROM収録先：
ウィンドウズ【A】HTML→Win→Tune1
マッキントッシュ【A】HTML→Mac→Tune1d1実行環境を調べる
2ファイルを編集する
3ファイルをウェブサイトに送る
4ファイルのパーミッションを設定する
5掲示板システムを実行してみる
6エラーへの対応

2ファイルを編集する

1実行環境を調べる
この企画で紹介するCGIスクリプトはウェブサ「jcode.pl」はいっさい編集せずにこのまま使う

ーバーとしてU N I X 上 で動 くN C S A - H T T P d とが、「minibbs.cgi」は環境に合わせて編集する必Apacheを前提にしている。これ以外のウェブサ

要がある。

ーバーを使っているプロバイダーでは動作を保証

まず最初に1行目のPerlの絶対パスをプロバイ
ダーから指定されたものに変える。222ページにあできない。
Tune1フォルダーを開くと3つのファイルをが入る表を参考にしてほしい。この文は必ずファイルっている。
「jcode.pl」は日本語コード変換のプの1行目になければならないので1行目に改行文字

ログラムで、「minibbs.cgi」は掲示板システム本などを入れないように注意しよう。また頭に「!#」体のCGIスクリプトだ。
「minibbs.dat」は掲示板を付けるのも忘れないようにする。

システムのデータが保存されるファイルである。
このシステムはCGIスクリプトが実行できるディレ
クトリーであればどこにでも置ける。

Perlの置き場所を変える

次に「必ずあなたの環境に合わせて書き換える
項目」の部分を変える。
「簡易BBS」を自分の掲示板システム名に変え、「$reload=」以下のURL をminibbs.cgi を置く
URLに変える。また「$modoru=」以下のURL
を掲示板を退出した際に表示させるページのURLに変える。いずれの値もシングルクォーテーション（'）で囲むのを忘れないようにしよう。

214 INTERNET magazine 1998/3

minibbs.cgiを置く場所に変更する。

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

ファイルを
3ウェブサイトに送るウィンドウズの場合

ファイルの編 集 が終 わったら「 j c o d e . p l 」、
「minibbs.cgi」、「minibbs.dat」を契約しているプロバイダーのサーバーにある自分のディレクトリ
ーの下の掲示文システムを置くディレクトリーに送る。プロバイダーでCGIを置く場所を限定してマッキントッシュの場合

WS̲FTPを使ってファイルを送ろう。
もし転送先に新しいディレクトリーを作成する必要があるならば「MkDir」ボタンを押し、「Input」
ウィンドウに新しいディレクトリー名を入力してOKボタンを押せばいい。このときディレクトリー
名は絶対に日本語を使ってはいけない。

Fetchを使って転送先に新しいディレ
クトリーを作成するには、メニューバーから「ディレクトリ」を選び「新規ディレクトリの作成…」を選ぶ。ウィンドウが現れるので新しいディレク
トリーの名前を入力してOKボタンを押す。このときディレクトリー名に絶対に日本語を使っていはいけいない。

いる場合は、そのディレクトリーの下に置こう。
このとき3つのファイルは同じディレクトリーに置く必要がある。そこで「minibbs」というディレ
クトリーを作って、その中にこの3つのファイルをd

置くことにする。
ファイルの転送方法は211、212ページで説明した通りだ。そこでここではFTPソフトを使ったディレクトリーの作成方法を説明しよう。

ファイルのパーミッション
4を設定するファイルのパーミッションはそれぞれ次のようにウィンドウズの場合

マッキントッシュの場合

WS̲FTPを使ったファイルのパーミッションを設定。

Fetchを使ったファイルのパーミッシ
ョンを設定。

設定する。
表中の「r」は読み取り可能、「w」は書き込み
可能、「x」は実行可能を表している。パーミッシ
ョンの設定は、表中の値が「○」ならチェックを付け、「×」ならチェックをはずす。

jcode.plminichat.cgi
minichat.dat

Owner
Group
Other
r w x r w x r w x○ ○ ○ ○ × ○ ○ × ○○ ○ ○ ○ × ○ ○ × ○○ ○ × ○ ○ × ○ ○ ×

右 図 でパーミッションの設 定 の仕 方 を「minibbs.cgi」を例にとって説明する。
詳しい設定方法は211、212ページに掲載してあるので参照してほしい。

6エラーの対応

掲示板システムを5実行してみる

次のようなエラーメッセージがWWWブラウザ

これで掲示板システムの設置は完了だ。実際にーに表示されたら対応策を試してほしい。それで動くかどうか、WWWブラウザーでアクセスしてもうまくいかなければ、プロバイダーのサポートに確認してみよう。呼び出しのURLはファイルの編

協力してもらおう。

集で$reloadに設定したURLだ。ホームページな
エラーメッセージ：Not Found

エラーメッセージ：ServerError

最初にアクセスするとマスターキーという管理対応策：$reloadで記述したURLが間違ってい

対応策：そのほかのエラー。パーミッションの設

者用の設定画面になる。マスターキーはすべてのる。もしくは、minibbs.cgiファイルを置いた場

定やファイルの置き場所を確認したうえでプロバ

記事の削除ができるパスワードなので、忘れない

所が間違っている。

イダーのサポートに相談する（原因究明はあるどからリンクを設定する場合もこのURLを使おう。

程度の知識が必要）。

ように書きとめておこう。
データは「minibbs.dat」に書き込まれているので、バックアップをとるにはこのファイルを保存

エラーメッセージ：Forbidden
対応策：パーミッションの設定が間違っている。

しておこう。

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

INTERNET magazine 1998/3

215

Tune Up 2

チャットルームを作ろう

3.0

4.0

3.0

4.0

チャットはオンラインでのコミュニケーションを広げる楽しい仕掛の1つだ。ついつい深みにはまってしまい、何時間も会話を楽しんでしまう。そんな場を自分が提供してみるのもたまにはいいだろう。そこで簡単に構築できるチャットルームの作 り方 を紹 介 しよう。このTIPSもたった3つのファイルだけで作れる。機能も十分にチャットが楽しめるものとなっている。もちろん専門的な知識はいっさい必要ない。実際に動き出したら友達に教えてチャットを楽しもう。

+CD-ROM

CD-ROM収録先：
ウィンドウズ【A】HTML→Win→Tune2
マッキントッシュ【A】HTML→Mac→Tune2d1実行環境を調べる
2ファイルを編集する
3ファイルをウェブサイトに送る
4ファイルのパーミッションを設定する
5エラーの対応

2ファイルを編集する

1実行環境を調べる
Tune2 フォルダーを開くと3 つのファイルがあ「jcode.pl」はいっさい編集せずにこのまま使うる。
「jcode.pl」は日本語コード変換のプログラが、「minichat.cgi」は環境に合わせて編集する

ムで、「minichat.cgi」はチャットシステム本体の必要がある。

CGIスクリプトだ。
「minichat.dat」は会話の内まず最初に1行目のPerlの絶対パスをプロバイ

容が保存されるファイルである。会話の内容がた

ダーから指定されたものに変える。222ページにあまってくると、このファイルサイズが大きくなるのる表を参考にしてほしい。この文は必ずファイル

で、CD-ROMの「minichat.dat」と定期的に入の1行目になければならないので1行目に改行文字

れ替えようなど入れないように注意しよう。また頭に「#!」

このシステムはCGIスクリプトが実行できるディレクトリーであればどこでも置ける。

を付けるのも忘れないようにする。
次に「初期設定」の部分を自分の環境に合わせて変える。
「$modoru=」以下のURLをチャットルームからのジャンプ先（たとえば自分のホームページ）のURLに変更しよう。また「解説へ」の部分を先ほど指定したジャンプ先の名前に変えておこう。
いずれの値もシングルクォーテーション（'）で囲
むのを忘れないようにする。

216 INTERNET magazine 1998/3

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

ウィンドウズの場合

ファイルを
3ウェブサイトに送る
ファイルの編 集 が終 わったら「 j c o d e . p l 」、

マッキントッシュの場合

WS̲FTPを使ってファイルを送ろう。
もし転送先に新しいディレクトリーを作成する必要があるならば「MkDir」ボタンを押し、「Input」
ウィンドウに新しいディレクトリー名を入力してOKボタンを押せばいい。このときディレクトリー
名は絶対に日本語を使ってはいけない。

Fetchを使って転送先に新しいディレ
クトリーを作成するには、メニューバーから「ディレクトリ」を選び「新規ディレクトリの作成…」を選ぶ。ウィンドウが現れるので新しいディレク
トリーの名前を入力してOKボタンを押す。このときディレクトリー名に絶対に日本語を使っていはいけいない。

「minichat.cgi」、「minichat.dat」を契約しているプロバイダーのサーバーにある自分のディレクト
リーの下のチャットシステムを置くディレクトリーに送る。このとき3つのファイルは同じディレクトdリーに置く必要がある。そこで「minichat」というディレクトリーを作って、そのディレクトリーに
3つのファイルを置くことにする。
ファイルの転送方法は211、212ページで説明した通りだ。そこでここではFTPソフトを使ったディレクトリーの作成方法を説明しよう。

ファイルのパーミッション
4を設定するファイルのパーミッションはそれぞれ次のようにウィンドウズの場合

マッキントッシュの場合

WS̲FTPを使ったファイルのパーミッションを設定。

Fetchを使ったファイルのパーミッシ
ョンを設定。

設定する。
表中の「r」は読み取り可能、「w」は書き込み
可能、「x」は実行可能を表している。パーミッシ
ョンの設定は、表中の値が「○」ならチェックを付け、「×」ならチェックをはずす。

jcode.pl
minibbs.cgi
minibbs.dat

Owner
Group
Other
r w x r w x r w x○ ○ ○ ○ × ○ ○ × ○○ ○ ○ ○ × ○ ○ × ○○ ○ × ○ ○ × ○ ○ ×

右 図 ではパーミッションの設 定 の仕 方 を
minichat.cgiを例にとって説明する。
詳しい設定方法は211、212ページに掲載しているので参照してほしい。

もっと高機能なCGIページを作りたい人に5エラーの対応設定および送金方法はレスキュー氏のホームページ（209ページ参照）を見てほしい。

これでチャットシステムの設置は完了だ。実際

SurfBOARDv1.1

WebCHAT11.1に動くかどうか、「minichat.cgi」にWWWブラウ
ザーでアクセスして確認してみよう。ホームペー
ジからリンクする場合、ここで入力したURLを記述すればいい。
以下のようなエラーメッセージがWWWブラウ
ザーに表示されたら対応策を試して欲しい。それでもうまくいかなければ、プロバイダーのサポートに協力してもらおう。
エラーメッセージ：Forbidden
対応策：パーミッションの設定が間違っている。
エラーメッセージ：ServerError+CD-ROM

WIN :【A】HTML→Win→SurfBOADv1.1
MAC:【A】HTML→MAC→SurfBOADv1.1+CD-ROM

WIN :【A】HTML→Win→WebCHAT11.1
MAC:【A】HTML→MAC→WebCHAT11.1

対応策：そのほかのエラー。パーミッションの設定やファイルの置き場所を確認したうえで
プロバイダーのサポートに相談する（原因究明はある程度の知識が必要）。

フレームを使った見やすい画面が特徴の高機能掲
示板システム。自分がどこまで読んだかが分かる
既読位置保存機能付き。レスキュー氏作のシェアウェア。

こちらもフレームを使った見やすい画面が特徴のウェブチャットシステム。利用状況を確認できたり、ロムモードでチャットが楽しめるなど機能が充実している。レスキュー氏作のシェアウェア。

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

INTERNET magazine 1998/3

217

Tune Up 3

3.0

4.0

3.0

4.0

グラフィカルアクセスカウンターを取り付けよう
掲示板やチャットルームを自分のホームページに開設したら、ア
クセス数が変わったかどうか気になってくるだろう。そこでアクセ
スカウンターの設置に挑戦してみよう。紹介するのは単なるアクセ
スカウンターではなく数字に画像を使ったグラフィカルなものだ。
SSIという処理を使うのでちょっと難しく感じるかもしれないが恐れることはない。SSIは一部のプ
ロバイダーでは使用が禁止されているか、もしくは制限があるので、自分の契約するプロバイダーの指示に従おう。

+CD-ROM

CD-ROM収録先：
ウィンドウズ【A】HTML→Win→Tune3
マッキントッシュ【A】HTML→Mac→Tune3d1「.htaccess」ファイルを作成する
2SSIが使えるかどうか確認する
3ファイルを置く場所を決める
4ファイルを編集する
5ファイルをウェブサイトに送る
6ファイルのパーミッションを設定する
7実行してみる

ウィンドウズでは自分のコンピュータのハード

1「.htaccess」ファイルを作成する

SSIはHTMLに埋め込まれた処理命令をサーバ
ーで実行し、結果を最初のHTMLに埋め込みなおして表示する仕組みである。
SSIを利用するためにNCSA-HTTPdやApache
系のウェブサーバーでは「.htaccess」という設定ファイルが必要となる場合がある。222ページ

ディスクに「.htaccess」という名前のファイルは作成できないので、「htaccess」というファイ
ル名で保存して契約しているプロバイダーにある
自 分 のディレクトリーに送 ったあと、 名 前 を「.htaccess」に変更する必要がある。変更方法
はWS̲FTPを使ってファイルを送ったあと、ファイルの上でマウスをクリックし、出てきたメニューから「Rename files」を選べばよい。

2SSIが使えるかどうかを確認する
SSIが使えるかどうかを確認するには、実際にSSIを使って簡単なコマンドをHTMLに入れてみる。次の一文をHTMLファイルに書いてウェブサ
イトに置く。
現在 <!--#exec cmd="date"--> です。<p>の表を参考にするかプロバイダーに確認しよう。
日時が表示されていればSSIが使える。表示さAddType text/x-server-parsed-html .html

れていない場合はWWWブラウザーの「ソースのAddType text/x-server-parsed-html .htm

表示」を使ってソースを覗いてみよう。

上記のような2行を書いたテキストファイルを作

SSIが機能していないことが分かる。

<!--#exec cmd="date"--> という記述があれば成する。この意味は「.html」、「.htm」という拡

このSSIはセキュリティーホールになるので、プ

張子の付いたHTMLファイル内でSSIを使えるよ

ロバイダーによっては全面的に利用を禁止していうにするということだ。プロバイダーによってはる場合がある。また代替方法が用意されていれば「.html」の代わりに「.shtml」という拡張子を定

それに従おう。

義するように指定するところもあるようだ。

218 INTERNET magazine 1998/3

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

3ファイルを置く場所を決める

ホームページディレクトリー

Tune3フォルダーを開くと次のファイルとフォ
ルダーを確認できる。

index.html（カウンターを表示させるファイル）
Count
Count.pl
Count.txt
さらに「count」フォルダーを開くと2つのファ

imagesイルを確認できる。
「count.pl」はアクセスカウンターの処理命令「index.html」はSSIのコマンドが埋め込まれてが書かれたファイルである。
「count.txt」はアクいるHTMLファイルである。
「count」フォルダーはセス数を記録するためのファイルだ。
CGIとは違ってSSIはウェブサイトのどのディレ

SSIで実行されるSSIアプリケーションを記述したファイルが入っている。
「images」フォルダーはア

0.gif

9.gif

クトリーに置いてもかまわない。
今回は右図のように置くことにする。

クセスカウンターで表示される0から9までの数字がデザインされたGIFファイルが格納されている。

4ファイルを編集する

このほかの設定は、ファイルを置く場所が上記と同じ場合以外は変更する必要はない。不用意に5ファイルをウェブサイトに送る

count.plを環境に合わせて編集する必要がある。

プログラムを変更するとサーバーの機能を止めて「count」フォルダーと「images」
フォルダーを自まず最初に1行目のPerlのありかをプロバイダー

しまう恐れがあるので注意しよう。

分のウェブサイトに送る。
「index.html」は参考に問い合わせた絶対パスに変える。この文は必ずcount.txtはアクセス数を記録するファイルだ。

のファイルなので、タグ A を書いたファイルを作

ファイルの1行目になければならないので1行目に最初にカウントを開始する数字を半角数字で記録成したら、これを転送しよう。また「.htaccess」

改行など入れないように注意しよう。

しておこう。

（ウィンドウズの場合は「htaccess」）をタグ A

6ファイルのパーミッションを設定する
ファイルのパーミッションはそれぞれ次のように設定する。

添付のindex.htmlはあくまでも参考のファイルを書いたHTMLファイルと同じディレクトリーにである。自分のサイトのトップページにアクセス送る。ウィンドウズの場合は送ったあとファイルカウンターを付けるならば、次の一文をトップペ

名を「htaccess」から「.htaccess」に変更してージのHTMLファイルの中に付け加えよう。

おく必要がある。WS̲FTPを使ってのファイル名

Aの変更方法は、1 で述べているので参考にして<!--#exec cmd="./count/count.pl"-->ウィンドウズの場合
WS̲FTPを使ってファイルのパーミッ
ションを設定する。

ほしい。

7実行してみる
これで完了だ。
「index.html」もしくは自分でアクセスカウンターを取り付けたファイルにアクセスして確認してみよう。

表中の「r」は読み取り、「w」は書き込み、「x」

常にBUSYと表示される場合は、「count」ディは実行を表している。

count
count.plcount.txt

レクトリーにすべてのパーミッションを与えている

Owner
Group
Other
r w x r w x r w x○ ○ ○ ○ ○ ○ ○ ○ ○○ ○ ○ ○ × ○ ○ × ○○ ○ × ○ ○ × ○ ○ ×

これ以外のファイルは、ファイルを送ったままのパーミッションでかまわいない。もしうまくいかないようであれば、パーミッションの設定で読みかどうかを確認しよう。数字の画像ファイルは次のURLなどからダウンロードできる。
このカウンターは1つ1つの数字を画像で表示するので、自分の好きな0から9までの数字の画像を

マッキントッシュの場合
Fetchを使ってファ
イルのパーミッションを設定する。

同じファイル名で用意すればもっとバリエーショ
ンを楽しめる。

取 り可 能 にしてほしい。注 意 してほしいのは、「count」がディレクトリーであることだ。ディレクトリーもパーミッションの設定ができる。
パーミッションの設定の仕方をcount.plを例にとって説明する。
jhttp://www.digitmania.holowww.com/

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

INTERNET magazine 1998/3

219

Tune Up 4

3.0

4.0

3.0

4.0

パスワードを使ってアクセスを制限しよう
掲示板やチャットルームをホー
ムページで公開してアクセス数が増加してきた。しかし秘密の会話
は他人には見せたくない。そんな場面もホームページのチューンア
ップを続けると出てくるだろう。
ここで紹介するテクニックはそん
な願いをかなえてくれる、特定のディレクトリーだけにアクセスを制限してくれる方法だ。しかもウェブサーバーの機能を使った本格的なものとなっている。掲示板のようにいろんな人が勝手に書き込
めると第三者に悪用されるケースだってある。さっそく自分のホームページに秘密の扉を作ろう。

+CD-ROM

CD-ROM収録先：
ウィンドウズ【A】HTML→Win→Tune4
マッキントッシュ【A】HTML→Mac→Tune4d1プロバイダーの環境を確認する
2ファイルを置く場所を決める
3ファイルを編集する
4アクセス制限を設定する
5ファイルをウェブサイトに送る
6ファイルのパーミッションを設定する
7実行してみる

プロバイダーの環境を1確認する

ファイルを置く場所を
2決める

ホームページディレクトリー

この機能を取り付けるには、サーバー上のディファイルを置く位置関係は、CGIスクリプトをレクトリーの絶対パスを知る必要がある。210ペ

どのディレクトリーに置いてもよい場合と、指定ージで詳しく説明したように、絶対パスとはサーされたディレクトリーに置く場合とで異なる。そバー上でファイルやディレクトリーの絶対的な位

こで2通りとも紹介しておく。

「.cgi」ファイル

置を示すものだ。FTPで表示されるディレクトリA CGIスクリプトをどのディレクトリーに置いてもよい場合「.pwd」ファイル

ーの位置は必ずしも絶対パスではないので、プロバイダーに確認しよう。
セキュリティー上の問題から絶対パスをユーザ

右図を見てほしい。ここでアクセスを制限する

ーに教えていないプロバイダーも少なくないので、ディレクトリーは「member」である。このディ必ず確認してから取り掛かって欲しい。

レクトリーに「.htaccess」というファイルを置

またプロバイダーによっては絶対パスを使わなく。このファイルには、どのパスワードファイル

い方法を提供しているところもある。併せて確認を読んでアクセス制御を行うかなどが記述されてしてみよう。

いる。
「htpwd」はパスワードやパスワード管理のCGIスクリプトを置くディレクトリーだ。

220 INTERNET magazine 1998/3

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

htpwd

index.html
member（アクセスにパスワードをかけるディレクトリー）.htaccessホームページディレクトリー
cgi-bin

B 次にCGIスクリプトファイルを置くディレクトリーが決まっている場合

CGIスクリプトを実行できるフォルダーが左図と異なる場合は、プロバイダーのサーバーの環境「.cgi」ファイル

右図を見てほしい。CGIスクリプトを実行できに合わせて変更して欲しい。基本的には、「.cgi」と「.pwd」が拡張子のファイルをCGIスクリプトるフォルダーを自分のホームページディレクトリー「.pwd」ファイルの下の「cgi-bin」というディレクトリーと仮定する。

というファイルを置きさえすれば、多くの場合はindex.html

リーに「.htaccess」というファイルを置く。
パスワード管理システムは先ほど違い、拡張子

member（アクセスにパスワード

が「.cgi」であるファイルと「.pwd」のファイルををかけるディレクトリー）「cgi-bin」の下に置いている。さらに「htpwd」

アクセスを制限するディレクトリーの名前や場
所は、制限するディレクトリー内に「.htaccess」

htpwd

先ほどと同様に「member」がアクセスを制限するディレクトリーになっている。このディレクトを実行できるフォルダーに持っていけばいい。

任意でかまわない。ただし、プロバイダーによっては環境が違うため記事中の設定とは異なる場合がある。うまく行かない場合はプロバイダーのサポートなどに相談してみるのも1つの手だろう。

.htaccessの中に「index.html」がある。このためパスワー
ド管理システムがバラバラに存在している。

cgi-binフォルダーのみCGIスクリプトが稼動しない場合を想定

3ファイルを編集する

4アクセス制限を設定する

2 の A の場合は特にファイルを編集する必要はない。 2の A 場合は、「index.html」中の拡張子が「.cgi」というファイ

次にアクセス制限をするための設定ファイルを編集する。

2 で示した場所に「.htaccess」というファイルを置く。このファイルをディレクトリ

ルへのアクセスURLを次のように変える。これは「index.html」

ーに置くことによってアクセス制限ができる。

から各「.cgi」ファイルへのパスを変更したものだ。2 の B と「パスワードファイルまでの絶対パス」は、拡張子が「.pwd」のファイルが置かれている

違うフォルダーに置いた場合は、「.cgi」ファイルへのパスを自分ディレクトリーの絶 対 パスが置いた場所の相対パスに変えて置こう。

である。プロバイダーで調べた絶対パス情報と「.pwd｣<form method=post action="../cgi-bin/regist.cgi">

を置 く場 所 とを確 認 して、<form method=post action="../cgi-bin/change.cgi">

パスワードファイルまでの絶<form method=post action="../cgi-bin/remove.cgi">

対パスを入力してほしい。

<form method=post action="../cgi-bin/remove2.cgi">「パスワード入力画面に表<h3><a href="../cgi-bin/master.cgi">■</a>マスターキー

示される文字列」の部分は、自分で入れたい文字列を入力する。日本語を使うとWWWブラウザーによっては正しく表

設定/変更</h3>

示できないことがあるので注意しよう。そのほかの設定については変更する必要はない。

5ファイルをウェブサイトに送るのパーミッションでかまわいない。もしうまくいか2 で決めた場所のとおりにファイルを送る。こないようであれば、パーミッションの設定ですべれ以外にほかのディレクトリーへのアクセスを制限したい場合は、「.htaccess」ファイルを制限す

これ以外のファイルは、ファイルを送ったままて読み取り可能にしてほしい。
パーミッションの設定の仕方を拡張子が「.cgi」のものを例 にとって説 明 する（ウィンドウズでるディレクトリーに置けばいい。

7実行してみる
セットアップが終わったら、「htpwd」ディレク
トリーの下の「index.html」にアクセスして欲しい。各種の登録をするように促されるので、画面に従って登録する。

WS̲FTPを使った場合）。

登録がうまくいかない場合は、拡張子が「.cgi」
や「.pwd」のファイルのパーミッションを確認する。

ファイルのパーミッション
6を設定する

登録が終わったらアクセス制限をかけたディレ
クトリーにWWWブラウザーを使ってアクセスしてファイルのパーミッションは以下のとおりであみよう。ユーザー認証のウィンドウが現れるので、る。表中の「r」は読み取り、「w」は書き込み、登録したユーザー名とパスワードを入力すればア「x」は実行を表している。

クセスできるはずだ。
「user.pwd」というファイルに登録したユーザ

Owner
Group
Other
r w x r w x r w x
拡張子が「.cgi」のファイル ○ ○ ○ ○ × ○ ○ × ○拡張子が「.pwd」のファイル ○ ○ × ○ ○ × ○ ○ ×のI D と暗 号 化 したパスワードが書 かれている。
「master.pwd」に各種設定に必用なマスターキー（パスワード）が暗号化されて記録されている。
バックアップを取る場合、この2つのファイルを安全な場所に保存しておこう。

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

INTERNET magazine 1998/3

221

CGIが使えるおもなプロバイダー一覧「Tune Up 1」から「Tune Up 4」で紹介したプロバイダーに関する情報を紹介する。プロバイダーを選んだ
基準は、ユーザーの作成したCGIスクリプトの使用を許可し、なおかつ5以上のアクセスポイントを持っていることである。「CGIスクリプトを設置するディレクトリー」はユーザーがCGIを置く場所であり、「Perlのパス」
はPerlの絶対パスを表している。「.htaccess」が「○」ならば「.htaccess」ファイルをユーザーが用意する必要があり、「×」ならば用意する必要はない。SSIは「○」の場合は利用可能で、「△」は制限付きで利用可能、「×」は利用不可を意味している。プロバイダーの問い合わせ先は421ページ以降を参照してほしい。
プロバイダー名

サーバーの種類

CGIスクリプトを設置するディレクトリー※

perlのパス※※

AIRインターネット

Apache

任意のディレクトリー/usr/local/bin/perl.htaccess×

SSI○

AsakaNet

Apache

任意のディレクトリー/usr/bin/perl

×○ASK-netApache

任意のディレクトリー/usr/local/bin/perl

×○

BIWALOBE

Apachepublic̲html//usr/local/bin/perl

×○

InfoAomori

Apache

要問い合わせ/usr/local/bin/perl

××

InfoSakyu

Apache

任意のディレクトリー/usr/local/bin/perl−

×ipc東海インターネットサービス

Apache

任意のディレクトリー/usr/local/bin/perl

×

○

KCOM

Apachehome/public̲html/usr/local/bin/perl

×△MediaWeb

Apachepublic̲html//opt/bin/perl

×○

MiteneApache

任意のディレクトリー/usr/bin/perl

××

Momoたろうインターネットクラブ

Apachepublic̲html/cgi-bin//usr/local/bin/perl

×

△

MTCI

Apachecgi-bin//usr/local/bin/perl

×○○

NETAGE

Apache

任意のディレクトリー/usr/local/bin/perl

×Panasonic Hi-HO

Apachecgi-bin//usr/local/bin/perl

×△

Raidway

Apache

任意のディレクトリー/usr/local/bin/perl

×○○

SaiNetApache

任意のディレクトリー/usr/local/bin/perl

×

SANYNET

Apache/www/cgi-bin//usr/local/bin/perl−△

So-netApache

任意のディレクトリー/usr/local/bin/perl○○

T-C NET

Apache

任意のディレクトリー/usr/local/bin/perl

×○

tcp-ipApachepublic̲html/cgi-bin//usr/local/bin/perl−△

ZZZインターネットクラブ

Apache

任意のディレクトリー/usr/local/bin/perl

××

サイバーオズネット

Apache

任意のディレクトリー/usr/bin/perl

×○

シナプスインターネット

Apache

任意のディレクトリー/www/bin/perl

×△

フェニックスクラブ

Apachecgi-bin//usr/local/bin/perl

××

丸紅famille-IP

Apachepublic̲html/cgi-bin//usr/local/bin/perl

×○

宮崎インターネット

Apachepublic̲html/cgi-bin//usr/local/bin/perl

××

四国インターネット

Apache

要問い合わせ/usr/bin/perl

××

晴れの国ネット

Apachepublic̲html/cgi-bin//usr/local/bin/perl

×△

群馬インターネット

Apache、NCSA、Netscape

要問い合わせ要問い合わせ−○3WEB

Apache、Netscapepublic̲html//usr/local/bin/perl

×△

マジカルサイト

Apache、Netscapecgi-bin/

要問い合わせ×△

MAC Internet

NCSA

任意のディレクトリー/usr/local/bin/perl

××

U-netSURF

NCSA

cgi-bin//usr/local/bin/perl

××

ネットラピュタ

NCSA

要問い合わせ/usr/local/bin/perl

×

△

リムネット

NCSA

public̲html//usr/local/bin/perl○○

三重インターネット

NCSA

任意のディレクトリー/usr/bin/perl○

×

東国インターネット

NCSA

要問い合わせ要問い合わせ

×

×

まほろば

NCSA

任意のディレクトリー/usr/local/bin/perl

×

○

CERN

cgi̲bin//usr/local/bin/perl

×○Netscape

任意のディレクトリー/user/mesh/bin/perl

××

CYBORG

Netscape

任意のディレクトリー/usr/local/bin/perl○○

JANISネット

Netscape

要問い合わせ/usr/local/bin/perl−

×

VC-netNetscape

public̲html/cgi-bin//usr/bin/perl

×○

アーバンインターネット

Netscape

要問い合わせ/usr/local/bin/perl

×△

BIGLOBE

インターネット中部

Netscape

任意のディレクトリー/usr/local/bin/perl

×

×

ジンネット

Netscape

cgi-bin/

要問い合わせ××

虹ネット

Netscape

要問い合わせ/usr/local/bin/perl

×△

KCN-NetCERN/var/ns-home/cgi-bin/ユーザー名//home/local/usr/inet/bin/perl

××

コムインターネット

CERN

public̲html/cgi-bin//usr/bin/perl

××

セコムサンネット

CERN

要問い合わせ要問い合わせ

−

×

SKネット

MSIIS

cgi-bin/

要問い合わせ×△

このはなインターネット

MSIIS

任意のディレクトリー

要問い合わせ−×サン・インターネット

MSIIS

任意のディレクトリー

要問い合わせ×△

佐賀新聞インターネット

MSIIS/cgi-bin/ユーザー名/

要問い合わせ×○

dixネット非公開

非公開

要問い合わせ−○interQ非公開

cgi-bin/

要問い合わせ

×

×

netQ

非公開

/scripts/ユーザー名/

要問い合わせ

×

○

インタック

非公開

任意のディレクトリー/usr/local/bin/perl

××※絶対パス（/で始まるパス）以外はユーザーのディレクトリーの下を表している

222 INTERNET magazine 1998/3※※「不要」の場合パスを指定する必要はない

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

2

Part

Tune Up 5

ダイナミックHTMLでスーパーチューンアップ

ダイナミックHTMLでジグソーパズルを作る

4.0

これまで紹介してきた会議室やチャットと並んで読者が楽しめるインタラク
ティブなページといえば、やはり「ゲーム」だろう。Javaアプレットやショッ
クウェーブを使ったゲームページを作りたいと思っている人は多いはずだ。でも、Javaのプログラミングやディレクターの使い方は分からない。そんなページオーナーのために、画像ファイルを用意するだけでできてしまう「ジグソーパズル」の作成方法を紹介しよう。デジタルカ
メラで撮影した写真や自作のグラフィックスをただ見せるだけでなく、パズルとして発表すれば大きな反響が得られるはずだ。

+CD-ROM

CD-ROM収録先：
ウィンドウズ【A】HTML→Win→Tune5→
PUZZLE.htm
マッキントッシュ【A】HTML→Mac→Tune5→PUZZLE.htm

d<IMG ID="Grid" SRC="jig1.gif" STYLE="position:absolute; top=100; left=400; width=320; height=240;"><IMG ID="Com" SRC="forest01.gif" STYLE="position:absolute; top=100; left=400; width=320;
height=240; visibility:hidden"><IMG ID="P1" SRC="frst92.gif" STYLE="position:absolute; top=100; left=20; width=80; height=80"><IMG ID="P2" SRC="frst61.gif" STYLE="position:absolute; top=180; left=20; width=80; height=80"><IMG ID="P3" SRC="frst104.gif" STYLE="position:absolute; top=260; left=20; width=80; height=80"><IMG ID="P12" SRC="frst23.gif" STYLE="position:absolute; top=260; left=260; width=80; height=80">

まず、これから作るジグソーパズルの特徴を紹介しておこう。縦横比3対4のサイズの絵を縦3個、にそれぞれ回転させたものを作っておく。12×4様にGIF形式で保存して「jig1.gif」という名前をで合計48枚のピースができるわけだ。

付ける。

横4個の正方形に切ったピースを用意する。パズ

重要なのはファイル名だ。ピースに使う画像フ

ここまでできたら、すべての画像とCD-ROMにルに挑戦する読者は、この12個のピースをマウス

ァイルの名前は必ず「frst ＋ 数字」の形式で付け収録のPUZZLE.HTMを同じフォルダーに入れてでドラッグアンドドロップしながら枠の中に並べる。数字の部分は、左上のマスが「frst11.gif」、

PUZZLE.HTMを表示させてみよう。左にバラバていく。おもしろいのは、ダブルクリックでピース

これを90度ずつ回転させたものを「frst12.gif」、

ラに配置されたピース画像が、右に枠線がそれぞ

を回転させられることだ。

「frst13.gif」、「frst14.gif」とする。1つ下のマスれ表示されているはずだ。

まず、もとになる完成画像を用意しよう。デジは「frst21.gif」、「frst22.gif」、「frst23.gif」、

作成した画像によっては、並び方を変えないとタルカメラで撮った写真でも自分で書いた絵でも「frst24.gif」となる。以降は、下まで行ったら右すぐに答えが分かってしまうということがありえかまわない。ポイントは、画像のサイズを240ピクに 進 み 、 右 下 の マ ス は 「 f r s t 1 2 1 . g i f 」、る。そんなときは、上図のタグの「frst〜.gif」のセル× 3 4 0 ピクセルにすることだ。 これに「frst122.gif」、「frst123.gif」、「frst124.gif」と数字を適当に変えてみよう。48枚のピースの中か「forest01.gif」という名前を付けてGIF形式で保なる。

らどれを選 んでもかまわない（f r s t 1 1 . g i f からピースが完成したら、画面右に配置されている存する。
次に、この画像を画像編集ソフトなどで縦3個、枠線を作ろう。これも画像ファイルでできている。

frst124.gifまで）。ここでファイル名を指定した画像が最初に表示される12枚となる。

横4 個の正方形に切る。計算すれば分かるが、1サイズは、最初に作成した完成画像と同じ240×

パズル作成のポイントはこれだけだ。あとは、

つのピースが80ピクセル四方の正方形になるはず

340ピクセル。この中を縦横80ピクセルの枠が12

好きな画像を用意して自分だけのジグソーパズルだ。さらに、このピースを90度、180度、270度個できるように線で区切ればいい。これまでと同を作ってほしい。

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

INTERNET magazine 1998/3

223

3

Part

Tune Up 6

AcitiveXでスーパーチューンアップ

AcitiveXコントロールでチャットルームを作る

3.0

4.0

チャットルームを作りたいが契約しているプロバイダーではCGIが使えないという人も多いはずだ。そこで、CGIを使わずにActiveXコントロールを使ったチャットルームの作成に挑戦してみよう。
使用できるWWWブラウザーはIE3.0以
上に限られてしまうが、このチャットル
ームはマイクロソフト社のドメインにあるIRCサーバーを利用しているためIRC
クライアントさえあればだれでも参加できるのだ。さらに、いくつかのオプションを書き換えれば自分だけのチャットル
ームがデザインできる。これさえあれば、多くの仲間が自分のホームページに集まってくれること間違いなしだ。

+CD-ROM

d

タグ1<OBJECT
STANDBY="Microsoft Chat Control
をダウンロード中..."CODETYPE="application/x-oleobject"
CLASSID="clsid:D6526FE0-E651-11CF-99CB00C04FD64497"
CODEBASE="MSChatOCX.Cab#Version=4,71,312,0"
WIDTH="500"
HEIGHT="300"
ID="Chat"
BORDER="0">

今回、使用するのは「Microsoft Chat Control
1.1」というActiveXコントロールだ。IE4.0に付

CD-ROM収録先：
ウィンドウズ【A】HTML→Win→Tune6→
CHAT.htm
マッキントッシュ【A】HTML→Mac→Tune6→CHAT.htm<PARAM NAME="UIOption" VALUE="4095"><PARAM NAME="Appearance" VALUE="3"><PARAM NAME="BorderStyle" VALUE="0"><PARAM NAME="BackColor" VALUE="255"><PARAM NAME="MaxMessageLength"
VALUE="1000"><PARAM NAME="MaxHistoryLength" VALUE="32767"><PARAM NAME="MaxMembers" VALUE="32"></OBJECT>ール）が組み込まれていない場合はこのメッセー
ジが表示される。

・「Appearance」：チャットウィンドウの枠のスタイルを指定できる。
「VALUE=」の値によって以下のように変化する。

属 の 「 Microsoft Chat」 で 使 わ れ る 「 MIC」

・「CODETYPE」、「CLASSID」：もっとも重（Microsoft Internet Chat）というプロトコルとイ要な情報。これは絶対に書き換えてはいけない。

ンターネットのチャットプロトコルとして長い歴史

・「CODEBASE」：ActiveX コントロールが「1」→ 内側の枠のみ3D表示にするを持つ「IRC」（Internet RelayChat）を使ってユーザーのコンピュータに組み込まれていない場「2」→ 外側の枠のみ3D表示にする

通信をする。CGIを使ったチャットと違って書き合、この情報をもとにオートインストールされる。

「3」→ 外側と内側の枠両方を3D表示にする込みがあるたびに画面をリロードしないため、サ

これも書き換えてはいけない。

ーバーに負荷をかけないというメリットがある。
それでは、さっそく内容を見ていこう。CD-ROMに収録の「chat.htm」をメモ帳などで開いてみて

・「WIDTH」、「HEIGHT」：チャットウィン
ドウの大きさを決める。
・「ID」： VBScriptでコントロールを利用す・「MaxMessageLength」：メッセージの最大の長さを指定する。
・「MaxMembers」：チャットルームに入れる人数を指定する。

るための名前。

ほしい。

このほかにもいろいろな設定ができるので、興

まず、<OBJECT>タグを使ってActiveXコント<PARAM>は、ActiveXコントロールにオプシロールを配置する。これが上図のタグ①だ。

ョンを設定するためのタグ。ここでは、カスタマ
・「STANDBY」：ユーザーのコンピュータにイズしやすいものだけを解説する。

Microsoft Chat Control 1.1（ActiveXコントロ

224 INTERNET magazine 1998/3「0」→すべて平たく表示する

味のある人は次のURLを参照してほしい。

jhttp://www.microsoft.com/msdn/sdk/inetsdk/help/complib/chat/msc
hat1_1/mschat1_1.htm

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

d<FORM NAME="WEBChat">

タグ2

ニックネーム(英数字のみ):<INPUT TYPE="text" SIZE="24" NAME="Alias"><INPUT TYPE="hidden" NAME="Room" VALUE="//comicsrv.microsoft.com/#HTMLTIPS"><INPUT TYPE="button" NAME=FluxBtn VALUE="チャットに参加"
onClick="Flux" LANGUAGE="VBScript"><INPUT TYPE="button" NAME=CLSBtn VALUE="画面のクリア"
onClick="ClsWin" LANGUAGE="VBScript"></FORM><INPUT

TYPE="button"

NAME=FluxBtn

さて、次はチャットルームの下部に配置されたの部分だ。サーバーとチャットルームの名前を「

ボタンとテキストボックスの部分だ。
「chat.htm」//comicsrv.microsoft.com/#チャットルーム名のソースを見れば分かるが、実際にはこの前にフ（IRCクライアントではチャンネル名）」の形式でォームとActiveXコントロールを関連付けるための

指 定 する。I R C サーバーのドメイン名

VBScriptが書かれている。ここはプログラムの知（comicsrv.microsoft.com）は変更しないこと。

識なしには編集が不可能なため、絶対に書き換え

反対に、「#HTMLTIPS」というチャットルーム名ずに使ってほしい。

は必ず自分の好きな名前に変更しておこう。この

ここではボタンの名前を変更できる。
「チャット

記事を読んだ読者の方々がすべて「HTMLTIPS」に参加」、「画面のクリア」の部分を好きな語句にというルーム名を使うと、どのページからチャッ

変えればいい。これで、チャットルームとしての機トに参加しても皆同じルームに入ることになるか能はできあがったことになる。

<FORM>タグの中身を解説しよう。最も重要なのは、<INPUT TYPE="hidden" NAME="Room"
VALUE="//comicsrv.microsoft.com/#HTMLTIVALUE="チャットに参加"
onClick="Flux" LANGUAGE="VBScript"><INPUT

TYPE="button"

NAME=CLSBtn

VALUE="画面のクリア"

らだ。

PS">

d

タグ3

<SCRIPT LANGUAGE="JavaScript"><!-var BrowserType=navigator.userAgent;if (BrowserType.indexOf("MSIE") == 25) { }else{document.write("このチャットは、InternetExplorer3.0以上でしか利用できません。IRCクライアントでcomicsrv.microsoft.comに接続して#HTMLTIPSチャンネルに参加してくだい。")}// --></SCRIPT><NOSCRIPT>
このチャットは、InternetExplorer3.0以上でしか利用できません。IRCクライアントで comicsrv.microsoft.comに接続
して#HTMLTIPSチャンネルに参加してくだい。
</NOSCRIPT>

ここまででチャットルームはすでに完成しているのだが、ActiveXコントロールに対応していない
WWWブラウザーのためにIRCクライアントでの参加を呼びかける仕掛けを作っておく。ここまでやれば完璧だろう。ここで重要なのはタグの部分ではなく説明の内容だ。
IRCクライアントで comicsrv.microsoft.
com に接続して#HTMLTIPSチャンネルに参加してください。
タグ②で指定したサーバー名とルーム名を正確に記述しよう。また、最初の参加者がウェブペー
ジから入室するとIRCクライアントから参加できないことがある。こんなときは、オーナーが最初ナビゲーターでこのページにアクセスすると上図のようにIRCクライアントでの参加を呼びかけるメッセー
ジが表示される。サーバー名とルーム名を正確に記述しておこう。

IRCクライアント「CHOCOA」でチャットに参加しているところ。左ページの画面と同じ会話が行われていることに注目してほしい。これで多くのメンバーが集まること間違いなしだ。

にIRCクライアントでルームに入っておけばいい。

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

INTERNET magazine 1998/3

225

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