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 記事を毎朝メールでまとめ読み(登録無料)

ホワイトペーパー

新着

ランキング

  1. セキュリティ

    初心者にも優しく解説!ゼロトラストネットワークアクセスのメリットと効果的な導入法

  2. ビジネスアプリケーション

    Google が推奨する生成 AI のスタートアップガイド、 AI を活用して市場投入への時間を短縮

  3. セキュリティ

    「2024年版脅威ハンティングレポート」より—アジアでサイバー攻撃の標的になりやすい業界とは?

  4. ビジネスアプリケーション

    改めて知っておきたい、生成AI活用が期待される業務と3つのリスク

  5. ビジネスアプリケーション

    ITR調査結果から導くDX浸透・定着化-“9割の国内企業がDX推進中も成果が出ているのはごく一部”

ZDNET Japan クイックポール

所属する組織のデータ活用状況はどの段階にありますか?

NEWSLETTERS

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

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

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