目次


Cypal Studio for GWT を使って Ajax 開発をもっと簡単にする

Comments

Cypal Studio と GWT

GWT は、Java プログラマーが JavaScript を一切使わずに Java プログラミング言語だけで動的な Ajax Web アプリケーションを作成できるようにするための一連のツールです。GWT アプリケーションは主要なすべてのブラウザーで動作し、ユーザーとのリッチな対話動作を実現することができます。しかも、テストとデバッグも完全に Java 開発環境で行えます。

GWT フレームワークには、次の 4 つの主要なコンポーネントがあります。まず、Java 言語で実装された一連のウィジェットは、Swing などよりも単純なアプリケーション・プログラム・インターフェース (API) に求める、すべての標準ユーザー・インターフェース (UI) 機能を提供します。リモート・プロシージャー・メカニズムは、クライアントとサーバー間の通信を可能にし、GWT ですべての接続とデータ変換を処理します。開発中に GWT が単独で実行できるように完全統合されたブラウザー・シミュレーターには、GWT デバッグ・セッション中にエディターでブレークポイントを設定する機能も組み込まれています。そして最後のコンポーネント、コンパイラーは、Java コードをクライアント・ブラウザーで実際に実行される JavaScript コードに変換します。変換されたコードは特定のブラウザーに依存しないので、ブラウザーの非互換性をプログラマーが処理する必要はありません。

GWT は Ajax アプリケーションの作成プロセスを単純化しますが、それでも GWT を機能させるために同期しておかなければならない箇所がいくつかあります。この記事を執筆している時点で、GWT の高度なツールのサポートが主要な Java 開発環境に登場しはじめてきています。

その 1 つがCypal Studio for GWT です。これは Eclipse 用のプラグインで、GWT の開発中に行う共通タスクの多くを簡単なものにしてくれます。この記事では GWT の説明を網羅できないので、GWT の仕組みや単純なアプリケーションの作成方法をはじめ、詳しいことは「参考文献」の資料を参照してください。

Eclipse Web Tools Platform に Cypal Studio をインストールする

Cypal Studio for GWT を操作するには、まずこれをダウンロードする必要があります (「参考文献」を参照)。この記事の執筆時点での GWT バージョンは 1.3 です。このバージョンには Microsoft® Windows®、Mac OS X、および Linux® 用が用意されています。Cypal では、現在リリース候補となっている GWT V1.4 をサポートしない可能性があるので、ご使用のオペレーティング・システムに対応したファイルをダウンロードして解凍し、解凍されたフォルダーを扱いやすい場所に配置してください。

次に必要なのは、WTP (Web Tools Platform) プラグインを装備した Eclipse バージョンです。WTP は Web アプリケーション開発をサポートするツールの数々を包括したセットで、HTML やカスケーディング・スタイル・シート (CSS) などの Web 標準向けエディターのサポートや JSP (JavaServer Pages) エディターのサポート、そして Web アプリケーションで使用するデータベースを作成および維持するためのサポート、開発中に Web サーバーでアプリケーションを実行するためのサポートが含まれています。

これらの機能はいずれも非常に優れたものですが、この記事の対象範囲ではありません。WTP をここで取り上げたのは、Cypal Studio for GWT では WTP の実行が要件となるからです。WTP についての詳細は、「参考文献」を参照してください。

WTP が有効な Eclipse システムを用意するのに最も簡単な方法は、すべてを一式としてダウンロードすることです。特に Eclipse を初めてダウンロードする場合には、この方法をお勧めします。WTP のダウンロード・ページには、すべての WTP プラグインといくつかの必須ブラグインを 1 つにまとめたダウンロードが用意されています。このページは多少入り組んでいますが、Web Tools Platform; All-in-one を探してください。現時点での WTP バージョンは 1.5.4 です。Windows、Linux、Mac OS X にそれぞれ対応したバージョンがあるので、ご使用のプラットフォームに対応するものをダウンロードしてください。

