Logger Control: Using LogWriter（その１）
YUIのExampleの順を逆に行くようだが、Log4j(Java)、PEAR::Log(PHP)のようなLoggerを使い慣れた人には、（YUI Loggerの概要が１つのサンプルで分かるので）このサンプルから入るのが手っ取り早い。
画面は以下。
ここでポイントは
- LogReaderとは、YAHOO.widget.Loggerから吐かれたログを読むためのインターフェイスであって、それを入れるコンテナを指定するだけで、画面のような表示となる。
- Logの吐き出しは、YAHOO.log(sessage,category,source)の形式か、LogWriterインスタンスを作成することで行う。
- 上でcategoryには、"info","warn","error","time","window"が指定できる。また、sourceを指定するか、LogWriterインスタンスからログを吐き出すことで、ログを分類することができる（YAHOO.log()でsourceを指定指定しない場合には、defaultでglobalというソースが割り当てられる）
- sourceの指定、LogWriterインスタンスを生成した場合、そのfilterが、LogReaderに自動的に追加される。
である。
このLogReaderは、Draggableで、開閉できるなど、便利そうな機能がついている。
以下にHTMLの全文を示す。
scriptはモジュール・パターンに書き直した。
<!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); 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.LogReader("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>
