JavaScript Tips collection - gadget for supervisor

ホームページにはよくアクセスカウンタを付けます。苦労して作ったページがみんなからアクセスされていることがわかるのはなかなか楽しいものです。

然し、ゆっくりとしか上がらない時やたまにしか確認しない場合、以前と比較してどれぐらいアクセスされたのか気になる人もいるでしょう。

そのような人には cookie を利用してカウンタ値を記憶しておいてはいかがでしょう？

<head>
    :
<script language="JavaScript"><!--
//====================== カスタマイズ範囲 =======================
                                 // アクセスカウンタ用 CGI の定義
curl    = '/cgi-bin/Count.exe';  // カウンタURL
cpre    = 'dd=D|incr=F|ft=0|df=';// オプション１( パラメータ )
cpst    = '.dat';                // オプション２( サフィックス )
tbColor = '#7070b0';             // 表の背景色
ttColor = '#8080c0';             // 表タイトルの背景色

                                 // Cookie の定義
cookiename   = 'ShinSoftHagi3Counters'; // クッキー名称
expireperiod = 1000*60*60*24*365;       // 廃棄処分までの期間

function DefCounters(){
  var i = 0;
  //  DefCounter( タイトル, カウンタファイル名, URL );
  this[i] = new DefCounter(
                  'はぎさんちのページ',
                  'hagi3_0',
                  '/~hagi3/index.htm'
                  ); i++;
  this[i] = new DefCounter(
                  'HTML書法 Tips集',
                  'hagi3_1',
                  '/~hagi3/HTML/HowToHTML/Default.htm'
                  ); i++;
  this[i] = new DefCounter(
                  'JavaScript Tips集',
                  'hagi3_2',
                  '/~hagi3/JavaScript/JSTips/Default.htm'
                  ); i++;
  this[i] = new DefCounter(
                  'そんな Java な！',
                  'hagi3_3',
                  '/~hagi3/Java/JavaLab/index.htm'
                  ); i++;
  this.length = i;
  return this;
}
//===============================================================
// カウンタ定義
counters = new DefCounters();
// カウンタ定義生成
function DefCounter(ttl,fnm,url){
  this.title = ttl;
  this.fname = fnm;
  this.url   = url;
  return this;
}
// 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 Counter(name,value){
  this.name  = name;
  this.value = value;
  return this;
}
// カウンタ値記憶
function setCounters(cnts){
  var d = new Date(), e = new Date();
  var i, v = ''+d.getTime();
  for(i=0; i<cnts.length; i++){
    v += ';' + cnts[i].name + ','+ cnts[i].value;
  }
  e.setTime(e.getTime()+expireperiod);
  setCookie(cookiename,v,e);
}
// カウンタ記憶値設定
function getCounters(frm){
  var v = getCookie(cookiename);
  if(v != null){
    var va = v.split(';');
    if(va.length > 1){
      var td = new Date();
      td.setTime(va[0]);
      frm.date.value =
            td.getYear()    +'年'
          +(td.getMonth()+1)+'月'
          + td.getDate()    +'日';
      for(var i=1; i<va.length; i++){
        var cv = va[i].split(',');
        for(var j=0; j<frm.elements.length; j++){
          if(frm.elements[j].name == cv[0])
            frm.elements[j].value = cv[1];
        }
      }
      return true;
    }
  }
  return false;
}
// カウンタ設定値記憶
function setC(frm){
  var na = new Array();
  for(var i=0; i<frm.elements.length; i++){
    var nm = frm.elements[i].name;
    if(nm!='' && nm!='set' && nm!='date')
      na[i] = new Counter(
                 frm.elements[i].name,
                 frm.elements[i].value);
  }
  setCounters(na);
  getCounters(frm);
}
// カウンタ表の表示
function printTable(){
  document.writeln(
     '<form name="f"><div align=center>'
    +'<table border=1 bgColor="'+tbColor+'" cellpadding=5>'
    +'<tr bgColor="'+ttColor+'">'
    +  '<th>コンテンツ<\/th>'
    +  '<th>カウンタ名<\/th>'
    +  '<th>参照値<\/th>'
    +  '<th>記憶<\/th>'
    +'<\/tr>'
    );
  for(i=0; i<counters.length;i++){
    document.writeln(
       '<tr>'
      +  '<th>'
      +    '<a href="'+counters[i].url+'">'
      +      counters[i].title
      +    '<\/a>
      +  '<\/th><td>'
      +    '<code>'+counters[i].fname+'<\/code>'
      +  '<\/td><td>'
      +    '<img src="'+curl+'?'+cpre+counters[i].fname+cpst+'">'
      +  '<\/td><td>'
      +    '<input type="text" name="'+counters[i].fname+'" '
      +        'size=6 value="">'
      +  '<\/td>'
      +'<\/tr>'
      );
  }
  document.writeln(
     '<tr><td colspan=4 align=right>'
    +  '最後に記憶した日　'
    +  '<input type="text"   name="date" value="" size=12>　'
    +  '<input type="button" name="set"  value="記憶する" '
    +      'onClick="setC(form);">'
    +'<\/td><\/tr>'
    +'<\/table>'
    +'<\/div><\/form>'
    );
}
// --></script>
</head>
<body ...>
    :
<script language="JavaScript"><!--
printTable();
getCounters(document.f);
// --></script>
    :

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

curl はカウンタCGI の URL です。

cpre,cpst はカウンタCGIのパラメータ( "?"以降の部分 )のうちカウンタ値のファイル名の前までの部分を cpre に、ファイル名の後以降の部分を cpst に指定します。

#> カウンタ CGI用のパラメータには、該当ページに設定されているそのままを指定するとカウントアップしてしまいますので、参照のみのオプションが使える場合は、そのオプションも指定します。

tbColor, ttColorは出力するテーブルの配色を指定します。
tbColorはテーブル全体の背景色を、 ttColorはテーブルの見出し部分の背景色を指定します。

DefCounterは参照したいカウンタの定義を DefCounter関数を使用して必要な数だけ定義します。
DefCounter関数の呼出形式は以下の通りです。

cookiename, expireperiodは Cookie に関する定義です。
cookienameは使用する Cookie名を
expireperiodは Cookie の有効期間をミリ秒単位で指定します。

このスクリプトでは指定されたカウンタ画像と記憶している設定値を表示します ( 設定値がなければ空白 )。

カウンタを記憶させるには、表示されたカウンタ値を隣のテキスト入力域に入力します。全て入力をしたら「記憶する」ボタンを操作すると、操作した日付と各値を Cookie に記憶します。

実際のサンプルはこちらです。

管理者のためのTips

アクセスカウンタ管理