Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

Google Web Toolkit(GWT) 2.0の入門チュートリアル：スタート ガイド
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：2.アプリケーションの設計
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：6.GWT アプリケーションのデバッグ
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-4
Google Web Toolkit(GWT) 2.0の入門チュートリアル：8.GWTアプリケーションのコンパイル

前回はGoogle Web Toolkit(GWT) 2.0の入門チュートリアルの日本語訳(0)で、

今回は「1.GWT プロジェクトの作成」です。

始まる前に、まずはお断り。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*…)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

→

ステップ1.GWT プロジェクトの作成

この時点では、あなたは最新版のグーグルウェブツールキットをダウンロードしたはずです。

このセクションでは、あなたはEclipseのGoogleプラグインかGWTのコマンドラインユティリティwebAppCreatorでStockWatcherプロジェクトを作成します。これらのユティリティはスタートするためのサブディレクトリやファイルを生成してくれます。プロジェクトは正しく設定されていることをテストするために、あなたはGWTスターターアプリケーションを開発モード(development mode)で実行します。最後に、生成されたプロジェクトファイルを調査します。

1.GWTアプリケーションの作成

エクリプスでStockWatcherアプリケーションを作成する

Java IDEに提供されているリファクタリング・コード補完、デバッグなどの機能を利用出来るのは、GWTを利用するメリットの一つです。このチュートリアルでは、我々はEclipseを利用します。なぜならそれは広く使われていて、なおかつ無料です。無論、自由にお好みのIDEを使ってもらっても構いません。

GWTアプリケーションを生成するためのウィザードはEclipse用のGoogleプラグインに含まれています。スターターアプリケーションを生成する手順は以下のようになっています。

1. ツールバーの「新規Webアプリケーション・プロジェクト」をクリックする。(*「ファイル」→「新規」→「新規Webアプリケーション・プロジェクト」でもOK)
2. • プロジェクト名に「StockWatcher」を入力する。
   • パッケージ名に「com.google.gwt.sample.stockwatche」を入力する。
   • Google SDKの「Google Webツールキットを使用」をチェックして、デフォルトSDKを使用します。
   • （オプション）もしあなたはGoogle App Engineを使うのであれば、「Google Appエンジンを使用する」もチェックして、デフォルトSDKを使用してください。
   • もしあなたはGoogle Plugin for Eclipseをインストールする時にSDKをインストールしなかったら、「SDK構成…」をクリックして、GWT(必要ならばGAE)のSDKが置かれているディレクトリを指定してください。
3. 「完了」をクリックする。

エクリプスを使わずにStockWatcherアプリケーションを作成する…(略)

生成されるディレクトリ

/src/com/google/gwt/sample/stockwatcher

GWTモジュール定義と(初期の)アプリケーションファイルが入っている

/test/com/google/gwt/sample/stockwatcher

Junitのテストディレクトリとスターター用のテストクラスが入っている

war(*Web Application Resources)

画像・スタイルシート・HTMLホストページなど、公開される静的リソースが入っている

/war/WEB-INF

Javaウェブアプリケーションのファイルが入っている

/war/WEB-INF/lib

Javaウェブアプリケーションのライブラリが入っている

生成されるファイル

StockWatcher.gwt.xml

GWTモジュール定義

StockWatcher.html

ホストページ

StockWatcher.css

アプリケーションのスタイルシート

web.xml

Javaウェブアプリケーションの記述語

StockWatcher.java

GWTのエントリポイントクラス

GreetingService.java, GreetingServiceAsync.java, GreetingServiceImpl.java

GWTのRPCサンプルクラス

gwt-servlet.jar

GWTサーバーのランタイムライブラリ

StockWatcherTest.java

StockWatcherのためのスターターテストケース

生成されるスクリプト

build.xml

開発モードでアプリケーションを実行するために、コマンドラインでGWTコンパイラを稼働させるためのAntビルドファイル

(*Eclipseでやるときはあんまり関係ありません)

生成されるEclipseファイル

• .project
• .classpath
• StockWatcher.launch
• StockWatcherTest-dev.launch
• StockWatcherTest-prod.launch

更にプロジェクト構造に関する情報を知りたいなら、開発者ガイドを御覧下さい。
→Directory/Package Conventions.(*英語です)

2.デフォルトのプロジェクトコンポーネントをテストする

生成されたすべてのプロジェクトコンポーネントをテストすため、開発モードでスターターアプリケーションを実行します。ローカルの開発モードでは、あなたはデプロイ(*アップして、利用出来るように発行すること)した時と同じように、ブラウザでアプリケーションとインタラクト(*双方向の動作)することが出来る、

エクリプスで開発モードコードサーバーを実行する