すべてを一度にダウンロードするのではあまりにも簡単すぎると思う場合、あるいはそれよりもありそうな場合として、Eclipse をすでに持っているので全部をダウンロードし直すのは避けたいというのであれば、WTP をプラグインとしてダウンロードすることができます。ダウンロード・ページには必須プラグインがいくつかリストされているので、これらのプラグインをダウンロードして解凍し、既存の Eclipse システムの plugins ディレクトリーに配置します。次に Web Tools Platform (WTP, JST, and WST combined) をダウンロードします。ダウンロード・ファイルには、wtp-R-1.5.4.zip というような名前が付いています。このファイルも同じく plugins ディレクトリーに解凍します。

上記をすべて完了したら、いよいよ最新バージョンの Cypal Studio for GWT を用意する番です。この記事の執筆時点では、このバージョンは cypal.studio.for.gwt-beta.zip のような名前になっています。このファイルを Eclipse ディレクトリーに解凍すると、features および plugins ディレクトリーに複数のファイルが配置されます。

注: 古い Googlipse プラグインがインストールされている場合、そのプラグインを除去しないと Cypal Studio for GWT プラグインをきちんとインストールできない可能性があります。

ダウンロードはすべて完了しましたが、開始する前に設定しなければならない構成オプションが 1 つあります。Eclipse を起動して、図 1 に示す Preferences ウィンドウにアクセスしてください。 万事順調に行っていれば、左側に Cypal Studio のエントリーが表示されるはずです。このウィンドウにある GWT Home を、前に作成した GWT システムの最上位ディレクトリーに設定すれば、オプションの設定は完了です。

図 1. Cypal Studio の Preferences ウィンドウ
Cypal Studio の Preferences ウィンドウ
Cypal Studio の Preferences ウィンドウ

必要なものはすべてインストールしたので、次の作業に進みます。

Cypal Studio プロジェクトを作成する

Cypal Studio for GWT を使用するには、Dynamic Web Project を新規に作成するか、Cypal Studio を既存のプロジェクトに追加します。新規プロジェクトを開始する場合は File > New を選択します。Web という見出しの下にある Dynamic Web Project Wizard を選択すると、以下のウィンドウが表示されます。

図 2. New Dynamic Web Project ウィンドウ
New Dynamic Web Project ウィンドウ
New Dynamic Web Project ウィンドウ

以下の手順に従って、プロジェクトを作成します。

  1. Project name ボックスに、プロジェクトの名前を入力します。
  2. Configurations リストから Default Googlipse Project を選択して、Next をクリックします (この記事を執筆している時点では、まだ Googlipse となっています)。するとプロジェクトで有効にするプロジェクト・ファセットのリストが表示されます。ここでは、Dynamic Web Module、Googlipse、Java で構成されているデフォルト・リストをそのまま使用できます。
  3. Next をクリックします。ここで、Cypal Studio がこれから作成するディレクトリーの名前を構成することができます。この記事ではデフォルトの名前を使用しますが、どうしても変更したいのであれば遠慮なく変更してください。
  4. Finish をクリックします。

Cypal Studio for GWT が一連のファイルの作成を開始します。文書型定義 (DTD) の使用条件を受諾するよう求めるプロンプトが 1、2 度表示されるかもしれません。すべてが完了すると、図 3 のような Eclipse Project Explorer が表示されます。

図 3. Cypal Studio の Project Explorer
Cypal Studio の Project Explorer
Cypal Studio の Project Explorer

デプロイメント記述子は WTP に関することなので、ここでは詳しくは説明しません。Cypal Studio for GWT によって、ソース・コードのディレクトリー、コンパイル済み Java コードのディレクトリー (Java コードがある場合)、そして今のところ単独の web.xml ファイルがほとんどを占めている WebContent のディレクトリーが作成されます。

