外部記憶装置

GWTを用いてGoogle Wave Gadgetを開発する

• kenji
• 14:08
• コメント (4)
• カテゴリー:GoogleWave

Google Wave GadgetはGoogle Gadgetの拡張であるため、通常はJavaScriptを用いて開発します。
しかし、JavaScriptっていまいちよくわからないよ!!とか、JavaScriptで開発するのめんどくさいよ!!と言う方も多いでしょう。
そこでGoogleのWebアプリケーション開発フレームワークのGWT(Google Web Toolkit)を用いてGoogle Wave Gadgetを開発する方法を紹介します。

GWTを使うとJavaScriptを一切使わず、使い慣れたJavaだけでGoogle Wave Gadgetを開発することができます。
JavaのコードはGWTによってJavaScriptにコンパイルされて動作します。
JavaScriptなのでブラウザ上で完結するプログラムも書くことができるし、もちろんサーバとAjaxで通信するプログラムを書くこともできます。
JavaScriptに精通した人よりもJavaに精通した人の方が多いだろうし、GWTを用いて損はありません。

と言うことでGWTを用いてGoogle Wave Gadgetを開発します。


■必要なもの
・Eclipse 3.5とか適当に
・Google Plugin for Eclipse
http://code.google.com/intl/ja/eclipse/docs/download.html
・Google Apps Engineのアカウント
(無くても良いけどDeployが楽)

■作るもの
ボタン押したらカウントアップしていくカウンタ

■開発手順

1. まず開発環境の構築
EclipseにGoogle Plugin for Eclipseをインスコ

2. Web Application Projectの作成
Eclipseのメニュー[File]->[Other]から[Google]->[Web Application Project]を選択します。
適当に設定する。下の画面写真ではGoogle SDKは2.0だけど日本語版の最新の1.7.1でも可です。


3. 必要なライブラリの取得1
GWTからGadgetsを作成するためのライブラリをダウンロードします。
gwt-google-apis
http://code.google.com/p/gwt-google-apis/downloads/list

上記ページからgwt-gadgets-1.0.3.zipをダウンロードします。2009/12/31時点で1.0.3だけど、最新のバージョンがあれば最新の方が良いと思います。
解凍するとgwt-gadgets.jarと言うJarファイルがあるので、それを2で作成したプロジェクトのwar\WEB-INF\libにコピーします。

プロジェクトのプロパティを開き、Java Build PathのLibrariesタブを開きます。
そしてAdd JARsボタンを押下し、先ほどコピーしたgwt-gadgets.jarを選択します。

次に、Google Gadgetsの設定でもgwt-gadgets.jarを使用する設定を行います。
src/PACKAGE/PROJECT-NAME.gwt.xmlファイルを開きます。
(2で示した例ではsrc/jp.rainbowdevil/TestGadget.gwt.xmlを開く)

XMLに次の行を<module>タグ内に追加します。
<inherits name="com.google.gwt.gadgets.Gadgets" />



4. 必要なライブラリの取得2
3でインストールしたのGWTからGoogle Gadgetsを作成するためのライブラリで、Google Wave Gadgets用のAPIは提供されておりません。
たとえばWaveのSharedStateの取得や、SharedStateの更新時のイベントハンドラの機能は持っていないです。
そこでcobogwaveを使用します。
cobogwaveを使用するとJavaからGoogle Wave GadgetsのSharedStateを操作したり、SharedStateの更新を検知ししたりすることができます。

まずdownloadsからJarファイルを取得します。(2009/12/31時点でVersion 1.0.3.3)
war\WEB-INF\libにコピーし、プロジェクトのプロパティを開き、Java Build PathのLibrariesタブからcobogwave-gadget-1.0.3.3.jarをビルドパスに追加します。

次にGoogle Gadgetsの設定でもcobogwaveを使用する設定を行います。
3と同じようにTestGadget.gwt.xmlを開き、次の1行を<module>タグ内に追加します。
<inherits name='org.cobogw.gwt.waveapi.gadget.WaveGadget' />

