ＪａｖａＳｃｒｉｐｔ講座(Vol.31)

ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

６/０５日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.31★

クッキーを使ってみよう

じゃあ、最終回として実際にクッキーを使ってみよう。
前回までに、クッキーの書き込み、読み込み、削除の三つの方法をやったね。
でも、どれも結構面倒臭かったよね。
というわけで、そういうものは関数として作って、その関数を呼び出すことによって簡単にクッキーをつかってやろう。
今回は、実際にクッキーを使ってページの背景色をユーザの好きなように変更させるプログラムを作ってみよう。

★ クッキーの関数 ★

まずは、クッキーの関数を作ってやろう。
といっても、前回までにやってきたものを関数化させてやるだけだよ。

クッキーへの書き込み

まず、クッキーへの書き込みを関数化してみよう。
この関数を呼び出す時は、

setCookie(キー,値);

とすればよい。
※データの読み込みや削除はこのキーを使って操作する。
※よくわからない人はキーとはデータのある場所、クッキーの名前だと思うこと。
（フォルダ名やファイル名のようなものだよ）

例）
setCookie(back,blue);　　　←backというクッキー（場所）にblueという値を入れた。
setCookie(name,yoppy);　　　←nameというクッキー（場所）にyoppyという値を入れた。

◆クッキーへの書き込み用関数◆

function setCookie(key,val){
    tmp = key+"="+escape(val)+";";
    tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
    document.cookie = tmp;
}

解説は前にやっているので簡単にしておくね。
まず、例を見てもわかるとおり、関数を呼び出す時に
    setCookie(キー,値)
