Logger Control: Using LogWriter（その２）

YUIのExample「Logger Control: Using LogWriter」へのリンク

先の「Logger Control: Using LogWriter（その１）」の、LogReaderは体裁はいいのだが、実用面ではちょっとうまくない。
開発のステージではいいが、稼動させたアプリケーションの画面に、LogReaderのUIを表示する訳にはいかないからだ。

普通は稼動後も、ログをひっそりとって「なにかあったら調べる」というのが、普通である。
サーバーサイドのプログラムでは、「ログファイル」というようなファイルに書かせるのが一般的だが、Javascriptの場合は、クライアントサイドでの実行であるから、「こっそり書く」にも限度がある。

Firebugのconsole.log()は、コンソールにログを表示する、とても便利なツール（これがなかったら、alertを上げまくらないといけない）だが、YUIのLoggerは、FirebugやsafariのWebインスペクタ、ChromeのJavascriptコンソールとうまく連携できるようにできている。
そのためには、LogReaderを使うのではなく、YAHOO.widget.LoggerのenableBrowserConsole()を呼ぶだけでよい。

以下は、このようにして、Firebugのコンソールにログを出力しているのが、以下の図。

下は、ChromeのJavascriptコンソールに出力したところ。

下は、safari3のWebインスペクタに出力したところである。

IEは．．．．。調べていません。

このように、Loggerを仕掛けることで「再現性のある不具合」については、ログを潜ませたコードをリリースすることでTrackできるようになる。

以下にHTMLの全文を示す。
LogReaderのインスタンス生成のところを、Logger.enableBrowserConsole()としているだけである。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Ajax Sample</title> 
 
<style type="text/css"> 
body {
	margin:0;
	padding:0;
}
</style> 

<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="scripts/yui/logger/assets/skins/sam/logger.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="scripts/yui/logger/logger-min.js"></script>

<style type="text/css" id="defaultstyle">
#main {
	margin: 2px;
	padding: 3px;
	width: 500px;
}

</style>

<script type="text/javascript"> 
//
//モジュールパターンで実装する。
//
YAHOO.namespace("EGP");

YAHOO.EGP.BasicLogging = function() {
	var myLogReader;
	var myLogWriter;
	
    function clickToLog(e) {
        
        YAHOO.util.Event.stopEvent(e);
        YAHOO.widget.Logger.enableBrowserConsole();

        var target = YAHOO.util.Event.getTarget(e);
        var source = (YAHOO.util.Dom.hasClass(target, "MyClass")) ? "MyClass" : null;

        // target がクラス名としてMyClassを持っていないとき。YAHOO.log.(msg,cat,source)のsourceで指定。
        if(!source) {
            source = (YAHOO.util.Dom.hasClass(target, "myBucket")) ? "myBucket" : null;
            if(YAHOO.util.Dom.hasClass(target, "info")) {
                YAHOO.log("This is an \"info\" message.", "info", source);
            }
            else if(YAHOO.util.Dom.hasClass(target, "warn")) {
                YAHOO.log("This is a \"warn\" message.", "warn", source);
            }
            else if(YAHOO.util.Dom.hasClass(target, "error")) {
                YAHOO.log("This is an \"error\" message.", "error", source);
            }
            else if(YAHOO.util.Dom.hasClass(target, "time")) {
                YAHOO.log("This is a \"time\" message.", "time", source);
            }
        }
        // target がクラス名としてMyClassを持っているとき。=> 作成したLogWriterから吐き出す。
        else {
            if(YAHOO.util.Dom.hasClass(target, "info")) {
                myLogWriter.log("This is an \"info\" message.", "info");
            }
            else if(YAHOO.util.Dom.hasClass(target, "warn")) {
                myLogWriter.log("This is a \"warn\" message.", "warn");
            }
            else if(YAHOO.util.Dom.hasClass(target, "error")) {
                myLogWriter.log("This is an \"error\" message.", "error");
            }
            else if(YAHOO.util.Dom.hasClass(target, "time")) {
                myLogWriter.log("This is a \"time\" message.", "time");
            }
        }
    }
            
    return {
		init : function(){

		// LogReaderは、コンテナを指定すれば、自動的に（sourceやLogWriterを含んだ形で生成される。
//        myLogReader = new YAHOO.widget.Log("container");
        myLogWriter = new YAHOO.widget.LogWriter("MyClass");

        YAHOO.util.Event.addListener(YAHOO.util.Dom.get("content"),
                "click",
                clickToLog, 
                this, 
                true);
	    }
	};
}();

//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		//DomReadyイベントで発火するハンドラ
		YAHOO.EGP.BasicLogging.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.EGP.BasicLogging,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);
</script>
</head> 
 
<body class="yui-skin-sam">
<div id="main">

<div id="container"></div>
 
    <div id="content">
    <p>1.defaultでは、ソースに紐付けられていないYAHOO.logのログは、global と認識される。</p> 
    <ul> 
    <li><a href="#" class="global info">Log an "info" message.</a></li> 
    <li><a href="#" class="global warn">Log a "warn" message.</a></li> 
    <li><a href="#" class="global error">Log an "error" message.</a></li> 
    <li><a href="#" class="global time">Log a "time" message.</a></li> 
    </ul> 
 
    <p>2.YAHOO.logのログの第３引数にソース(source)を指定して、ログを仕分けることができる。</p> 
    <ul> 
    <li><a href="#" class="myBucket info">Log an "info" message.</a></li> 
    <li><a href="#" class="myBucket warn">Log a "warn" message.</a></li> 
    <li><a href="#" class="myBucket error">Log an "error" message.</a></li> 
    <li><a href="#" class="myBucket time">Log a "time" message.</a></li> 
    </ul> 
 
	<p>3.LogWriterインスタンスを生成して吐き出すことで、ログを仕分けることもできる。</p>
    <ul> 
    <li><a href="#" class="MyClass info">Log an "info" message.</a></li> 
    <li><a href="#" class="MyClass warn">Log a "warn" message.</a></li> 
    <li><a href="#" class="MyClass error">Log an "error" message.</a></li> 
    <li><a href="#" class="MyClass time">Log a "time" message.</a></li> 
    </ul>
    </div> 
</div>
</body> 
</html>