またentry-pointのclassも変更しておきます。
子のクラス名は5. ガジェットの作成で作成するクラスを指定します。
<entry-point class="jp.rainbowdevil.client.CounterGadget" />

5. ガジェットの作成
適当なパッケージにガジェットのクラスを作成します。
例ではjp.rainbowdevil.clientにCounterGadgetクラスを作成します。
そしてスーパークラスはWaveGadgetとします。

次にガジェットの設定をアノテーションを用いて設定します。
ガジェットのタイトルと、作者名と、作者のメールアドレスと、ガジェットの高さを指定しています。
@com.google.gwt.gadgets.client.Gadget.ModulePrefs(title = "CounterGadget", author = "kenji", author_email = "kenjikitamura@gmail.com", height = 200)

よってクラス定義は次にようになります。

@com.google.gwt.gadgets.client.Gadget.ModulePrefs(title = "CounterGadget", author = "kenji", author_email = "kenjikitamura@gmail.com", height = 200)
public class CounterGadget extends WaveGadget {

6. 画面の作成
適当に画面を作成します。
HorizontalPanelの上にラベルとボタンを配置。

	private Label counterLabel;
	private Button countUpButton;

	@Override
	protected void init(UserPreferences preferences) {
		HorizontalPanel hvpanel = new HorizontalPanel();
		counterLabel = new Label("0");
		countUpButton = new Button("Count Up");
		hvpanel.add(counterLabel);
		hvpanel.add(countUpButton);
		RootPanel.get().add(hvpanel);
	}

7. とりあえず動かしてみる
今回はGoogle Apps Engine上にDeployして動かしてみます。
なぜGoogle Apps Engineかというと、Webサーバを準備する必要が無くコンパイルとアップロードがボタン一つで良いためです。

適当にGAEのアカウントを取得し、Eclipseのツールバーから[Deploy App Engine Project]を選択します。


すると次のダイアログが表示されるので、App Engine project settings...をクリック。


GAEのアプリケーションIDを設定します。


そしてOKボタンを押下、Deploy Project to Google App Engineダイアログに戻り、GoogleアカウントのIDとパスワードを入力しDeployを押下します。

ConsoleにDeployment completed successfullyと表示されればOK!

8. Waveに貼り付け
Deployが完了したのでWaveに貼り付けて画面を確認します。
Waveに貼り付けるためのURLはGAEを使用した場合、次のようになります。
http://[GAEアプリケーションID].appspot.com/[プロジェクト名]/[パッケージ名].[エントリークラス名].gadget.xml

例:
http://gwttest1203.appspot.com/testgadget/jp.ranbowdevil.client.CounterGadget.gadget.xml

貼り付けたらこんな感じ。まだボタンのコードを書いていないので押しても何も起こりません。



9. カウントアップ処理の追加
ボタンに次のhandlerを追加します。
SharedStateから値を取ってきてインクリメントしてSharedStateに設定しているだけ。

countUpButton.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				int count = Integer.parseInt(getWave().getState().get("VALUE", "0"));
				count++;
				getWave().getState().submitValue("VALUE", ""+count);
			}
		});

10. SharedStateの更新時のイベントハンドラの追加
initメソッドの中に次のコードを追加します。
SharedStateが更新された場合、自動でこのイベントハンドラが発火します。
ガジェット初期表示時にも呼ばれるので、とりあえずここに画面描画処理を書いておけばOK

getWave().addStateUpdateEventHandler(new StateUpdateEventHandler() {
			@Override
			public void onUpdate(StateUpdateEvent event) {
				counterLabel.setText(getWave().getState().get("VALUE","0"));
			}
		});

11. 貼り付けたWaveをFirefoxとChromeで見てボタンのカウントアップが共有されていることを確認

と言うことで、JavaScriptを一切書かず、Google Wave Gadgetを作成できました。
ちゃんちゃんっ！