DHTML -2-

　マウスによるオペレーションによってレイヤーを自在に動作させる場合、Cookie と組み合わせをして座標位置を記録していくことが出来れば、なかなか面白い効果を出すことが可能になります。
　ここでは、第６章の動作例である「マウスのＤｎＤでレイヤーを動かす」システムに、Cookieによるデータ読み込みシステムを追加してみることにしましょう。

クッキーによる座標記録の例

<Html>
<Head>
  <Script Language = "Javascript">


    isIE4 = (document.all) ? 1 : 0;
    isNS4 = (document.layers) ? 1 : 0;
    isNS6 = navigator.appVersion.charAt(0) == 5 
                  && navigator.appName.charAt(0) == "N";


    var Layer_Message = "<Table border=0 width=100 height=100 
        Bgcolor='#8899bb'><Tr><Td>画面上をＤｎＤ</Td></Tr></Table>";

//レイヤーの書き込み
    if ( isIE4 || isNS6 ){
      document.write("<Div id='MSG' style='position:absolute;display:
                                 block;top:60;left:50'>");
      document.write( Layer_Message );
      document.write("</Div>");
    } else if( isNS4 ) {
      document.write("<Layer name='MSG'
                    visibility='show'top='60'left='50'>");
      document.write( Layer_Message );
      document.write("</Layer>");
    }

//マウスイベントの取得
    if (isNS4){
      document.captureEvents(Event.MOUSEMOVE|
                  Event.MOUSEDOWN|Event.MOUSEUP);
    }
    document.onmousemove = mousemove;
    document.onmousedown = mousedown;
    document.onmouseup = mouseup;

//グローバル変数の宣言
    var mousecheck = false;
    var nowX = 0 , nowY = 0;
    var mouseX = 0 , mouseY = 0;

//マウスクリックダウンによる動作
    function mousedown(myEvents){
      mousecheck = true;
      NowMouseLocation(myEvents);

      if (isIE4 || isNS6){
        Llo = document.getElementById("MSG");
        nowX = parseInt(Llo.style.left,10);
        nowY = parseInt(Llo.style.top, 10);
      } else if (isNS4){
        nowX = document.layers["MSG"].left;
        nowY = document.layers["MSG"].top;
      }
      nowX = mouseX - nowX;
      nowY = mouseY - nowY;
    }

//マウスクリックアップによる動作
    function mouseup(myEvents){
      mousecheck = false;
      setCookie("H_X",(mouseX - nowX),10);
      setCookie("H_Y",(mouseY - nowY),10);
    }

//マウスクムーブによる動作
    function mousemove(myEvents){
      if (!mousecheck) return;

      NowMouseLocation(myEvents);
      LayerLocation( (mouseX - nowX) , (mouseY - nowY) );
    }


//マウスの現在位置取得
  function NowMouseLocation(myEvents){
    if (isIE4){
      mouseX = window.event.clientX + 
                      document.body.scrollLeft; 
      mouseY = window.event.clientY + 
                      document.body.scrollTop ;
    }else if(isNS6 || isNS4) {
      mouseX = myEvents.pageX;
      mouseY = myEvents.pageY;
    }
  }

//レイヤー座標移動
  function LayerLocation(LX,LY){
    if (isIE4 || isNS6){
      el = document.getElementById("MSG");
      el.style.left = LX
      el.style.top  = LY;
    } else if (isNS4) {
      document.layers["MSG"].
          moveTo(LX,LY);
    }
  }

//レイヤーの初期配置
  function startwindow(){
    var XXX = parseInt(getCookie("H_X"));
    var YYY = parseInt(getCookie("H_Y"));
    if ( isNaN(XXX) && isNaN(YYY) ){
      XXX = 60; YYY = 60;
    }
    LayerLocation(XXX,YYY);
  }

/////////////////////////////
//クッキーの書き込み
  function setCookie(name, value, exp) {
    expire = dataLong(exp);
    document.cookie = name + 
      "=" + escape(value) + ((expire == null) ? "" : 
      (";expires =" + expire.toGMTString()));
  }
  function dataLong(Days){
    var expdate = new Date ();
    expdate.setTime ( expdate.getTime() +
                        (Days*24*60*60*1000)); 
    return expdate;
  }

//クッキーの読み込み
  function getCookie (name) {
    if (!CookieState) return;
    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));
  }


  </Script>
</Head>
<Body OnLoad="startwindow()" >
　画面上の任意の位置をドラッグアンドドロップしてください<Br>
　レイヤーがその動作にあわせて動きます。<Br>
　マウスを離した時のレイヤー位置を記録して、リロード時に反映します。
</Body>
</Html>

■動作例
注意：この動作例は、Cookieを通じで、お使いのパソコン上に情報を書き込むルーチンが
含まれています。

