Loading
|
|
|
Loading
|
| ＠IT > バグを見つけろ！ （1）MyEclipse AJAX Web ブラウザーでAjaxをデバッグ |
 |
前回は一通りの開発を終えましたが、残念ながらバグが残ってしまいました。今回は「MyEclipse AJAX Webブラウザー」を紹介し、バグの原因を突き止めていきます。
MyEclipseには、Ajaxのデバッグ作業を支援する「MyEclipse AJAX Web ブラウザー」（以下、「AJAX Webブラウザー」）が用意されています。 ■ ［AJAX Webブラウザー］の起動 ［AJAX Webブラウザー］を起動するには、ウィンドウ上部のツールバーの［AJAX Webブラウザー］のアイコン 左上の［アドレス］の欄に以下のURLを入力し、［Enter］キーを押します。［MyEclipse Tomcat］を起動していない場合はあらかじめ起動しておいてください。
以下のような画面になります。
■ ［DOMインスペクター］でHTMLソースを追跡 Ajax開発が難しい理由の1つとして、HTMLを動的に書き換えるためにHTMLのソースが見えず、デバッグの障害となっている点が挙げられます。この問題を解決するのが［DOMインスペクター］です（画面2）。
［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ブラウザー］部分の右上の矢印の形をしたアイコン DOMのナビゲーション機能には、ほかにも階層の上下左右で移動する機能があります。［AJAX Webブラウザー］のウィンドウ下部の右側にある［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開発が難しい理由として、クライアントとサーバの通信内容が見えにくいという点も挙げられます。MyEclipseでは、［AJAX リクエスト・モニター］で通信内容を確認できます。 ウィンドウ左下に［AJAX リクエスト・モニター］のタブがあるので、クリックしてください。やや表示領域が狭いので、最大化ボタン
［AJAX リクエスト・モニター］では、Ajaxの通信が発生するたびに1行ずつ記録されていきます。行をダブルクリックすると、より詳細な通信内容を見ることができます。
ウィンドウ下半分は左右に分かれており、左が［リクエスト］、右が［レスポンス］になっています。それぞれの左下に［Headers］［Body］のタブがあり表示を切り替えられるようになっています。 ［リクエスト］の方の［Body］は「keywordsearch.js」の「getResult()」関数内でセットした内容になっています。［レスポンス］の方の［Body］は「keywordsearch_Ajax.jsp」で生成したHTMLになっています。最大化を元に戻すには、復元ボタン
さて、アプリケーションの不具合に戻り、調査をしてみましょう。不具合は、「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の実行/デバッグ］→［スクラップブック・ページ］をクリックします。ファイル名は適当で構いません。 新しくできたスクラップブックに、以下のように入力します。
この行から下の行までをマウスでドラッグして選択し、右クリックして ［表示(Y)］をクリックします。［表示］が2つありますが、下の方の［表示］なので注意してください。ここに文字化けがありました。
なぜ、文字化けしてしまっているのでしょう？ Webブラウザの入力フォームから「keywordsearch.js」、Prototypeの間に何か間違いがある可能性もあります。しかし、ここで思い出していただきたいのは、Ajaxの通信はUTF-8で行われる決まりがあるということです。 では、エンコーディングの指定をUTF-8に変えて再度実行してみましょう。今度は「トマト」と表示されると思います。これによって、入力された文字列はUTF-8としてエンコードされて送信されていることが分かりました。 keywordsearch_Ajax.jspを見直してみましょう。5行目に以下の文があります。
これは、リクエストの内容を「シフトJIS」としてデコードすることを指定しています。しかし、実際にはUTF-8なので、ここが文字化けの原因になっていると考えられます。Tomcatでは、デフォルトのエンコーディングがUTF-8なので、この行をコメントアウトします。
［AJAX Webブラウザー］のウィンドウに戻り、一度リロードします。キーワード入力欄に、「トマト」と入力します。今度は無事に検索結果が表示されたと思います。［AJAX リクエスト・モニター］で通信内容を再度確認してみるとよいでしょう。
いろいろな文字列で検索をしてもらうと、いろいろな検索結果が出てくると思います。ここで、野菜やフルーツを検索したいのに、検索結果には加工食品の方が多く出てしまうことが分かります。そこで、商品のカテゴリーによって検索結果を絞り込みできるようにしましょう。検索文字列の欄の右にカテゴリー選択のプルダウンメニューを追加します。 「keywordsearch.jsp」の「<input type="text" size="50" name="searchword" id="searchword" />」の下に、以下のコードを追加してください。
「keywordsearch.js」の、「var pars = "keyword=" + $("searchword").value;」の下に以下のコードを追加してください。
「keywordsearch_Ajax.jsp」の「String keyword = request.getParameter("keyword");」の次に以下のコードを追加してください。
その次の行を以下のように変更します。
再起動は必要ありません。ページをリロードしてプルダウンメニューで「フルーツ」を選択し、キーワード入力欄に「バナナ」と入力します。これでフルーツのバナナだけが検索されれば成功ですが……。残念ながら、ドライバナナやペットフードが検索結果に含まれています（注：オイシックスの商品は常時入れ変わっているので、検索結果が異なる場合があります）。 実は、今回のプログラムにも間違いがあります。次回は、JavaScriptのデバッグ機能を利用してこの不具合を修正します。
※本記事は、日立製作所の『日本語MyEclipseポータルサイト』に掲載された記事を許諾を得て、再構成したものです。 提供：株式会社 日立製作所 企画：アイティメディア 営業局 制作：＠IT編集部 掲載内容有効期限：2008年3月31日 |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
をクリックします。新しいウィンドウで［AJAX Webブラウザー］が起動します。
をクリックします。アイコンがくぼんだ状態になります。この状態で［CTRL］キーを押しながら、［AJAX Webブラウザー］部分の上でマウスカーソルを動かしてください。青い四角がマウスの動きに合わせて変化します。そのままクリックすると、青い四角が示しているDOMオブジェクトが右の［DOMインスペクター］で選択されます。
をクリックします。
をクリックして拡大しましょう。
をクリックします。 
