Google Web Toolkit：現実的な開発に即したAJAX

JavaをJavaScriptとHTMLに変換する開発フレームワークの利用

Google Web Toolkitは、Swingライクな開発フレームワークと素晴らしいコンパイラ／デバッガを備え、AJAX開発を容易にしてくれるツールキットです。本稿では、これらすべての機能を実際に利用するデモを紹介します。

はじめに

　AJAXアプリケーションの開発は簡単なものではありません。というのも、AJAX（Asynchronous JavaScript and XML）の開発言語であるJavaScriptの全貌を把握している開発者はほとんどいないからです。さらに悪いことに、JavaScriptの実装はブラウザによって違いがあるため、互換性という厄介な問題もあります（「補足記事1　以前のWeb UIおよびAJAXのJavaScriptの弱点」を参照）。GmailとGoogle MapsによってAJAXの名を知らしめたGoogleが、この問題を解決するために世に送り出したのがGoogle Web Toolkit（GWT）です。

必要な環境

• Google Web Toolkit
• Apache Ant 1.6
• Apache Tomcat
• Java Standard Edition 1.4以降
• Eclipse

補足記事1　以前のWeb UIとAJAXのJavaScriptの弱点

　ユーザーインターフェイスの開発に関して、デスクトップアプリケーションの開発者をうらやましく思った経験があるのではないでしょうか？ 特にうらやましいのは、数々のコントロールと洗練されたイベントリスニングの枠組みを備えたJava Swingを利用している人々です。Swingでは、マウスのクリック、コンポーネント上でのマウスポインタの移動、マウスホイールの回転、コンポーネント上でのマウスホイールの回転などに応答できます。これだけの機能があれば、ブロードウェイミュージカルのように派手なアプリケーションを作成するのも簡単でしょう。
　一方、Web開発者が利用できるのは、いくつかの不恰好なHTMLコントロール、貧弱なサーブレット/JSP、薄っぺらなイベントモデル、そして最低限のIDEサポートです。ユーザーのさまざまな操作に応答するだけでもサーバーとのやりとりが発生するため、軽快に動作するインターフェイスはあきらめざるを得ません。Web開発者がせいぜい余興どまりのアプリケーションしか作成できないのも無理はないのです。
　また、サーブレット/JSP、Javaオブジェクト、DHTML、JavaScript、CSSの開発およびテストを統合的に行うことが期待される統合開発環境（IDE）でも、大抵の場合はぎこちない連携しか実現されてないということを考えると、Web開発者がどのようにして日々の開発作業をこなしているのか不思議に思うくらいです。
　AJAXは、ユーザーが指を動かすたびにページ全体をリロードするのではなく、データを小さなパケット単位で交換することによって、Webのユーザーインターフェイスの魅力を高め、Webページの応答性を高めるものとして期待されています。AJAXとは、JavaScript、HTML、CSS、XML、ブラウザのDocument Object Model（DOM）が調和して生まれた集合体です。この集合体は、XMLHttpRequestオブジェクト（実装によってはIFRAME）を介してやりとりを行います。また、このXMLHttpRequestオブジェクトはクライアントブラウザのJavaScriptとWebサーバーとの間でやり取りされるXMLの転送および操作を行いますが、ここにAJAXのアキレス腱とも呼べる弱点があります。
　もしもあなたが私の知る大半のJava開発者と同類の人であれば、おそらくJavaScriptを見ただけで顔をしかめるでしょうし、簡単な検証以上のことをJavaScriptで行うと考えただけでうんざりするはずです。開発者が概してJavaScriptを避けたがるのは、JavaScriptがコンポーネントやオブジェクトの設計指針を重んじていないからです。さらに悪いことに、各種のブラウザのJavaScriptの実装は不安定であり、そのおかげでJavaScriptのコードはいとも簡単に台無しになってしまう傾向があります。

Googleが推進するAJAX開発用のWeb Toolkit

　Googleは同社のアプリケーションであるGmailとGoogle MapsにAJAXを利用しています。Googleの開発者はおそらく喜んでJavaScriptを使用したわけではないでしょうが、それによってこの巨大検索エンジンの歩みが妨げられることはありませんでした。Googleが利用したのは、コンピュータの登場当初から広く使われてきた技術、つまり典型的なコンパイラでした。コンパイラは、開発者が自分たちに理解しやすい高レベルの言語で開発やコーディングを行えるようにする技術です。コンパイラにより、高レベル言語で書かれたコードが低レベル言語に変換されます。

