メインページに戻る
Japan Blog

Google Web Toolkit で遊んでみました その1



私の場合、Google でエンジニアとして働いていても、C++ でサーバー側のコードを書いている時間が一番長かったりして、案外イマドキの Web2.0的技術、たとえば Google Maps API 等のウェブサービス API や JavaScriptを活用したフレームワークに触れる機会は少なかったりします。しかし、自社で公開している APIやライブラリを知らないのもアレですし、たまには新しいものに挑戦しないと世の中についていけなくなるのではないか、脳年齢の上昇に歯止めがかからないのではないか、セルライトが増加したり血液がドロドロになるのではないか、といった微妙な恐怖が生活習慣病予備軍を襲います。そんなわけで最近ちょっと気になっているのがGWTことGoogle Web Toolkit です。

GWTを一言で述べるなら、Java「だけ」を使ってAJAXアプリケーションを開発するためのフレームワークです。通常のウェブアプリケーションの開発では、サーバー側はJavaやPHPで、クライアント側はHTMLとJavaScriptで記述することになりますが、これはなかなか面倒です。JavaとJavaScriptのようにちょっとだけ似ていて異なる言語を使っていると頭がこんがらがります。それにHTMLとJavaScriptを本格的に使って凝ったUIを作ろうとすると、ブラウザ毎の微妙な差異を考えないといけませんし、デバッグも大変です。一方、GWTではクライアント側もJavaを使って開発することができます。まずJavaを使ってコードを書き、それが完成したら、GWTの機能により、それを同等の動作を実現するHTMLとJavaScriptに変換して、サーバーにアップロードして使います。エンドユーザー側はJavaの実行環境をインストールする必要はありません。通常のJavaScript対応ブラウザだけでそのウェブアプリケーションを実行することができます。

以下の画面はGWTに含まれているMail Appというサンプルアプリケーションを実行したところです。この時点ではあくまでもJavaアプリケーションがJVM上で走っているわけですが、画面表示用にはJVMと通信する特別なブラウザが用いられます。これをホステッドモードと呼びます。アプリケーションの開発やデバッグはこのモードで動作を確認しつつ、Java用のエディタやデバッガを使っておこなうことになります。

Mail Appというサンプルアプリを示す画像。

次の画面は同じアプリケーションをJavaScriptにコンパイルし、Firefoxで見たところです。これをウェブモードといいます。この時点ではもはやJVMは必要なく、IEやFirefoxといった一般的なブラウザさえあれば動作するようになっています。見た目はもちろん、動作も開発段階とほぼ完全に同じになります。デスクトップアプリケーション(Java)とウェブアプリケーション(HTML+JavaScript)が同じ動作をするのを見ると、ちょっと不思議な感じがします。いやはや、すごい時代になったものです。

Mail Appというサンプルアプリを示す画像。

これと同等の UI を最初から JavaScript と HTMLを書いて作ることは可能か?といえば、もちろん不可能ではないでしょうが、かなりJavaScript を勉強してからでないと難しいように思えます。一方、GWTはAWT や Swing を使ってGUIを開発したことのあるJavaプログラマであれば、短時間で習得できそうです。

ここまで読んでいただいて、もし興味を持たれた方は、次のような手順で実際にGWTで遊んでみることができます。ユーザ登録は不要ですし、インストールも簡単なので、Javaプログラマの皆様はぜひお試しください。オープンソースなのでGWT自体のソースコードも公開されています。

  1. GWT をダウンロードする
    http://code.google.com/webtoolkit/から最新の GWT をダウンロードします。2007 年 10 月現在、最新のリリースはバージョン 1.4.60 で、Windows 用、MacOS X用、Linux 用の 3 種類が用意されています。パッケージのファイルサイズはちょっと大きく、Windows 用のもので 19MB もあるのですが、これはApache Tomcat など、GWT を使った開発に必要なソフトウェア一式が含まれているためです。
  2. インストールは展開するだけ
    インストールはパッケージファイルをどこか適当なディレクトリに展開するだけです。もちろん Java2 SDK はあらかじめインストールしておいてください。
  3. サンプルを実行する
    たとえば上記の Mail Appであれば、samples\Mail ディレクトリの下に移動して、Mail-shellを実行するだけです。Compile/Browseボタンを押すと、本物のブラウザでどのように動作するか確認できます。ちなみにこれはあくまでもサンプルなので、実際のメールの送受信には使えません。

次回は実際にコードを書いてみます。