Google Web Toolkitのすすめ浜本 階生

自己紹介

• 浜本 階生（はまもと かいせい）

• http://twitter.com/kaiseh　

• http://d.hatena.ne.jp/kaiseh/　

自己紹介ビジュアルブログ検索エンジン『Blogopolis』

http://blogopolis.jp/

今日のテーマ

• GWTとは

• GWTアプリケーションの開発

• GWTアプリケーションの実行とテスト

GWTとは

Google Web Toolkitとは

• Google製のWebフレームワーク

• JavaコードだけでAjaxアプリを構築できる

通常のAjax開発

• JavaScriptライブラリ

• jQuery, Dojo, mootools, ...　

• デバッガ

• Firebug, IE Developer Toolbar, ...

Ajax開発の問題点

• JavaScriptは大規模開発が難しい

• クロスブラウザ対応

• Eclipse, NetBeans並の成熟度を持つIDEの不在

GWTの「離れ業」• JavaのソースコードをJavaScriptにコンパイル！• java.lang.*, java.util.*の主要なJava APIをエミュレート• クライアント側ではコンパイル済みの

JavaScriptコードが動く✓ もちろん、サーバ側ではJavaクラスのロジックをそのまま動かせる

GWTコンパイラによる最適化

• 圧縮、難読化• クロスブラウザ• コード分割（後で説明）• 画像の連結

GWTへの追い風•クラウドと課金• CPU課金、トラフィック課金

•ロジックは極力クライアント側で実行したい• HTML5　

• Canvas, WebSockets, Web Storage, ...　

• JavaScriptによるRIAの可能性が広がる

WebGL + GWT

http://code.google.com/p/quake2-gwt-port/

Quake II GWT Port

GWTアプリケーションの開発

Google Plugin for Eclipse

• GWTおよびGAEの開発を支援するEclipseプラグイン

• 完成度が高い！

Google Pluginを利用してGWTアプリをGAEにデプロイ

（デモ）

画面のレイアウトButton sendButton = new Button(“send”);

TextBox nameField = new TextBox();

Label errorLabel = new Label();

...

panel.add(nameField);

panel.add(sendButton);

...

イベントハンドラ

sendButton.addClickHandler(

new ClickHandler() {

public void onClick(ClickEvent e) {

// クリック時の処理 }

});

UiBinder

• XMLによる宣言的レイアウトも可能

New in 2.0

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'    xmlns:g='urn:import:com.google.gwt.user.client.ui'>  <g:HTMLPanel>    Hello, <g:ListBox ui:field='listBox' visibleItemCount='1'/>.  </g:HTMLPanel></ui:UiBinder>

UIコンポーネントSuggestBox

DatePicker

RichTextArea

MenuBar

外部UIライブラリの利用

Ext GWTExt JSと同じLook & Feel

http://www.extjs.com/products/gwt/

Google APIとのUI連携• Google Maps API for GWT

• Google Chart Tools for GWT

• etc

Ajaxの記述

• 従来、JavaScriptとJavaの橋渡しが必要だったクライアント - サーバ間通信

• Javaで全てを記述できるGWTのメリットが最大限に発揮される

GWT RPC

RemoteService RemoteServiceImpl

RemoteServiceAsync

非同期インタフェース

1対1対応 （サーブレット）

サービスインタフェース サービスの実体

実装

クライアント

呼び出し

コールバック

非同期インタフェース

public interface AddService extends RemoteService {

int add(int a, int b);

}

public interface AddServiceAsync {

void add(int a, int b, AsyncCallback<Integer> callback);

}

対応関係はGoogle Pluginがチェックしてくれる

RPCの実行service.add(a, b, new AsyncCallback<Integer>() {

public void onSuccess(Integer result) {

// 成功時の処理 }

public void onFailure(Throwable caught) {

// 失敗時の処理 }

});

JSNI (JavaScript Native Interface)

• JavaScriptに直接アクセス可能

• nativeキーワードとコメントを活用した記法

public static native String encode(String s) /*-{ return encodeURIComponent(s);}-*/;

国際化public interface MyMessages extends Messages {

public String edit();

public String delete();

}

edit=編集...delete=削除

edit=Edit...delete=Delete

MyMessages_ja.properties MyMessages_en.properties

コード分割 New in 2.0

GWT.runAsync(new RunAsyncCallback() {

public void onSuccess() {

// ここに記述するコードに相当する // JSファイルは後からロードされる }

public void onFailure(Throwable caught) {

}

});

履歴管理• Ajaxアプリで「戻る」ボタン対策は悩ましい問題

• GWTではURLのフラグメント部をトークンとして利用し、履歴管理を実現http://example.com/foo/Foo.html#state1

• 実際の状態変更処理はアプリケーション側で実装する

GWTアプリケーションの実行とテスト

開発モード• 開発中のアプリを一般のブラウザでテストするためのモード

• JavaScriptへのコンパイル不要

• ブラウザを再読み込みすると最新のJava

コードを反映

New in 2.0

Speed Tracer

• パフォーマンス解析ツール• Chromeのアドオン• GWT以外のWebアプリにも使える• 原因別のボトルネック分析が可能• DOMの操作• ネットワーク• 描画

New in 2.0

Mavenプラグイン

• GWTコンパイラの実行

• 非同期インタフェースの自動生成• 国際化インタフェースの自動生成• etc

http://mojo.codehaus.org/gwt-maven-plugin

まとめ• GWTはクラウド、HTML5時代に有望な

Webフレームワーク

• GWT RPC、国際化、履歴管理など有用な機能

• プラグイン、外部ライブラリなど充実した周辺サポート

ありがとうございました