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

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プログラマになじみやすい＞

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フィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
New！
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