アットマーク・アイティ @IT@IT情報マネジメント@IT自分戦略研究所QA@ITイベントカレンダー  
 
 @IT > バグを見つけろ! (1)MyEclipse AJAX Web ブラウザーでAjaxをデバッグ
 
@IT Special

 

PR

バグを見つけろ! (1)
MyEclipse AJAX Web ブラウザーでAjaxをデバッグ


 〜 連載 「開発マネージャーのMyEclipse指南塾」 第7回 〜

前回は一通りの開発を終えましたが、残念ながらバグが残ってしまいました。今回は「MyEclipse AJAX Webブラウザー」を紹介し、バグの原因を突き止めていきます。
前回(第6回)については日本語MyEclipseポータルサイトで
第6回「MyEclipse JavaScriptエディタで
JavaScriptを開発しよう」の主な内容

・Ajaxライブラリ「Prototype」の組み込み
・JavaScriptファイル「keywordsearch.js」の作成
・アウトライン・ビュー
・JavaScriptソースの検証
・コードの整形
・アプリケーションの動作確認
・バグ発見!!



  Ajaxのデバッグを支援する
「MyEclipse AJAX Web ブラウザー」

今回の主な内容
Ajaxのデバッグを支援する
 「MyEclipse AJAX Webブラウザー」

通信をモニタリング!
 「AJAX リクエスト・モニター」

「AJAX リクエスト・モニター」でバグを解決
機能拡張、そしてまたバグ

 MyEclipseには、Ajaxのデバッグ作業を支援する「MyEclipse AJAX Web ブラウザー」(以下、「AJAX Webブラウザー」)が用意されています。

[AJAX Webブラウザー]の起動

 [AJAX Webブラウザー]を起動するには、ウィンドウ上部のツールバーの[AJAX Webブラウザー]のアイコンをクリックします。新しいウィンドウで[AJAX Webブラウザー]が起動します。

 左上の[アドレス]の欄に以下のURLを入力し、[Enter]キーを押します。[MyEclipse Tomcat]を起動していない場合はあらかじめ起動しておいてください。

http://localhost:8080/myeclipse-sample/keywordsearch.jsp

 以下のような画面になります。

画面1 [AJAX Webブラウザー]
画面1 [AJAX Webブラウザー](画像をクリックすると拡大します)

[DOMインスペクター]でHTMLソースを追跡

 Ajax開発が難しい理由の1つとして、HTMLを動的に書き換えるためにHTMLのソースが見えず、デバッグの障害となっている点が挙げられます。この問題を解決するのが[DOMインスペクター]です(画面2)。

画面2 [DOMインスペクター]
画面2 [DOMインスペクター]

 [AJAX Webブラウザー]のウィンドウ右に[DOMインスペクター]があります。HTMLのタグが階層的に表示されています。「IMG」「DIV」「FORM」と表示されているところをクリックしてください。左側の[AJAX Webブラウザー]部分の該当部分が赤い四角で点滅します。

 階層表示の下には、属性と値が表示されています。上の「IMG」をクリックすると、属性に「src」、値に「oisixlogo.gif」と表示されます。HTMLソースの属性が表示されているのが分かります。「oisixlogo.gif」の部分をクリックすると、その場で書き換えることができます。さらに右クリックすると、[追加]や[削除]もできます。

 試しに追加してみましょう。右クリックして[追加]をクリックします。小さいウィンドウが出てくるので、名前に「width」、[値]に「30%」を入力して[OK]をクリックします。属性が追加され、左上のオイシックスのロゴ画像が大きくなります。

 ウィンドウ下部の右側の部分は[DOMソース]が表示されています。[DOMインスペクター]で「IMG」や「DIV」をクリックして、該当する部分のHTMLソースが表示されることを確認しましょう。

 階層表示でなく[AJAX Webブラウザー]表示の方からDOMを選択することもできます。[AJAX Webブラウザー]部分の右上の矢印の形をしたアイコンをクリックします。アイコンがくぼんだ状態になります。この状態で[CTRL]キーを押しながら、[AJAX Webブラウザー]部分の上でマウスカーソルを動かしてください。青い四角がマウスの動きに合わせて変化します。そのままクリックすると、青い四角が示しているDOMオブジェクトが右の[DOMインスペクター]で選択されます。

 DOMのナビゲーション機能には、ほかにも階層の上下左右で移動する機能があります。[AJAX Webブラウザー]のウィンドウ下部の右側にある[CSS]タブをクリックします。その中にある[Box Model]タブをクリックします。

画面3 [CSS]の[Box Model]
画面3 [CSS]の[Box Model]

 「Navigation Controls」と書いてあるところに、上下左右の方向ボタンがあります。このボタンの上下をクリックすると、DOM階層の上の階層と下の階層のブロック要素に移動します。左右をクリックすると、同じ階層の隣のブロック要素に移動します。

