No.10 初期状態の作成
01 Javascript 読み込み完了時の状態
 
 本スクリプトは、ユーザーが処理を行う状態を作成する前段階において、様々な処理を行います。
 主な作業は、
   1: 製作者ステータス情報の読込
   2: 表示するレイヤー情報の読込
   3: ローディングメッセージの作成(表示状態)
   4: レイヤー待機状態(非表示の状態)の作成
   5: マウス情報取得待機状態の作成

 となります。 下図は、その概略的な流れをフローチャートに表したものです。



製作者ステータス情報の読込  「Line 28〜92」
 製作者ステータス情報とは、Cookieで動作する前の初期段階の指定や、Cookieの認可といった情報を記録する部分です。 ステータスそのものはそれほど多く設定するわけではありませんが、個々に解説がつけられているため、行数そのものは若干多くなっています。 下記に、具体的なステータス情報を示します。

レイヤーの初期状態の設定
NoDataState未指定時の表示設定
DisplayNormalState個々のレイヤーの初期表示ステータスを設定
D_Locat[]個々のレイヤーの初期表示位置
LayerResetState[]上記で指定しなかった場合の初期位置の指定
クッキー動作ステータスの指定
CookieStateクッキーの使用認可
Daysクッキーの有効期限
レイヤーの検知範囲の指定
widX / widY左上から何処までを検知範囲にするかの指定
マウス移動時の限界値の指定
mXlimit / mYlimit移動限界値を指定
 具体的には、宣言関係のうち、製作者が触る部分を最上段へ持ってきているだけで、基本的な内容は変数や配列の宣言と何ら変わりありません。

レイヤー情報の読込  「Line 93〜126」
 正確には、このレイヤー情報はファンクションの一種なので、部分で読み込まれるわけではありませんが、便宜上「宣言」という形で示しています。(正式な読込位置は「Line 232 (IE5,NS6)」「Line 235(NS4)」) この部分では、作成するレイヤーの実際の情報をタグを含めて1行で書き込んでいきます。 あくまでJavascript上で扱われる「変数」の一種であるため、複数行をまたいで書くことはできません。


  function Input_HopupMessage() {
    this.msg = new Array();

    this.msg = new Array();
      this.msg[00] = "コンテンツ"
           :
           :
      this.msg[49] = "コンテンツ"
  }

 実際のソース部の一部を切り出しして表現したのが上図です。 レイヤーは最大50枚作成できますが、初期位置が [00] ですので、最終番号は [49] となります。
 この番号内であれば、連番であっても飛び準であっても、また、降順昇順ランダム、どのような記載方法であっても動作します。 が、レイヤー処理アルゴリズムは、レイヤーの最後の番号を基準にして動作するように設計されているので、[00]からの連番でレイヤーを作成していくのが望ましいでしょう。

ブラウザ判別システムの発動  「Line 158〜198」
 ブラウザ判別システムでは、下記のブラウザをチェックし、TRUEかFALSEを返します。

isNS2 Netscape Navigator 2
isNS4 Netscape Navigator 4番台
isNS40 Netscape Navigator 4.0
isNS47 Netscape Navigator 4.7
isNS6 Netscape 6 / Mozilla
isIE2 Internet Explorer 2
isIE3 Internet Explorer 3
isIE4 Internet Explorer 4
isIE5 Internet Explorer 5
isIE55 Internet Explorer 55
isIE6 Internet Explorer 6
isMac MacOS (バージョン不問)
isWin Windows (バージョン不問)
isX11 Linux系 (バージョン不問)
isELF LinuxELF系 (バージョン不問)
isMenu 動作対象ブラウザ
isNotJava Javascript非対応ブラウザ
isNotMac マック対象外ブラウザ
isXGA 画面サイズがXGAかどうか
isVGA 画面サイズがVGAかどうか

 尚、このスクリプトは、動作対応OSやブラウザを細かく判定するパックスクリプトであり、この全てを本システム上で用いているわけではありません。