　Googleのある小さな開発チームが、JavaをJavaScriptに変換するコンパイラを作成したことで、Googleの開発者は設計、開発、デバッグ、テストをJavaで行い、それをJavaScriptに変換することが可能になりました。Googleのモットー「Do No Evil（悪いことはしない）」に従い、チームはこのテクノロジをGoogle Web Toolkit（GWT）と名付けて開発者コミュニティに無償で共有することを決めました。

　GWTには、コンパイラのほかに、AJAX開発の苦労を軽減してくれる次のようなAPIおよびツールの一式が含まれています。

• アプリケーションの起動ファイルを作成するスクリプト
• Javaでの開発後、GWTによりJavaScriptにコンパイルできるUIウィジェットおよびレイアウトマネージャ
• JavaScriptのクライアント/サーバー間のRPC通信を可能にするJavaコンポーネント
• ブラウザの履歴スタックに対応する履歴関連のイベントおよび関数
• Eclipse IDEでのデバッグを可能にするGWT環境
• ユーザーインターフェイスおよびRPCのJavaコードをIE、Firefox、Mozilla、Safari、Operaと互換性のあるJavaScriptに変換するGWTコンパイラ

　本稿では、これらすべての機能を実際に利用するデモを紹介します。その過程で、GWTではまだ目新しい、Apache AntやTomcatと組み合わせてGWTを使う方法も学んでいきます。

サンプルアプリケーション「AJAX With Ease」

　実際に動かすために、まずはGoogle Web Toolkitをダウンロードしましょう。今回のチュートリアルでは、2006年7月10日にダウンロードした「gwt-windows-1.0.21.zip」を使っています。このファイルを展開すると、「gwt-windows-1.0.21」というフォルダの下にすべてのGWTファイルが用意されます。

　続いて、本稿で用いるソースコードをダウンロードして展開します。このzipファイルには、「AJAX With Ease」サンプルアプリケーションのソースコード、プロジェクトおよびアプリケーション作成スクリプト、さらにApache Antビルドファイルが含まれています。このアプリケーションには、GWTの主要な機能についてのサンプルが組み込まれています（「補足記事2　AJAX With Easeプロジェクトファイル」に、AJAX With Easeアプリケーションとプロジェクト作成スクリプトの詳細、さらにApache Tomcatの利用に必要な「build.xml」および「gwt-user-wo-javax.jar」ファイルについての説明を示します）。

　このアプリケーションをEclipseにインポートするには、Eclipseのメニューで［File］-［Import］-［Existing Projects Into Workspace］を順に選び、「ajaxwithease」フォルダの「ajaxwithease」プロジェクトを選んで［Finish］をクリックします。インポートが終わると、図1に示すようにEclipseでフォルダおよびファイルを参照できるようになります。

図1　Eclipseにインポートされた「AJAX With Ease」アプリケーション

　今度はこのアプリケーションをデバッグモードで実行します。デバッグボタン（虫のアイコン）をクリックすると、図2に示すようにGWTホストブラウザが起動します。このホストブラウザはJVMフックによってEclipseに組み込まれており、このブラウザ内で開発中のWebアプリケーション全体を試すことができます。これでEclipseにブレークポイントを設定し、ホストブラウザでアプリケーションを実行して、ブレークポイントにヒットさせることができます。

図2　デバッグボタンによりGWTホストブラウザを起動

　AJAX With Easeアプリケーションの使い方はきわめてシンプルです。［Styles］タブは、実行時にボタンにスタイルを適用して、ボタンの外観がどのように変わるかを示しています。また［RPC］タブは、テキストボックスに入力されたタイトルと名前を受け取って「hello」というメッセージを表示する方法を示しています。さらに［History］タブは、ユーザーがテキストボックスに何らかの値を入力して［Add to History］ボタンをクリックしたときに、URLにトークンを追加して、ユーザーがブラウザの［進む］および［戻る］ボタンをクリックしたときにのみ取得されるようにする方法を示しています。

　今のところGWTでは、Apache AntおよびTomcatをデプロイするための適切なサポートは行われていないません。GWTの「projectCreator.cmd」スクリプトによって作成されるAntファイルは、ほとんど実体のないスケルトンです。本稿のAJAX With Easeアプリケーションのビルドファイルには、JavaからJavaScriptへのコンパイルやJavaのコンパイルの実行、WARファイルの作成を行うために必要になる追加のタスクが含まれています。

