(X)HTMLタグの設定

それでは最も簡単な例から始めましょう。サンプル01は単純にログウィンドウを表示し、メッセージを書き込むサンプルです。この状態でもLoggerとして問題なく使用することができます。ウィンドウ上部をドラッグして移動することができますし、小さく折りたたむこともできます。Logger機能を使うにはあらかじめ必要となるスタイルシートとスクリプトファイルを読み込ませておく必要があります。まず、スタイルシートファイルであるlogger.cssを<link>タグを使って読み込ませます。

<link rel="stylesheet" type="text/css" href="css/logger.css">

次に3つのスクリプトファイルを<script>タグを使って読み込ませます。

<script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="js/dragdrop.js"></script> 
<script type="text/javascript" src="js/logger.js"></script>

サンプル01ではページが読み込まれた後にパネルを表示させています。ページの読み込み後に処理を行うにはwindow.onload = function() { ～ }の～の中に処理を記述します。次にnew YAHOO.widget.LogReader()としてLoggerオブジェクトが生成され、ページ上にログウィンドウが表示されます。また、YAHOO.widget.LogReader()の最初のパラメータには表示したいHTMLタグのIDを指定できます。

サンプル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>YUIロガーサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/logger.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/dragdrop.js"></script> 
        <script type="text/javascript" src="js/logger.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                new YAHOO.widget.LogReader();
                YAHOO.log("メッセージを表示できます");
            }
        // --></script>
    </head>
    <body>
    <h1>YUIロガーサンプル（基本）</h1>
    </body>
</html>