1. パッケージエクスプローラビューで、StockWatcherプロジェクトを選択する。
2. ツールバーで、「実行」ボタンをクリックし、「Webアプリケーション」で実行する。
3. 開発モード(*コンソールの右側の「Development Mode」)のタブが開いたら、そこのURL(*「http://localhost:8888/」ではなく、こんな感じのやつ「http://127.0.0.1:8888/StockWatcher.html?gwt.codesvr=127.0.0.1:9997」)を右クリックし、コピーする
4. このURLをお好みのブラウザに貼り付ける。

エクリプスを使わずに開発モードコードサーバーを実行する(略)

開発モードコードサーバーに接続する。

Eclipseから開発モード(Development Mode)を一度スタートさせ、そのURLをブラウザに入力したら、ブラウザは接続を試みる。初めて開発モードでGWTアプリケーションを実行した時、あなたはGoogle Web Toolkit Developer Pluginのインストールを促される。ページに表示された指示に従い、プラグインをインストールしてください。その後、ブラウザを再起動し、同じURLに戻って下さい。

(*こんな感じの画面です、Operaには未対応とか…。)

開発を始める前に、すべてのコンポーネントがインストールされ、設定されているかどうかをテストするために、GWTはスターターアプリケーションと共に出荷した。StockWatcherアプリケーションを書き始めたら、あなたはこのスターターアプリケーションのコードを書き換えて行く。

ちょっと長くなりましたので、二回に分けます。

このチュートリアルの後半、

→「3.プロジェクトコンポーネントを調査する」はこちらです。

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

Google Web Toolkit(GWT) 2.0の入門チュートリアル：スタート ガイド
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：2.アプリケーションの設計
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：6.GWT アプリケーションのデバッグ
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-4
Google Web Toolkit(GWT) 2.0の入門チュートリアル：8.GWTアプリケーションのコンパイル

ここ最近ほぼ毎日Google App Engine for Java(GAE/J)と

GWT(Google Web Toolkit)を遊んでいます。

色々触って少しずつ分かってきましたが、改めて思ったのは、

「GWTの部分はちょっと引っ掛かりやすい…」ことですね。

一応グーグル様が用意したGWTのチュートリアル(英語)は一通り適当にやりましたが、

改めて内容を再確認しようじゃないか〜っと思いました。

それならば、ついでに勉強のメモを残そう…っと思ったワケですね。

GWTのチュートリアルは非常によく出来ていますが、

残念ながら現在は公式の日本語訳がありません。

それならば。GWTのチュートリアルを勉強しつつ、

内容確認のため、日本語訳もやっていこうかな〜っと思いました。

始まる前に、ちょっといくつか断っときます。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*…)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

GWTを始まる前に、まず環境を整える必要があります。

幸い、GWTの導入については日本語訳されていますので、そちらを参照してください。

→スタート ガイド – クイック スタート -Google Web Toolkit

Java SDKやJava IDEは自分でどうにかしてください…。

というわけで、今日は第一弾、

「Getting Started(スタート ガイド)」から行きます。

→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/gettingstarted.html

スタート ガイド

はじめに

このチュートリアルでは、あなたは簡単なAJAXアプリケーション、「StockWatcher(株式ウォッチャー)」を書きます。

まずStockWatcherを使ってみて下さい。いくつか証券コード(Symbol)を追加(Add)し、挙動を確認してみてください。

(*操作可能なStockWatcherの完成画面はこちら)

StockWatcherを構築していくプロセスの中で、あなたは、GWTが提供したツールを使って、以下のことを実現するための方法を学びます。

• お好みのJavaのIDE(統合開発環境)でウェブブラウザアプリケーションを書く
• GWTの開発モードでJavaをデバッグする
• あなたのJavaコードを高度な最適なされたJavascriptにクロスコンパイルする。
• 一種類のコード(Java)だけを保守しながら、複数ブラウザ向きの実装(Javascript)を実現する

GWTを利用したAJAXアプリケーションの開発プロセス

このスタートガイドチュートリアルは典型的なアプリケーション開発サイクルに沿って、８つのセクションに分けられている。何れのセクションも、その前のセクションの成果を基づいています。
(*順番通りでやらないと行けないので、飛ばさないでくださいってことです。)

ここ(スタートガイド)のStockWaterの基本的な実装では、すべての機能はクライアントサイドのものです。サーバーサイトのコーティングやクライアントサーバー間の通信については、他のチュートリアルに含まれています。

各セクションの内容は以下の通り。

やること

学習のコンセプト

利用するGWTのツールとAPI

1.GWT プロジェクトの作成

始めるためのファイルやディレクトリの生成

Eclipse用のGoogleプラグイン、コマンドラインのGWTツール、webAppCreator(*多分訳しません)、開発モード

2.アプリケーションの設計