　クッキーの読み込み、書き込み、そしてそれを反映させるための起動ルーチンを追加したのがこのスクリプトになります。
　さすがにここまで長いと、説明文を個別に書いていっても分かりにくいでしょうから、まずはスクリプトの流れを理解してもらって、それから順次説明していくことにしましょう。

フローチャート図
　ここで示したのは、あくまでスクリプトの流れであって、厳密な意味でのチャート図の書き方通りの動きはしていませんが、概要は分かってもらえると思います。　それでは、順を追って説明していきましょう。

１：読み込み完了までの作業

OnLoad動作
　ＤＨＴＭＬは最初に呼び出しされると、全てのスクリプトとタグを読み込みます。


  <Body OnLoad="startwindow()" >

　は、一通り読み終わった後に発動するスクリプトを指定する「 OnLoad="startwindow()" 」を指定することで、ページが読み終わり次第、「 startwindow() 」ファンクションが呼び出しされます。


  function startwindow(){
    var XXX = parseInt(getCookie("H_X"));
    var YYY = parseInt(getCookie("H_Y"));
    if ( isNaN(XXX) && isNaN(YYY) ){
      XXX = 60; YYY = 60;
    }
    LayerLocation(XXX,YYY);
  }

　呼び出しされたファンクションでは、

　　「１」：レイヤーのＸ座標とＹ座標をクッキーから呼び出す
　　「２」：数値が存在したらそのまま代入
　　「３」：数値が存在しなかったら規定値を代入

　します。　ここでは、 「 H_X 」と「 H_Y 」 の２つの識別子を持っているクッキーの呼び出しをしています。
　parseInt(getCookie("～"))　記述は、文字列で記録されているデータを数値に置き換えるために、parseIntで変換を行っていることを示しています。

　様々な要因でクッキーが呼び出し出来ない場合があります。　ユーザーがクッキーの受け取りを拒否している場合はデータが書き込まれませんし、そもそも最初にページへ来たユーザーは、クッキーの情報を持っていません。
　クッキーのデータが存在しない場合は、データは「 undefined 」が帰ってきます。　これを数値変換しようとしても不可能ですので、数値データが存在していない場合は 「NaN」(not a number) という文字列が挿入されます。このため、読み込まれたクッキーが正常かどうかを判定する条件分岐文が、


    if ( isNaN(XXX) && isNaN(YYY) ){ }

　となります。　条件があった場合、つまり、数値が存在しなかった場合は、規定値の６０を、ＸＸＸとＹＹＹへ代入し、
　LayerLocation()ファンクションへ受け渡しを行って、実際の位置に反映させます。

２：マウスのクリックダウンに関する処理

mousedown動作
　この部分は、前章のレイヤーの部分で説明していますのでここでは割愛しますが、基本的に

　　「１」マウスの現在座標を取得
　　「２」マウスの現在位置とレイヤー位置との差分を計算
　　「３」マウスＤｎＤを認可する

の３動作になります。　このスクリプトは、マウスをクリックしたその１回でのみ動作し、いったん動作すると、マウスのクリックを止めて、再びクリックしなおしするまでは発動しないファンクションであることに注意しておく必要があります。

３：マウスのムーブに関する処理

mousemove動作
　この部分も、上のスクリプト同様、すでに説明をしていますのでここでは割愛します。　動作は

　　「１」マウスがクリックされているかをチェック
　　「２」マウスの現在位置を取得
　　「３」「 mousedown() 」で取得した差分を適応する
　　「４」実際のレイヤーに反映させる

　の４動作になります。　前回のスクリプトでは、「３」の動作スクリプトは、「 mousemove() 」ファンクションに内包されていましたが、今回は「 mouseup() 」で同様の処理が必要となる関係からファンクション化し、「 LayerLocation() 」としています。
　このスクリプトは、マウスを動かすたびに連続的に発動します。

４：マウスのクリックアップに関する処理

mouseup動作
　マウスをクリックアップしたとき、現在のレイヤーの位置をクッキーへ書き込することになります。　こうすることで、将来複数のレイヤーを制御している場合でも、動かしたレイヤーだけを記録することが出来るので、処理負荷を軽減させることが可能になります。


    function mouseup(myEvents){
      mousecheck = false;
      setCookie("H_X",(mouseX - nowX),10);
      setCookie("H_Y",(mouseY - nowY),10);
    }

　このスクリプトでは、「 mousemove() 」ファンクションで行われている作業とほぼ同等の処理を行っています。　違いが、脚集出力がレイヤーの移動ではなく、クッキーへの書き込みであるという点です。
　setCookie("H_X",(mouseX - nowX),10);　は、レイヤーのＸ座標を「H_M」という名前で１０日間記録するということを意味しています。　同様にＹ座標も記録することで、現在のレイヤーの座標を格納することが可能になるわけです。

ページの最上段へ移動します