入力を省略する例
クッキーを利用することにより、いつも入力する項目を省略することができます。ある組織の中で掃除当番や発表者をくじ引きで決めることがあります。
あみだくじゲームで決める場合は参加人数を指定する必要があり、この人数は一定していることが多く、前回の値を記憶しておけば、入力を省略することができます。
前回の参加人数をクッキーに保存し、次回に利用する例を挙げます。
動作例
アプリを動作させると、ここでは参加人数の初期値は10に設定されます。あみだくじ参加人数を設定し、再び、起動すると前回の参加人数に初期値が切り替わります。その人数でよければ、オレンジの確定ボタンをクリックすると、参加人数の設定を省略することができます。
クッキー具体例 ©TacM, 2018 Ver0.01
「あみだくじ参加人数を設定中」
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
あみだくじの作り方についてはあみだくじの資料を参照してください。
サンプルコード
<!doctype html> <!-- participants.html, 2018-06-26 -->
<html>
<body>
<p style="font-size:32px; color:royalblue;">クッキー具体例<span style="font-size:12px; color:magenta;"> ©TacM, 2018 Ver0.01</span></p>
<input id='sp' type="number" id="step2" min="3" max="16" step="1" value="10" style="width:50px; font-size:20px; font-weigt:bold; color:navy;">
<a onclick='numberSet()'><span style="text-decoration:underline; color:orange; font-size:20px;"> 参加人数（3～16）</span></a>
<div id="guide" style="font-size:28px; color:green;">「あみだくじ参加人数を設定中」</div>
<script type="text/javascript" charset="Shift_JIS">
const keyName = "numberOfParticipants"; //2018-06-24-20:25
const maxAge=24; //保存期間、24時間
var speed = 10; //参加人数初期値
if (!navigator.cookieEnabled) alert("cookieを使用可能にしてください。"); //cookieを使用できるようにする
var velocity = GetCookie(keyName); //参加人数を取得
console.log("VELOCITY=",velocity,speed);
if(velocity != speed) document.getElementById('sp').value = velocity; //参加人数を更新する
function numberSet(){ //参加人数を設定
var w = document.getElementById('sp').value;
console.log("numberSet", w);
SetCookie(keyName, w); //クッキー保存
document.getElementById('guide').innerHTML = "参加人数を"+w+"人に決定しました。";
}
function GetCookie( name ){ //クッキーを取得
var cookieName = name + '=';
var allcookies = document.cookie; //クッキー全体
var position = allcookies.indexOf( cookieName ); //キーで指定された項目の位置
var score = speed; //未登録時の暗黙値
console.log("GetCookie, allcookies="+allcookies+" position="+position);
if( position != -1 ){ //登録されている
var startIndex = position + cookieName.length;
var endIndex = allcookies.indexOf( ';', startIndex );
if( endIndex == -1 ){ //単数、複数の処理
endIndex = allcookies.length; //終わりの位置
}
score = decodeURIComponent(allcookies.substring(startIndex, endIndex)); //指定キーのデータを抽出
}
return score;
}
function SetCookie( name, data){ //クッキー保存
var expire = new Date();
expire.setTime( expire.getTime() + 1000 * 3600 * maxAge ); //保存期間
var newData = name + '=' + data + ';expires=' + expire.toUTCString();
console.log("SetCookie", name, data, newData);
document.cookie = newData; //cookieを更新する
}
</script>
</body>
</html>
余禄
JavaScriptなどのオブジェクト指向言語は、コードの記述量が少なくて済み開発工数の削減につながります。
かつては表（テーブル）をコード化する際、9999や-1、文字データならば//などを最後の項目に定義して、柔軟性のあるプログラミングをしていましたが、機能豊かな言語では、rows.lengthのようにテーブルの属性を指定すると項目数が得られるようになっています。
一方、テレビのチャンネル番号のように、最後に利用した番号を記憶する方式は利便性が高いです。
あみだくじ参加人数は一定の場合が多く、クッキーを使って前回の参加人数を暗黙値として指定することができ、具体例を示しました。