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 |
|
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