になっているね。
つまり、一行目の
    function setCookie(key,val){
という部分は、key,valというのが引数で、
    key=キー　val=値
に対応しているんだ。
※引数に関しては関数の号を参照
なので、例のsetCookie(back,blue)という時は、関数の中ではkey=back:val=blueとなることになるね。
これをふまえて関数の中を見てみようね。
※新しく出てきたescape(val)というものについて説明すると、これはLatin-1というものへの変換という操作。
特に覚えなくてもいいので、ただ暗号化しているだけと考えておこう。

クッキーからの読み込み

次に、クッキーへの読み込みを関数化してみよう。
読み込みは書き込みに比べるとかなり難しかったよね。
けれど関数では、使い方さえおぼえておけばよい。

getCookie(キー);

とすればよい。
キーを指定するとそのキーに対する値が返ってくるんだ。
※値が返ってくるという言葉も関数のところで説明したので参照。
※上のsetCookie()で指定したキーを使う。

例）
setCookie(back,blue);　　　←backという場所にblueという値を入れた。
background = getCookie(back);　←backから値を取り出してbackgroundに代入。つまり、ここでbackgroundには"blue"が入ったことになる。

setCookie(name,yoppy);　　　←nameという場所にyoppyという値を入れた。
myname = getCookie(name);　←nameから値を取り出してmynameに代入。つまり、ここでmynameには"yoppy"が入ったことになる。

◆クッキーからの読み込み用関数◆

function getCookie(key){
    tmp = document.cookie+";";
    tmp1 = tmp.indexOf(key,0);
    if(tmp1 != -1){
        tmp = tmp.substring(tmp1,tmp.length);
        start = tmp.indexOf("=",0);
        end = tmp.indexOf(";",start);
        return(unescape(tmp.substring(start+1,end)));
    }
    return("");
}

今度は
function getCookie(key){
となった、引数はkeyだけになった。
※このkeyというものを使って値を取り出してくる。
※引数に関しては関数の号を参照
key=キー
に対応しているよ。
なので、例のgetCookie(back)という時は、関数の中ではkey=backとなることになるね。
これをふまえて関数の中を見てみよう。
※ここでも新しく出てきたunescape(・・・)というものについて説明すると、さっき書き込みの時に変換した文字列を元の文字列に戻す操作。

クッキーの削除

最後にクッキーの削除をやってみよう。
これも、関数の使い方さえ知っていればいい。

delCookie(キー);

これで、キーに入っている値を消す事ができる。
※実際はキーという場所自体を削除している。

例）
delCookie(back);　　　←backというクッキーを削除
delCookie(name);　　　←nameというクッキーを削除

◆クッキーの削除用関数◆

function delCookie(key){
    expiredate = new Date();
    expiredate.setYear(expiredate.getYear()-1);
    tmp = key+"=;";
    tmp += "expires="+expiredate.toGMTString();
    document.cookie = tmp;
    alert("削除");
}

function delCookie(key)
となり、引数はkeyだけ。
ここも今までと同じなので説明は省略するね。

※よくわからない人は、引数、返り値、関数、前号までのクッキープログラムの詳細をもう一度読み直そう。

とにかく、クッキーについては難しい人はプログラムを覚える必要はない。
プログラムを覚えるのではなく、プログラムを使えるようになろう。

＜関数のまとめ＞
◆クッキーへの書き込み
setCookie(キー,値);
◆クッキーからの読み込み
getCookie(キー);
◆クッキーの削除
delCookie(キー);

この三つを覚えておこう。
そして、この三つの関数を使う場合は当然同じファイルのなかに関数の定義、上でやった三つのプログラムを書いておかなければならない。
これは、上のプログラム(関数)をコピーして、プログラム中に貼り付けるだけでいいんだよ。
※外部ファイルとしてクッキー用関数をまとめておいて置くこともできる。

★ ユーザー用の背景を設定する ★

今回は簡単なクッキーの使い方として、ユーザーがページにきたときに自分の好きな背景色に変更できるようにしよう。
これだけだと、つまらないので以後ページにきたときは設定した背景色になるようにしてみよう。
つまり、ユーザーの好きなようにページの背景をデザインできるということだね。

考え方

ユーザーの指定した背景にするには、document.bgColor=色を使えばよかったよね。
また、その時にユーザーが指定した色をその人のクッキーに保存しておこう。
そして、次にきたときにはその人のクッキーから前回指定していた背景色を取り出してきて、それを使って背景色をかえればいいね。
そうすることによって、ユーザーはこのページがいつでも自分の好きな色になっていることになるんだ。

プログラム

じゃあ、実際にプログラムを見てみよう。

◆背景色を設定する◆

<HTML>
<HEAD>
<TITLE>背景色を設定する</TITLE>
<SCRIPT language="JavaScript">
bg_color = getCookie("bg_color");
if(bg_color == ""){
}
else{
 document.bgColor = bg_color;
}

function setColor(color){
 setCookie("bg_color",color);
 document.bgColor = color;
}

function setCookie(key,val){
 tmp = key+"="+escape(val)+";";
 tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
 document.cookie = tmp;
}

function getCookie(key){
 tmp = document.cookie+";";
 tmp1 = tmp.indexOf(key,0);
 if(tmp1 != -1){
 tmp = tmp.substring(tmp1,tmp.length);
 start = tmp.indexOf("=",0);
 end = tmp.indexOf(";",start);
 return(unescape(tmp.substring(start+1,end)));
 }
 return("");
}

function delCookie(key){
 expiredate = new Date();
 expiredate.setYear(expiredate.getYear()-1);
 tmp = key+"=;";
 tmp += "expires="+expiredate.toGMTString();
 document.cookie = tmp;
 alert("削除");
}
</SCRIPT>
</HEAD>
<BODY>
赤色 
緑色 
青色 
黄色 

<INPUT type=button onclick="delCookie('bg_color');document.bgColor='#ffffff';" value="リセット">
</BODY>
</HEML>

ちょっと長く思えるけれど、setCookie(),getCookie(),delCookie()に関しては前回までで終わっているので、
今回新しく出てくる場所は、スクリプトの11行と、HTMLの部分だけだよ。
じゃあ、まずスクリプトの部分から見てみよう。

    bg_color = getCookie("bg_color");
    if(bg_color == ""){
    }
    else{
        document.bgColor = bg_color;
    }

まず、ここではユーザーがページに入った時の処理をしている。
初めてページに入った時はもちろんクッキーには何も入っていないね。
なので、その場合には何もしないでおこう。

if(bg_color == ""){
}

次に、(そうでない場合)以前に背景色を選択している場合、クッキーにその選択色が入っているので、前回選択した背景色を取り出してきてそれをもとに背景の色を変えよう。

    else{
        document.bgColor = bg_color;　　　　　　←背景色をbg_colorにする
    }

ここも、if文とdocument.bgColorの組み合わせだね。
ここで、ページに入ってきた時の処理は終わり。

＜まとめ＞
初めてはいってきた人には何もしない、
以前背景色を選択した場合はその選択色を使って背景を変える。

次に、HTML文を見てみよう。

赤色 
 緑色 
 青色 
 黄色 
 
 <INPUT type=button onclick="delCookie('bg_color');document.bgColor='#ffffff';" value="リセット">

となっているね。
今どのようにしたいかというと、マウスで色を選択してもらって、それによって背景色を変える。
また、その時にクッキーにそのデータを保存するんだね。
なので、赤色のように、
onclick()でボタンを押した時にset('色')を使って背景色を設定してやろう。
もう一度スクリプトの部分に戻って、

    function setColor(color){
        setCookie("bg_color",color);　　←"bg_color"というん名前のクッキーにcolorを保存
        document.bgColor = color;　　　　←背景色をcolorにする
    }

関数の名前はsetColor(color)。引数には色が入るようにしよう。
※setColor('#00ff00')等
まず、クッキーに今選択した色を保存しよう。
今回保存したいクッキーの識別名をbg_colorとし、保存したい物はcolor(選択した色)なので、
命令はsetCookieを使って、setCookie("bg_color",color)となる。
クッキーに保存するのはたったこれだけでいいんだ。
すごい簡単だよね。
これは、setCookie()という関数を作ってあるからこんなにも簡単なんだよ。
そう、関数というのはこのようにプログラムをとても簡単にするために使われるんだ。
次に、背景色を変えたいんだけれど、これもそんなに難しくないよね。
colorで指定された色を背景色にしたいので、document.bgColor = color;とすればよい。
たったこの二行だけで、クッキーに保存をして背景色を変えることもできたんだ。
じゃあ、もう一度HTMLに戻って、
さっき赤色のように書いていたね。
この中の、setColor('#ff0000')は、さっきの関数と比べると、
 setColor('#ff0000')
 　　　　　↓
 setColor(color)
つまり、color='#ff0000'となった。
なので、関数を呼び出すとコンピュータの中では、

    function setColor('#ff0000'){
        setCookie("bg_color",#ff0000);　　←bg_colorというクッキーに#ff0000を保存
        document.bgColor = #ff0000;　　　　←背景色を#ff0000に設定
    }

となっている。
これで、背景のセットの仕方はわかったね。
最後に、クッキーを削除する方法もやっておくと。

<INPUT type=button onclick="delCookie('bg_color');document.bgColor='#ffffff';" value="リセット">

ここでは、ボタンを押すと、delCookie('bg_color')という命令を行う。
これも簡単だね、delCookie(キー)という命令はクッキーを消すプログラムとして作っているので、
delCookie('bg_color')とは、bg_colorという名前のクッキーを削除するという意味になるんだ。
ここでも、たったこれだけでクッキーの削除ができたね。
最後に、document.bgColor='#ffffff'で背景色を白にして終わり。
実際にプログラムを動かしてやってごらん。

このように、クッキーを使えばその人にあった背景を設定できるんだ。
つまり、これを使えばユーザーの思い通りのページが作れるというわけだね。
たとえば、好きなフォントの種類をセットさせたり、好きな背景画像、好きな罫線、好きな音楽・・・等なんでもできるね。
実は、これを使えば簡単な個人のカウンタだってできてしまうんだよ。
毎回クッキーのカウンタ数を呼び出して1を足していけばいいよね。
また、ヨッシーの”ホームページを作ろう！”で使っている”お家を建てよう！”のようなものも作ることができるんだよ。
このクッキーはいろいろと使い方があるからぜひ使えるようになろう。
※JavaScriptではブラウザの呼出しごとにプログラムが呼び出されるので、ページ移動ごとにアクセス数などは増えてしまう。
なので、カウンタはCGIのようにきちんとしたアクセスを計ることはできない。