読み込み中ステータスの配置  「Line 206〜216」
 このステータスは、レイヤーの表示作業や配置作業を行っている際に、代替表示として、ユーザーに「読み込み中」であることを示すための物です。 レイヤーの数が多くなると、配置を完了するのに時間が掛かるようになる為、閲覧者側への配慮として作成してあります。


  if (LoadingMessage != "" && isMenu){
    if (isIE5 || isIE6 || isNS6){
      document.write('<span id="LOADING_MSG" 
             style="position:absolute;display:block;top:0;
             left:0;font-size:10pt;width:30;height:40">
             ' + LoadingMessage + '</span>');
      el = document.getElementById("LOADING_MSG"); 
             el.style.left = MessageX;   el.style.top = MessageY;
    } else if(isNS4) {
      document.write('<LAYER name="LOADING_MSG"
                      visibility="show" top="0" left="0">');
      document.write(LoadingMessage);
      document.write('</LAYER>');
      document.layers["LOADING_MSG"].moveTo(MessageX,MessageY);
    }
  }

 ローディングメッセージは、レイヤーの実配置完了と同時に表示を行うようにするため、
  display:block (IE5 , NS6)
  visibility="show" (NS4)
 としています。また、このステータス情報を表示するかどうかはユーザーの任意になっているため、情報が書き込まれているかどうかを判定する式
  if (LoadingMessage != "" && isMenu){
 を冒頭に組み込んで、情報が書かれていた場合(且つ、対応機種である場合)に限って、表示を行うようにしています。

宣言したレイヤーを実配置する  「Line 218〜248」
 宣言したレイヤー用の変数を、実際のレイヤーへ配置するための一連のスクリプトがこちらになります。
 正確には上でも述べている通り、作成したレイヤーはこの時点でファンクションから呼び出されることになります。


  var FileCount  = 0;
  var LayerCount = 0;
  var LayerTotal = 0;
  var LayerBeing = new Array(); 

  var VarUsrAgt = navigator.userAgent.toLowerCase();
  if (isMenu){
    var HopupMessage = new Input_HopupMessage();
    for(File_length=0; File_length < 
                    HopupMessage.msg.length ; File_length++) {
      if (HopupMessage.msg[File_length]  && File_length <= 50 ) { 
        if (isIE5 || isIE6 || isNS6){
          var HopupMessage = new Input_HopupMessage();
          document.write('<Div id = "Hopup_Message' +File_length+ '"
               style="position:absolute;display:none;top:0;left:0;
               font-size:10pt;width:10;height:25">' + 
               HopupMessage.msg[File_length] + '</Div>');
          el = document.getElementById("Hopup_Message" + File_length);
          el.style.zIndex =File_length;
        } else if(isNS4) {
          document.write('<LAYER name="Hopup_Message' +File_length+ '
               "visibility="hide" top="0" left="0">');
          document.write(HopupMessage.msg[File_length]);
          document.write('</LAYER>');
        }
        LayerBeing[File_length] = true
        LayerTotal = LayerTotal + File_length;
        LayerCount ++
      } else { //レイヤーが存在していない場合
        LayerBeing[File_length] = false
      }
    }
    FileCount = HopupMessage.msg.length
    if ( FileCount >= 50 ) FileCount = 49;
  }

 基本的なスクリプトは上図になります。
 レイヤーが存在しているかどうかは、
  if (HopupMessage.msg[File_length] && File_length <= 50 ) {

 で検査しています。 「 HopupMessage.msg[File_length] 」は、対象となるレイヤーの情報で、格納されていない場合は 「 undefined 」つまりFALSE となります。 さらに、レイヤーの総枚数「50」を超えていない場合に限り、配置を行うわけです。
 基本的なスクリプト内容は、「読み込み中ステータス」と同様ですが、ここではCookieや製作者ステータスを反映させる必要があるため、レイヤーの初期状態は非表示
  display:none (IE5 , NS6)
  visibility="hide" (NS4)
 としています。

 後の管理上の便宜の為、レイヤーの状態は「 LayerBeing[] 」配列に格納されていきます。 データが存在し、実際にレイヤーを配置した場合には「TRUE」、配置を行わなかった場合には「FALSE」をそれぞれのレイヤー番号に相当する配列に格納していきます。 また、レイヤーの最後の番号は後の表示ルーチンなどで用いるため「FileCount」変数へ代入、さらに、レイヤーの総枚数やトータルの配列番号の合計値を「layerCount」「LayerTotal」変数に格納していきます。

画像表示用配列作成  「Line 251〜267」
 これは、レイヤー上に配置する画像ホップアップの連携時に用いるための配列番号を格納するわけですが、本システムにおいては使用しないので、ここでは割愛します。

マウスステータス待機状態へ  「Line 909〜917」
 このスクリプトは、一連の読込を終えた最終段階で宣言されます。
 基本的には、イベントを受け取り可能な状態にするという意味合いになります。

  if(isMenu){
    if (isNS4){
      document.captureEvents(Event.MOUSEMOVE|
                        Event.MOUSEDOWN|Event.MOUSEUP);
    }
      document.onmousemove = mousemove; 
      document.onmousedown = mousedown; 
      document.onmouseup = mouseup;     
    }
  }




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