機能要件の定義、制約と実装の戦略

言語の制約

3.ユーザー インターフェースの構築

ビジュアルデザインとユーザインタフェースコンポネントのレイアウト

GWT widgets(ウィジェット)とパネル、ルートパネル

4.クライアントのイベントの管理

マウスとキーボードのハンドリング

ClickHandler(クリックハンドラー)とKeyPressHandler(キープレスハンドラー)インターフェース

5.クライアント機能のコーディング

一種類のコードだけを保守しながら、複数ブラウザ向きの実装を実現する。リファクタリングやコード生成のJava IDEの機能を利用。

いくつかのGWTメソッド

6.GWT アプリケーションのデバッグ

JavaScriptにコンパイルする前にJavaコードをデバッグする。アプリケーションを開発モードで実行しながら、Java IDEのデバッグツールを利用する

開発モード

7.スタイルの適用

アプリケーションに視覚スタイルを追加する。CSS(スタイルシート)の中に視覚スタイルを定義する。プログラムでHTML要素にクラス属性を設定する。スタイルをダイナミックに変える。これらはイメージファイルのような静的要素も含む。

GWTモジュール、GWTテーマ、アプリケーションのスタイルシート、GWTメソッド:addStyleName,addStyleDependentName,setStyleName、リソースの自動追加

8.GWT アプリケーションのコンパイル

あなたのクライアントサイドのJavaコードをJavaScriptにコンパイルする。製品モードでテストする。遅延バインディングのメリットを学習する。

GWTコンパイラ

次回のチュートリアル

もしあなたは開発環境（Java SDK,EclipseなどのJava IDE、最新版のGoogle Web Toolkit）を揃ってないのであれば、まずはそれを整えましょう。

次はGWTのプロジェクトの作成です。

→1.GWT プロジェクトの作成

今日もちょっとGAE/J(Google App Engine for Java)とGWT(Google Web Toolkit)の話。

ここ数日、Slim3やらドラッグアンドドロップやら、色々試してみましたが、

ちょっと原点に戻ろうかと思います。

Google製の「GWT」ですね。

Google Web Toolkitについて、グーグル様によれば…。

→Google Web Toolkit

デベロッパーには生産性を、ユーザーにはパフォーマンスを

最新のウェブ アプリケーションの作成は、面倒でエラーの発生しやすいプロセスです。デベロッパーは 90% の時間をブラウザ固有の動作への対処に費やすことがあります。それに加えて、JavaScript の大規模なコード ベースや AJAX コンポーネントの作成、再利用、管理はもろくなりやすく、困難です。Google Web Toolkit（GWT）を使用すると、この難題が容易になります（Google Plugin for Eclipse を使用するとさらに便利です）。デベロッパーは Java プログラミング言語を使用して、複雑かつ高パフォーマンスの JavaScript フロントエンド アプリケーションをすばやく作成し、管理できるようになります。

Javaで書いて、そしてGWTのエンジンでそれをJavascriptというか、

AJAXなコードを生成してくれるものです。

要するに、リッチなクライアントのインタフェースを作ってくれる…のです。

そして、サーバー(GAE/Jの場合はJava)とクライアント(AJAX)の間に、

データをやり取りするためにいくつかの手段が用意されています。

→Communicating with the server

・GWT RPC：Making Remote Procedure Calls (GWT RPC)
Javaのクラスをシリアライズ（直列化）して受け渡しをする

・JSON：Retrieving JSON Data via HTTP
JSONやXMLのデータをHTTPで受け渡す

・Cross-Site：Making Cross-Site Requests for JSONP
JSONP (JSON with padding)で受け渡す。

何れも悪くないのですが、ぉぅぇぃは「GWT RPC」が好きなんですね。

他の二つの方式は、結局テキストやスクリプトデータを受け渡ししていますが、

RPCの場合はオブジェクトそのものを受け渡しが出来ますので、

汎用性が高いし、オブジェクト指向的にも、

こっちのほうが色々強固なシステムを構築出来そうなんですね。

で、最近はこのパターンでちょっとハマっていましたので、

ちょっと簡単に感想や所見を述べたいと思います。

まず、GWT RPCはオブジェクトをシリアライズして受け渡しをしている…わけなんですが、

すべてのクラスをそれで受け渡せるワケではありません。

サーバー側は、要するにJVMが回っていますので、基本的に何でもOKで、

それといった制限がありません。

が、GWTで生成したクライアント側は、

「何から何まで」のライブラリを対応しているわけではありません。

つまり、クライアント側に処理出来ないクラスを渡しても、

クライアント側はうまく捌けない…のです。

従いまして、クライアント側に「処理出来無さそう」なクラスをアクセスしようとしたら、

GWTコンパイルの時、こんな感じのエラーが出ます。

