GoogleからJava開発者へのサプライズ！な贈り物、Google Web Toolkit[3]

JavaScript×HTMLとJavaのシームレスな開発環境を体験してみよう

リトルソフト株式会社　長尾寿宏
2006/8/26

Yahoo!WebサービスとGoogle Web Toolkitで、JavaScript×HTMLとJavaのシームレスな開発環境を体験しながら、ウィジェット、グリッド、スクロール、フレームなどを表示させ画像検索アプリを完成させよう。グリッドのバグ回避についても解説。

Webサービスから結果セットを読み出して表示させるまで

　前々回「JavaをAjaxに変換するグーグルのGWTを使ってみよう」、前回「Yahoo!のAPIとGWTを使って画像検索アプリ！」から引き続き、画像検索アプリケーションを作成しながら、Google Web Toolkit（GWT）のプログラミングを詳しく見ていきたいと思います。

　今回はGWTが提供するリモート・プロシージャ・コール（RPC）のメカニズムを利用して、Yahoo!画像検索Webサービスの結果セットをクライアント側に転送し、ユーザーインターフェイスへ表示する処理を実装します。

RPCインターフェイスの定義とサービスメソッドの実装

・GWTのRPCとは？

　GWTのクライアント側プログラムの実体は、JavaToJavaScriptコンパイラによって生成されたJavaScriptコードであり、ユーザーインターフェイスを構成するHTML要素は、これらJavaScriptコードの中で動的に生成されます。また、イベントに伴うユーザーインターフェイスの変更も同様で、開発時にJavaコードとして書いたウィジェット操作が、JavaScriptコードによる動的HTML操作に変換されています。

　このようにGWTクライアント側プログラムはスタンドアロンプログラムのごとく、自らのユーザーインターフェイスを描画するので、従来型のWebアプリケーションのように、HTMLページ、あるいはHTMLの断片をサーバ側に要求する必要がありません。

　GWTサーバ側プログラムの実体はcom.google.gwt.user.server.rpc.RemoteServiceServletを継承したJavaサーブレットとなりますが、ユーザービュー遷移の制御やHTML生成といった一般的なWebアプリケーションフレームワークが提供している機能は存在せず、リモート・プロシージャ・コール（RPC）機能に特化した内容となっています。

　GWT RPCの特徴は、クライアント側とサーバ側との間で、HTTPプロトコルにより、Javaオブジェクトを簡単にやりとりできる点です。

　もちろん、クライアント側プログラムはWebブラウザの中で実行されているJavaScriptコードですので、サーバ側で生成されたJavaオブジェクトのインスタンスを直接参照しているわけではありません。

　GWTが提供しているRPCメカニズムにより、サーバ側のJavaオブジェクトが自動的に直列化され、クライアント側でJavaScriptオブジェクトとして復元されるのです。クライアント側からリモートメソッドの引数としてサーバ側に渡される際も同様な直列化と復元が行われます。

検索結果セットのクラスを作成する

　今回作成するアプリケーションでは、サーバ側プログラムの中でYahoo!検索Webサービスへの問い合わせ処理を行い、取得した結果をJavaオブジェクトに詰め込んで、クライアント側プログラムへ返却します。そこで、まず検索結果セットを格納するためのクラスを作成しましょう。

　RPCメソッドのパラメータあるいは戻り値に指定する型は直列化可能な型である必要があります。具体的には、

• char、 byte、 short、 int、 long、 boolean、 float、or doubleといったプリミティブ型
• String、Dateおよびプリミティブ型のラッパークラス（Character、 Byte、 Short、 Integer、 Long、 Boolean、 Float、 Double）
• 直列化可能な型の配列
• 直列化可能なユーザー定義クラス

以上の型を指定することができます。

　また、直列化可能なユーザー定義クラスを作成する場合は、IsSerializableインターフェイスを実装する必要があります。

　以下が検索結果セット格納クラス（ImageSearchResultSet）のコードです。

package jp.littlesoft.gwttest1.client; import java.util.ArrayList; import com.google.gwt.user.client.rpc.IsSerializable; public class ImageSearchResultSet implements IsSerializable {   public int totalResultsAvailable;    public int totalResultsReturned;    public int firstResultPosition;      public ArrayList results = new ArrayList();      public static class Result implements IsSerializable {     public String title;     public String summary;     public String url;     public String clickUrl;     public String refererUrl;     public String fileSize;     public String fileFormat;     public int width;     public int height;     public Thumbnail thumbnail = new Thumbnail();         public static class Thumbnail implements IsSerializable {       public String url;       public int width;       public int height;     }   } }

　ImageSearchResultSetクラスをはじめ、それぞれの入れ子クラスにIsSerializableインターフェイスの実装が指定されている点に注意してください。

　Yahoo!検索Webサービスによって返される結果セットの詳細については、こちら（http://developer.yahoo.co.jp/search/image/V1/imageSearch.html）を参照してください。

サービスインターフェイスの定義

　まず作成するのは、GWT提供のRemoteServiceインターフェイスを拡張したサービスインターフェイスです。

package jp.littlesoft.gwttest1.client; import jp.littlesoft.gwttest1.client.ImageSearchResultSet; import com.google.gwt.user.client.rpc.RemoteService; public interface ImageSearchService extends RemoteService {   public ImageSearchResultSet execute(int start, int size, String keyword)  throws Exception ; }

　executeメソッドは、パラメータとして検索結果の先頭位置（start）、返却結果件数（size）、検索キーワード（keyword）を指定できます。また、戻り値の型は先に作成した検索結果セットクラス（ImageSearchResultSet）です。

1/5

INDEX
JavaScript×HTMLとJavaのシームレスな開発環境を体験してみよう
	Page1＜Webサービスから結果セットを読み出して表示させるまで／RPCインターフェイスの定義とサービスメソッドの実装／検索結果セットのクラスを作成する／サービスインターフェイスの定義＞
	Page2＜サーバ側 サービスメソッドの実装／非同期インターフェイスの定義＞
	Page3＜クライアント側 検索機能の実装／ウィジェットへの値設定＞
	Page4＜グリッドの利用／グリッドのバグ回避／スクロールに伴う自動読み込み＞
	Page5＜背景色変更と内部フレーム表示／今後のバージョンアップも期待＞

Ajax関連記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）