自由で気ままな日々

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アプリケーションのコンパイル

前回は「1.GWT プロジェクトの作成」の前半で、

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



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

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

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

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

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

3.プロジェクトコンポーネントを調査する

生成されたファイルを調査し、これらはどのようにあなたのGWTプロジェクトを構成したかを見ましょう。



モジュールXMLファイル

「StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml」モジュールのXMLファイルを開いて下さい。

このファイルはGWTモジュールの定義、つまりGWTアプリケーションを構成するためのリソースやパッケージなどが含まれています。デフォルトでは、StockWatcherはすべてのプロジェクトに要求されるコアなGWT機能(*com.google.gwt.user.Userのこと)を継承(inherit)している。オプションとして、あなたは他のGWTモジュールを記述し、継承することも出来る。


(*黒背景だけど、深い意味はありません。)

このモジュールXMLファイルで、あなたのアプリケーションのエントリポイントクラスを記述しています。コンパイルのために、エントリポイントをGWTモジュールに記述すること必要です。もしGWTモジュールにエントリポイントを記述していないのであれば、他のモジュールを継承するしか出来ません。"エントリポイントを記述した他のモジュールのモジュールXMLファイル"をインクルードすることも可能です。そうすれば、あなたのモジュールには複数のエントリポイントを持つこともできます。何れのエントリポイントは順番通りに実行されます。

デフォルトでは、StockWatcherは二つのスタイルシートを利用します。GWTスタイルシートstandard.css(これはxmlに記述されたcom.google.gwt.user.theme.standard.Standardテーマの継承によるものです)と、プロジェクト作成の時に生成されたアプリケーションのスタイルシートStockWatcher.cssの二つです。このチュートリアルを進めて行けば、近い将来で、あなたはデフォルトGWTスタイルをオーバーライドする方法を学びます。



ホストページ

ホストページの「StockWatcher/war/StockWatcher.html」を開きましょう。

GWTでは、我々はウェブアプリケーションを実行するために必要なコードが含まれているHTMLドキュメントを「ホストページ」と呼びます。例えば、StockWatcherプロジェクトのホストページはStockWatcher.htmlです。

このホストページはアプリケーションのスタイルシートStockWatcher.cssに関連付けています。

ホストページは"(GWTに生成された)ページの中の動的な要素を制御するためのJavaScriptコードのへのパス"に関連付けしています。スターターアプリケーションのように、body要素のコンテンツを丸ごと動的に生成させることができます。ただし、StockWatcherを実装する際、あなたは静的要素と動的要素をミックスさせます。あなたはページの中に、プレースホルダーとしてHTMLの<div>を作成することになります。



互換モードvs標準モードの選択

ブラウザ間の互換性をよくするために、GWTはdoctypeをHTML 4.01Transitionalに設定した。そうすると、ブラウザのレンタリングエンジンを「互換モード(Quirks Mode)」に設定することになります。もしアプリケーションを標準モード(Standards Mode)でレンタリングさせたいのであれば、あなたは利用可能な数々の他のdoctypesから選び、ブラウザにそのレンダリングモードを強制することもできます。一般的に、GWTアプリケーションの標準モードは互換モードと同じくらい実用的です。しかし一部のケースでは、パネルなどのウィジェットによって正しくレンダリングされないこともある。この問題はGWT 1.5以上のバージョンで飛躍的に改善された。この問題を解決するために、その他にも様々な工夫がなされてきた。



閲覧履歴の保護

あなたのアプリケーションがウェブページ内でユーザの期待通りに動くように、とりわけ複数のページにまたがるショッピングカートやチェックアウトなどのシナリオで、ユーザがブラウザの「戻る」ボタンを利用した時の対応手助けするため、GWTはそのためのメカニズムを提供している。ホストページにはあなたのGWTアプリケーションの中で履歴サポートするためのiframeタグが含まれている。

GWTアプリケーション内の閲覧履歴管理をもっと学びたいなら、開発者ガイドを御覧下さい。History(*英語です)



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

アプリケーションのスタイルシート「StockWatcher/war/StockWatcher.css」を開いて下さい。

各スタイルシートは各プロジェクトに結びつけられています。デフォルトでは、アプリケーションのスタイルシートStockWatcher.cssはスターターアプリケーションのためのスタイルを記述しています。このチュートリアルの「スタイルの適用」のセクションで、あなたは既存のスターターアプリケーションのスタイルをStockWatcherのためのスタイルで置き換えます。

他の多くのウェブページと同じく、複数のスタイルシートを指定することもできます。複数のスタイルシートを継承する順番でリストし、もっとも独特なスタイルセットをリストの最後に記述しましょう(*一般的で全体的なスタイルは先頭、ページ独自のスタイルは後ろ。CSSの仕様のことです。)