No source code is available for type パッケージ.クラス; did you forget to inherit a required module?

エラーメッセージの通り、つまりこれらのクラスのためのコードが足りません…、

必要なモジュールを継承(?)してください…ということですね。

一般的に、ウェブサービス上のデータ（リクエスト?）の流れはこんな感じ…、

「クライアント(GWT)⇔サーバ(GAE)⇔データベース(Datastore)」。

GAEのほうは割りとフリーダムですが、GWTとDatastoreには制限があります、

同じグーグル様のパッケージなので、共通している…っと思いたいところですが、

困ったことに、GWTとDatastoreの制限は必ずしも一致していないのですね。

つまり、Datastoreには使えるのに、GWTには扱えない、

GWTには扱えるのに、Datastoreには扱えない…のようなケースがあります。

例えば、Datastoreのほうには、GAEのために用意されたUserクラスを保存出来ますが、
（＊com.google.appengine.api.users.User）

デフォルトのGWTはそれを対応していませんので、

UserのインスタンスをRPCでGWT側に送ろうとしたら、エラーが出ます。

この問題に対して、無理やりGWTをDatastoreにあわせる…、

両方同時に扱えるクラスしか使わないようにする方法もありますが、

いろいろ制限が多いのですね。

その他、その差異をサーバー(GAE)に吸収させる方法もあると思われます。

つまり、保存するためにRPCでGWTから送られたオブジェクトを

そのままDatastoreに入れるではなく、

何かしらのクラスやデータの変換を行ってから永続化（格納）する。

同じくDatastoreから取り出したデータオブジェクトも、

そのままGWTに送るではなく、何かしらの変換を行ってからクライアントへ…ですね。

もしGWTのほうに色々なクラスを扱いたいのであれば、

それをGWTの設定ファイルである◯◯.gwt.xmlの中に記述する必要があります。

例えばこんな感じ

<inherits name=’com.google.gwt.user.User’ /<

この「com.google.gwt.user.User」というのは、

GWT SDKの「gwt-user.jar」の中のパッケージを辿っていけば、

「User.gwt.xml」ってファイルを確認することが出来ます。

まあ、さらに色々継承している…って感じだけどね。

ちなみにこんな感じです。

↓User.gwt.xmlの中身

つまり、だ、基本的にサポートされているクラスなら良いのですが、

そうではないモノならば、モジュールを入れたり、

無かったら自分でモジュールを作ったり、いろいろやらないと、

クライアント側には扱えない…ということですね。

で、このモジュールの扱い方について、色々試しましたら、

少しずつ分かってきた…のような気がしますが、

もうちょっと調べないと行けませんので、

更に詳しく成ったら、何かしらの記事を書きたいと思います。

ちなみにGWTのプロジェクトはデフォルトに、

client、server、sharedの三つのパッケージがあります。

クライアント関連のものはclient(設定すればsharedも)パッケージの中に入れるようにしたい。

GWTの制限を受けずに色々処理させたいなら、

それをサーバー側に定義し、serverパッケージの中に入れといたほうが、

色々分かりやすい…のような気がします。

意識せずに適当にやったら、色々とエラーに悩まされてしまいますね。

ちなみにどのパスをGWTのコンパイルに含むかどうかは、

自分のプロジェクトにある「*.gwt.xml」の中の「source path」で設定できます。

GAE/Jにしても、GWTにしても、チュートリアルに沿ってやったら、

そのお気楽さとパフォーマンスに感動するばかりですが、

お気楽モードでいじりまわすと、あっちこっち引っかかってしまいますね。

う〜む、まずは正しい理解、これ大事ですね。

やっぱり真面目に勉強しないと！

また色々触っていきます。

今日も楽しくGoogle App Engine for JavaとGWTを色々試す。

GAE/Jは普通のRDBMS（リレーショナルデータベース管理システム）を使えずに、

Google特有のBigTableというデータベースシステムしか利用できません。

で、データを扱うために、「DataStore(データストア)」を利用するわけですが、

データをアクセスするためのインターフェースとして、

グーグルは JDO（Java Data Objects）やJPA（Java Persistence API）を推奨しています。

ここ数日、グーグルのチュートリアルに沿って、JDOを使って来ましたが、

クエリの書き方など、色々調べていましたら、

JDOはグーグルに推奨されていますが、

どうもクエリとかのパフォーマンス的にあんまり良くない…らしい。

（実はあんまり深く理解していないのですが）、

Slim3のDatastoreがイイ…という噂を聞きつけました。

赤い彗星並に、JDOの３倍以上早いらしい。

→Slim3 Datastoreに乗り換える(1)
→javaのdatastore操作は slim3 がおすすめ

それならばオラも…ということで、チャレンジしてみました。

