JavaScript Tips collection

通常 JavaScript ではブラウザ側のディスクアクセスはできませんが、 Cookie を使用すればページ内の情報を一時的にディスクに保存することができます。 Cookie カウンタはこの仕組みを利用してクライアントサイドでカウントするアクセスカウンタです。

通常のアクセスカウンタはCGIを利用し、そのページを参照した延べ人数をカウンタで表現します。

Cookieカウンタはその人（正確にはそのマシン）から、そのページを参照（履歴の参照も含めて）した延べ回数をカウントします。

以下にコードを示します。

<script language="JavaScript"><!--
// 定数＆変数
expireperiod=1000*60*60*24*365;       // 有効期間( msec )
countername ='ShinSoftCookieCounter'; // Cookie名
digits      =6;                       // 表示桁数
count=null;

// Cookie 設定関数
function setCookie(name,value,expire){
  document.cookie
    = name + '=' + escape(value)
    + ((expire==null)?'':('; expires='+expire.toGMTString()));
}
// Cookie 取得関数
function getCookie(name){
  var search = name + '=';
  if (document.cookie.length>0) {
    offset = document.cookie.indexOf(search);
    if (offset != -1){
      offset += search.length;
      end     = document.cookie.indexOf(';',offset);
      if(end == -1)
        end = document.cookie.length;
      return unescape(document.cookie.substring(offset,end));
    }
  }
  return null;
}
// 数字列生成関数
function createDigit(n){
  var ct='';
  var sn=''+n;
  for(var i=0;i<(digits-sn.length);i++) ct+='0';
  return ct+n;
}
// アクセスカウンタ値取得関数
function getCC(){
  if (count == null){
    var today = new Date();
    var expires=today;
    expires.setTime(today.getTime()+expireperiod);
    if((count=getCookie(countername)) == null)
      count=0;
    count++;
    setCookie(countername,count,expires);
  }
  return count;
}
// --></script>

この文字の部分は必要に応じて修正します。

expireperiodは Cookie の有効期限です。その人が訪れた時に生成した Cookie をどれくらいの期間保存しておくか msec 単位で指定します。

countername は保存する Cookie の名称です。生成した Cookie が他の Cookie 情報と混在しないように固有の名称を付けます。

digits はカウンタとして表示する際の桁数を数字で指定します。

Cookie カウンタを表示するには getCC関数で取得した数値を createDigit関数に渡せば表示用文字列が得られますのでこれを document.write します。
これらの関数の呼出形式を以下に示します。

getCC();
引数なし

createDigit(n);
n : 表示する数値

使用方法は簡単です。
BODY部の表示したいところで以下のように記述します。

<script language="JavaScript"><!--
document.write(
   '<p>あなたは'
  +createDigit(getCC())
  +'回目の訪問です<\/p>');
// --></script>

出力する HTML に工夫を凝らせば、通常のカウンタのように見せることもできます。

<script language="JavaScript"><!--
document.write(
   '<table border=0 cellspacing=0 cellpadding=0><tr>'
  +'<th>あなたは <\/th>'
  +'<th bgColor="#000000"><font color="#00ff00">'
  + createDigit(getCC())+'<\/font><\/th>'
  +'<th> 回目の訪問です <code>f(^^;<\/code><\/th>'
  +'<\/tr><\/table>'
  );
// --></script>

ここで挙げたスクリプトは数字列を生成するものですが、 createDigit関数をアレンジすれば簡単に画像にすることもできます。

digitprefix = 'images/d'; // カウンタ用数字画像の接頭文字

// カウンタ画像生成関数
function createDigit(n){
  var s='';
  for(var i=0; i<digits; i++){
    var d=n%10;
    n=parseInt('0'+n/10);
    s='<img src="'+digitprefix+d+'.gif"'
     +' border=0 alt="'+d+'">'+s;
  }
  return s;
}

この文字の部分は必要に応じて修正します。

使用する画像ファイルは例えば d0.gif, d1.gif, ... d9.gif と言う具合に表示する数値を含むファイル名で、 digitprefixは画像ファイルの数値部分までのパスを含む文字列を指定します。

createDigit関数内の .gif は同様に数値以降の文字列を指定します。

ページの装飾に関するTips

Cookie を使用したアクセスカウンタ