 |
Web技術実習 |
| 戻る〔２９．ナビゲーションメニューⅡ〕 次へ〔３１．スタイルシート〕 目次 |
|
Web技術実習 |
| 戻る〔２９．ナビゲーションメニューⅡ〕 次へ〔３１．スタイルシート〕 目次 |
スクリプト言語には、セキュリティの面からクライアント・コンピュータの磁気ディスクを読み書きすることができない。ときどき「xx回目の訪問です。」というように訪問した回数が表示されるWebページを経験したことがないだろうか。このようにするには、どこかに訪問回数を記録しておく必要がある、ということはわかるだろう。しかし、スクリプト言語ではクライアントに記録できない。一つの方法として、CGIを使ってサーバ・コンピュータ側に記録することが考えられる。
では、スクリプト言語の場合は記録しておく方法がないのだろうか。前置きが長くなったが、スクリプト言語でもデータを記録しておく方法がある。それがクッキー(Cookie)である。
ユーザに関する情報や最後にWebサイトを訪れた日時、そのWebサイトの訪問回数などを記録しておいたり、ユーザの識別に使われ、認証システムや、WWWによるサービスをユーザごとにカスタマイズするパーソナライズシステムの要素技術としてクッキーが利用されている。
30-1 書き込み
スクリプトで、クッキーの情報を記録するには、次のようにする。
document.cookie = "文字情報";
「文字情報」の部分は次のようにして指定する。（主なものだけ）
name = データ; expires = 有効期限
nameの部分はデータを区別するためのものである。任意の文字列を指定する。
「name = データ」の部分はセミコロン(;)で区切って複数書くことができる。
「expires = 有効期限」の部分は省略可能である。省略したときは、ブラウザを終了するまでの期間となる。過去の値を指定するとクッキー情報は削除される。
データの部分に記録しておきたい情報を書く。このデータ部分にカンマ(,)や日本語を使用するときは スクリプトのescape( ) 関数で変換する。（元に戻すには
unescape( ) を使う。）
有効期限の指定は、何年何月何日何時何分何秒まで有効かをGMT(Greenwich Mean Time:グリニッジ標準時)で指定する。javascriptでは、次のようにして有効期限を計算する。
// 期限を7日間とした場合
kigen = new Date(); // 日付オブジェクトの作成
kigen.setTime(kigen.getTime() + (7 * 24 * 60 * 60 * 1000)); ←※
kigen2 = kigen.toGMTString(); // 期限の日時をGMTに変換
※ kigen.setTime(
③kigen.getTime() + (
①7 * 24 * 60 * 60 * 1000) );
②
① 1970年1月1日0時0分0秒から現在までの秒数(ミリ秒)を取り出す。 ② 7日後の秒数(ミリ秒)を計算する。 ①+② 7日後の日時を1970年1月1日0時0分0秒からの秒数(ミリ秒)で表した値。 ③ 秒数（①+②）を日付オブジェクトkigenに設定する。
（例） userという名前で"使用者"というデータをクッキーに保存する。保存期間は10日間とする。
dat = "使用者";
kigen = new Date();
kigen.setTime(kigen.getTime() + (10 * 24 * 60 * 60 * 1000)); // 有効期限計算
kigen2 = kigen.toGMTString(); // ↓クッキー書き込み
document.cookie = "user=" + escape(dat) + ";expires=" + kigen2;
コンピュータの日付に関する「西暦2038年問題」
一部のOSや言語処理系の仕様により、西暦2038年以降の日付や時刻を正しく扱えなくなり、コンピュータの誤動作によって社会に混乱を起こす可能性があるという問題である。
一般的に、時刻は1970年1月1日午前0時からの経過秒数で管理している。この経過秒数を32ビットの符号付き整数で処理されていることが多いため、上限値である21億4748万3647秒を超えると正しく時刻を表現できなくなる。経過秒数がこの上限を超えるのは世界標準時で2038年1月19日午前3時14分8秒(日本時間午後12時14分8秒)であり、この形式で時刻を管理しているシステムはそれまでに対策をしなければこの時点以降正常に動作しなくなる。
最近のOSや言語処理系では対策として時刻の管理に64ビットの符号付き整数を利用しており、これを1970年1月1日午前0時からの経過秒数として使えば西暦3000億年程度までは同種の問題は起きない。
30-2 読み込み
書き込みと同じ、document.cookieで参照できる。複数の文字情報（name=データ）が記録されている場合、セミコロンで区切られて読み込まれる。例えば、「user=使用者」と「pass=X3e5h」が記録されているとき、document.cookieで参照すると「user=使用者;pass=X3e5h」という形でデータが取り出せる。
記録するとき、データ部分はescape()でエンコードしておくのが一般的なのでunescape()でデコードする。
情報は○○＝△△の形で得られる。必要なのは△△のデータ部分であることが多いので、△△の部分だけを取り出す処理を作る必要がある。
実習３０ クッキーの働きなどを確認するWebページを作成する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「cookie1.htm」とする。ページのタイトルは「クッキー1」とする。
・日付の確認
※※ サンプルのWebページなので、動作は保証されない。 ※※
操作１ フォームを配置して、属性のダイアログで名前を「cookie1」に設定する。
操作２ 「1行テキスト」を配置する。属性のダイアログで名前を「jikan」、カラム数を「50」に設定する。
操作３ プッシュボタンを配置する。属性のダイアログで表示するラベルを「現在日時」、ボタンの種類は「プッシュボタン」に設定する。［イベント(E)...］ボタンをクリックして、OnClickイベントに次のスクリプトを設定する。
sday = new Date(); document.cookie1.
↑省略可jikan.value = sday.toGMTString();
操作４ もう一つ、プッシュボタンを配置する。属性のダイアログで表示するラベルを「現在日時(秒数)」、ボタンの種類は「プッシュボタン」に設定する。［イベント(E)...］ボタンをクリックして、OnClickイベントに次のスクリプトを設定する。
sday=new Date(); jikan.value=sday.getTime();
操作５ 保存して、Webブラウザでスクリプトの確認をする。
◎ ［現在日時］ボタンをクリックすると「Thu, 9 Mar 2006 07:11:58 UTC」のように表示される。日本時間はグリニッジ標準時より9時間早いので、表示は9時間遅れである。
◎ ［現在時刻(秒数)］ボタンをクリックすると「1141888319135」のように1970年1月1日0時0分0秒からの秒数(ミリ秒)で表示される。
| sday = new Date(); … 日付オブジェクトを作り、sdayに記憶させる。 sday.toGMTString(); … 日付オブジェクトsdayの現在日時(ミリ秒)を文字列に変換する。 sday.toUTCString(); でもよい。 sday.getTime(); … 日付オブジェクトsdayの現在日時(ミリ秒)を得る。 sday.setTime(ミリ秒); … 秒数を日付オブジェクトsdayに設定する(後で必要になる)。 |
・クッキーの確認
※※ サンプルのWebページなので、動作は保証されない。 ※※
操作６ 「user=」と入力して、「1行テキスト」を配置する。属性のダイアログで名前を「dat」に設定する。
操作７ 「address=」と入力して、「1行テキスト」を配置する。属性のダイアログで名前を「dat」に設定する。
操作８ プッシュボタンを配置する。属性のダイアログで表示するラベルを「書き込み」、ボタンの種類は「プッシュボタン」に設定する。［イベント(E)...］ボタンをクリックして、OnClickイベントに次のスクリプトを設定する。有効期限は1日とする。
CookieWrite("user",dat[0].value,1); CookieWrite("address",dat[1].value,1);
操作９ 「1行テキスト」を配置する。属性のダイアログで名前を「dat2」、カラム数を「50」に設定する。
操作１０ プッシュボタンを配置する。属性のダイアログで表示するラベルを「読み込み」、ボタンの種類は「プッシュボタン」に設定する。［イベント(E)...］ボタンをクリックして、OnClickイベントに次のスクリプトを設定する。
dat2.value = document.cookie;
操作１１ メニューバーから次のように選択して、スクリプト(Cookie.Write関数)を挿入する。
［挿入(I)］ → ［その他(A)］ → ［スクリプト(R)...］
function CookieWrite(kword, kdata, kday)
{
sday = new Date();
sday.setTime(sday.getTime() + (kday * 24 * 60 * 60 * 1000));
s2day = sday.toGMTString();
document.cookie = kword + "=" + escape(kdata) + ";expires=" + s2day;
}
操作１２ 上書き保存して、Webブラウザでスクリプトの確認をする。
◎ userの入力欄に「abcde」、addressの入力欄に「成城高校」と入力して、［書き込み］ボタンをクリックする。次に、［読み込み］ボタンをクリックすると
「user=abcde; address=%u6210%u57CE%u9AD8%u6821」 と表示される。
成=%u6210、城=%u57CE、高=%u9AD8、校=%u6821は全角文字のコード(Unicode)である。全角文字は、escape()で文字コードに変換される。読み込んだデータをunescape()で処理していないので、コードのままで表示されている。
同じフォルダのWebページが書き込んだクッキーがdocument.cookieですべて表示される。
操作１３ ［読み込み］ボタンのスクリプトを次のように変更する。
dat2.value = unescape(document.cookie);
操作１４ 上書き保存して、Webブラウザでスクリプトの確認をする。
◎ クッキーに書き込まれた情報が変更されていなければ、［読み込み］ボタンをクリックすると 「user=abcde; address=成城高校」 と表示される。
30-3 クッキーの読み書き関数
クッキーの書き込み用関数は、先に示したCookie.Write関数とほぼ同じである。読み込みで、すべての情報が取り出されても困るので、指定した名前のデータだけが取り出せるCookie.Read関数を作成する。また、クッキーに書き込まれた情報を削除するCookie.Delete関数を作成する。
実習３１ クッキー読み書き関数を利用したWebページを作成する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「cookie2.htm」とする。ページのタイトルは「クッキー2」とする。
※※ サンプルのWebページなので、動作は保証されない。 ※※
操作１ 文字を入力して、見出し(2)の設定をする。
操作２ フォームを配置して、図のように文字を入力し、入力部品を配置していく。3個のプッシュボタンには名前を設定していない。
操作３ ［Cookie書き込み］ボタンのOnClickイベントに次のスクリプトを設定する
CookieWrite("namae1",dat[0].value,1); CookieWrite("namae2",dat[1].value,1);
CookieWrite("namae3",dat[2].value,1);
操作４ ［Cookie読み込み］ボタンのOnClickイベントに次のスクリプトを設定する
dat2[0].value = CookieRead("namae1"); dat2[1].value = CookieRead("namae2");
dat2[2].value = CookieRead("namae3");
操作５ ［Cookie削除］ボタンのOnClickイベントに次のスクリプトを設定する
CookieDelete("namae1"); CookieDelete("namae2"); CookieDelete("namae3");
操作６ メニューバーから次のように選択して、スクリプト(Cookie.Write関数)を挿入する。
［挿入(I)］ → ［その他(A)］ → ［スクリプト(R)...］
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーへの書き込み
// 引数：kword=名前 kdata=データ kday=保存期間(日数)
// 返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieWrite(kword, kdata, kday)
{
if(!navigator.cookieEnabled){ // クッキーが利用可能かどうか
alert(";クッキーへの書き込みができません");
return;
}
sday = new Date();
sday.setTime(sday.getTime() + (kday * 24 * 60 * 60 * 1000));
s2day = sday.toGMTString();
document.cookie = kword + "=" + escape(kdata) + ";expires=" + s2day;
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーから読み込み
// 引数：kword=キーワード
// 返却値：データ
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieRead(kword)
{
if(typeof(kword) == "undefined") // キーワードなし
return ""; // 何もしないで戻る
kword = kword + "=";
kdata = "";
scookie = document.cookie + ";"; // クッキー情報を読み込む
start = scookie.indexOf(kword); // キーワードを検索
if (start != -1){ // キーワードと一致するものあり
end = scookie.indexOf(";", start); // 情報の末尾位置を検索
kdata = unescape(scookie.substring(start + kword.length, end));
} // ↑データ取り出し
return kdata;
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキー削除
// 引数：kword=キーワード
// 返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieDelete(kword)
{
document.cookie = kword + "=;expires=Thu,01-Jan-70 00:00:01 GMT";
}
操作７ 上書き保存して、Webブラウザでスクリプトの確認をする。
◎ 最初のnamae1～namae3の入力欄に適当なデータを入力して、［Cookie書き込み］ボタンをクリックする。次に、［読み込み］ボタンをクリックすると、［読み込み］ボタンの下にあるnamae1～namae3の入力欄に同じデータが表示される。
◎ ［Cookie削除］ボタンをクリックしてから［読み込み］ボタンをクリックすると、［読み込み］ボタンの下にあるnamae1～namae3の入力欄のデータが消える。
| 戻る〔２９．ナビゲーションメニューⅡ〕 次へ〔３１．スタイルシート〕 目次 | |
|
| Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda | |