紀井 斎（制作部長）
新技術の導入、新商材の開発まで手掛け品質・運用管理を統括
食品メーカー内の情報処理部門における基幹システム運用管理・インフラ整備・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点です。
あとは、要素数がふえれば、その数だけループさせる仕組みにすれば、汎用性も高くなります。
保存期間のところをブランクにすると、情報は仮想メモリにとどまるだけとなりますので、ブラウザを閉じた際には消失します。
その特性を活かして、接続状態の確認に利用するケースが多いと思います。
また、上記のプログラムは、完全なものではありません。解説しやすいように一部省略しております。
プログラム自体は、ご自由にご利用いただいてかまいませんが、自己責任にてお願い申し上げます。
以上、長文となりましたが、今回の記事を締めくくりたいと思います。
この記事に関連するテーマ
今日は、Webコンサルタント.jpの紀井でございます。
成長とは、様々な意味を持っていると思います。
精神的な成長、身体の成長、スキルの成長等々。
多くの企業で経営層が求める「成長」とは、自社成長のはずです。
「人・物・金」どれもその成長の枠に当てはまってきますが、「人の成長」にスポットをあて、今回はコラムを綴ってまいりますので、しばしお付き合いいただければ幸いでございます。
「あなたの自己成長への足がかりは何ですか」と尋ねられた時に、私は自分の事なのにも関わらず「なんだろうか？」と思案してしまった時の話です。
ある人は言います。「尊敬する人を真似ているんですよ。」
また、ある人は言います。「本を読んで、自分なりに解釈したものを自らの発言としています。」
他にも、「先日参加してきたセミナーで勉強してきました。」
等々、成長への足がかりは人それぞれです。
私は、自身の仕事を管理職として、立場上、指示を行う事や過ちを是正する事が多い為、気を抜くと一方通行になりかねません。
だからこそ、気づく為にアンテナを張ることが重要だと思うようになりました。
組織体制は整っているか、モチベーションは得れているか、人間関係は良好か等々、日常的に交わすメールですら気づきの要素となっており、それこそが、自己成長に繋がっていたのです。
気づきの連鎖＝自己成長
常にこの図式を描けるようにしていきたく決意を固めつつ、本日のコラムを締めくくりたく思います。
※今回はCSS3で装飾に細工を施しました。まだまだ各ブラウザで対応していないようですが、Safari3でその動きを確認できます。今後リリースされるブラウザの対応に期待です。
この記事に関連するテーマ