これで、新規 Cypal Studio プロジェクトの作成は完成です。既存の Eclipse Dynamic Web Project に Cypal Studio サポートを追加するのであれば、Project Explorer 内の該当するプロジェクトを右クリックし、Properties をクリックします。そこから Project Facets > Add/Remove Project Facets を選択すると使用可能なファセットのリストが表示されるので、Cypal の GWT Facet をクリックします。

最初のプロジェクト・モジュールを追加する

プロジェクトの骨組みは出来たものの実際のコードがないので、早速対処しましょう。GWT コードの基本単位はモジュールです。モジュールは、ユーザーがクライアント・ブラウザーから呼び出すページにほぼ相当します。モジュールは通常、1 つ以上のエントリー・ポイント・クラスで構成されていて、モジュール自体がロードされるときにこれらのクラスもロードされます。さらに、モジュールのソース・コード、公開 Web ファイル、そして必要な JavaScript または CSS ファイル (ある場合) を置く場所に、標準以外の場所を指定することもできます。

Cypal Studio for GWT でモジュールを作成するには、File > New を選択します。Cypal Studio ツールボックス・アイコンを持つモジュールのリストがある場合はこれを選択し、ない場合には表示されるウィンドウから Other > Cypal Studio > Module を選択します。この操作によって、以下のウィンドウが表示されます。

図 4. New GWT Module ウィンドウ
New GWT Module ウィンドウ
New GWT Module ウィンドウ

Source folder はデフォルトで既存のプロジェクトのソース・フォルダーに設定されますが、Package は自ら設定しなければなりません。通常、設定するのは、モジュールの最上位レベルのパッケージ名です。その他、モジュールの名前 (Name)、スーパークラス (Superclass)、インターフェース (Interfaces) のデフォルトも上記に示すように設定する必要があります。

Finish をクリックすると、Cypal Studio が以下の要素を作成します (GWT を以前使ったことのある読者なら、この結果は GWT のコマンド・ライン・ツールの場合とほとんど同じで、代わりに使いやすいグラフィカル・ユーザー・インターフェース (GUI) を使用しているだけだということにお気付きでしょう)。

  • 3 つのパッケージ (クライアント (client)、サーバー (server)、公開 (public))。指定したソース・ディレクトリーにある最上位レベルのパッケージの下に作成されます。
  • FirstModule.java ファイル。モジュールの初期エントリー・ポイントとなるクライアント・パッケージ内に作成されます。
  • FirstModule.html ファイル。実際にレンダリングされるページの HTML 用公開パッケージ内に作成されます。

コードを作成して実行する

Java ファイルと HTML ファイルに最初に含まれているのはコンパイルに必要な最小限のスタブだけですが、ここにはもう少し面白いものを加えることができます。リスト 1 のコードを HTML ファイルの body セクションに挿入してください。

リスト 1. コードの作成と実行
<table align=center>
    <tr>
        <td id="button"></td>
        <td id="count"></td>
    </tr>
</table>

Java ファイルには、リスト 2 に示す Java コードを加えます。また、インポートするクラスの import 文を Eclipse に生成させる必要もあります。

リスト 2. Java ファイルへの Java コードの追加
    int count = 0;

    public void onModuleLoad(){
        final Button button = new Button("Count Your Clicks!");
        final Label label = new Label(String.valueOf(count));
        button.addClickListener(new ClickListener() {
            public void onClick(Widget sender) {
                count += 1;
                label.setText(String.valueOf(count));
            }
        });
        RootPanel.get("button").add(button);
        RootPanel.get("count").add(label);
    }

このコードは onModuleLoad()メソッドに含まれているため、モジュールのロード時に自動的に実行されます。このコードは、設定された GWT ウィジェットの詳細には入り込まずにボタンとラベルを作成します。作成したボタンにはリスナーを追加し、RootPanel.get() に渡されたストリングと文書オブジェクト・モデル (DOM) ID が一致する HTML 要素に、ボタンとリスナーの両方を組み込みます。