Javaソースコード

エントリポイントクラス「StockWatcher/src/com/google/gwt/sample/ stockwatcher/client/StockWatcher.javaStockWatcher」を開いて下さい。

現在では、StockWatcher.javaはスターターアプリケーションのJavaコードを含めています。このチュートリアルでは、あなたはStockWatcherのクライアントサイドのコードでこれらのコードを置き換えて行きます。

StockWatcherクラスはGWTのEntryPointインターフェースを実装し、onModuleloadメソッドを含めています。StockWatcherクラスはStockWatcherモジュール定義(*StockWatcher.gwt.xmlのこと)でエントリポイントに指定されていますので、StockWatcher(*プロジェクト)を始める時、ここのonModuleLoadメソッドはコールされます。

StockWatcherクラスはStockWatcherのモジュール定義(StockWatcher.gwt.xml)にインクルードした他のGWTモジュールなどの機能を継承しています。例えば、ユーザインタフェースを構築する時、あなたはcom.google.gwt.user.client.uiパッケージ内のリソースを利用できます、なぜならこれらはGWTモジュールcom.google.gwt.user.Userに含まれているGWT core機能の一部である(*StockWatcher.gwt.xmlに「inherits name='com.google.gwt.user.User'」が書かれています)(* 逆に言えば、inheritsしていないリソースの大半はEntryPointから始まるクラスやメソッドから使えない。)



次回のチュートリアル

現時点では、StockWatcherアプリケーションのためのファイルの土台を作り、それらのEclipse(やあなたのお好みのIDE)に取り込んだはずです。

これで、あなたはStockWatcherアプリケーションのデザインするための用意を整えました。

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

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 プロジェクトの作成

KCGブログの開発元は、余所のために開発したブログエンジンを元に、

KCGのために修正・機能追加しました。

元々KCGブログの機能要件の中に無かったのですが、

元々のブログエンジンにはAmazonアソシエイトの機能が付いていました。

残骸は残骸なんですが、わざわざ削除するのもなんだし、

そのままKCGブログでも使えるようにしたそうです。



で、関係ありそうでなさそうで、よく分からないのですが、

「Amazonアソシエイト・プログラム運営規約」は3/1から新しいモノになるらしい

→Amazonアソシエイト・プログラム運営規約

正直、法律に疎いもんで、これを読んでも何がどう変わったのはよくわかりません…。

というか、内容をアップデートして、違う部分を赤くするとか、

そういう分かりやすさがあると嬉しいだけどね…。

実際のところ、あっちこっち記述の場所を変わったので、

本当にわかりにくいのです。



で、まあ、一応大学院はEコマンスの話を講義する先生がいますので、

雑談のネタのため、自分なりに、何がどう変わった…を把握するために、

非常に大雑把ですが、一応の対応表を作ってみました。

新：2. 加入申込み
旧：1. プログラムへの加入

新：3. 乙のサイトのリンク
旧：2. 乙のサイトのリンク

新：4. プログラム要件
旧：17. 独自調査

新：5. 乙のサイトに対する責任
旧：10. 乙のサイトの責任

新：6. 注文処理
旧：3. 注文処理

新：7. 紹介料
旧：4. 紹介料

新：8. 紹介料の支払
旧：5. 紹介料プランとスケジュール

新：9. ポリシーおよび価格
旧：7. ポリシーおよび価格

新：10. 乙がアソシエイトであることの表示
旧：8. Amazon.co.jp アソシエイトであることの明示とその範囲

新：11. 限定ライセンス
旧：9. 制限的ライセンス

新：12. 権利の留保、提案
旧：なし

新：13. 法令遵守
旧：11. 法令遵守

新：14. 契約期間および契約解除
旧：12. 契約期間

新：15. 修正
旧：13. 修正

新：16. 両当事者の関係
旧：14. 当事者の関係

新：17. 責任限度
旧：15. 責任限度

新：18. 無保証
旧：16. 無保証

新：19. 紛争
旧：18. 準拠法、19. 紛争

新：20. 雑則
旧：20. 譲渡、21. 不放棄、22. 税金



ざ〜っと見た感じでは、そんなにクリティカルな違いがない…のように見えますが、

精査すると、色々変わってくるかもしれません。



ちょっと面白いと思ったのは、「2.加入申し込み」に追加された(g)ですね。

ソーシャル・ネットワーキング・サイト上で、アマゾンまたはその関連会社の商標をユーザ名、グループ名、またはその他の識別子に含むサイト。例えば、TwitterやFacebookなどのソーシャル・ネットワーキング・サイト上に登録される「Javari Shoes」、「Amazon Japan」または「Kindle For You」などのユーザ名は不適切となります。

