Ajax開発を強力支援--ログ出力コンポーネント：LogReader - (page 2)

ロードするCSSとJavaScript

　LogReaderにもさまざまなコンポーネントが使われているため、ロードすべきCSSやJavaScriptは多い(リスト1)。ただ、これだけロードしておけば、他のコンポーネントも利用できるようになるので、結果的には便利かもしれない。

リスト1 CSSやJavaScriptの設定(HTMLの内)

<!-- このソースコードはFirefox 2.0.0.7で実行確認 -->
<base href="YUIが展開されているディレクトリを設定" />
<link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="build/dom/dom-min.js"></script>
<script type="text/javascript" src="build/event/event-min.js"></script>
<script type="text/javascript" src="build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="build/logger/logger-min.js"></script>
<script type="text/javascript" src="build/element/element-beta-min.js"></script>
<script type="text/javascript" src="build/button/button-beta-min.js"></script>

ログを出力してみる

　クリックされたボタンに表示されているカテゴリでログを出力するアプリケーションの実行結果を図2に示す。これは画面上のフォームにメッセージを入力し、infoと表示されたボタンをクリックすると、ログレベルinfoのメッセージとして出力されるというものだ。

　HTMLをリスト2に示す。LogReaderが表示されるのは、IDがlogger1の<div>のところだ。ボタンはラジオボタン()として記述されているが、リスト3によってこの部分がButtonGroupウィジェットとなることで図2のような表示となる。ラジオボタンを<div>で囲んでいるのは、YUIのButtonGroupウィジェットを設定するためだ。

リスト2 画面表示用のHTML(内)

<form action="#">
  <fieldset>
    <input id="message" type="text" size="60" /><!-- ログ出力するメッセージを入力 -->
    <div id="category" class="yui-buttongroup"><!-- カテゴリを決めるボタン -->
      <input id="info"   type="radio" value="info" />
      <input id="warn"   type="radio" value="warn" />
      <input id="error"  type="radio" value="error" />
      <input id="time"   type="radio" value="time" />
      <input id="window" type="radio" value="window" />
    </div>
  </fieldset>
</form>
<div id="logger1"></div><!-- Logger表示箇所 -->

　JavaScriptをリスト3に示す。ログ出力はYAHOO.log()もしくはYAHOO.widget.LogWriterで行い、出力されたメッセージをYAHOO.widget.LogReader()が受け取って画面に表示するというのが全体の流れだ。ただし、ここではボタンのクリックによってログを出力することにしているので、あらかじめイベント処理を設定している。