AjaxとDOMインスペクター

 Ajaxを動作させてみましょう。右の[DOMインスペクター]で「DIV [result]」とあるところをクリックして選択してください。Webブラウザに移り、入力フォームに「oisix」と入力してしばらく待ちます。

 検索結果が表示されると、右の[DOMインスペクター]が変化します。「DIV [result]」の下には何もなかったのに、検索結果のHTMLがAjaxによって挿入され、そのHTMLの変化が反映されます。右下の[DOMソース]にも変化が反映されます。Ajaxの実行結果が反映されていない場合は下向き矢印のアイコンをクリックします。

 新しく追加されたDOMオブジェクトも最初からあったものとまったく同じように扱えます。「DIV [result]」の下の階層の「DIV」をクリックして動作を確認してみてください。

  通信をモニタリング!
「AJAX リクエスト・モニター」

 Ajax開発が難しい理由として、クライアントとサーバの通信内容が見えにくいという点も挙げられます。MyEclipseでは、[AJAX リクエスト・モニター]で通信内容を確認できます。

 ウィンドウ左下に[AJAX リクエスト・モニター]のタブがあるので、クリックしてください。やや表示領域が狭いので、最大化ボタンをクリックして拡大しましょう。

画面4 [AJAX リクエスト・モニター]
画面4 [AJAX リクエスト・モニター](画像をクリックすると拡大します)

 [AJAX リクエスト・モニター]では、Ajaxの通信が発生するたびに1行ずつ記録されていきます。行をダブルクリックすると、より詳細な通信内容を見ることができます。

画面5 [AJAX リクエスト・モニター] ― 通信内容の詳細
画面5 [AJAX リクエスト・モニター] ― 通信内容の詳細(画像をクリックすると拡大します)

 ウィンドウ下半分は左右に分かれており、左が[リクエスト]、右が[レスポンス]になっています。それぞれの左下に[Headers][Body]のタブがあり表示を切り替えられるようになっています。

 [リクエスト]の方の[Body]は「keywordsearch.js」の「getResult()」関数内でセットした内容になっています。[レスポンス]の方の[Body]は「keywordsearch_Ajax.jsp」で生成したHTMLになっています。最大化を元に戻すには、復元ボタンをクリックします。

続きは日本語MyEclipseポータルサイトでもご覧いただけます
第7回の残りの主な内容

・AJAX リクエスト・モニターでバグを解決
・機能拡張、そしてまたバグ

第8回「バグを見つけろ!(2)
MyEclipseでJavaScriptのデバッグ」の主な内容

・ローカルファイルでのJavaScriptのデバッグ
・リモートでのJavaScriptのデバッグ
・JavaScriptデバッガでバグを発見
・他人のサイトもデバッグしてしまう「インスタント・オン・デバッギング」



  「AJAX リクエスト・モニター」でバグを解決

 さて、アプリケーションの不具合に戻り、調査をしてみましょう。不具合は、「oisix」だと正常に動作するが、「トマト」では動作しないというものでした。現象から予想すると、日本語の処理がうまくいっていないようです。

 [AJAX リクエスト・モニター]で通信内容を見てみましょう。[AJAX Webブラウザー]で、検索キーワード入力欄に「トマト」と入力し、[AJAX リクエスト・モニター]で通信内容を確認しましょう。[リクエスト]の[Body]には「keyword=%E3%83%88%E3%83%9E%E3%83%88」とあります。[レスポンス]の[Body]には何もありません。

 「keyword=」の後の文字列はエンコードされていて、ちょっと見ただけでは正常なのか異常なのか分かりません。この文字列をデコードしてみましょう。文字列のデコードはJavaの標準APIで可能です。ちょっとしたJavaコードを実行する際には、Eclipseのスクラップブックを使うと便利です。

 [Javaエンタープライズ]のウィンドウに戻り、「myeclipse-sample」プロジェクトで右クリックします。[新規]→[その他]→[Java]→[Javaの実行/デバッグ]→[スクラップブック・ページ]をクリックします。ファイル名は適当で構いません。

 新しくできたスクラップブックに、以下のように入力します。

java.net.URLDecoder.decode("%E3%83%88%E3%83%9E%E3%83%88","SJIS");

 この行から下の行までをマウスでドラッグして選択し、右クリックして [表示(Y)]をクリックします。[表示]が2つありますが、下の方の[表示]なので注意してください。ここに文字化けがありました。

画面6 文字化けの様子
画面6 文字化けの様子

 なぜ、文字化けしてしまっているのでしょう? Webブラウザの入力フォームから「keywordsearch.js」、Prototypeの間に何か間違いがある可能性もあります。しかし、ここで思い出していただきたいのは、Ajaxの通信はUTF-8で行われる決まりがあるということです。

 では、エンコーディングの指定をUTF-8に変えて再度実行してみましょう。今度は「トマト」と表示されると思います。これによって、入力された文字列はUTF-8としてエンコードされて送信されていることが分かりました。

 keywordsearch_Ajax.jspを見直してみましょう。5行目に以下の文があります。

request.setCharacterEncoding("SJIS");

 これは、リクエストの内容を「シフトJIS」としてデコードすることを指定しています。しかし、実際にはUTF-8なので、ここが文字化けの原因になっていると考えられます。Tomcatでは、デフォルトのエンコーディングがUTF-8なので、この行をコメントアウトします。

