サンプルをダウンロードしてください。

3-1-1.クッキーについて

クッキーとはローカルにブラウザを通してデータを保存することができる方法です。 サーバ上にあるデータはCGIなどを使ってデータを書き換えなければできませんが、 このクッキーを使えばJavaScriptから個人データの保存が可能です。 なので、WEB上で学習ができるソフトなどで使用すると便利です。 ただローカル上で書き換えが可能なので、あくまで個人的にデータを使うと いう事しか意味がありません。

3-1-2.JavaScript解説

今回の講座ではクッキーを使って過去最高得点を出したときのデータを保存して、 ボタンを押す事によってそのデータを取り出すということをします。

それでは前回からの変更点を見ていきましょう。 まず最初にhozonkikanという変数ができています。 これはクッキーの有効期限を変更するもので、1だと一日分長くなるようにしてあります。 また、タイピングソフトが終了した時に呼ぶtypeend()関数内で最後にcookief()関数を 呼んでいます。このcookief()関数はクッキーに関する処理を実行するものです。 次に新しく出てきた関数ごとに見ていきましょう。

3-1-2-1.putmax()

function putmax(){
　document.text.kseikai.value=getCookie("SEIKAI");
　document.text.kmachigai.value=getCookie("MACHIGAI");
　document.text.ksokudo.value=getCookie("SOKUDO");
　document.text.kparsent.value=getCookie("PARSENT");
　document.text.ktokuten.value=getCookie("TOKUTEN");
}

putmax()関数はクッキーのデータからタイピングのデータを取り出して、 テキストフィールドに入れる処理をしています。 このputmax()関数が呼ばれるのはHTMLタグで作成したボタンを押したときです。 getCookie()関数についてはのちほどでてきます。

3-1-2-2.cookief()

function cookief(){
　ctokuten=getCookie("TOKUTEN");
　if(ctokuten==""){
　　setCookie("TOKUTEN",tokuten);
　　setCookie("SEIKAI",seikaisuu);
　　setCookie("MACHIGAI",machigaisuu);
　　setCookie("SOKUDO",sokudo);
　　setCookie("PARSENT",parsent);
　}else if(ctokuten<=tokuten){
　　setCookie("TOKUTEN",tokuten);
　　setCookie("SEIKAI",seikaisuu);
　　setCookie("MACHIGAI",machigaisuu);
　　setCookie("SOKUDO",sokudo);
　　setCookie("PARSENT",parsent);
　}
}

cookief()関数はクッキーからデータを取り出してデータがない場合はそのまま タイピング結果をクッキーに保存、データがあった場合は『クッキーのTOKUTEN（得点）データ』と『さきほどタイピングした結果の得点』とを比較して『さきほどタイピングした 結果の得点』の方が大きかった時に『さきほどタイピングした結果』を クッキーに保存するということをしています。

あとはスクリプトを見てもらうとだいたいわかるかと思います。 setCookie()は引数を二つ使い、getCookie()は引数を一つ使うということだけ 頭に入れておいてください。それでは実際にクッキーを操作している関数を 見てみましょう。

3-1-2-3.setCookie()

function setCookie(keyword,par){
　kigen=new Date();
　kigen.setTime(kigen.getTime()+(hozonkikan*1000*60*60*24));
　exkigen=kigen.toGMTString();

　tmps=keyword+"="+escape(par)+";";
　tmps+="expires="+exkigen;
　document.cookie=tmps;
}

setCookie()関数ではキーワードとパラメータの二つの引数を取ります。 その名のとおりキーワードはクッキーに保存するときの名前で、パラメータは その値になるわけです。

その次の

kigen=new Date()

は日付を使用するときに宣言するものと思ってください。kigenという名前は変更できます。

kigen.setTime(kigen.getTime()+(hozonkikan*1000*60*60*24))