元々ドメインやURLにAmazonとか入れて、

公式のフリをするのはイカンよ〜という話がありましたが、

今はSNSのユーザ名もダメになりました。

へぇ〜ソーシャル・ネットワーキングの時代だな〜〜ですね。






まあ、ぉぅぇぃとはあんまり関係のない話だけどね〜

今日もちょっと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をいじっているのですが、

今日はちょっと力尽きました…。



あれこれ触っているウチに、Eclipseのプロジェクトそのものが壊した…、

というほどでもないのですが、直すのが大変すぎる…ところまで来てしまったので、

現在実験中のプロジェクトを一度あきらめ、

まっさらな状態から作り直すことに決意しました〜



ちなみに、敗因は３種類のチュートリアルで作ったコードを
（＊GAE/J、GWT、Slim3）

無理やり一つにまとめようとしたところ…ですね、多分。

プロジェクトもまたがっていましたので、設定がエライややこしいことに…。






まあ、疲れたけど楽しい、

楽しいけど疲れた…というわけで、今日は手短に…。



よーし、プロジェクトをビルドしなおすぞ！

今日も楽しく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に全く興味無かったが、こういうものを読むための、

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

今日はひょんなことで、草津に行く用事がありました。

そして、やっぱりひょんなことで、最近ちょっと噂に成っている

「スーパーカズイ」の西店に行きました。



まあ、私のは別にスーパーハズイに用事がないので、

ちょっとふらふら〜っと回って、視察(?)をしてみました。



まず、スーパーハズイに関する基本知識を…。

謳い文句は「関西圏で一番忙しいスーパー」だそうです。

で、中に入ってみると、確かに、普通のスーパーではありえないような数の客が居ました。

レジ前は常に行列が出来ていて、１０人待ちは当たり前…って感じですね。



で、この人気の秘密…ですが、生鮮食品や野菜に対す徹底的な鮮度の管理と、

そして、その生鮮食品や野菜の価格を極力安く抑える営業努力ですね。

値段のほうですが、ぉぅぇぃの家の近所の普通のスーパーよりもずっと安く、

近所の格安スーパーよりも、全体的に２０％ほど安かったですね。

特に葉物野菜は何れも確実に安かったです。

白菜やネギとか、なんかほぼ半額の値段にビックリしました。



そして鮮度ですが、今日見た感じでは、何れも瑞々しく、

どれも非常に美味しく見えました。

スーパーハズイを常用している知人の話によれば、

このスーパーは、基本的に「売り残しゼロ」を目指しているそうです。



毎日仕入れた生鮮食品や野菜は、

必ずその日が終わるまでに売り切るようにしっているそうです。

夜に成ったら全品割引は当たり前、閉店直前の「持ってけ泥棒セール」もやりますし、

それでも売れなかったモノは、従業員らに格安の値段で全部買ってもらうそうです。



で、値段の安さ＋美味しそうな新鮮さがウケ、

「毎日新鮮で美味しい」→「人が満杯」→「常に売り切れる」→「毎日新鮮で美味しい→…

という、非常にプラスなスパイラルに入っている…だそうです。



ちなみに、ぉぅぇぃはスーパーハズイのほぼすべての品揃えを一通り見て、

値段も確認しましたが、ここは「全品安い」…というワケではなさそうです。

生鮮食品や野菜以外、例えば菓子類や牛乳などの飲み物は、

普通のスーパー並で、いわゆる格安スーパーよりもちょっと高いのですね。



恐らく、（あんまり儲からない?）安くて新鮮な食品よって得られた圧倒的な集客力で、

利幅が比較的に良いとされている普通の食品なども抱き合わせて買ってもらって、

それでうまく利益を得ているような気がします。

それによって、スーパー側はそれなりに儲かって、

客側は安くて新鮮な食材をゲット出来て、win-winに成っています。

まあ、実際にヒアリングとかをやったわけではなく、想像なんだけどね。



最後に、知人に教えてもらいましたが、

レジカウンターに居る元気なおばさんがこのスーパーのオーナーだそうです。

昔からそうですが、現場を見る経営者は色々な側面で、

組織の運営に良い影響を与えているような気がします。

ここもこのスーパーの人気の秘密が隠されているかもしれません。






いやいや、私が日本に来てから、これほど活気のあるスーパーを見たのは初めてです。

真面目にやれば、経営学的にも、いろいろとケーススタディに成り得るような気がします。



滋賀に訪れるチャンスのある方、

機会がありましたら、是非自分の目でこのスーパーハズイを見てもらいたいですね。

少しでも経営・マネジメントを意識したら、より楽しめるじゃないかと思います。