Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト
スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル
前回はGoogle Web Toolkit(GWT) 2.0の入門チュートリアルの日本語訳(7-4)です。
今回は「8.GWTアプリケーションのコンパイル」です。
→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/compile.html
始まる前に、まず、お断りを…。
私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。
GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。
日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*…)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。
最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。
ステップ８：GWTアプリケーションのコンパイル
この時点では、あなたはStockWatcher機能要件の初期実装を完成しました。これまでは、StockWatcherを開発モードで実行してきました。開発モードでは、コード変更の影響を即座に確認でき、そしてあなたのIDE（統合開発環境）のデバッグツールを利用できます。StockWatcherをコンパイルした後、プロダクションモードで実行・テストできます。アプリケーションをプロダクションモードで実行する際、アプリケーションはあらゆるブラウザのプラグインやJavaバーチャルマシン(JVM)を必要としない純粋なJavaScriptとして存在します。
このセクションでは、以下のことを行います。
- Javaソースコードをコンパイルします
- プロダクションモードでStockWatcherをテストします
- StockWatcherをウェブサーバーにデプロイ(deploy)します。
そしてこのセクションで遅延バインディング(deferred binding)についても学びます、これはブラウザ（あるいはオプションとして言語など他の要素）に要求されるコードのみを提供するGWTのメカニズムです。
1.JavaからJavaScriptにコンパイルする
JavaソードコードからJavaScriptにコンパイルするために、GWTコンパイラーを利用します。
StockWatcherアプリケーションをコンパイル(Eclipseの場合)
- パッケージ・エクスプローラで、StockWatcherプロジェクトを選択します。
- ツールバーから、「GWTコンパイル・プロジェクト
」を選びます。
- コンパイルのオプションを確認し、コンパイルボタンをクリックします。
Eclipseのコンソールで、GWTコンパイラの出力を確認できます、たとえばこんな感じ。
Compiling module com.google.gwt.sample.stockwatcher.StockWatcher
Compiling 6 permutations
Compiling permutation 0…
Compiling permutation 1…
Compiling permutation 2…
Compiling permutation 3…
Compiling permutation 4…
Compiling permutation 5…
Compile of permutations succeeded
Linking into /Document/workspace/StockWatcher/war/stockwatcher.
Link succeeded
Compilation succeeded — 32.905s
StockWatcherアプリケーションをコンパイル(Eclipseの場合)
(*省略します)
プロダクションモードでテストします
アプリケーションがコンパイルされた後、新しいブラウザウィンドウでStockWatcher.htmlを開けば、プロダクションモードとして実行できます。StockWatcherは開発モードと同じ外観と振る舞いになっています。両者の本当の違いは隠蔽されています。現在StockWatcherとインタラクトをする時、JVM内Javaバイトコードとしてではなく、ブラウザ内のJavaScriptとして実行されます。
ヒント：既に開発モードサーバを起動した場合、（コンパイルの後に）アプリケーションをロードする前に、URLからgwt.codesrvパラメータを削除することで、アプリケーションをプロダクションモードで実行できます。
アプリケーションをウェブサーバーにデプロイ(deploy)します。
この時点で、出力ディレクトリのファイルをアップロードすることで、StockWatcherを公開ウェブサーバにデプロイ(depoly=配置)できます。初期バージョンでは、何かの方式でサーバーとコミュニケーションすることがありません；従いまして、ウェブサーバー側に何らか特別なことをやる必要が全くありません。静的ウェブページを提供できるなら、どんなサーバーでもうまく稼働します。
コンパイルの出力
GWTコンパイラに生成されたファイルを確認してみましょう。それらは出力ディレクトリ「StockWatcher/war/stockwatcher」にあります。こんな感じのファイル群を確認できます。
0A9476898799A150D840F0B1C3672921.cache.png
22DDC9A8C788BFBCEEEAA734857E3059.cache.html
396F806CD63ABD414BFBB9D57429F05B.cache.png
6ABCE431DC27AE00CB8C17C5733C2DE7.cache.html
6F932480CC748B4E76F4459CA37673F9.cache.html
B8C926AAD169CD6635C4A89C53DD6320.cache.html
DF7764EEC1903CD03C9545B354D8D8E4.cache.png
E44767377485D18D6B6864F65BA8EF73.cache.png
EA2171DAFBE55EFA551D710B6E5B8E2C.cache.html
EDC7827FEEA59EE44AD790B1C6430C45.cache.png
clear.cache.gif
gwt
hosted.html
stockwatcher.nocache.js
StockWatcher/warに含まれる静的リソーソ（HTMLホストページ、スタイルシート、画像ディレクトリ）に加えて、ファイル名にGUID(＊Globally Unique Identifier=グローバル一意識別子「0A9476898799A150D840F0B1C3672921」のような感じのもの)が含まれているファイルを注意してください。これらのファイルはStockWatcherの複数種類のJavaScript実装を含めています。GWTはあなたのアプリケーションのために複数の実装、サポートされる各ウェブブラウザに独自な順列を生成します。
遅延バインディング(deferred binding)でランタイムを最適化
実行時、GWTは遅延バインディング(deferred binding)と呼ばれるメカニズムで、各エンドユーザのブラウザのための正しい順列をロードします。遅延バインディングはユーザが必要とするコード以外のものを提供しません。遅延バインディングの利点は？各順列はウェブブラウザの特質やバグの中に仕立てられて実行されていますので、遅延バインディングを利用することで、
- ユーザにとって速い
- アプリケーションは必要無いバイトをダウンロードしません。アプリケーションはブラウザを見極める必要もないし、あるいは何れのブラウザのために複数のバージョンを提供する必要もありません。
- あなたにとって速い
- GWTは何れのブラウザのための正しいJavaScriptを生成しますので、ブラウザ間の違いのために時間を費やする必要がありません。
ブラウザの検出のほか、遅延バインディングは好きなだけの他の変数のために、独自のバージョンを生成することも出来ます。最も一般的な例は国際化です。遅延バインディングを使うことで、GWTは各言語のために、アプリケーションの異なる実装を生成します、さらに例えば、英語を使う人は、フランス語のテキストをダウンロードする必要がありません（逆の場合も同じ）。
GWTアプリケーションの国際化(*英語です)のチュートリアルでこれを自ら試すことが出来ます。
（＊ここらへんは翻訳しにくいので、ちょっと説明します。簡単に言えば、GWTはサポートされた個々のブラウザのために、適切なJavaScriptを別々に生成してくれます。ユーザは不必要なコードをダウンロードしなくでもよいので操作が高速、開発者はブラウザ間のHTMLの解釈の違いのために、コードレベルでイチイチ対応しなくでも良いので開発が速い…だそうです。そしてブラウザ間だけではなく、例えば言語間の違いにも同じ仕組みを利用出来ますので、多言語対応のアプリケーションが作りやすい、とのことです。）
次回は？
この時点では、あなたは開発モードとプロダクションモードの両方でStockWatcherをテストしました。今なら、クライアント側の機能のみを実現するGWTアプリケーションを開発方法について、最初から最後まで、結構よく理解しているはずです。
初期実装を基づいてStockWatcherを構築し、更にGWTの他の機能を学ぶために、下記のチュートリアルから選んで下さい。
(＊全部英語です)
- GWTアプリケーションの国際化
- GWT RPCでサーバーとコミュニケーションする
- HTTPでJSONデータを利用する
- Junitでユニットテストをする
- Google App EngineでGWTアプリケーションを実行する
GWTチュートリアルの日本語訳はとりあえずはこれで一段落です。
約一ヶ月強の時間でやりましたが、速いのか遅いのか、結構微妙ですね。
飛ばし読みよりも、一文一句読んで、翻訳していくのは、全然理解度が違いますね。
あらためて色々確認できました。
これからの予定ですが、学校も始まりますし、
ちょっと忙しくなる時期に入ります。
とりあえず一息ついて、時間の余裕が出来ましたら、
GWTなり、GAE/Jなり、
面白いと思ったグーグルモノを遊んでいきたいと思います。
まずは一つ何かのアプリケーションを作りたいな〜っと思っているところです。