紀井 斎（制作部長）
新技術の導入、新商材の開発まで手掛け品質・運用管理を統括
食品メーカー内の情報処理部門における基幹システム運用管理・インフラ整備・Webサイト制作などで得た豊富な経験をもとに、Webサイト構築、品質管理、運用管理、新技術の検証・導入、新商材の企画・開発を行う。現在は、制作部門のマネジメントを担うとともに社員育成にも力を入れ、社内大学制度では自ら講師として教壇に立って人材の”人財化”を推進。企業価値を高められる人材創出に奔走している。
プログラミング人材育成品質管理
今日は、Webコンサルタント.jpの紀井でございます。
今回は、昔からある技術 クッキーについて備忘録もかねて綴りたいと思います。
最近、社内向けのツールでフォームを設置したりする事があったのですが、ユーザビリティを考え久しく利用していなかったクッキーを用いる事にしました。
久しぶりに利用した為、かなり忘れている自分に驚愕。
クッキーの正式な名前はHTTP cookieといいます。Cookieなどと呼ばれたりもするのですが、ありきたりなセリフですが、「食べ物のクッキーではありません」のでお気をつけください。
クッキーの生い立ちは置いておくとして、クッキーの利用目的は、利用者の識別や接続状態の管理で、古くは掲示板やチャット等に用いられる事が多かったと記憶しています。
他にも買い物カートのような仕組みにも組み込まれているようです。
クッキーは、利用者のＰＣ端末の中にデータを格納仕組みになっているのですが、利用方法も2通りあります。
1 指定の情報をメモリに保存（次回アクセス時も利用可能）。
2 接続状態だけを仮想メモリに保存（ブラウザを閉じる事で情報は削除されます）。セッション管理といいます。
プログラムの作りについては、続きをどうぞ・・・
利用者の名前とメールアドレスを毎回入力してもらう手間を省きたいというニーズがありましたので、まずは全体像から
1 名前を入力 → 入力完了時に、cookieで保存 → メールアドレスを入力 → 入力完了時に、cookieで保存
2 ページリロード時に、cookieで保存されたデータを当該箇所に呼び出す。
3 次回アクセス時、1へ回帰。もしくは、もう入力しない。
ブラウザ上では、上記の流れで利用します。
今回、条件として入力フォームはHTMLファイルとなっていましたので、Javascriptで記述する事にしました。
用意するファイルは、HTMLとJavascriptの2ファイルだけです。
HTML側（index.html）
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<script type="text/javascript" src="./js/cookie.js"></script>
</head>
<body>
<form action="***" method="post">
お名前 <input type="text" name="お名前" value="" id="user" onchange="set_cookie('user')" />
メールアドレス <input type="text" name="メールアドレス" value="" id="mail" onchange="set_cookie('mail');" />
</form>
</body>
</html>
※説明の為、簡素化してありますのでWeb標準に準拠しておりません。
javascript側で処理しやすくする為に、各inputにはidを割り振ります
値入力完了時にcookie保存する処理を実行したい為、イベントのonchangeを設定
処理名は、set_cookie()として、id名を渡しておきます。
Javascript側（cookie.js)
window.onload = function reload() {
this.read_cookie();//リロード時の処理内容
}
//-------------------------------------------------------------------
// クッキーへの書き込み
//-------------------------------------------------------------------
function set_cookie(str_id){//html側でonchangeされた時にid名が渡される
//-- 初期設定
var limit = 30;//保持日数
sday = new Date();//日付データ取得
sday.setTime(sday.getTime() + (limit * 1000 * 60 * 60 * 24));//保持日数を加味して、日付データの再生成
s2day = sday.toGMTString();//グリニッジ標準時刻形式へ変換
//-- クッキーデータの格納
document.cookie = str_id + "=" + escape(document.getElementById(str_id).value) + ";expires=" + s2day;
}
//-------------------------------------------------------------------
// クッキーから読み込み
//-------------------------------------------------------------------
function read_cookie(){
var scookie = document.cookie// クッキー情報を読み込む
var scdata = scookie.split("; ");//「; 」で分割
var scdata_num = scdata.length;//配列数を取得
for(i=0; i<scdata_num; i++){//配列数だけループ
scdata_str = scdata[i].split("=");//「=」で分割
document.getElementById(scdata_str[0]).value = unescape(scdata_str[1]);//該当箇所へ反映
}
}
となります。
クッキー利用でのポイントは
書き込みでは、「key=値;expires=保存の期限（グリニッジ標準時間）」で書き込まれるという事。
読み込みでは、「key=値; key=値; key=値; key=値; ・・・・」という形式で格納されているという事。
のたったの2点です。
あとは、要素数がふえれば、その数だけループさせる仕組みにすれば、汎用性も高くなります。
保存期間のところをブランクにすると、情報は仮想メモリにとどまるだけとなりますので、ブラウザを閉じた際には消失します。
その特性を活かして、接続状態の確認に利用するケースが多いと思います。
また、上記のプログラムは、完全なものではありません。解説しやすいように一部省略しております。
プログラム自体は、ご自由にご利用いただいてかまいませんが、自己責任にてお願い申し上げます。
以上、長文となりましたが、今回の記事を締めくくりたいと思います。
この記事に関連するテーマ
