.
ホームページ作成・CGI_________
.
.
.
.
TOPページ(Alt+B)
.
ホームページをもっと楽しく便利に

ホームページが完成したら、そのページをより楽しく、便利に、そしてよりインタラクティブにしたいものです。アクセスカウンタ、掲示板、チャット等、表現力豊かなページにしてみましょう。
ここでは、それらを可能にするCGI（Common Gateway Interface）というものについて説明していきます。

CGIはホームページを設定しているサーバ上でプログラムの処理が行われます。本来はすでに蓄積されたデータを静的に表示するだけのホームページに、リアルタイムに変化する動的な要素を追加することができます。サーバ保護のために使えるCGIに制限があることも少なくありませんが、アクセスカウンタや掲示板、チャットなどの一般的なものはホームページ提供業者が用意していることも少なくありません。まずは、プロバイダや無料ホームページを調べてみましょう。
CGIについての詳しい説明はCGIってなあに？を参照。

アクセスカウンタ

自分が苦労して作ったホームページを、今まで何人の人が見てくれたのかを教えてくれるのが、カウンタです。ただし、人の数を直接数えるわけにはいかないので、そのページが何回表示されたかを数えるようになっています。ほとんどのプロバイダや無料ホームページサービスでは、アクセスカウンタのCGIが用意されていますので、HTMLの中に数行の記述を加えるだけで利用できるようになります。運悪くカウンタ用のCGIが用意されていない場合は、無料のカウンタサービスを利用しましょう。（ただし、バナー広告が付く場合もあります）

無料カウンタサービス

・FC2カウンター
http://counter.fc2.com/
デザインの種類が業界最多の豊富なカウンター。ユーザーががデザインしたオリジナル画像も、ユーザー専用の「Myカウンター」として登録可能。初心者でもカンタン操作で、わかりやすい簡易アクセス統計グラフ付き。

掲示板

ホームページの閲覧者が気軽に感想を書き込んだり、ネット友達との交流、メールフレンド募集等、幅広いコミュニケーションの利用ができるのが掲示板です。サーバーに対する負荷が小さいので、大手プロバイダや無料ホームページサービスでも掲示板の設置を可能にしているところは数多くあります。掲示板についても、昔はユーザーがCGIプログラムを駆使して設置するのが主流でしたが、いまではプロバイダや専門業者があらかじめ設置したものを利用するのが一般的となっています。

無料掲示板サービス

・AAA！CAFE
http://fh.aaacafe.ne.jp/
高速な掲示板が売り。テレホタイムでも安心のサービス。

・AVR-Web
http://www.avr-net.com/
簡単なユーザー登録で無料掲示板を3つまで提供。

・teacup.
http://www.tcup.com/
無料掲示板の大手。テレホタイムでも快適。より高機能な有料版もある。

チャット

ホームページに定期的に訪れる常連客が増えてくると、直接交流をしてみたくなるものです。知らない人とでも気軽におしゃべりができるのがチャットです。その仕組みは、まずチャットルームに入って書き込んだ発言を送信すると、その発言を含んだHTMLファイルをCGIが作成し、それをアクセスしている人がブラウザに読み込みます。これを繰り返すことでチャットは成り立っています。ただ、チャットはサーバに負担をかけることがあるため大手プロバイダで提供しているところは少ないでしょう。フリーのレンタルチャットを利用するか、チャットCGIが利用できるサーバを使いましょう。

無料チャットサービス

・BB-CHAT.COM
http://www.bb-chat.com/
スタイルシートの利用も可能。初級・中級者向けから上級者向けまで多彩なチャットが設置でき、荒らし対策もできるようになっている。

JavaScript

JavaScriptとは、HTML中に書くことのできるプログラム言語の一種で、よりインタラクティブなホームページを作成することが可能になります。これを1から書くにはそれなりの知識も必要ですが、訪問時にメッセージを表示させたり、マウスを重ねたときにボタンの色を変えるなどの基本的な処理はもちろん、多彩な制御構造を使ったすばらしいスクリプトがネット上にフリーで多数公開されていますので参考にして下さい。ただし、多用しすぎると表示に時間がかかることもあります。

基本的なJavaScript

・最終更新日の表示

<script type="text/javascript">
<!--
document.write("最終更新日 : ",document.lastModified);
//-->
</script>

documentオブジェクトのlastModifiedプロパティで最終更新日時を取得し、documentオブジェクトのwriteメソッドでドキュメントに引数の内容を出力します。

上記の結果

・本日日付の表示

<script type="text/javascript">
<!--
dt=new Date();
Ye=dt.getYear()+"年";
Mo=dt.getMonth()+1+"月";
Da=dt.getDate()+"日";
Day=dt.getDay();
Day2=new Array(7);
Day2[0]="日";Day2[1]="月";Day2[2]="火";
Day2[3]="水";Day2[4]="木";Day2[5]="金";
Day2[6]="土";
document.write("今日の日付は");
document.write("<b>"+Ye+Mo+Da+"（"+Day2[Day]+"）<\/b>");
document.write("です。");
//-->
</script>