システムを実行するため、Run をクリックします。Run ウィンドウで GWT Hosted Mode Application > New_configuration を選択すると、以下のウィンドウが表示されます (新しい構成を表示する場合には、GWT Hosted Mode Application を右クリックして New をクリックします)。

図 5. 実行構成の作成
実行構成の作成
実行構成の作成

このウィンドウでは、対象とするプロジェクトとそのプロジェクトのモジュールを指定しなければなりません。幸い、Eclipse では既存のプロジェクト・スペースを簡単にブラウズできるようになっています。Apply をクリックして新規構成を保管し (固有の名前を指定した上で)、Run をクリックします。これによって、プロジェクトが GWT ホスト・モードで起動されます (この操作を一度行えば、今後 Run をクリックすると他のすべての Eclipse 実行ターゲットと同じように動作するようになります)。Cypal Studio を使わずに Eclipse で実行ターゲットをセットアップしようとしたことがあるなら、Cypal Studio では約 7 段階分ステップが簡略化されるのが有難いはずです。

実行中のページは、図 6 のようになります。

図 6. 最初の Cypal Studio モジュール
最初の Cypal Studio モジュール
最初の Cypal Studio モジュール

リモート・サービスに接続する

リモート・サーバーとの通信はどんな Web アプリケーションでも重要な鍵となることから、GWT ではクライアント・サイドの GWT コードと Java リモート・サーバーとの通信を可能にするためのフレームワークを提供しています。詳細は「Google Web Toolkit、Apache Derby、Eclipse を使用して Ajax アプリケーションをビルドする 第 3 回」で説明していますが、このメカニズムは複数のクラスとインターフェースの EJB (Enterprise JavaBean) 統合です。それぞれの接続を一から作成するよりも遥かに簡単な方法であることは確かですが、経過を追わなければならない部分がいろいろとあります。

Cypal Studio for GWT には、リモート接続をさらに簡単に作成、管理できる便利な機能がいくつか用意されています。New > Remote Serviceを選択してプロセスを開始してください (メニューに Remote Service がない場合は、モジュールを作成したときと同じように Other > Cypal Studio を選択します)。すると、以下のウィンドウが表示されます。

図 7. GWT Remote Service
GWT Remote Service
GWT Remote Service

Name には Java サーバー・サイドのクラスの実際の名前、Extended interfaces サービス URI にはクライアントが実際に呼び出すサーバー・サイドの URL を入力してください。入力が完了したら Finish をクリックして Cypal Studio に作業を実行させます。

Cypal Studio は自動的に 3 つのファイルを作成します。クライアント・パッケージ内に作成される NumberGenerator.java が、このリモート接続のメイン・インターフェースです (リスト 3 を参照)。

リスト 3. NumberGenerator.java
public interface NumberGenerator extends RemoteService {

    public static final String SERVICE_URI = "/numbergenerator";

    public static class Util {

        public static NumberGeneratorAsync getInstance() {

            NumberGeneratorAsync instance = (NumberGeneratorAsync) GWT
                .create(NumberGenerator.class);
            ServiceDefTarget target = (ServiceDefTarget) instance;
            target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);
            return instance;
        }
    }

}

現時点ではこのファイルは空のインターフェースですが、Cypal Studio によって作成済みのユーティリティー・オブジェクトが、リモート呼び出しに適切な GWT 完全認証のインスタンスを返します。同様のコード、そしてボイラープレート・コードの共通メソッドを作成する際に役立つ推奨事項が「Google Web Toolkit、Apache Derby、Eclipse を使用して Ajax アプリケーションをビルドする 第 3 回」に記載されているので参照してください。

このユーティリティーの戻り値は、メイン・インターフェースの非同期兄弟である NumberGeneratorAsync 型です。メイン・インターフェースのすべてのメソッドには非同期インターフェースに対応するエントリーがありますが、これらのエントリーの戻りの型は void であり、AsyncCallback クラスが引数として追加されます。つまり、上記のコードをクライアント・ページから呼び出すと、実際には非同期インターフェースが使用され、これが GWT によってメイン・インターフェースに変換されてサーバー・サイドに表示されます。それから実際にサーバー応答を操作するために、AsyncCallback オブジェクトが使用されるというわけです。

