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

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

　開発環境の改善

　ここで紹介するログ技法は、貧弱なクライアント開発環境で述べたようなJavaScriptのAlert()などでチェックポイント確認や変数表示する手法の課題を解決し、時刻付き情報の動作ログをファイルとして記録することです。

　記録に残すことによりデバッグ時だけでなく証拠として第三者への提示や共同確認作業にも使用することができるなど副次的な効果もあります。

　基盤技術

　Ajaxの基盤となるJavaScriptによる非同期通信機能のみを使用します。クライアントからログとしてサーバへ送信する情報は、簡単な3つの文字列だけです。XML化して送るほどでもないのでXMLは使用していません。

　動作概要

図1：動作モデル

　サンプルではsample.html内に記述したJavaScriptの関数startlog()からremotelog.js内のremotelog()を呼び出し、サーバへログ情報を送信します。このとき、デバッグ時に便利な情報として、ファイル名、モジュール名、メッセージ文の3つの文字列をremotelog()の引数として渡しています。サーバでは、受信したデータに時刻などの情報を追加してファイルに記録します。

　ここでは引数として渡す文字列を使い分けていますが、処理としては3つの文字列をサーバへ送信しているだけですので、使い方は自由に決めて使ってください。

　構成ファイル

　動作概要にて図示したように、この機能を構成するファイルは以下の3つから構成されます。

1）動作確認用サンプルHTML

2）リモート・ログ・エージェント・プログラム

3）サーバ側サービス・プログラム

　動作確認用サンプルHTML

　動作確認の簡単なHTMLを用意しました。画面としては非常に簡単なものです。

画面1：実行画面

<html>

<script language="JavaScript" src="remoteLog.js"></script>

<script language="JavaScript">

function startlog() {

  // ログ記録開始

  remoteLog("sample.html","startlog()","Start Log");

  // 変数iiを0から9まで変化させ、ログを記録する

  for (ii=0;ii<10;ii++) {

    remoteLog("sample.html","startlog()","ii="+ii);

  }

 // ログ記録終了

  remoteLog("sample.html","startlog()","End Log");

 // ログ記録 ?日本語ログの動作確認-

  remoteLog("日本語","使えます","便利です");

}

</script>

<head>

<title>Client side logging method by using Ajax</title>

</head>

<body>

ボタンを押すと内部のJavaScriptによる関数を実行します。<br>

実行経緯と結果は、サーバ内のログに記録します<br>

<form name=“test" action="javascript:startlog()">

<input type="submit" value="Start"></input>

</form>

</body>

</html>

ソース1：動作確認用テストHTML－ sample.html

　スタートボタンを押したら、ページ内にJavaScriptにて記述したStartlog()関数が実行されます。Startlog()関数内では、変数iiを0から9まで＋1ずつ増加させ、変数の変化をログとしてサーバに記録しています。

　リモート・ログ・エージェント・プログラム

　今回のコアであるリモート・ログ・エージェントは、JavaScriptにて記述されたプログラムです。Ajaxのプログラムとしては、XMLを使用せずDOMの操作もしていないので非常に簡単なものとなっています。そのため、Ajaxとして重要なXHR（XMLHttpRequest）オブジェクトの生成や通信処理などが分かりやすく、コードの行数も少ないです。

1）XHRオブジェクトの生成

　createXMLHttpRequest()として共通関数化していますが、Ajaxの通信部分を担うXMLHttpRequestオブジェクトの生成を行っています。ほとんどの最新のブラウザでは、new XMLHttpRequest()にて同オブジェクトを生成することができますが、MSIE5などの一部の古いバージョンのブラウザはサポートしていません。そこで、以前のバージョンのブラウザに対応させるため、（古い書式ですが）new ActiveXObject()で直接クラスを指定してオブジェクトを生成しています。

// HTTP通信用、共通関数

function createXMLHttpRequest()

{

    var XMLhttpObject = null;



    try{

        XMLhttpObject = new XMLHttpRequest();

    }catch(e){

        try{

            XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");

        }catch(e){

            try{

                XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");

            }catch(e){

                return null;

            }

        }

    }

    return XMLhttpObject;

}

ソース2：XMLHttpRequestオブジェクトの作成

2）通信処理

　HTTP通信機能を持つXMLHttpRequestオブジェクトにより、サーバとのデータ通信を行っています。

　XMLHttpRequestオブジェクトはいくつかのメソッドを持ちますが、ここで使用しているのは次の2つだけです。

・openメソッド

　XMLHttpRequestオブジェクトを初期化し、通信できるように準備します。引数として、HTTP通信メソッドの指定、URL、同期通信か非同期通信の選択を与えます。第1番目のHTTP通信メソッドの指定方法は、“GET”または“POST”のいずれかを文字列にて指定します。

　第2番目のURLは、引数を含む完全な情報をURLエンコーディングした結果を文字列として指定します。

　第3番目の引数はtrue／falseの論理値で、trueなら非同期通信、falseなら同期通信を指定します。同期通信処理を選択した場合、ログ情報を受け取るサーバが処理途中にダウンしたときは延々と処理完了待ち中となりクライアント側も処理が停止するリスクがあります。

　非同期通信を選択した場合は、レスポンスの完了を待たずに処理が進むため処理完了待ち状態になるリスクはありませんが、プログラムを簡単にするために同期通信方式を指定しています。

　第4番目と第5番目の引数として、ユーザーIDとパスワードを指定することも可能です。

・sendメソッド

　実際にサーバへHTTPリクエストを送信します。引数にはリクエスト・ヘッダを指定することができますが、今回は使用しないためNULLを指定しています。

// 

function remoteLog(module, func, message)

{

    //alert("start remoteLog()");

    if (logServer==null) {

      logServer = new createXMLHttpRequest();

      alert("create log server");

    }



    if (logServer)

    {

        parameters = "module="+encodeURI(module);

        parameters += "&func="+encodeURI(func);

        //parameters += "&message="+encodeURI(message);

        parameters += "&message="+encodeURI(message);

        //非同期で通信すると記録が漏れる場合がある

        //logServer.open("GET", remoteJsp+"?"+parameters , true); // 非同期

        logServer.open("GET", remoteJsp+"?"+parameters , false); // 同期

        logServer.send("");

        //alert("send "+parameters);

    }

    //alert("end remoteLog()");

}

ソース3：RemoteLogメソッド　－　ログデータの送信

前のページへ

2/3

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

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する