Dateオブジェクトの各メソッドを利用します。曜日については日本語で表示されるように配列を使ってあらかじめ格納しておきます。配列はArrayオブジェクトとnew演算子を用いて宣言します。配列のインデックスは1からではなく、0から始まります。

上記の結果

・利用ブラウザの表示

<script type="text/javascript">
<!--
document.write("あなたがご利用のブラウザは<br><br>");
document.write("バージョン  :", navigator.appVersion, "<br>");
document.write("ブラウザ名 :", navigator.appName, "<br>");
document.write("コード名　　:", navigator.appCodeName, "<br>");
document.write("エージェント:", navigator.userAgent, "<br>");
//-->
</script>

Navigatorオブジェクトを利用します。これはブラウザに関する情報を持つオブジェクトで、そのプロパティとしては下記の4項目が代表的ですが、メソッドはありません。

appVersion ブラウザのバージョンの取得
appName ブラウザ名の取得
appCodeName ブラウザのコード名の取得
userAgent ユーザーエージェントヘッダの取得

上記の結果

・別ファイルを小窓で開く

<script type="text/javascript">
<!--
function Wind(){
var MiniWind=window.open('','miniwind','toolbar=0,location=0,directories=0,status=0,menubar=0,
scrollbars=1,resizable=1,width=300,height=50');
MiniWind.document.write('<body><font color=\"#ff00ff\">別窓その1<\/font><\/body>');
MiniWind.document.close();
};
//-->
</script>

<form action="Push">
<input type="button" value="押す" onclick="Wind()">
</form>

functionで関数を定義します。windowオブジェクトのopenメソッドを使ってウインドを開き、その形状を指定します。
書式は　var W = window.open('URL', 'ウインドウ名', 'ウインドウ形状' );  となります。
inputタグではonclickイベントを利用します。イベントというのは、フォームのボタンをクリックしたときやリンクの上をマウスが通過したときなどに発生しますが、これには

onAbort イメージのロードが中止されたとき
onBlur フォーカスを失ったとき
onChange 値が変化したとき
onClick クリックしたとき
onError エラーが発生したとき
onFocus フォーカスを受けたとき
onLoad そのページがロードされたとき
onMouseOut マウスがオブジェクトから離れたとき
onMouseOver マウスがオブジェクトを通過したとき
onReset フォームをリセットしたとき
onSelect テキストが選択されたとき
onSubmit Submitボタンがクリックされたとき
onUnload そのページがアンロードされたとき

などがあります。このようなイベント処理のことをイベントハンドラといいます。

上記の結果（ボタンをクリックしてみてください。）

・オンマウスで画像を切り替える

<script type="text/javascript">
<!--
function gazou1(){
document.number.src = "xxx_1.jpg";
}
function gazou2(){
document.number.src = "xxx_2.jpg";
}
//-->
</script>
<a href="#" onMouseOver="gazou1()" onMouseOut="gazou2()">
<img src="xxx_1.jpg" border="0" name="number" width="200" height="100"></A>

イメージデータはimageオブジェクトで操作します。srcプロパティで設定/取得し、functionで定義しておいた画像を、onMouseOver、onMouseOutイベントで切り替えます。IMGタグのNAME属性で定義しておく必要があります。

上記の結果（画像の上にマウスポインタを置いてみてください。）

サンプル画像

・選択先へジャンプ

<form action="push" name="forms">
<select name="select">
<option value="selection1.htm">選択ページ1へ
<option value="selection2.htm">選択ページ2へ
<option value="selection3.htm">選択ページ3へ
</select> <INPUT type="button" value=" ジャンプ " onclick="location.href = document.forms.select.options[document.forms.select.selectedIndex].value">
</form>

locationオブジェクトのhrefプロパティでリンク先URLを取得します。フォームのオブジェクトはdocument.フォーム名.部品名で参照できます。

上記の結果

使い方は<script type=.....>から</script>までを切り取って、HTML本文の適当な場所に貼りつけます。尚、SCRIPTタグの属性値について、<SCRIPT Language="JavaScript">と書く人もいますがどちらでもいいでしょう。どうしても文法にこだわりたい方は、W3Cのウェブ内容アクセス指針1.0用技術書によると「この属性は、その要素の内容の言語を特定します。その値で言語を識別しますが、これらの識別子は標準でないので、Language属性は不適切で、typeに代わられます。」とありますのでご参考までに。また、ステートメントが数十行にも渡る場合には外部に拡張子「.js」のファイルを作成し、それをSRC属性で読み込むようにするとHTML文がすっきりします。

ホームページの公開へ(Alt+R)　ホームページの作成へ(Alt+T)　TOPページ(Alt+B)

CopyRight (C) 2000-2013 by T.Shiraishi All right reserved　無断転載禁止／リンクフリー