ちなみに、Slim3と言うのはGAE/Jに向けて最適化したMVCフレームワークです。

で、Slim3 Datastoreはそのフレームワークの中の一部ですね。

フレームワークを丸ごと使うかどうかは要検討…ですが、

データアクセスが早いのは嬉しいので、とりあえずDatastoreだけを使ってみようかと。

ドキュメントとかを読むと、どうやらJDOよりも色々と高性能で、

仕組みも自然で分かりやすいし、

クエリ出来るパターンのバリエーションも多く、なかなか良いらしい。

→本家のSlim3のドキュメント（英語）
→有志が作ったSlim3 Datastoreの日本語訳

で、チュートリアル（英語）の通りにやると、

…いきなり上手くいかない。

こんな感じのエラーが出て、うまくビルドが出来ないのです…。

Buildfile: /workspace/slim3-blank/build.xml
gen-service:

BUILD FAILED
/workspace/slim3-blank/build.xml:42: java.lang.UnsatisfiedLinkError: Cannot load 32-bit SWT libraries on 64-bit JVM

色々調べると、どうやらこれはMac特有で、

32-bitの環境と64-bitの環境が混在している問題らしい。

チュートリアルもこんな感じのこと言っていますし、

Ant Build(first item). If you encounter an exception, confirm that you use Java 32 bit and Eclipse 32 bit.

（＊もし例外を遭遇したら、java 32bitとEclipse32bitを使っているかを確認してください。）

なんか32bitのjavaとEclipseをオススメとか。

いろいろ調べると、Java6は対応していないから、

Java5をダウンロードすれば解決できるとか、そういう解決法がありましたが、

Java5を使ってもなんだか上手くいかない。

更に調べると、これは32bit版のEclipseの問題で、

64bit版のEclipseを使えば、問題を解消出来る…ことが分かりました。

→Slim3のチュートリアルでjava.lang.UnsatisfiedLinkError: Cannot load 64-bit SWT libraries on 32-bit JVM

で、自分が使っているEclipseは32bitなのか64bitか分かりませんので、

とりあえず64bit版をダウンロード、展開してみました。

ちなみにEclipseを実行してみると、元々のは32bitってことが分かりました。

↓32bitのEclipseの立ち上げ画面

↓64bitのEclipseの立ち上げ画面

http://download.eclipse.org/eclipse/downloads/から、

とりあえず最新の安定リリース（RCついてないやつ）を選んで、

その中から、「Mac OSX (Mac/Cocoa/x86_64) 」のやつを選べばよいかと。

ファイル名はこんな感じです。

「eclipse-SDK-?.?.?-macosx-cocoa-x86_64.tar.gz」

とりあえず、Mac OS の場合、64 bitのEclipseを使えば、

ビルドが出来るようになりましたので、チュートリアルを一通りやってみました。

特に大きな問題が無かったです。

で、次にSlim3のデータストアとGWT(Google Web Toolkit)との連動ですが、

ここにも問題が…。

ほぼSlim3チュートリアルの通りのデータのクラスを作って、

それをGWTのクライアントで受け取れるようにして、

GWT コンパイルすると、エラーが出ます。

↓Eclipseで出されるエラー画面

エラーメッセージはこんな感じです…。

[ERROR] Errors in ‘file:/workspace/GoogleWebToolkitSlim3/src/gwt/test/client/ServerService.java’
[ERROR] Line 17: No source code is available for type gwt.test.server.Tweet; did you forget to inherit a required module?

で、いろいろ調べると、GWTを利用する際、基本的にclientパッケージ内のクラスは、

clientパッケージ内のクラスしか利用出来ない…らしい。
（場合によってsharedパッケージも行ける。）

それならば、データのクラスをshared.modelの中に移動させました。

これでイケる！っと思いましたが、

そうしたら、こんな感じのエラーが出るようになりました。

[ERROR] Errors in ‘file:/workspace/GoogleWebToolkitSlim3/src/gwt/test/shared/model/Tweet.java’
[ERROR] Line 30: No source code is available for type com.google.appengine.api.datastore.Key; did you forget to inherit a required module?

このエラーメッセージで検索しても、なかなか解決策にたどり着きませんでした…。

分かったことと言えば、GWTはすべてのJavaライブラリを対応していないので、

対応外のライブラリを利用しようとしたら、弾かれてしまうのですね。

一応、インクルードするために、inheritsに何かを追加しないと行けないのですが、

その書き方がよく分からない…。

いや、他の例を見れば、書き方は分かるのですが、

なにをインヘリタンスすれば良いのかわからんのじゃ。

かなり根気よく色々探し回りましたら、

ようやくGWTでslim3を使うための設定法と出会いました。
→Slim3でGWTのブランクプロジェクトを作る手順

