00:00Ajaxアプリケーションのデバッグは、クライアントとサーバーサイドの両者を考慮する必要があり、負担となりがちです。そこでMyEclipseを使うと、たとえ外部ページであっても、JavaScriptをステップ実行したり、非同期通信の内容を確認したりできるため、通常のJavaと同じような操作性で行うことができます。目次Page1はじめに対象読者MyEclipseとはAjaxアプリケーションの概要Web2.0ブラウザPage2非同期通信のモニタリングJavaScriptの追っかけDOMインスペクタMyEclipseを使ったAjaxアプリケーション開発の嬉しさはじめにAjaxを活用したリッチなページが多く見られるようになってきました。これらのページでは一体どういった処理をしているのでしょうか。MyEclipseを使うと、たとえ外部のページであっても、どのようにAjaxアプリケーションが動作しているのかを覗き見ることができます。JavaScriptにブレークポイントを設定して、一行ずつステップ実行したり、どのような非同期通信が行われているのかが確認できます。次のような方を読者対象としております。Ajaxを活用したサイトがどのように実現されているか興味がある方サーバサイドJavaの開発は行っているけれども、そろそろAjaxアプリケーション開発も始めようと考えている方なお、Eclipseの基本操作は習得しているものとし、説明は省略しています。MyEclipseとはMyEclipseは米国Genuitec社が提供しているWebアプリケーション開発用のEclipseプラグインスイート製品です。GAです(2007/01/16現在)。EE開発に必要なプラグインが一通り揃っており、インストールすれば直ぐにでも開発を開始できます。MyEclipseの日本語ポータルサイトにはMyEclipseの日本語版が用意されています。3.2.2とその日本語パックを解凍して、日本語MyEclipseを解凍するだけで、日本語版のMyEclipseを使用することが出来ます。MyEclipseはサブスクリプションというビジネスモデルで提供されており、年間3990円~6825円という安価でMyEclipseを購入することができます。30日間の試用期間が設定されているので購入前に試すこともできます。Ajaxアプリケーションの概要まず初めに、Ajaxアプリケーションの動作の概要を説明して、ピーピングのポイントを解説します。図1が一般的なAjaxアプリケーションの概要図になります。Servletの部分はPHP、Perl、RubyなどのLL言語の場合もあります。Ajaxアプリケーションでは次のような処理がJavaScriptによって制御されて動作します。Ajaxアプリケーション従って、Ajaxアプリケーションの振る舞いを観察するポイントは次のようになります。JavaScriptによってどのような制御が行われているのかJavaScriptによってプログラムの状態(変数の値)がどのように変化しているのかどのような非同期通信が行われているのかどのようなタグがダイナミックに生成されているか上記をMyEclipseを使って観察することにしましょう。Web2.0ブラウザを使います。MyEclipseをインストールしたら[スタート]メニューからMyEclipseを起動してください。次に、Web2.0ブラウザを起動します。MyEclipseを起動すると、図2に示すアイコンがツールバーに表示されているのが分かります。右側のアイコンが、Web2.0ブラウザを起動するアイコンです。MyEclipseからAjaxアプリケーションをデバッグするときにクリックします。左側のアイコンが、JavaScriptデバッガを起動するアイコンです。Web2.0ブラウザからデバッグ対象のサイトにアクセスした後に起動します。次図がWeb2.0ブラウザの画面です。Web2.0ブラウザ一番広い領域に表示されているのがブラウザです。その右がDOMインスペクタのビューです。DOMインスペクタには、ブラウザが現在アクセスしているページの構造がDOMとしてツリー状に表示されます。左下がJavaScriptの領域になります。「JavaScriptコンソール」と「JavaScriptスクリプトインスペクタ」があります。JavaScriptコンソールには、現在アクセスしているページのJavaScriptのエラーが表示されます。JavaScriptスクリプトインスペクタには、現在ブラウザに表示しているページが読み込んでいるJavaScriptの一覧が表示されます。今回は、http://code.jalenack.com/periodic/へのアクセスを例に、Ajaxの振舞いを観察してみます。アクセスすると分かりますが、このページは中高生時代に苦しんだ元素記号表を表示するページです。元素をマウスでクリックすると、その元素の詳細が表示されます。詳細表示の処理にAjaxを使っています。MyEclipseを使って、このページでどのようにAjaxが使われているのかを覗いてみることにしましょう。カズノリ)最近の楽しみは通勤途中の新築中の家を眺めること。毎日毎日少しずつ完成していく。ものが出来上がる過程を眺めるのは楽しいものだ。エクリプスを立ち上げてから、ずっとEclipseの動向を眺めてきた。人気が出て、広まっていく様子を眺めるのも、また楽しい。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。