　これらのタスクについては「補足記事2」で簡単に説明していますが、その他に、利用しているマシンに合わせて「build.properties」の内容を修正する必要があります。GWTのルートインストールフォルダを指すgwt.sdk.locationプロパティと、Tomcatの「webapps」フォルダを指すtomcat.webappsプロパティを次のように変更します。

# gwt install folder
gwt.sdk.location=c:/java/gwt/gwt-windows-1.0.21

# tomcat webapps directory
tomcat.webapps=c:/java/tomcat/Tomcat 5.5/webapps

　変更はこれで終わりです。AJAX With Easeアプリケーションをデプロイするには、ダウンロードファイルに含まれている「ajaxwithease-0.1.war」ファイルをTomcatの「webapps」フォルダにコピーするか、「build.xml」のdeployタスクを実行します。このdeployタスクは、init、prepare、gwt-compile、java-compile、javadoc、distの各タスクを長々と行った後、「ajaxwithease-0.1.war」ファイルをTomcatの「webapps」フォルダにコピーすることでデプロイを完了します。それでは、ブラウザからhttp://localhost:8080/ajaxwithease-0.1/Helloを参照して、このアプリケーションにアクセスしてみてください（Tomcatがマシンの8080番ポートを監視しているという前提です）。

補足記事2　AJAX With Easeプロジェクトファイル

　GWTには、Eclipseのプロジェクトといくつかの叩き台アプリケーションの作成に役立つ「applicationCreator.cmd」と「projectCreator.cmd」という2つのスクリプトファイルがバンドルされています。私が「AJAX With Ease」アプリケーションを作成するときには、次のようにしてこれらのスクリプトとパラメータを使用しました。

c:\java\gwt\gwt-windows-1.0.21\applicationCreator.cmd
 -eclipse ajaxwithease -ignore -out c:\projects\ajaxwithease
 com.techyatra.awe.client.Hello

c:\java\gwt\gwt-windows-1.0.21\projectCreator.cmd
 -eclipse ajaxwithease -ignore -out c:\projects\ajaxwithease

　上記のコマンドは、「ajaxWithEaseProjectCreator.cmd」ファイルと「ajaxWithEaseApplicationCreator.cmd」ファイルに記述されています。「ajaxWithEaseProjectCreator.cmd」ファイルによって、（ご想像の通り）各種ソースファイルを格納するための「src」フォルダ、.classpathファイル、.projectファイルが作成されました。なお、後ろの2つのファイルはEclipseのプロジェクトファイルです。Apache Antの「build.xml」ファイルの作成には-antオプションを使うこともできますが、このビルドファイルはほとんど中身のないものです。WARファイルの作成やWebサーバへのこのアプリケーションのデプロイを行うタスクはもちろん、JavaからJavaScriptへのコンパイルを実行するタスクさえ含まれていません。
　「ajaxWithEaseApplicationCreator.cmd」ファイルは、「hello」という叩き台アプリケーションを作成します。このアプリケーションには、クリックすると「Hello」と表示されるボタンとラベルを備えたHTMLページが含まれます。以下に、このスクリプトが作成するファイルおよびフォルダを示します。

• 「Hello.java」および「Hello.html」ファイル
それぞれ「client」フォルダ、「public」フォルダの下に作成されます。GWTは、提供されたクラス名パラメータスクリプトの末端のフォルダが「client」フォルダであると想定します。「Hello.java」にはJavaScriptにコンパイルされるJavaコードが含まれており、「Hello.html」にはJavaコードと連携して動作するHTMLが含まれています。
• 「hello-compile.cmd」スクリプトファイル
GWTのJava-to-JavaScriptコンパイラクラスを呼び出します。しかし、私はこのコンパイラクラスをApache Antから使っています。
• 「hello-shell.cmd」スクリプトファイル
GWTホスト環境を起動します。しかし、IDEがなければこのGWT対応環境はほとんど役に立たないため、私はEclipseを使ってGWT環境を起動しています。
• 「hello.launch」ファイル
このアプリケーションを起動するためにEclipseによって利用されます。
• 「Hello.gwt.xml」モジュールファイル
エントリポイント、サーブレットパス、JavaScriptに変換されるJavaファイルを含むソースパスなど、このアプリケーションで用いるさまざまなGWT特有の設定を含むGWT用設定ファイルです（モジュールファイルの形式については、GoogleのGWTドキュメントを参照してください）。