上記URLの「2010-01-27 追記」の部分で対策法が書かれていました。

{プロジェクト名}.gwt.xmlのファイルに、こんな感じの一行を追加すれば行けます。

<inherits name=’org.slim3.gwt.emul.S3Emulation’ />

場所は他のinheritsの記述、

例えば<inherits name=’com.google.gwt.user.User’ />の前後でOKです。

折角なので、上記の「Slim3でGWTのブランクプロジェクトを作る手順」に沿って、

Eclipse＋GAE/J＋GWT＋Slim3のための環境を設定し直しました。

そうしたら、エラーも無く問題無くいろいろ実行出来ました！

これでおらもシャア並の三倍速をゲットだぜ！

いやいや、今回は超ハマってしまいました。

GWTの仕組みへの理解が不十分のは一番大きかったのですが、

ドキュメントになかなか辿り着け無かったのもしんどかったですね〜

まあ、理解が不十分なので、こんなエラーが出たのはぉぅぇぃくらい…ってことかしら。

またまたGAE/J＋GWTを遊ぶぜ！

今日も引き続き、Google App Engine for Javaの話題です。

GAE/JとGWTを色々触ってみて、そのポテンシャルを感動しているところです。

インストールして、

グーグルが用意したチュートリアルとドキュメントを沿って、

GAE/JとGWTを一通り触りました。

この環境でドラッグアンドドロップ出来れば、

PCのほぼすべての操作はウェブ上で出来るじゃん…っと思って、

調べみましたら…出来るのですね…。しかもあんまり難しくない…。

いや、いつのまにこんな時代に成ってしまった…って感じです。

恐るべし、クラウドコンピューティング。

というわけで、今日はちょこっと、

GAE/J＋GWT環境でドラッグアンドドロップを実現している、

gwt-dndライブラリを少々紹介します。

このライブラリは、名前通り、

「Drag-and-Drop Library for Google-Web-Toolkit (GWT)」、つまり

「ドラッグアンドドロップライブラリforグーグルウェブツールキット」です。

このライブラリを利用することで、

GWTの上でドラッグアンドドロップが出来るように成ます。

どんな感じなものなの？っと思う方も居るかも知れません。

説明するよりも見たほうが早いと思いますので、

まず下記のURLでデモを見てみて下さい…。

→demo – DragHandleExample

全部で１３個のデモがあります。適当に「Demo #」タブをクリックして、

適当に赤い「drag me!」をドラッグアンドドロップして遊んでみて下さい。

スゴイでしょう…、簡単に出来るぜ、コレ…。

ちなみに、GWTは基本的にajaxのツールキットなので、

このgwt-dndも同じように、基本的にjavascriptで動かしています。

しかし、GWTを利用するプログラマは基本的にjavascriptを触ることなく、

javaのプログラムを書いてら、

GWTが勝手にそれを適切なajaxのコードに変換してくれます。

従って、javascriptの知識がゼロでも、javaさえ扱えれば、

GWTとgwt-dndでリッチなドラッグアンドドロップも出来ちゃうのですね。

一応のチュートリアル（英語）は、グーグル・コードにあります。

→http://code.google.com/p/gwt-dnd/
→Getting started with gwt-dnd in your own application.

一通りみれ、その通りにやれば、

コンポーネント(Widgetのほうが妥当？)をドラッグアンドドロップしてみる…

くらいはスグ出来るように成ます。

しかし、ぉぅぇぃみたいな非プロのアマチュアプログラマが、

ちょっとでも複雑なことをやろうとしたら、挫折しそうになってしまうのですね。

そういう時に、デモをローカルで実行してみて、

そこのコードを見て、中身を読んで行けば、なんとなく使えるようになります。

が、なんかこのデモをzipとかでまとめて

ダウンロード出来るように成っていませんので、ちょっと苦労しました。

一応、gwt-dndのデモをローカルのGAE/J＋GWTを実行したら、

こんな感じの画面になります。

↓gwt-dndのDemo 5を単体で実行してみました

折角だし、自分用のメモも兼ねて、

このデモを自分のローカル環境で実行出来るまでの手順を残します。

一応、既にGAE/Jの環境を整えていることが前提になります。

後、テスト用のプロジェクトが既に作成されていることも前提ですね。

1.ライブラリをダウンロード

http://code.google.com/p/gwt-dnd/wiki/GettingStartedの一番上に、

大量のgwt-dnd-?.?.?.jarファイルがあります。

自分のGWTバージョンに合うモノをダウンロードしてくださみ。

ぉぅぇぃがGAE/JとGWTを入れたのはここ数日のことなので、

GWT2.0に対応しているgwt-dnd-3.0.0.jarをダウンロードしました。

2.ライブラリをビルド・パスに入れる