サーバー・サイドでは、Cypal Studio によって実装クラス NumberGeneratorImpl が作成されています。このクラスが GWT クラス RemoteServiceServlet を拡張して NumberGenerator インターフェースを実装します。さらに、GWT が web.xml ファイルを変更して新規リモート・サーバーを登録し、デプロイされたアプリケーションで使用できるようにしています。追加されているのは、リスト 4 のようなコード行です。

リスト 4. NumberGenerator.java の追加行
    <servlet>
        <servlet-name>NumberGenerator</servlet-name>
        <servlet-class>
        com.ibm.firstmodule.server.NumberGeneratorImpl</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>NumberGenerator</servlet-name>
        <url-pattern>numbergenerator</url-pattern>
    </servlet-mapping>

リモート呼び出しを実際に作成するには、まずメソッド・シグニチャーを NumberGenerator に追加します。これから実装するメソッドが行うのは「数当て」ゲームです。メソッド・シグニチャーは以下のようになります。

 public Integer getNumber(int maxNumber);

このシグニチャーを NumberGenerator インターフェースに保管すると、面白いことが起こります。Cypal Studio が以下の対応するメソッドを NumberGeneratorAsync に追加するのです。

 public void getNumber(int maxNumber, AsyncCallback callback);

この 2 つのインターフェースを手作業で同期させるのはかなり厄介な作業なので、これは非常に有難い機能です。次に NumberGeneratorImpl クラスも見てください。Eclipse はこのクラスに赤いフラグを立てます。その理由は NumberGenerator インターフェースの実装が完全でなくなっているためですが、幸い、以下のコードを追加することでこの事態を収拾できます。聞かれる前に言っておきますが、これが極度に単純化されているのはわかっています。

public Integer getNumber(int maxNumber) {
    return new Integer((new Random()).nextInt());
}

呼び出しを行うために、上記のコードをモジュールに追加しました (リスト 5 を参照)。モジュールを機能させるため、HTML 本体には 2 つのセルを持つ行をさらに追加していることに注意してください。最初のセルの ID は sender、2 番目のセルの ID は response です。これで、ランダムな数値をサーバーから取得し、その数値をクリック・カウントと比較するボタンがモジュールに用意できました。

リスト 5. 呼び出しが追加されたモジュール
public class FirstModule implements EntryPoint {

    int count = 0;

    private Button button;
    private Button sender;
    private Label label; 
    private Label response;

    public void onModuleLoad() {
        button = new Button("Count Your Clicks!");
        sender = new Button("Send Your Count!");
        label = new Label(String.valueOf(count));
        response = new Label("No Guess Yet");
        button.addClickListener(new CountButtonClickListener());
        sender.addClickListener(new SendClickListener());
        RootPanel.get("button").add(button);
        RootPanel.get("count").add(label);
        RootPanel.get("sender").add(sender);
        RootPanel.get("response").add(response);
    }

    public class CountButtonClickListener implements ClickListener {

        public void onClick(Widget sender) {
            count += 1;
            label.setText(String.valueOf(count));
        }
    }

    public class SendClickListener implements ClickListener {

        public void onClick(Widget sender) {
            NumberGeneratorAsync async = 
                NumberGenerator.Util.getInstance();
            async.getNumber(10, new NumberCallback());
        }

    }

    public class NumberCallback implements AsyncCallback {

        public void onFailure(Throwable error) {
            response.setText("Oops");
        }

        public void onSuccess(Object resp) {
            int intResp = ((Integer) resp).intValue();
            if (intResp == count) {
                response.setText("Got It!");
            } else if (intResp < count) {
                response.setText("Too Low");
            } else if (intResp > count) {
                response.setText("Too High");
            }
        }

    }

}

