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

沖林正紀

2007-10-24 09:36

ロードする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のメッセージとして出力されるというものだ。

図2 クリックされたボタンのカテゴリでログ出力

 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()が受け取って画面に表示するというのが全体の流れだ。ただし、ここではボタンのクリックによってログを出力することにしているので、あらかじめイベント処理を設定している。

ZDNET Japan 記事を毎朝メールでまとめ読み(登録無料)

ZDNET Japan クイックポール

マイナンバーカードの利用状況を教えてください

NEWSLETTERS

エンタープライズコンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]