Yahoo UI Library「ログウィンドウ処理」

プログラムを開発していると変数の内容が期待通りなのかどうかを調べたい場合があります。JavaScriptを使う場合に多く使われてきたのがalert()を使った内容表示です。しかし、毎回アラートダイアログに内容を表示すると不便な上に動作が変わってしまうことがあります。
そこでYahoo UI Libraryではデバッグ時に便利なログウィンドウが用意されています。
ログウィンドウを生成して表示するにはnew YAHOO.widget.LogReader()とします。これだけでログウィンドウがブラウザ上に表示されます。ただし、正しくスタイルシートが読み込まれていないと正しく表示されません。また、bodyタグにはスタイルシートクラス（class=" yui-skin-sam"）を設定しないと外観が綺麗に表示されません。
ログウィンドウが表示されただけでは役に立ちません。ログウィンドウに文字を表示することで役立つものだからです。ログウィンドウに文字を表示するにはYAHOO.log()を使います。()内にログウィンドウに表示する文字を指定します。（サンプル01を実行する）

【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/logger/assets/skins/sam/logger.css">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/logger/logger-min.js"></script>
<script type="text/javascript"></script>
</head>
<body class=" yui-skin-sam">
<h1>ログウィンドウに文字を表示します</h1>
<form>
<input type="button" value="ログウィンドウに表示" onClick="logMessage()">
</form>
</body>
</html>

ログウィンドウに出力する文字には種類を指定することができます。種類は以下のものが指定できます。

info
warn
error
window
time

この種類はYAHOO.log()の2番目のパラメータに指定します。（サンプル02を実行する）

【サンプル02】
new YAHOO.widget.LogReader();
YAHOO.log("ログウィンドウのサンプルです","info");
YAHOO.log("とりあえず警告","warn");
YAHOO.log("何かのエラー","error");
YAHOO.log("とりあえず何か表示","window");
YAHOO.log("12:00:34","time");

より詳しく分類することもできます。この場合はYAHOO.log()の3番目のパラメータにメッセージ（ソース）を指定します。また、3番目のパラメータを指定するとログウィンドウの下にチェックボックスで表示設定ができるようになります。（サンプル03を実行する）

【サンプル03】
new YAHOO.widget.LogReader();
YAHOO.log("12:00:34","time","日本時間ですよ");

[目次へ]

ログウィンドウにメッセージを表示する