Javaのビルド・パスに、この「gwt-dnd-?.?.?.jar」を指定します。

Eclipseの場合は、「プロジェクト」に右クリック

→Javaのビルド・パス→外部JARの追加→「gwt-dnd-?.?.?.jar」を選びます。

3.デモのダウンロード

まず、下記のURLを読んでみて下さい。

サブバージョンとかの意味が理解出来る方は、この通りでやれば、

難なく行けると思います。

ぉぅぇぃは、このページを読まずに、

デモページから勝手にコードを漁ったので、大変なことになりました…。

→How to checkout the gwt-dnd library and demo source code using Eclipse
（英語です。）

意味が理解出来ない方は、手動で一つ一つ自分で落として行く必要があります。

コードは場所は、下記のURLで確認出来ます。

→svn/ trunk/ DragDrop/ demo/ com/ allen_sauer/ gwt/ dnd/ demo

基本的に、この下のモノを全部落として行けば良いのですが、

なにせ、ファイル数が非常に多いので、一つ一つ落として行くのはかなり大変。

とりあえず一つだけ入れてみたい…方のために、

ぉぅぇぃが試した「Demo 5」のための、

必要最小限のファイルをまとめてみます。

com.allen_sauer.gwt.dnd.demo/DragDropDemo.gwt.xml
com.allen_sauer.gwt.dnd.demo.client/DemoDragHandler.java
com.allen_sauer.gwt.dnd.demo.client/DragDropDemo.java
com.allen_sauer.gwt.dnd.demo.client/ExampleTabPanel.java
com.allen_sauer.gwt.dnd.demo.client/RedBoxDraggableWidget.java
com.allen_sauer.gwt.dnd.demo.client.example/DraggableFactory.java
com.allen_sauer.gwt.dnd.demo.client.example/Example.java
com.allen_sauer.gwt.dnd.demo.client.example.insertPanel/InsertPanelExample.java
com.allen_sauer.gwt.dnd.demo.client.example.insertPanel/VerticalPanelWithSpacer.java
com.allen_sauer.gwt.dnd.demo.client.ui/MultiRowTabHistoryTokens.java
com.allen_sauer.gwt.dnd.demo.client.ui/MultiRowTabPanel.java
com.allen_sauer.gwt.dnd.demo.client.ui/StylableVerticalPanel.java
com.allen_sauer.gwt.dnd.demo.client.util/GWTUtil.java

基本的に、設定ファイルの「DragDropDemo.gwt.xml」は当然必須で、

uiパッケージ、utilパッケージ、exampleパッケージ直下のすべてのファイルも必要です。

その他の部分は、実行したいDemoによって変わってきます。

このデモの全体の構造ですが、

gwtのEntryPointをimplementsした画面全体のクラスはDragDropDemoです。

その中に１３個のデモのパネルを入れています。

そしてタブを使って切り替えるようにしています。

これらのクラスは、uiやutilのクラスを利用しています。

何れのデモパネル（例えばDemo 5の場合はInsertPanelExample）も、

com.google.gwt.user.client.ui.SimplePanelを継承したExampleクラスを

さらに継承しています。

実際に各デモの動作を記述したクラスは、

com.allen_sauer.gwt.dnd.demo.client.exampleの下の各パッケージの中の

◯◯Exampleになります。

Javaクラスのダウンロードはこんな感じでOKですが、

これらのクラスと連動するhtmlとcssも落とす必要があります。

これらは、下のURLから取得しましょう。

→Source path: svn/

ここからDragDropDemo.htmlとDragDropDemo.cssをダウンロード。

DragDropDemo.htmlの中に、

グーグルアナリティクス用のコードも入っていますが、

これは消してしまいましょう。具体的に言うと、39行から47行ですね。

4.ソースコードを微調整する。

で、一つしかデモをダウンロードしていないのであれば、

DragDropDemoにある他のデモのコードはもちろん全部エラーになりますので、

豪快に全部コメントアウトしてしまいましょう。

ちなみに、いじらないと行けないのはDragDropDemoだけです。

↓こんな感じでコメントアウト

↓さらにコメントアウト

↓もっとコメントアウト

まあ、Eclipseの場合、エラーが出ているところをちょこちょこ対処すればよいかと。

5.デモのビルド

warの下のdemoフォルダを生成するために、

ビルドする必要があります。

Eclipseの場合は、DragDropDemo.gwt.xmlを配置したら、

勝手にビルドのための設定してくれます。

なんかの問題で自動設定してくれなかった場合、

「プロジェクト」に右クリック

→Google→Webツールキット→エントリー・ポイント・モデル→追加

で「DragDropDemo」を追加して下さい。

（わざわざ説明するのもアレなんですが、）ビルドの方法は、

