Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

MyEclipseを使ったAjaxアプリケーションのピーピング

クライアント/サーバー間でシームレスなAjaxアプリケーションのデバッグ

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/01/31 00:00

Ajaxアプリケーションのデバッグは、クライアントとサーバーサイドの両者を考慮する必要があり、負担となりがちです。そこでMyEclipseを使うと、たとえ外部ページであっても、JavaScriptをステップ実行したり、非同期通信の内容を確認したりできるため、通常のJavaと同じような操作性で行うことができます。

目次

はじめに

 Ajaxを活用したリッチなページが多く見られるようになってきました。これらのページでは一体どういった処理をしているのでしょうか。

 MyEclipseを使うと、たとえ外部のページであっても、どのようにAjaxアプリケーションが動作しているのかを覗き見ることができます。JavaScriptにブレークポイントを設定して、一行ずつステップ実行したり、どのような非同期通信が行われているのかが確認できます。

 本記事では、MyEclipseが提供しているAjax用の機能を使ってAjaxアプリケーションの動作を確認する方法を紹介します。

対象読者

 本記事は、次のような方を読者対象としております。

  • Ajaxを活用したサイトがどのように実現されているか興味がある方
  • サーバサイドJavaの開発は行っているけれども、そろそろAjaxアプリケーション開発も始めようと考えている方

 なお、Eclipseの基本操作は習得しているものとし、説明は省略しています。

MyEclipseとは

 MyEclipseは米国Genuitec社が提供しているWebアプリケーション開発用のEclipseプラグインスイート製品です。執筆時点での最新版はMyEclipse 5.1 GAです(2007/01/16現在)。MyEclipseはJave EE開発に必要なプラグインが一通り揃っており、インストールすれば直ぐにでも開発を開始できます。

 MyEclipseの日本語ポータルサイトにはMyEclipseの日本語版が用意されています。Eclipse SDK 3.2.2とその日本語パックを解凍して、日本語MyEclipseを解凍するだけで、日本語版のMyEclipseを使用することが出来ます。

 MyEclipseはサブスクリプションというビジネスモデルで提供されており、年間3990円~6825円という安価でMyEclipseを購入することができます。また、30日間の試用期間が設定されているので購入前に試すこともできます。

Ajaxアプリケーションの概要

 まず初めに、Ajaxアプリケーションの動作の概要を説明して、ピーピングのポイントを解説します。図1が一般的なAjaxアプリケーションの概要図になります。Servletの部分はPHP、Perl、RubyなどのLL言語の場合もあります。

 Ajaxアプリケーションでは次のような処理がJavaScriptによって制御されて動作します。

  1. Webページからのイベントを受けてリクエストを構築
  2. XMLHttpRequestによる非同期通信
  3. コールバック関数によるレスポンスの解析
  4. DHTMLとDOMを用いたダイナミックなページの生成
図1 Ajaxアプリケーション
図1 Ajaxアプリケーション

 従って、Ajaxアプリケーションの振る舞いを観察するポイントは次のようになります。

  • JavaScriptによってどのような制御が行われているのか
  • JavaScriptによってプログラムの状態(変数の値)がどのように変化しているのか
  • どのような非同期通信が行われているのか
  • どのようなタグがダイナミックに生成されているか

 上記をMyEclipseを使って観察することにしましょう。

Web2.0ブラウザ

 MyEclipseからAjaxの振舞いを覗き見るには Web2.0ブラウザを使います。

 MyEclipseをインストールしたら[スタート]メニューからMyEclipseを起動してください。次に、Web2.0ブラウザを起動します。MyEclipseを起動すると、図2に示すアイコンがツールバーに表示されているのが分かります。

図2 ツールバー
図2 ツールバー

 右側のアイコンが、Web2.0ブラウザを起動するアイコンです。MyEclipseからAjaxアプリケーションをデバッグするときにクリックします。左側のアイコンが、JavaScriptデバッガを起動するアイコンです。Web2.0ブラウザからデバッグ対象のサイトにアクセスした後に起動します。

 次図がWeb2.0ブラウザの画面です。

図3 Web2.0ブラウザ
図3 Web2.0ブラウザ

 一番広い領域に表示されているのがブラウザです。

 その右がDOMインスペクタのビューです。DOMインスペクタには、ブラウザが現在アクセスしているページの構造がDOMとしてツリー状に表示されます。

 左下がJavaScriptの領域になります。「JavaScriptコンソール」と「JavaScriptスクリプトインスペクタ」があります。JavaScriptコンソールには、現在アクセスしているページのJavaScriptのエラーが表示されます。JavaScriptスクリプトインスペクタには、現在ブラウザに表示しているページが読み込んでいるJavaScriptの一覧が表示されます。

 今回は、http://code.jalenack.com/periodic/へのアクセスを例に、Ajaxの振舞いを観察してみます。アクセスすると分かりますが、このページは中高生時代に苦しんだ元素記号表を表示するページです。元素をマウスでクリックすると、その元素の詳細が表示されます。詳細表示の処理にAjaxを使っています。

 ではMyEclipseを使って、このページでどのようにAjaxが使われているのかを覗いてみることにしましょう。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 水島 和憲(ミズシマ カズノリ)

    最近の楽しみは通勤途中の新築中の家を眺めること。毎日毎日少しずつ完成していく。ものが出来上がる過程を眺めるのは楽しいものだ。 エクリプスを立ち上げてから、ずっとEclipseの動向を眺めてきた。人気が出て、広まっていく様子を眺めるのも、また楽しい。

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5