|
|
|
03/16(Sun) 01:05
 訪問回数、初訪問日、前回訪問日(クッキーの基礎)
【バージョンアップのお知らせ】（2002/03/10）
訪問回数が1000を超えると0に戻る現在のやり方を、1000以上にも対応できるようにバージョンアップしました。バージョンアップする時は「クッキー修復」も必ず新バージョンのものに変更してください。クッキー修復の新バージョンはこちらです
変更箇所は下記のとおりです。（「クッキー関数」「メッセージの表示」には変更はありません）
- 「クッキー読み込みと処理」の「２回目以降クッキーを項目に分解」の分解処理を1000以上にも対応できるようにした（固定データフォーマットから可変データフォーマット対応に変更）
- 「クッキー書き込み」の固定データフォーマット変換部分を削除
- 「クッキー修復」を新バージョン対応に変更
【紹介リンク】電光掲示板表示版の入手先（2002/03/10）
このスクリプトを改良してテキスト表示を電光掲示板表示にしたものがオリジナルJavaScriptのホームさんの「オリジナルjavaS.素材集」→「その他15」→「訪問回数」で公開されてます。電光掲示板表示させたい方はこちらをご利用ください。
【紹介リンク】画像表示版の入手先（2001/09/20）
このスクリプトを改良してテキスト表示を画像表示にしたものが幻影の館（TAKAさん）（2009.3.19現在リンク切れです）の「SCRIPT ROOM」→「訪問回数/訪問日」で公開されてます。回数や日付を画像表示させたい方はこちらをご利用ください。
クッキーを使った訪問者ごとのアクセスカウンターと初訪問日、前回訪問日を表示するスクリプトです。
■ クッキーのメリット
- アクセスカウンターは全部で何人の人がページを見てくれたかは解りますが、ページの作者には意味があっても、訪問者にとっては、自分が何回目の訪問なのか？の情報の方が興味があるのではないでしょうか？
- このスクリプトは、ページを見てる人が何回目の訪問かを知ることができ、合わせて最初の訪問日と前回の訪問日を知ることができます。
- これから先のクッキーを使う基本となるスクリプトですのでソフト工作室のJavaScriptの「クッキー」にある他のクッキー関連のスクリプトを利用される方はこのスクリプト必ずインストールしてからお使い下さい。
このクッキーデータを使うと、
- 訪問回数によって表示する内容を変えたり、ある回数以上訪問して来てくれた人に感謝のメッセージを表示する
- 前回の訪問のあとに更新されたページを知らせる
- 前回の訪問からの訪問間隔に合わせてメッセージを変えて表示する
など訪問者に合わせてページをカスタマイズして表示することが可能になります。具体的な方法はそれぞれのスクリプトを参照して下さい。
このスクリプトの表示サンプルを下に示します。下の「訪問回数変更」を押して訪問回数を変更すれば表示内容が変わるのを確認できます。
＜表示例＞
■ クッキーを使う時の注意点
初めてクッキーを導入されるときは次の点に留意する必要があります。
- クッキーデータは訪問者のブラウザに記録され、ページにアクセスがあった時にサーバがそのデータを参照し、ブラウザ側に情報を渡します。
- そのため、処理が正常に行われることをあなたのパソコン上で十分確認した上でサーバに転送する必要があります。
- 万が一、処理にミスがあるとあなたの方からはクッキーデータを削除・修正する手段がありませんので、あなたの知らないうちに訪問者に迷惑をかけることがあります。
- と同時に、ミスったクッキーデータ読み込んで次のクッキー処理をしますので以降の処理が正常に行われないということにもなり兼ねません。
- でも心配する必要はありません。この解説どうりに行えば必ずうまくいます。上の事をいつも念頭において注意深く対処すれば大丈夫です。
■ 設置方法
あなたのパソコン上で正常動作が確認できるまでスクリプトの変更はしないで下さい。正常に動作することが確認できたら「メッセージの表示」部分をあなた好みの変更にトライしましょう。
■下のクッキー関数をヘッダ部<HEAD>〜</HEAD>の中に記述します。
スクリプトをマウスでドラッグし「コピー」「貼り付け」でコピーできます。
■ クッキー関数
この関数は変更しないで下さい。クッキー関数の説明はこちらです。
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
// クッキー関数(この関数は変更しないで下さい）
function setCookieData(data) // クッキー名(cookie_name)と消去日の設定
{
var expdate = new Date ();
expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000 * 30 * 1));
SetCookie (cookie_name, data, expdate);
}
function SetCookie (name,value) // 書き込み
{
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + value +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function GetCookie (name) // 検索
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal (offset) // 読み込み
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset,endstr));
}
function DeleteCookie (name) // 消去
{
var exp =new Date();
exp.setTime(exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
// クッキー関数終了
//-->
</SCRIPT>
]]>
|
■BODY部<BODY>〜</BODY>の中に下の文を記述します。それぞれの記述場所は下のとうりです。
- 「クッキー読み込みと処理」は<BODY>の次の行に
- 「メッセージの表示」は訪問回数などを表示したいあなたの好きな場所に
- 「クッキー書き込み」は</BODY>の前の行に
■ クッキー読み込みと処理
最初はこのままコピーして使います。クッキーに馴れて処理の内容が解るようになるまでは下の１項以外は変更しないで下さい。
- cookie_name="○○○";の○○○を他の人のクッキー名とダブらないように、必ずあなた固有の名前に変更します。私の場合は、tkiku_cookieにしています。
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
// by「菊池さん」 http://kikuchisan.net/
// クッキー読み込みと処理
cookie_name="○○○";
get_data = GetCookie(cookie_name);
now = new Date();
year = now.getYear(); if (year < 2000) year = year + 1900;
today = year
+ ((now.getMonth() < 9) ? "0" : "") + (now.getMonth()+1)
+ ((now.getDate() < 10) ? "0" : "") + now.getDate();
today=today.substring(0,4)+"/"+today.substring(4,6)+"/"+today.substring(6,8);
if (get_data == null) { // 初回訪問初期値セット
count = 1; //訪問回数
first = today; //初訪問日
last = today; //前回訪問日
lastp = "0000/00/00"; //前々回訪問日
} else { // ２回目以降クッキーを項目に分解
var pairs = new Array(),values = new Array(),str = new Array();
pairs = get_data.split(",");
for (i = 0; i < pairs.length; i++) {
str = pairs[i].split(":");
values[i] = str[1];
}
count = values[0];
first = values[1];
last = values[2];
lastp = values[3];
if (last != today) {
count++; //カウンター更新
lastp = last; //前回訪問日更新
}
}
// クッキー読み込みと処理(終り)
//-->
</SCRIPT>
]]>
|
■ メッセージの表示
この部分はクッキー処理とは一切関係ありませんので普通のJavaScriptと同じように自由に変更・追加してもかまいません。例えば、訪問回数のみの表示にしたい時は
<![CDATA[
document.write("初訪問日："+first+"<br>");
if (count != 1) document.write("前回訪問日："+lastp+"<br>");
]]>
を削除します。
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
// メッセージの表示
document.write("訪問回数："+count+"回目<br>");
document.write("初訪問日："+first+"<br>");
if (count != 1) document.write("前回訪問日："+lastp+"<br>");
// メッセージの表示(終り)
//-->
</SCRIPT>
]]>
|
■ クッキー書き込み
最初はこのままコピーして使います。クッキーに馴れて処理の内容が解るようになるまでは変更しないで下さい。
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
// クッキー書き込み
set_data="count:"+count+",first:"+first+",last:"+today+",lastp:"+lastp;
setCookieData(set_data);
// クッキー書き込み(終り)
//-->
</SCRIPT>
]]>
|
■ 動作確認
「クッキー修復ページ」を作成し訪問回数、初回訪問日を自分で変更して動作確認をします。
クッキー修復ページはこちらからダウンできます。
(注)上にある「訪問回数変更」ボタンを押すと、私のページに設置しているクッキー修復ページを見ることができます。クッキー修復ページをダウンするとこれと同じHTMLファイルが作れます。
■ 動作確認
（１）ブラウザで「クッキー修復ページ」を開き、クッキー修復ページの表示内容が以下と同じか確認します。以下の結果が得られればクッキーは正常に動作しています。確認項目は
- ○○○があなたの付けた名前になってるか
- countが1か
- first、lastの日付2002/03/10が今日(あなたが最初にクッキーを使った日)の日付になってるか
（初めて設置された方はlastpは0000/00/00と表示されます。翌日に前々回訪問日の日付がセットされます）
＜クッキー修復ページの表示内容＞
あなた様の現在のクッキーの内容
| ○○○=count:1,first:2002/03/10,last:2002/03/10,lastp:0000/00/00 |
count:訪問回数、first:初回訪問日、last:前回訪問日、lastp:前々回訪問日
（２）クッキー修復ページを使って訪問回数、初回訪問日を自分で変更してクッキーの値が変更した値になってるか、メッセージ表示が目的の内容かを確認します。
おめでとうございます!! これで完成です。必要なら「メッセージの表示」の部分をあなた専用の内容に変更してサーバに転送しましょう。
■(1999.05.03)クッキーデータの修復による動作確認方法を追加しました。
■(1999.04.29)８回目以降のカウントがおかしくなる問題(parseInt関数が原因)を修正しました。4/27〜29の間にスクリプトをコピーされた方は「クッキー読み込みと処理」の入れ替えをお願いします。
|
|