Eclipseの場合は、「プロジェクト」に右クリック

→Google→GWTコンパイル

6.デモを見てみる。

普通にGAE/J＋GWTを実行してみる。
（「プロジェクトを右クリック→実行→Webアプリケーション」とか）

下のような感じのURLで確認出来ます。

http://localhost:8888/DragDropDemo.html

↓実際の画面はこんな感じ

7.コードを読んだり、いじったり、お好みでどうぞ。

Demo 5の場合は、主にinsertPanelExampleを見たら良いかと思います。

例えばこんな感じで調整してみるとか。

・行（COLUMNS）と列（ROWS）の数を一つずつ増やしてみたり、
・挙動を確認するためのTESTボタンを追加してみたり…。

↓しょうもないテストをしてみました。

本当にしょうもないけど、

いろいろいじってみたら、結構理解出来ちゃうもんですね。

さ〜っとこんな感じですね。

いやいや、ここ数日ず〜っとGAE/JとGWTをいじっていますが、

本当にスゴイですね、コレ。

しばらくの間は飽きそうもないので、またちょこちこと関連の話をしたいと思います。

引き続き、Google App Engineで色々遊んでいます。

折角なので、他のウェブサービスのAPIも利用してみようかな〜っと思いまして、

王様の一つである"Amazon Product Advertising API"をチャレンジしてみました。

Amazon側は、Google App Engine用のサンプルとかを置いていませんが、

Java開発者用向きのサンプルコードをリリースしています。

具体的に言うと、サンプルコードの「ItemLookupSample.java」と、

アマゾンへのリクエストを補助するための「SignedRequestsHelper.java」ですね。

ソースコードのファイルそのものは、下記のURLから取得出来ます。

Product Advertising API Signed Requests Sample Code – Java REST/QUERY

基本的に、「ItemLookupSample.java」はサンプルなので、

これをそのまま使う…ではなく、これを参考して、

「SignedRequestsHelper.java」を経由し、

自分でリクエストをAmazonに送信するコードを書く必要があります。

で、「SignedRequestsHelper.java」をそのまま

Google App Engineで使いところ…ですが、

ちょっとした修正を加える必要があります。

まず、このまま使おうとしたら、こんな感じのエラーが出ます。

「java.lang.ClassNotFoundException: org.apache.commons.codec.binary.Base64」

で、色々調べたら、この問題が起きるのは、

恐らくGWT(Google Web Toolkit)も使っていたので、

そこにうまくリフレクションが出きなかった…のような気がします。

ネットでいろいろ調べましたが、どうも今ひとつパッっとした解決策が見つからず。

で、自分でEclipseで色々試しましたら、

GAE/Jのパッケージの中に、専用のBase64クラスがある…っと気づきまして、

これを使ったら、問題はアッサリ解決出きました。

折角なので、解決法をメモを兼ねてここに書き残します。

本来の「SignedRequestsHelper.java」では、

「import org.apache.commons.codec.binary.Base64;」で、

apacheコモンズのcodecの中のBase64を使っていましたが、

これをGAE/Jのやつで置き換えます。

具体的に言うと、こんな感じです。

「import com.google.appengine.repackaged.com.google.common.util.Base64;」

で、このBase64クラスは本来のBase64クラスの使い方がちょっと違いますので、

private String hmac(String stringToSign)メソッド内の記述も変更します。

176行のこのメソッドのBase64の記述は元々こんな感じですが…

Base64 encoder = new Base64();
signature = new String(encoder.encode(rawHmac));

これをこんな感じで一行に書き換えます。

signature = new String(Base64.encode(rawHmac));

こんな感じで、少なくともぉぅぇぃは問題を解決し、

Google App Engine for JavaからAmazin APIへ問題なくリクエストを出すことが出きました。

コードをいじっていましたら、「SignedRequestsHelper.java」のほかにも、

いろいろ発見がありましたが、別の機会がありましたら、

またちょこっと話をしたいと思います。

それにしても、GAE/Jのチュートリアルとドキュメントは素晴らしいですね…。

テキストも参考書も要らずに、チュートリアルに沿ってやるだけで、

いろいろ理解してしまいます。

大半の問題は、ドキュメントやFAQで解決できてしまいます。

というか、本屋でGAE/Jの本も何冊立ち読みしてみましたが、

グーグルのドキュメントのほうがずっと良かったね。

こんなのウェブ上で公開していたら,そりゃ出版社はピンチになりますね。

→Google App Engineデベロッパー ガイド

しかし、パソコンでこういうドキュメントを読んでいると、

やっぱりちょっとつかれるな〜って感じになりますね。

目とか肩とか…ね。

iPlateに全く興味無かったが、こういうものを読むための、

何かしらのリーダーがあるといいかもしれません〜