　WebサーバにデプロイできるアプリケーションのWARファイルを作成するには、これらのファイルだけでは足りないことに気付くでしょう。Apache Tomcatのようなサーブレット/JSPサーバにデプロイできるアプリケーションを作成するには、「conf」「web」「lib」の各フォルダとその中身も必要になります。
　「lib」フォルダ内の「gwt-user-wo-javax.jar」ファイルに注意してください。これはGWTの「gwt-user.jar」からjavax.*パッケージを取り除いたものです。どうしてそんなことをする必要があるのでしょうか？ その答えは後ほど出てきます。
　gwt-user-wo-javax.jarの説明
　WAR形式のマニフェストファイルやTomcat Webアプリケーションの設定ファイルが含まれる「conf」フォルダや「web」フォルダについての説明はいらないでしょうが、「lib」フォルダの「gwt-user-wo-javax.jar」には、ある程度の説明を必要とするちょっとしたごまかしが含まれています。
　AJAXとGWTとRPCを使用するアプリケーションをApache Tomcatにデプロイする場合には、GWTに付随する「gwt-user.jar」ファイルが必要になります。ただし、この「gwt-user.jar」にはjavax.*というJavaパッケージが含まれています。GWTのホストモードで実行するために、GWTはこのパッケージを必要とします。このパッケージはGWTの目的には役立ちますが、サーブレット/JSP仕様2.3の9.7.2項によれば、Tomcatはこの「gwt-user.jar」ファイルの読み込みを間違いなく拒否するため、Tomcatにデプロイされたアプリケーションは困った状況に陥ってしまいます。問題を引き起こしているのはjavax/servlet/Servlet.classです。「gwt-user.jar」がなければ、Tomcatではこのアプリケーションを起動できません。
　この問題をうまく回避するために現時点で行っている工夫は、WARファイルに含める前に「gwt-user.jar」からjavax.*ファイルを除外するというものです。「gwt-user-wo-javax.jar」は、こうした理由で「gwt-user.jar」からjavax.*を取り除いたものです。
　GWTの開発チームは、GWT Google Groupにおいて非公式ながらこのバグを認めています。そのため、今後のリリースで彼らがこのバグを修正してくれることは十分に考えられます。
　AJAX With Easeアプリケーションのbuild.xml
　GWTの「projectCreator.cmd」ファイルで-antパラメータを指定するとApache Antの叩き台ファイル「build.xml」が作成されますが、このファイルにはあまり中身がありません。GWTのJava-to-JavaScriptコンパイラクラスを呼び出すタスクや、Apache TomcatのようなWebサーバにデプロイするためのWebアプリケーションのWARファイルを作成するタスクさえ含まれておらず、叩き台としては少々物足りません。実用的なアプリケーションであれば、大抵はこうしたタスクを必要とするはずです。
　本稿のダウンロードサンプルには、AJAX With EaseアプリケーションのためのApache Antの「build.xml」と「build.properties」が含まれています。「build.xml」に記述されている次のようなタスクは、きっと皆さんのアプリケーション開発に大いに役立つことでしょう。

• prepare
「build」フォルダと「dist」フォルダを作成します（「build」フォルダは、JARファイルやWARファイルにパッケージ化される前のすべてのファイルを格納しておく場所です。また「dist」フォルダは、distタスクの実行中にJARファイルやWARファイルが置かれる場所です）。
• java-compile
サーバ側のJavaコードをコンパイルします。
• gwt-compile
GWTのcom.google.gwt.dev.GWTCompilerを使ってJavaコードをコンパイルして「bild」フォルダ内にJavaScriptを生成します（com.google.gwt.dev.GWTCompilerは、次に示すような、GWTの各種jarおよびAJAX With Easeのソースフォルダを含むgwt.compile.classpathを利用します）。

...
  <!-- GWT Compile Classpath -->
  <path id="gwt.compile.classpath">
    <pathelement path="${java.class.path}/"/>
    <pathelement location="${gwt.sdk.location}/gwt-user.jar"/>
    <pathelement
          location="${gwt.sdk.location}/gwt-dev-windows.jar"/>
    <pathelement location="${src.dir}"/>
  </path>

  <target name="gwt-compile" depends="static">
    <java classpathref="gwt.compile.classpath"
      classname="com.google.gwt.dev.GWTCompiler"
      fork="true">
      <arg value="-out"/>
      <arg value="${build.dir}"/>
      <arg value="${gwt.entrypoint.class}"/>
    </java>
  </target>
...

• gwt-copy
GWTがgwt-compileタスクで作成したファイルを「build」フォルダにコピーします。
• java-doc
Javaソースコードのすべてからドキュメントを作成します。
• dist
WebアプリケーションのWARファイル（ajaxwithease-0.1.war）、ソースコード、ドキュメントのzipファイルを作成します。