AJAXリモート・ログ・エージェント技法
Ajaxでデバッグしよう



フィッシュボーン
大坪 保行
2007/3/6

Webアプリ開発で、動作確認メッセージが出力できない。そんなときは、Ajaxでブラウザの動作ログをサーバに出力してみよう。

 厳しい開発の現場

 現在、至るところでWebを利用したシステム開発が行われています。デバッグに使用しているテクニックの1つに、古くからの技法として変数や動作したことを示すメッセージ表示などの情報を出力するものがあります。残念ながらWebアプリケーションの開発の現場では、その技さえ使えない場合があります。

 充実する開発環境
 

 最近のWebアプリケーションの開発は、サーバ側のJSPやサーブレットの開発では統合開発環境を利用できるようになり、大幅に開発効率が向上しています。また、開発中の動作確認だけでなく、リリース後はサーバ側で動作するプログラムへメッセージを埋め込んでログとしてファイルに残すこともできます。

 これらのログ機能は、IBM社のWebSphere、MS社のInternet Information Serverをはじめとするほとんどの商用アプリケーション・サーバやApacheやJBossなどのオープンソースのサーバでもサポートしています。

 ログが残せない

 Webアプリケーションの場合、クライアントとしてブラウザを使用するため、前述の統合開発環境だけでなく動作環境として実運用でも使用するアプリケーション・サーバのログ機能さえ利用することができません。

 ログに記録されるのは、サーバ側で動作しているCGIやサーブレットなどのログだけです。商用アプリケーション・サーバもブラウザ側の動作を記録するログ機能を提供していません。

 これでは、サーバ側の動作は保存したログからデバッグや動作検証ができても、ブラウザ上で動作しているクライアント側のデバッグや動作検証をすることができません。

 システム開発の現場では、正しく動作していることを確認するデバッグ作業だけでなく、運用や操作性の都合により応答速度の改善を求められることも多々あります。動作を記録する手段がないために、プログラムのどの部分が一番時間を要しているのか感覚ではなく数値化して表すことさえ困難です。

 これでは、経験と勘を頼り、改善個所を探るためにしらみつぶしに調べるほかありません。時間的に余裕のない現場の状況で、時間を要する手法だけしか使えないのでは、作業の進ちょくが厳しくなるだけです。

 貧弱なクライアント開発環境

 Webアプリケーションのクライアント側をデバッグする場合、多くのプログラマーはJavaScriptのAlert()やConfirm()をプログラム中の要所に挿入してチェックポイントでのメッセージ表示や重要変数の値を表示させ動作を確認しています。この方法は非常に簡単に利用できるし、動作確認だけなら十分に役立ちます。しかし、この方法には次のように2つの問題があります。

1)記録として残せない

 スクリーン・ショットを撮って残す方法もありますが、お手軽である利点がなくなると同時に撮り忘れの恐れがあります。また、時間が記録されません。

2)プログラムを一時的に止めてしまう

 明らかに応答速度を求められる部分には利用できません。また、複数のフレームから構成される画面のデバッグは、ほかのフレームが参照しているときにAlert()で動作を止めてしまうと、各フレーム間の同期が乱れるので、正しい動作を期待できません。

 Ajax使っていますか?

 現在進行しているプロジェクトにおいて、Ajaxをどれだけ利用しているのでしょうか。Webやソフトウェア開発関連の雑誌や技術系Webサイトでは、Ajaxの文字が出ていないところはないと思います。それほど多くのところで目にします。しかしながら、現場で使っているところはいまだ少ないようです。

 アプリケーション・サーバがサポートしていないからでしょうか。アプリケーション・サーバの機能一覧に記載がないからでしょうか。どれも間違いです。Ajaxは、決して新しい技術ではありません。MSIE5のときから必要な技術要素はすべて利用することができましたが、名前が付いていなかっただけです。

 AjaxはGUIじゃない

 技術系雑誌やサイトでは、AjaxをAsynchronous JavaScript and XMLと正しく紹介していますが、GoogleやYahoo!のAPIのようにユーザーインターフェイスとして利用される場合が多いことや、見た目も派手で分かりやすい画面制御のテクニックが紹介されることも多いためGUI制御と勘違いをする方がいます。Ajaxのポイントは、「ユーザー操作とはかかわりなくサーバとデータ通信できる」ことです。

1/3

 INDEX
Ajaxでデバッグしよう
Page1
厳しい開発の現場│充実する開発環境│ログが残せない│貧弱なクライアント開発環境│Ajax使っていますか?│AjaxはGUIじゃない
  Page2
開発環境の改善│基盤技術│動作概要│構成ファイル│動作確認用サンプルHTML│リモート・ログ・エージェント・プログラム
  Page3
サーバ側サービス・プログラム│導入方法│利用方法│さっそくAjaxなデバック環境を試してみよう




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間