という部分では日付オブジェクト（kigen）に対して行っているもので、setTime()関数は 日付オブジェクトに日付をセットするもので、getTime()関数は1970年1月1日午前0時から 現在までのミリ秒を返すもので、それにhozonkikan*1000*60*60*24とすることで 現在からhozonkikan*1000*60*60*24ミリ秒分足したものになります。 つまり1000*60*60*24で一日の秒数を表していてそれにhozonkikanをかけるので、 現在から何日間という意味に解釈できます。

exkigen=kigen.toGMTString()

はさきほど設定した『現在から何日間までのミリ秒』をグリニッジ標準時で表す ということを示しています。
グリニッジ標準時とは例えば

Tue, 5 Dec 2007 10:30:55 UTC

という風な表示の仕方を言います。 この表示の仕方はクッキーにデータを与える時に必要になります。

tmps=keyword+"="+escape(par)+";"; tmps+="expires="+exkigen; document.cookie=tmps;

さて、上記のスクリプトですがいったい何をしてるんでしょうか・・・。 実はこれクッキーにデータを保存する時に決まった形で与えなければいけないので、 その為に形作りをしています。

クッキーに与える形は

『キーワード』=『値』;expires=Tue,5 Dec 2007 10:30:55;

という形で与えます。キーワードと値の対になったものはいくつか並べることができ、 つなぎ文字として;を使用します。 また『値』に日本語などを含む場合にはデータがうまく取り出せなくなる可能性があるので、 『値』はescape()関数で文字コードへと変換します。（クッキーデータを取り出す時に unescape()関数で元に戻します）

最後にdocument.cookie=tmpsで作ったデータをクッキーに保存します。

3-1-2-4.getCookie()

getCookie()はクッキーに保存したデータを取り出す関数です。 ひとつ引数を取りそのキーワードによってデータを取り出します。 まず最初にクッキーからデータを取り出す場合もdocument.cookieで行います。

そしてindexOf()関数で受け取ったkeywordでクッキーから取り出したデータを検索します。 見つかった最初の位置をindex1に入れておきます。 次にindex1が-1でなかった時、つまりキーワードが見つかったときはそのデータを 取り出す処理をして、もし-1（見つからなかった時）は空文字を返します。

見つかったときはsubstring()を使って文字列から一部の文字列を取り出します。 substring()は最初の引数番目から2番目の引数番目を取り出します。

つまりクッキーでTOKUTEN=460.123;SEIKAI=40;となっているとすると、keywordとして SEIKAIが与えられていたとすると、さきほどのindex1には16が入ります。 そして

tmp=tmp.substring(index1,tmp.length)

では、tmpの文字列からindex1からtmp.length（tmp文字列の最後）までを取り出し、 tmpに入れなおしています。 つまりさきほどの例からいくとtmpには『SEIKAI=40;』が入っています 次の

index2=tmp.indexOf("=",0)+1

では『SEIKAI=40;』の文字列から=（イコール）が見つかる位置を調べそれに１を足しています。 こうすることで『SEIKAI=40;』から『4』の位置をindex2に入れます。 この時のindex2は7になります 最後に

index3=tmp.indexOf(";",index2)

では『SEIKAI=40;』から検索して、7番目の位置から;（セミコロン）が 見つかる位置を調べそれをindex3に入れます。この時のindex3は2になります。 最後に戻り値として

unescape(tmp.substring(index2,index3))

を返します。呼び出し元に値を与える時はreturnを使います。 ここでunescape()関数は文字コードを文字に戻す関数です。

最後に戻り値として与えているのはさきほどの『SEIKAI=40;』でいくと、 『4』の位置から『;』の位置までになります。 つまり40が戻り値として与えられます。 『;』の位置は取り出さないので注意してください。

こうしていくことでほしいデータのキーワードをgetCookie()関数に渡すと、 その値を返してくれることになります。

今回の講座終了です。これでタイピングソフトが完成しました！ がしかし・・・見た目がよくありません。 ので次回の講座で見た目をよくして完成となります。