■めいきんぐ・おぶ・うぇぶさいと
■インタラクティブなホームページを作る
- インタラクティブなホームページとは?
- CGIとは?
- SSIとは?
- ショックウェイブとは?
- JAVAとは?
- 最初はフリーものを使うに限る
- UNIXの知識が少々必要です
1.インタラクティブなホームページとは?
ホームページを作り出すと誰でもそうですが、普通にテキストや画像だけを配したページだけでは、だんだん物足りなくなります。俗にインタラクティブなコンテンツと呼ばれる掲示板やゲストブック、チャットルームやアクセスカウンターなどが欲しくなります。これはウェブマスターが必ずかかる病気のようなもので、ほとんどのウェブマスターが経験することです。
インタラクティブなホームページとは、訳せば、相互に作用する、相互に行き来するページと言う意味です。普通にテキストや画像だけを配したページは、ページ(ウェブマスター)から、ページを見る人へと、情報が一方通行で流れます。テレビやラジオと同じですね。これに対して、インタラクティブなページとは、見る側からウェブマスター側へも情報の流れがあるページを意味します。それ以外にも、見ている人から別の見ている人へという情報の流れもあったりします。
掲示板・チャットルームやゲストブックに、ページを見てくれている人からの書込があったりするのが、その例です。カウンターも含むの?という意見もあるでしょうが、アクセスした人の、アクセスしようとするアクションが、ページのカウンターを上げるという、ページ側のコンテンツに影響を及ぼしているわけで、広義の意味では含んでも問題ないでしょう。他にも、様々なネットゲームなど、インタラクティブなページの例はいくらでもあります。
ウェブマスターが、掲示板やチャット、カウンターなどを設置したくなる欲求におそわれるのは、自分のページはいったいみんなにどう思われているのか?という疑問が常々わいてくるからでしょう。そのような評価してくれるのは、友人でも、見知らぬ他人でも良いんですが、‘ちゃんと見えてるのだろうか?’‘どのこんてんつがおもしろいのだろうか?’などなど、ページを作ったら、作ったでアクセスしてくる人のレスポンスを知りたくなります。
おけいこ事を始めれば発表会に出たくなり、スポーツを始めれば大会にでたくなるのと本質は同じで、ページを作れば‘自分のページはどうなの?’という、自分のページの評価やレベルがどうなのかが知りたくなります。それは仰々しい評価ではある必要なく、ほんの一言二言の感想で充分なんですけでも。
もちろん掲示板やチャットでは、そのようなこと以外に、他の人とコミュニケーションをはかる、見知らぬ人と友達になるなど、いくつもの目的や効用があります。でもそれだけなのだったら、自分のページに設置する必要はかならずしもないわけで、やはり自分のページに設置するのは、根底には上記のような理由があるからでしょう。
かくいう私も、他の多くのウェブマスターと同じ流れをふみ、コンサの応援ページを作ってしばらくしたのち、これらインタラクティブなコンテンツを自分のページに設置したくなりました。これらのコンテンツがあると、自分のページがクールなページになるような錯覚も当時は持っていたんですけど。
今では、レンタルものの掲示板やチャットルーム、アクセスカウンターなどがあるため、手軽にこれらのコンテンツを、自分のページに組み込むことが出来ます。でも当時は、それほど充実したサービスがなかったので、自分で設置しなくてはなりません。そのため、カウンターとゲストブックは、ネット上の情報を頼りに自前で作り、掲示板ほど複雑なプログラムは自前では無理なので、良いフリーウエアはないものかと、こちらもネット上を探し回りました。何せ初めて作ったプログラムだったので、カウンタープログラムはよくアクセス数が消えてしまい、ゲストブックは日本語の三種の文字コードの違いには対応していませんでした(今では、これらのことは改良されていますが)。
掲示板は、他の人のページに載っている掲示板プログラムを実際に使ってみて、‘これは便利だ’とか‘これはいい’といったものを、選びました。日本語はどうしても文字コードの問題があるため、英語のソフトをそのまま使うわけにいかず、日本人が作ったソフトにならざるをえなかったわけですが、実は当初はそんなことは知らず、何せ初めてのことなので、日本語で質問できる方が便利といった目的で、日本人が制作した掲示板プログラムを探しました。
最初に使用したプログラムは、WEBNEWSというプログラムでした。このプログラム、今ではインタラクティブナページでは、完全に主流のPERLというプログラム言語ではなく、Cと呼ばれる高級プログラム言語で書かれていました。そのため、改造がかなり難しかったです。また、Cと言う言語は、サーバーへの負担が少ないのですが、サーバーで動作させる前にコンパイルというステップをあらかじめ踏まねばならず、改造する際には、このステップが結構めんどくさいものでした。
その後、別の掲示板プログラムに変更するわけですが、その理由というのはこれらの理由ではなく、このWEBNEWSの開発者の人が開発を止めてしまったからです。大学生が制作したソフトだったのですが、卒業と共に、サポートを止めてしまいました。自力で開発して行くだけの力がなかったので、違うソフトを探す必要性にせまられました。
そこで、次に選んだのが、WWW BOARDという掲示板プログラムです。これは外国人の人が作った有名なソフトなのですが、日本語用にローカライズした人がいて、日本語ローカライズ版では、懸案の文字コードにも対応していたので、これに決めました。このプログラムは、その後コンサページ様に改造を続け、今ではエンジン部分(投稿を受け付け、新規ファイルや目次を作成する)にしか残っていません。いろいろ苦労したおかげで、PERLに関してはかなり詳しくなりました。
2.CGIとは?
自力で、インタラクティブナページを目指すなら、このCGIと呼ばれる仕組みを大抵使うことになります。CGIとはCommon Gateway Interfaceの略で、主にブラウザの要求によりWWWサーバー上で実行されるプログラムのことを指します。わかりやすいように‘CGIプログラム’と言うことも多いですね。アクセスした人はがホームページに書込んだり、書込まれたデータを 表示したりするプログラム、入力や状況によってページ全体の表示を変更したり刷るプログラムで利用され、その良い例が「掲示板」や「チャット」などです。CGIは、CやPERLなどのプログラミング言語を用いて書かれたプログラムなのですが、PERLの方が簡単なのでよく使われています。
CGIの働く際の動きは以下の通りです。
(U)ユーザー、(B)ブラウザソフト、(S)WWWサーバー
(U)ホームページにアクセスする
(B)ブラウザがサーバーにアクセス要求を送る
例:コンサ応援ページの『WhatsNew』ページ
http://www.consadeconsa.com/whatsnew/whatsnew.cgiというCGIプログラムの場合
↓
(S)サーバーがアクセス要求を受信する
www.consadeconsa.comというサーバーは、whatsnew/whatsnew.cgiという名のファイルを探す
↓
(S)サーバーがファイルの判断をする
whatsnew.cgiの拡張子を調べ、このファイルをどうするか判断する
この場合は.cgiなので、「このファイルをCGIプログラムと判断、実行した結果をブラウザに返すという動作をすべきと判断する」(ちなみに拡張子がhtmlの場合、ファイルの内容をHTML文と解釈して、その結果をブラウザに返すと判断する)
↓
(S)サーバーがファイルを実行する
サーバーはCGI(whatsnew.cgi)ファイルの内容に従いプログラムを実行する
↓
(S)サーバーからブラウザへ実行結果を送信
大抵は実行結果をHTML文で表示する命令になっている
この場合は、『WhatsNew』ページ内容を最新順に表示
↓
(B)ブラウザがサーバーからのデータを受取る
↓
(B)ブラウザは受け取ったデータを解釈し、表示する
(U)ページが見れる
上記の動きの例は、直接ブラウザから、CGIファイルにアクセスしたときの動きですが、掲示板で記事を投稿するような場合は、普通のHTMLページから、『投稿する』などのボタンを押した際に、CGIプログラムへアクセスするようになっていて、原理は一緒です。
いづれにしても、CGIはプログラムなので、これを自分のページに設置するには、ある程度、プログラム言語に必要な知識が必要になります。また、ホームページを載せているサーバーによっては、CGIの使用を禁止していることもあり、使用する際は、利用が可能かどうか確認する必要があります。
3.SSIとは?
ちょっとしたことを行うだけなら、CGIを使わなくても、このSSIという仕組みを使って出来ることがあります。SSIとはServer Side Includeの略で、HTML文に直接挿入して、他のHTMLファイル、ファイル情報、 現在の時刻などを表示させます。言葉通り、サーバーサイド(側)で実行され、その結果をHTMLに含んで(include)してブラウザに返すため、通常ユーザーはブラウザの‘ソースを見る’などで、HTML文を見てもSSIが含まれているかどうかはわかりません。
SSIには、いくつかの決まった機能が提供されていて、それを使うが簡単ですが、CGIの実行命令文を組み込んで、CGIプログラムを実行させることによって、 ページに変化を与える事ができます。アクセスする毎に変化する画像やセリフ、カウンタプログラムなど、ページの一部の表示が変わるものは SSIを使用していることがよくあります。
SSIの働く際の動きは以下の通りです。
(U)ユーザー、(B)ブラウザソフト、(S)WWWサーバー
(U)ホームページにアクセスする
(B)ブラウザがサーバーにアクセス要求を送る
例:コンサ応援ページの『WhatsNew』ページ
http://www.consadeconsa.com/index.shtmlというファイルの場合(注:このファイルは実在しません)
↓
(S)サーバーがアクセス要求を受信する
www.consadeconsa.comというサーバーは、index.shtmlという名のファイルを探す
↓
(S)サーバーがファイルの判断をする
index.shtmlの拡張子を調べ、このファイルをどうするか判断する
この場合は.shtmlなので、ファイルの内容をSSIを含んだHTML文と解釈して、その結果をブラウザに返すと判断する)
↓
(S)サーバーがファイルを読み、文中のSSIを実行
サーバーはHTML文を上から読んでいきますが、文中にSSIの命令文が入っていれば、それを実行します。
↓
(S)サーバーからブラウザへ実行結果を送信
サーバーはHTML文を実行したSSIの結果を挿入したHTML文をブラウザに送る
↓
(B)ブラウザがサーバーからのデータを受取る
↓
(B)ブラウザは受け取ったデータを解釈し、表示する
(U)ページが見れる
shtmlという拡張子は、SSIを含んだHTMLファイルという意味の拡張子ですが、SSIを含んだ文のみこの拡張子に変更すると、他のページからのリンクなどが煩わしくなるので、私はこの拡張子は使用していません。かわりにサーバーの設定を変えて、htmlの拡張子のファイルにはSSIが入っているという風に解釈するようにさせてます。
CGIと同じで、ホームページを載せているサーバーによっては、SSIの使用を禁止していることもあり、使用する際は、利用が可能かどうか確認する必要があります。具体的なSSIの設定はTIPSの方で。
4.ショックウェイブとは?
Shockwaveとは、マクロメディア社が無料で提供しているプラグイン(ソフト)です。プラグインとは、ブラウザーの機能を拡張するもので、これがインストールすると、インターネットエクスプローラやネットスケープナビゲータで、新たな機能を付加することが出来ます。このShockwaveプラグインを使用することで、今までインターネット上では不可能であった音と動画がインタラクティブに融合したホームページが可能になりました。
Shockwaveは96年にデビューしたのですが、当時インターネット上でホームページを記述する言語とし ては、HTMLがメインでした。しかしHTMLで表現できるのは、テキストとグラフィックの一部だけです。アニメーションGIFなど動く画などはすでにありましたが、これにも限界がありました。HTMLの限界を越えようという手法として、すでに上で説明したCGI があり ます。でもこのプログラムは、おもに文字列を処理するためのもので、美しく、動きのあるページを構成するというものではありません。
こうした中、‘美しく、動きのあるページを’という要求に答えるようにして誕生したのが、Shockwaveでした。同社のDirectorと呼ばれる有名なマルチメディアコンテンツを制作するソフトによって制作されたファイルを、Shockwave形式に変換することによって、Shockwave用のコンテンツを作ります。Directorにより作られるものは、もともとはCD−ROMソフト用などに利用されるもので、非常に美しく、また動きのある画像や、インタラクティブなコンテンツを作ることができました。Shockwaveがデビューしたときのインパクトは、それはそれは非常に高く、‘こりゃすいごいわ’と思ったものです。
ただ、実際には、やはりファイルサイズが大きくなりがちで、ページが開くのにも時間がかかるのが常で、それでなくてはならないという理由でもないと、おいそれと使うというわけにはいきませんでした。しかもDirectorというソフト自体も半端じゃない値段しました。絵が動くだけで、他に何の情報もないページだと、うれしがりなだけで、クールじゃないページと思われたわけです。ただ、このShockwaveプラグインを作ったこの時から、マクロメディア社はインターネットコンテンツ制作のためのソフトに傾注していきます。その後、Flashという、美しく動きがあり、しかも軽いページを作れるとうソフトを発表します。もともとは、FutureSplashという名前の他社製ソフトで、これをマクロメディアが買い取りました。その後、動画だけでなく、リンクの埋め込み、ユーザからの要求へのレスポンスなどの機能を付加しつつ、ヴァージョンアップを重ねます。このFlash用のShockwaveプラグインは、今では、ブラウザソフトに表示順で組み込まれるようになり、実質業界標準になっています。
DirectorのShockwaveを使ったコンテンツも、『コンサ・デ・コンサ』にはありますが、どうしても使用用途が限られてしまいます。ただ、ゲームなどのように、絵を動かし、更にアクセスする人からの要求にリアルタイムに反応するものでは、力を発揮します。
5.JAVAとは?
Shockwaveがデビューした同じ頃、UNIXメーカーのSun Micro Systemsが、Java というプログラミング言語を発表します(本当の名称はHot Java)。Javaで書かれたプログラムをJavaアプレットと言いますが、ユーザーはこのJavaアプレットをウエブサーバーを通して受信します。Javaアプレットはシステム環境に依存せず、プログラムを実行できます。マックでもウインドウズでも、LINUXでもNTでも可能です。ただし、このプログラムを解釈して実行するJavaInterpriter(Javaの動作環境)が必要です。でも、自分のOS上にこのJavaの動作環境を一つ持っていれば、全てのJavaアプレットを実行できます。また、プログラマ側に立てば、各OS別にプログラムを書く必要が無く、一つ作れば、全てのOSで稼働させることが可能になります。
OSの枠組みを越える環境として非常な脚光を浴びました。ウエッブ制作の面から見ると、Javaアプレットは一種の独立したプログラムなので、これをウエブページからユーザーのパソコンに送って実行させれば、かなりのことが出来ます。絵を描いたり動かしたりはいうまでもなく、ちょっとしたワープロや計算機なんてのも可能です。夢のような環境だったのですが、その後、Javaは迷走することになります。統一した規格であるはずなのJavaなのに、マイクロソフトが独自に拡張したJ++を発表。プラットフォームによって、またはブラウザによって互換性が無くなり、実用的でなくなってしまいました。互換性のある部分だけ使って作ればいいのですが、これはプログラマ側に余計な負担をかけることになり、大ブームとなるには至らなかったのです。
ブラウザによって、稼働したりしなかったりするのは、ウェブページを制作する側から見ると大きな問題で、とてもじゃないが使えたもんじゃない、というのがほとんどの意見。
ちなみに、JavaScriptという、おなじくJavaの名前を冠したものがありますが、これは、Javaアプレットとは違います。Javaアプレットが独立したプログラムであるのに対し、JavaScriptは、それぞれが小さな命令文で、ブラウザがそれを理解して実行します。これもブラウザによって、動作に違いがあったり、動いたり動かなくなったりするので困りもんではありますが、Javaアプレットに比べると簡単で、記述するのも容易なことから、結構用いられています。『コンサデコンサ』のページでも“グラフィカルマップ式INDEX”のスキームに吹き出しを表示させるのに、利用しています。
6.最初はフリーものを使うに限る
インタラクティブナページを作ろうと思ったら、レンタルものの掲示板やカウンターを使用しない限り、大抵の場合、CGIプログラムを自分で設置して使うことになると思います。これにはいくつか理由があるのですが、Shockwaveにしても、Javaにしても、作るのに専用のソフトが必要と言うこと。また、その作り方を習熟するのにある程度時間が必要と言うことがあげられます。
習熟にある程度時間が必要というのは、CGIプログラムでも同じなのですが、こちらは、専用のソフトウエアは必要ありません。CGIプログラム自体、ただのテキストファイルなので、HTMLを書くのに使用したエディタがあればで充分です。しかも、CGIプログラムの場合、フリーウエアが充実しています。お金かけずに、利用することが可能なわけです。
また、フリーウエアの場合、たいてい設置方法が説明されていたり、ホームページにトラブル説明コーナーがあったりと、初めてCGIプログラムに挑戦する身にとっては、大変重宝します。CGIプログラム自体をいじくる前に、CGIをサーバー上で稼働させるために必要な知識を蓄えることが出来ます。
ほとんどのフリーウエアのプログラムは再配布しない限り改変は自由となっており、自分のページに設置してうまく稼働したなら、その後は、中身をいろいろいじくって、自分のページに合ったプログラムへと改造していくことも可能です。
CGIプログラムのフリーウエアとして(時にシェアウエアのものもありますが)配布しているページは、ネット上にいくつもあって、検索サイトで調べれば見つかるはずです。カウンターなどは、外国(英語)のフリーウエアサイトのものを利用しても問題ありませんが、掲示板やチャットシステムのように、日本語の入出力がともなうCGIプログラムの場合、日本語に三種の文字コードが存在し、それを認識しなければいけないという事情のため、日本人が作ったCGIプログラムを利用されることをおすすめします。
もちろん、CGIプログラムに精通した後、外国のCGIプログラムを日本語用にローカライズして、使われても、問題ありません。
私の場合、初めてCGIプログラムをホームページに設置したときは、カウンターとゲストブックは自前で何とか作りましたが、さすがに掲示板は無理だったので、フリーものを利用しました。その後、いろいろ改造を重ね、今のような状態になっています。
7.UNIXの知識が少々必要です
CGIプログラムを動かそうと思うと、大なり小なりUNIXの知識が必要になります。UNIXに関して全て知らなければならないというわけではなく、いくつかポイントを押さえておけばいいので、本まで購入して勉強しなければならないというものでもありません。もちろん、勉強しようと思われたのなら、止めはしませんが。
ホームページを表示するためのWWWサーバーは大抵、UNIXで稼働しています。もちろん、NTやマック、その他のOSもあるでしょうが、大抵はUNIXです。そのため、一通りの使い方を知っておく方が何かと便利です。
最低でも、パスとアクセス権の概念は理解していないと、フリーウエアを利用したとしても、動かすことすら出来ません。。パスというのは、ファイルのディレクトリ構造のこと、アクセス権というのは、ファイルやディレクトリに対して許可されるアクセスの種類。詳細は文章で説明してもわかりにくいので、実際にトライしてもらうしかないのですが、この二つの概念はしっかり理解しておく必要があります。
Telnetのアクセスが許可され、UNIXのシェルが使える環境下なら(日本の大抵のアクセスプロバイダは許可していません)、結構様々なことが出来ます。シェルスクリプトも使えますし、サーバーに関する様々な情報も、プロバイダに問い合わせることなく知ることが出来ます。また、CGIプログラムのデバックなども可能です。
プログラム言語のPERLを使って、CGIプログラムを動かすだけなら、TelnetでのアクセスやUNIXのシェルが無くても問題ありません。マックやウインドウズのFTPプログラムといわれるソフトがあれば、なんとかなります。