Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

2回目以降の訪問者の情報を自動的に表示する

ホームページは、ブラウザに【用意されている「Cookie」と呼ばれる仕組みを使用することにより、訪問者が入力した情報をブラウザに記憶させて、次回の訪問時に前回入力した情報を自動で表示することができます。ここでは、次回の訪問時に、名前・メールアドレス・住所を自動で表示する方法について考えてみましょう。

■ 「送信」ボタンをクリックしたときの処理

「送信」ボタンがクリックされた時に、ユーザーが入力した情報を保存するように設定します。

<FORM NAME="Form1" ACTION="mailto:little-box@aw.wakwak.com"
METHOD="post" ENCTYPE="text/plain" onSubmit="writeCookie()">

Cookieを利用すると、訪問者がフォームに入力した情報を保存しておくことができます。この情報を使うと2回目以降にこのページにアクセスした際に前回入力した内容を自動的に入力することができるため、フォームに入力する手間を軽減することができます。Cookieへの情報の保存は、送信のタイミングで行います。

■ 入力情報を保存する処理

Cookieを利用して、入力情報を保存する関数を記述します。

function writeCookie(){
d = new Date();
d.setYear(d.getYear()+1)
tx = d.toGMTString();
document.cookie="name:"+document.Form1.customer.value+
":email:"+document.Form1.email.value+
":addres:"+document.Form1.addres.value+":"
+";expires="+tx+";"
location.href="thankyou.htm"
}

「Cookie」プロパティで情報を保存するには、情報の有効期限を設定しておく必要があります。有効期限を設定していないと、ブラウザが閉じられた後に「Cookie」プロパティに設定されていた情報が消えてしまうので注意が必要です
例 では、情報を保存する際に、Cookieの有効期限として、現在の日付から1年後の日付を指定しています。
上例の関数では、保存する情報の有効期限を1年後に設定するために現在の日時を取得し、その1年後の日時を「tx」に設定しています。また、「tx」に直接値を設定して有効期限を指定することもできます。例えば「tx="Tue, 20 Jan 2004 00:27:00 UTC "」と設定すると、情報の有効期限を2004年の6月20日に設定することができます。

■ ページ読み込み時の処理

ページ読み込み時に前回入力された情報を表示するように設定します。

<BODY onLoad="getCookie();>

■ 「switch〜case」構文

前回入力された情報(名前、メールアドレス、住所の情報)をCookieから取り出し、フォーム上のテキスト入力領域に表示するJAVA Scriptを記述します。

function getCookie(){
ck=document.cookie
idx_cb=ck.indexOf(":",0)
idx_ce=ck.indexOf(":",idx_cb+1)
idx_eb=ck.indexOf(":",idx_ce+1)
idx_ee=ck.indexOf(":",idx_eb+1)
idx_ab=ck.indexOf(":",idx_ee+1)
idx_ae=ck.indexOf(":",idx_ab+1)
document.Form1.customer.value=ck.substring(idx_cb+1,idx_ce)
document.Form1.email.value=ck.substring(idx_eb+1,idx_ee)
document.Form1.addres.value=ck.substring(idx_ab+1,idx_ae)
}

Cookieにはフォームに置かれた3つのテキスト入力領域に表示する情報が1つの文字列として保存されています。各テキスト入力領域の情報は「:」で区切られて保存されており、テキストを表示させる際は、「:」の位置で分割して文字列を表示するようにしています。このとき、Cookieの文字列のどの部分に「:」があるかは、「indexOf」メソッドで調べることができます。また、直接位置を指定して文字列を取り出すには、「substring」メソッドを使用します。「substring」メソッドで取り出した文字を文字列変数に設定するには、次のように記述します。

【文字列変数】=【文字列】.substring(【開始位置】,【終了位置】)

インターネットでは、セキュリティの観点から、訪問者のパソコンのハードディスクに直接書き込みを行うようなホームページは作成できないようになっています。このため、JAVA Scriptにもファイルの書き込みを行う命令は用意されていません。しかし、情報の保存が一切できないのは不便なため、例外的に書き込みを許可されているのがCookieです。ただし、Cookieを不正な用途で使用できないようにCookieに保存できるのは、訪問者が入力したり選択したりした情報だけに限定されます。また、訪問者が、ブラウザの設定でCookieの使用を禁止している場合は、どのような情報も保存することができないようになっています。

■ Cookieの仕組み

Cookieは、ブラウザの機能を使用して、訪問者の情報をハードディスクに保存しておくための仕組みです。Cookieのファイルは「Windows」フォルダ内の「Cookies」フォルダに保存されます。このフォルダを開いてみると、多くのホームページでCookieが使用されていることがわかります。
ここではJAVA Scriptを使用してCookieを読み書きする方法を紹介していますが、この他にも下表のような技術を使用してCookieを読み書きすることができます。ただし、いずれの場合もCookieに書き込むことができるのは、フォームに入力された内容など、訪問さhが表示中のページの管理者に知られても良いと判断しtア情報だけです。同様に、Cookieから読み込むことのできる情報も、表示中のページ(URL)に関する情報だけで、他のページの情報を読み込むことはできません。

使用する技術
使用するプロパティやメソッド
JAVA Script documentオブジェクトのcookieプロパティを使用する
ASP Response.CookiesやRequest.Cookiesを使用する

CGI

HTTPヘッダのSet-Cookiesを使用する

Cookiesは、2回目以降の訪問者に対して、フォームに入力する際の手間を軽減するために考案されたものです。しかし、Cookiesを上手に利用すれば単に訪問者の入力の手間を軽減するだけではなく、名前や訪問回数などを表示することで、ホームページに親しんでもらうための仕組みを作ることもできます。
しかし、個人情報を取得できるという理由から、取り扱いには充分な配慮が必要です。「Cookieの情報を悪用されるのでは?」という訪問者の不安を和らげるために「このページでは、Cookieを使用しています」のようなメッセージをページのどこかに表示しておくのも一つの方法です。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box