上記のコードで肝心な部分は、SendClickListenerNumberCallback です。SendClickListener では、Cypal Studio が生成した Util クラスを使用して非同期インターフェースのインスタンスを取得し、そのインターフェースから getNumber() メソッドを呼び出します。

呼び出し時に渡す 2 番目の引数は、NumberCallback のインスタンスです。サーバーが応答を完了すると、GWT がこのインスタンスを自動的に呼び出します。コールバックには 2 つの分岐、onFailure() および onSuccess() があり、サーバーが例外を発生することなく要求を完了したかによって使い分けられます。この例では、サーバーが成功すると結果をカウントと比較してラベルのいずれか 1 つにテキストを設定します (呼び出しで現行のカウント値をサーバーに送り、サーバー・サイドで比較が行われるようにも設計することも可能です。これは単に、どこに複雑な部分を持ってくるかの問題です)。

このコードを配置して GWT ホスト・モードを起動すれば、すべてが順調に運ぶはずです。

GWT アプリケーションをデプロイする

Cypal Studio がまだ十分に成熟していないのは、Web アプリケーションを外部サーバーで使用するという分野でしょう。このようにすること自体は Eclipse の内側でも外側でも可能ですが、このプロセスにはおそらく必要以上のステップがいくつかあります。

Web アプリケーションを Eclipse 内で実行するには、Eclipse WTP で認可するサーブレット・エンジンが必要です。それには Apache Tomcat を選べば間違いはありません。次に、GWT アプリケーションをコンパイルします。最も簡単な方法は、上記に示したようにアプリケーションをホスト・モードで実行してから Compile/Browse をクリックすることです。するとすべての GWT コードが JavaScript ファイルにコンパイルされます。マシン上で外部ブラウザーが開くこともありますが、これは無視して構いません。

次に外部サーバーでの実行プロセスをトリガーするため、Project Explorer に表示されたプロジェクト名を右クリックし、Run As > Run On Server を選択します。これによって、新規サーバーを定義するためのウィンドウが表示されます。ホスト名は localhost のままにして、使用する予定のサーバー・タイプを選択してください。該当するタイプのサーバーがまだセットアップされていない場合、サーバーのランタイム・ディレクトリーを指定するようプロンプトが出されます。

ランタイム・ディレクトリーがセットアップされると、Eclipse がワークスペースに HTML ページを表示します。Eclipse がシステムのルート・ディレクトリーに進もうとしても慌てないでください。この例では index.html ファイルのようなものは何も指定していないので、これではエラーになります。作成した HTML ファイル (この例では、http://localhost:8080/GooglipseProject/FirstModule.html) をブラウザーで指定すれば、図 8 のような画面が表示されます

図 8. 外部サーバーのプロジェクト
外部サーバーのプロジェクト
外部サーバーのプロジェクト

GWT プロジェクトを外部ブラウザーにデプロイするのも簡単です。それには Project Explorer でプロジェクトを右クリックして Export > WAR を選択します。すると、Web Archive (WAR) ファイルを配置する場所を指定するようプロンプトが出されます (GWT コードも上記で説明したようにコンパイルしてください)。このプロンプトに応じて WAR ファイルをサーバー上の適切な場所にドロップすれば、すべては完了です。

GWT と Cypal Studio の今後

この記事を執筆している時点で GWT で注目すべきニュースとなっているのは、V1.3 リリースが完全にオープン・ソースの GWT であるということです。V1.4 リリースではリッチ・テキスト・ウィジェット、スプリッター、そして日付および数値のフォーマッターが追加されるだけでなく、開発ツールとパフォーマンスにも改善が加えられることが期待されています。Cypal Studio は現在も活発に開発が行われているので、Cypal Studio for GWT の Web サイトにアクセスして新しい情報を入手してください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source, Java technology
ArticleID=243403
ArticleTitle=Cypal Studio for GWT を使って Ajax 開発をもっと簡単にする
publish-date=06192007