//request.setCharacterEncoding("SJIS");

 [AJAX Webブラウザー]のウィンドウに戻り、一度リロードします。キーワード入力欄に、「トマト」と入力します。今度は無事に検索結果が表示されたと思います。[AJAX リクエスト・モニター]で通信内容を再度確認してみるとよいでしょう。

  機能拡張、そしてまたバグ

 いろいろな文字列で検索をしてもらうと、いろいろな検索結果が出てくると思います。ここで、野菜やフルーツを検索したいのに、検索結果には加工食品の方が多く出てしまうことが分かります。そこで、商品のカテゴリーによって検索結果を絞り込みできるようにしましょう。検索文字列の欄の右にカテゴリー選択のプルダウンメニューを追加します。

 「keywordsearch.jsp」の「<input type="text" size="50" name="searchword" id="searchword" />」の下に、以下のコードを追加してください。

<select name="browsenode" id="browsenode">
    <option value="">全てのカテゴリー
    <option value="366589011">フルーツ
    <option value="366591011">葉物野菜
    <option value="366602011">牛乳・バター
</select>

 「keywordsearch.js」の、「var pars = "keyword=" + $("searchword").value;」の下に以下のコードを追加してください。

var browseNode = $("browsenode").value;
if (browseNode !== "") {
    par = pars + "&browsenode=" + browseNode;
}

 「keywordsearch_Ajax.jsp」の「String keyword = request.getParameter("keyword");」の次に以下のコードを追加してください。

String browseNode = request.getParameter("browsenode");

 その次の行を以下のように変更します。

変更前
List<HashMap> shouhinList = AWSECommerceServiceClient.
    findByKeyword(keyword);

変更後
List<HashMap> shouhinList = AWSECommerceServiceClient.
    findByKeyword(keyword, browseNode);

 再起動は必要ありません。ページをリロードしてプルダウンメニューで「フルーツ」を選択し、キーワード入力欄に「バナナ」と入力します。これでフルーツのバナナだけが検索されれば成功ですが……。残念ながら、ドライバナナやペットフードが検索結果に含まれています(注:オイシックスの商品は常時入れ変わっているので、検索結果が異なる場合があります)。

 実は、今回のプログラムにも間違いがあります。次回は、JavaScriptのデバッグ機能を利用してこの不具合を修正します。

続き(第8回)は日本語MyEclipseポータルサイトで
第8回「バグを見つけろ!(2)
MyEclipseでJavaScriptのデバッグ」の主な内容

・ローカルファイルでのJavaScriptのデバッグ
・リモートでのJavaScriptのデバッグ
・JavaScriptデバッガでバグを発見
・他人のサイトもデバッグしてしまう「インスタント・オン・デバッギング」



※本記事は、日立製作所の『日本語MyEclipseポータルサイト』に掲載された記事を許諾を得て、再構成したものです。
提供:株式会社 日立製作所
企画:アイティメディア 営業局
制作:@IT編集部
掲載内容有効期限:2008年3月31日
 
関連リンク
日本語MyEclipseポータルサイト
日本語MyEclipse 無料体験版ダウンロード(会員登録不要)
Cosminexus(コズミネクサス)
日立製作所

「開発マネージャーのMyEclipse指南塾」
連載予定
第1回: EclipseでAmazon Webサービスを使うショッピングサイトを構築するには?
第2回: Amazonから商品情報を取得するプログラムを作ろう(
第3回: MyEclipse ビジュアルJSPデザイナーで商品ページを作ろう
第4回: ショッピングカートを作ろう(
第5回: Ajaxでリアルタイム検索結果表示のインクリメンタルサーチを作るには?
第6回: MyEclipse JavaScriptエディタでJavaScriptを開発しよう(
第7回: バグを見つけろ! (1)MyEclipse AJAX WebブラウザーでAjaxをデバッグ
第8回: バグを見つけろ! (2)MyEclipseでJavaScriptのデバッグ(
第9回: JSFで購入フォームを作ろう―画面遷移をビジュアルに開発
第10回: JSFで購入フォームを作ろう―JSFをビジュアルに開発(
第11回: JSFで購入フォームを作ろう―完成
第12回: MyEclipse Reportで売上グラフを作ろう(

の回は日本語MyEclipseポータルサイトにて公開


@IT関連記事
連載「MyEclipseでAjax+Javaをやさしく開発」(@IT Java Solution)
便利なプラグインの集大成MyEclipse(@IT Java Solution)
Javaの最新動向を見極める デブサミ2007「MyEclipseならAjaxもええじゃないか♪」(@IT Java Solution)
日立、SOA基盤「Cosminexus」の新版発表〜システム開発期間を短縮〜(@IT NewsInsight)
SOA対応した日立「Cosminexus」、開発効率3倍の根拠は(@IT NewsInsight)
【プロダクトレビュー】ミッションクリティカル機能を強化Cosminexus AS Version6(@IT Java Solution)

印刷プリンタ用ページ表示
kee<p>oint保存kee<p>ointで保存

 
@ITトップ@IT Special インデックス会議室利用規約プライバシーポリシーサイトマップ