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

Yahoo!のAPIとGWTを使って画像検索アプリ!


リトルソフト株式会社 長尾寿宏
2006/7/12
グーグルのJavaをJSに変換するGoogle Web Toolkit。Yahoo!WebサービスAPIを使って、画像検索アプリを作ろう(編集部)

 Yahoo!Web検索サービスとGWTを使ってみよう

 前回「JavaをAjaxに変換するグーグルのGWTを使ってみよう」では、Google Web Toolkit(以下GWT)の概要を紹介しました。

 GWT最大の特徴は、JavaでAjaxが開発できることです。Ajaxアプリケーションのクライアント側をJava言語で開発し、それをピュアなHTMLとJavaScriptに翻訳する「Java-to-JavaScriptコンパイラ」というユニークな技術をコアとした開発手法にあります。

 具体的なAjaxアプリケーションを実際に作成することで、GWTのプログラミングやウィジェットあるいはリモート・プロシージャ・コールの機能といった本質的な要素へと迫っていきましょう。

 画像検索アプリケーション

 WebサービスのAPIとして、Yahoo!検索Webサービス(http://developer.yahoo.co.jp/search/)を利用していきたいと思います。まずは完成品の画面イメージを見てみましょう。

画面1 Yahoo!検索Webサービスを利用した画像検索アプリの例

 画像検索アプリケーションは、キーワードを入力し、検索ボタンを押すと、Yahoo!画像検索Webサービスへ問い合わせを行い、その検索を基にサムネイル画像と概要テキストを左側のスクロールパネルに一覧で表示します。

 また、一覧から画像を選択すると、その画像を含むHTMLコンテンツが右側の内部フレームに表示されます。

そのほか、以下の機能もサポートします。

  • 一覧で選択されている項目の背景色が変化する
  • 一覧スクロールに伴い、検索結果の追加取得と読み込みが非同期に行われる
  • ブラウザ全体のサイズ変更に伴い、内部ウィジェット(左側スクロールパネル、右側内部フレーム)のサイズが自動調整される

 以上、シンプルながらいくつかの興味深いテーマを含んだアプリケーションとなっています。

 アプリケーションの構成

 このアプリケーションはクライアント側とサーバ側のプログラムで構成されます。クライアント側は、ピュアHTMLとJavaScriptで構成されます。もちろん、開発する際は、これらをJava言語のプログラムとしてコーディングし、実行環境へ配布する際にGWTが提供するJava-to-JavaScriptコンパイラにより、静的なHTMLとJavaScriptへ変換します。

 一方、サーバ側はcom.google.gwt.user.server.rpc.RemoteServiceServletを継承したJavaサーブレットです。クライアント側は、GWTが提供するリモート・プロシージャ・コール(以下RPC)のメカニズムで、このJavaサーブレット内に実装されたサービスメソッドを呼び出します。GWTのRPCは、ちょっとしたルールに従う必要がありますが、それ以外は非常にシンプルなプログラミングで、クライアントとサーバの連携を行うことができます。

 また、Yahoo!画像検索Webサービスへの問い合わせはサーバ側(Javaサーブレット)で行います。画像検索WebサービスのレスポンスはシンプルなXMLデータですので、これをサーバ側でSAXParserを利用して解析し、RPCで転送可能なオブジェクトに再構築します。

図1 Yahoo!検索Webサービスを利用した画像検索アプリの例


1/5

 INDEX

GWTとYahoo!のAPIを使って画像検索アプリ!
Page1<Yahoo!Web検索サービスとGWTを使ってみよう/画像検索アプリケーション/アプリケーションの構成>
  Page2<開発環境としてGWT、Eclipse、JDKを準備しよう/YahooアプリケーションIDの取得//GWTプロジェクトの作成/標準パッケージレイアウト/クライアント側のユーザーインターフェイス作成/ウィジェットとパネル>
  Page3<レイアウトの概要・構造(1) RootPanel(2) DockPanel(3) HorizontalPanel(4) Label、 TextBox、 Button(5) ScrollPanel(6) Grid(7) Frame>
  Page4<CSSによる外観設定/ホストページの編集>
  Page5<ウィジェットの自動リサイズ機能の実装/ホステッドモードで実行してみる/Swing、AWT、SWTプログラマになじみやすい>


 Ajax関連記事


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

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


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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間