【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷

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とは?

- PR -
 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<背景色変更と内部フレーム表示/今後のバージョンアップも期待>

Googleからのサプライズ、Google Web Toolkit バックナンバー


 Ajax関連記事


Ajaxフレームワーク「Spry」で作る「リンク集2.0」
特集:AdobeのAjaxフレームワーク「Spry」を使ってみよう アドビのAjaxフレームワーク「Spry」。さっそく簡単なリンク集のサンプルを作成しながら、その機能を探ってみよう
リッチクライアント & 帳票」フォーラム 2006/6/21

古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2

Ajax うきうき Watch

Ajaxという流行技術の定義を明確にしながら、Ajaxの動向からうきうきするような面白いもの、確実に押さえておきたいものを厳選してお届けしていく

最終更新 2008/5/26

ホワイトペーパーTechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

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

RSSフィード

スキルアップ/キャリアアップ(JOB@IT)

お勧め求人情報

キャリアアップ 〜JOB@IT
@IT Special -PR-
  上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは?

New!
  おばかアプリ選手権、第4弾開催中!!
ムダにカッコよくてくだらない作品求ム!

  社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

  Twitterのアカウントはなぜ突破された?
メールによる新手の攻撃手法とその対策

  もう仮想化のお試しフェイズは終わりだ!
Hyper-V 2.0が基幹システムも仮想化

  美人!? まあまあ? 気になる いやし系!!
PV急増で「美人時計」がとった手段とは?

  クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」

  .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は?

  業務効率と情報セキュリティ対策を両立!
手間なく確実に機密情報を守る方法とは?

  直属上司が海外にいるのエンジニアに見る
【実例】場所に捉われないワークスタイル

  「仮想化工房」のマイスターが選んだのは
VMware、Hyper-V、そしてVirtageだった!

  進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

  運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは?

  【CTC事例】約30の基幹システムを統合!
膨大なバッジジョブを制御した方法は?

  仮想化すればコストは削減できるか?
仮想化に必要な「3つの視点」を解説する

  その数、なんと400台以上! グループ内
サーバの「統合管理」によるメリットは?