ページの装飾に関するTips


・What's New for you - あなた専用の更新日管理

NN2Unknown NN3Bug NN4OK MozillaOK IE3OK IE4OK

「What's New」では更新マークの自動表示制御をしましたが、 頻繁に訪れない人にとっては最近更新されたものは判りますが、 それ以上前に更新された項目は判りません。

そこで Cookie の仕組みを組合せれば、訪れた人にとっての更新管理ができます。

つまり、最後に訪れた日にちを Cookie として設定しておき、 次回に訪れた時にその間更新された項目に更新マークをつければ良いわけです。

以下のコードはそのような目的のものです。


// 定数&変数
nimg = "new.gif";                     // 新規アイコン画像
uimg = "up.gif";                      // 更新アイコン画像

expireperiod=1000*60*60*24*365;       // 有効期間( msec )
vdname      ='ShinSoftCookieVisitD';  // Cookie名
visitday    =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 setVisitD(){
  var today   = new Date();
  var expires = new Date();
  expires.setTime(expires.getTime()+expireperiod);
  var cy = today.getYear();
  if(cy<  70) cy+=2000;
  if(cy<1900) cy+=1900;
  var cm = ''+(today.getMonth()+1);
  var cd = ''+ today.getDate();
  if(cm<10) cm='0'+cm;
  if(cd<10) cd='0'+cd;
  visitday=''+cy+cm+cd;
  setCookie(vdname,visitday,expires);
  vdnewerflag=true;
}
// 訪問日を取出す関数
function getVisitD(){
  if(visitday==null){
    if((visitday=getCookie(vdname)) == null){
      setVisitD();
    }
  }
  return visitday;
}
// 訪問日以降に更新されているかをチェックする関数
function compareToday(y,m,d){
  var vd = getVisitD();
  if(y<  70) y+=2000;
  if(y<1900) y+=1900;
  var md = ''+y+((m<10)?'0':'')+m+((d<10)?'0':'')+d;
  if(md >= vd) return 1;
  return -1;
}
// 更新管理関数
function WhatsNew4U(sy,sm,sd,k){
  var s='';
  if(compareToday(sy,sm,sd)>0){
    var alt=sy+'.'+sm+'/'+sd;
    s = '<img src="'+((k=='n')?nimg:uimg)
      + '" alt="'+alt+'" title="'+alt+'" height=16>';
  }
  return s;
}

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

nimg, uimgは 前回の訪問日から更新されている項目に表示する新規項目用と更新項目用のアイコン画像の指定です。

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

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

WhatsNew4U関数内の alt変数 は画像にマウスが触れた時に 表示される Tip 表示用の文字列で、このサンプルでは「yyyy.mm/dd」の形式になっています。 必要に応じて修正します。
また、s変数の設定は IMG タグの成形ですが、 画像サイズ( height指定 )など必要に応じて修正します。

更新マークは WhatsNew4U関数を呼び出した結果を document.write することで行います。 この関数の呼出形式を以下に示します。

WhatsNew4U(sy,sm,sd,k);
sy,sm,sd : 更新日。各変数はそれぞれ「西暦年(4桁)」「月」「日」
k        : 更新マークの種別
           'n' : 新規
           'u' : 更新

使用方法

訪問日を更新するには、単に setVisitD() 関数を呼び出すだけです。

更新マークの表示は、マークを必要とする場所で WhatsNew4U() 関数を呼出します。

●HTML書法 Tips集 
<script language="JavaScript"><!--
WhatsNew4U(1997,4,20,'n'); // --></script>
●JavaScript Tips集 
<script language="JavaScript"><!--
WhatsNew4U(1997,12,20,'u'); // --></script>

結果

最後の訪問日が 1997年1月20日なら
●HTML書法 Tips集 1997.4/20
●JavaScript Tips集 1997.12/20

最後の訪問日が 1997年7月20日なら
●HTML書法 Tips集
●JavaScript Tips集 1997.12/20

サンプルはこちら


注意事項

caution
このスクリプトは最初の訪問日以外は Cookie を更新しません。 これは、自動更新すると他のページを見て元のページに戻ると、 さっきまで表示していた更新マークが消えてしまうからです。 この問題の回答は訪問日の更新を訪問者自身に委ねることでしょう。f(^^;
caution
訪問者が最後に訪れた時になかった項目が、その後追加・更新された場合、 次に訪問した時の更新マークは「新規」ではなく「更新」になります。

これを解決するには、WhatsNew4U 関数のインターフェイスに 新規か更新かではなく、最終更新日と登録日に変更する必要があります。
( チャレンジしてみて下さい ) f(^^; ← 手抜き
Netscape Navigator3.01Ja
サンプルページを何度かリロードしているとフリーズしました(原因不明)。

Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.