mgwtのプロジェクトトップページを翻訳してみる。

GWTを試している時に
検索にちょこちょこひっかかるmgwtの文字..

気になったので調べてみたが、
iOSやAndroidなどの画面部品系をWebアプリで実現するライブラリのようだ。

手っ取り早く知るにはshowcaseというデモを
自分のPCのブラウザ見ればはやい。

http://mobilegwt.appspot.com/showcase/

WindowsPC上のブラウザでも
十分にiOSっぽい画面部品を表現できている。

さらにスマホで味わえる感触ヌルヌル感。
上のサイトのAnimationsを選択したところ
画面遷移間の移動、最初ゆっくりでだんだん加速がついて..とかの
移動の感触をGWTが生成するHTML5+CSS3で表現しようというものだ。

..これだけだと正直ネイティブアプリでいいじゃんとおもってしまうが、
GWT+mgwtにする意義の一つとして通信料の少なさがあるようだ。
同じくらいの小さいライブラリもあるらしいが、
Ajax+DOMのちょこちょこ少量の通信というやつがキャリア通信に合っているんでないの
というのがGoogleの言い分らしい。

携帯アプリをGWTベースで作るにはまだ、携帯デバイス固有の機能、
カメラだとかGPS、傾きなどの各種センサなど
あったりなかったりする部分のライブラリだが、
そこはもうひとつのphonegapというプロジェクトをあわせ技でつかうことで
対処しようとしているらしい。

画面はmgwt、アプリ本体＋サーバ側処理はGWT、クライアントの固有デバイスをphonegapで対応することでiOSアプリやAndroidアプリを実現しようとしている。


複数デバイスでの違いをGWT開発環境でひとまとめにして、
iOSでもAndroidでも同じアプリを作ってねという腹だ。

ちょっとおもしろそうだ、もう少し調べてみようかな..

p.s.
以下mgwtのプロジェクトページのトップを翻訳したものを貼り付けておく。
＃参照はat your own riskでお願いします。
http://code.google.com/p/mgwt/wiki/GettingStarted

-----
基本

MGWTはGWT MVP、ClientBundles、GWTロギングに深く依存しています。もしあなたがこれらのGWTの基本を知らないのであれば、GWTドキュメントを読んでおいて下さい。mgwtはGWT機能の模倣しようとはしていません、現在GWTコアにないモバイル開発の機能を追加しただけです。mgwtはたいていこの流れにそって試行しています。

mgwtを使用するために最新リリースをダウンロードし、クラスパス上に配置する必要があります。そして、gwt.xmlファイルにそのことを記述しなくてはなりません。またgwtのためにsafariへのuser agentの設定も必要です、なぜならほとんどのモバイルデバイスはwebkitベースで動作しており、mgwtはwebkitに依存しているからです。

<inherits name="com.googlecode.mgwt.MGWT"/>
<set-property name="user.agent" value="safari" />

MGWT MVP

モバイルデバイス上で、UIにおける2つの状態間のほとんどの処理は、いくつかの種類のアニメーション付きで実行されます。それゆえ、mgwt自身はAnimatingActivityManagerと呼ばれるActivityManager実装を提供しています。
AnimatingActivityManagerはアニメーション付きページ処理をハンドルすることができます。画面のいずれのリージョンでも対応するためには、AnimatingActivityManagerが必要となります。（GWTのActivityManagerに似ています）


AnimatingActivityManagerが処理を行うために必要とすること：

• １つのAnimatableDisplayインスタンス － DOM処理をハンドル
• １つのActivityMapperインスタンス    － placeからactivityへのマッピング
• １つのAnimationMapperインスタンス　 － マッピング(lastPlace, newPlace)→アニメーション

Animation Mapper

MGWT ActivityManagerは、place変更時必要なアニメーションを提供するAnimationMapperに依存しています。
どんあplaceの組み合わせに対しても、異なったアニメーションを提供することができます。
個々に簡単な例をあげます：

public class PhoneAnimationMapper implements AnimationMapper {
　@Override
　public Animation getAnimation(Place oldPlace, Place newPlace) {
　　if (oldPlace instanceof AboutPlace && newPlace instanceof HomePlace) {
　　　return Animation.SLIDE;
　　}
　　return Animation.FADE;
　}
}

Animation Display

アニメーションは、mgwtによって異なるプラットフォーム上で別々にハンドルされます。
保証するために、mgwtは遅延バインディングを行うことでオーバヘッドを得ることはありません。AnimatableDisplayインスタンスを取得するために、簡単なGWT.create()を使用します：

　AnimatableDisplay display =
　　GWT.create(AnimatableDisplay.class);

基本的な例

　//AnimatableDisplayインスタンス生成
　AnimatableDisplay display =
　　GWT.create(AnimatableDisplay.class);

　//ActivityMapperのインスタンス化
　PhoneActivityMapper appActivityMapper =
　　new PhoneActivityMapper(clientFactory);

　//AnimationMapperのインスタンス化
　PhoneAnimationMapper appAnimationMapper =
　　new PhoneAnimationMapper();

　//ディスプレイのためのActivityManagerをセットアップ
　AnimatingActivityManager activityManager =
　　new AnimatingActivityManager(
　　　appActivityMapper, appAnimationMapper,
　　　clientFactory.getEventBus());

　//ActivityManagerへディスプレイを渡す
　activityManager.setDisplay(display);

　//DOMへディスプレイを追加
　RootPanel.get().add(display);

MGWT 変数

もし（デバッグ目的のため）mgwtのCSSの曖昧性を消したいのであれば、ファイルgwt.xmlへ以下の記述を追加することができます：

　<set-configuration-property name="mgwt.css" value="pretty" />

もし１つの特定のプラットフォームへのコンピュテーションを制限したい場合（もしくは、開発モードでの特定のプラットフォームのテスト）、変数mgwt.osを設定することができます。

　<set-property name="mgwt.os" value="iphone" />

有効な変数値は以下のとおり：

　iphone
　retina (iPhone 4、4S向け)
　ipad
　ipad_retina
　desktop
　android
　android_tablet
　blackberry