logo

サイト内検索
ココログ最強検索 by 暴想

最近のトラックバック

無料ブログはココログ

D-Rex

GAEjを使ってみた。

【2009-06-05:修正 ・ エラー対応に「Enhancedエラーを解決する】を追加しました】

おはこんばんちは、社員Mです。

今回GWT1.6&Gxt2.0対応中のD-RexをGAEjで動かしてみました。
動かすまでに発生した難関等まとめましたので、今後の参考にでもどうぞ。

なお、アカウント取得やデプロイの流れ等は 『コチラ』 を読めばOK。






【サーバーにデプロイした実物】
『D-RexGXT2 GWT1.6&GXT2.0移行途中版』
※デプロイ制限の関係上、アイコン画像と一部矢印等が表示されません。
※移行途中なので大変申し訳なく、バグ対応も完全じゃありません・・・・・・。






【前提】
GAEjには現在、合計1000個のファイルしかアップできない
1ファイルあたりの重さは10M未満であること。
アップできるアプリケーション(制作したプロジェクト)は
 1個のアプリケーション に対し、 
 1~10個のバージョン を設定してアップする。
バージョンを変えれば別のプログラムとして動作する。
    ※BigTableはアプリケーションで共有するのか別なのか、そのあたりはまだ試してません・・・。
アプリケーションを増やす場合、その都度申請が必要。
ただし1個のアカウントに対し10個のアプリケーションまで取得可能です。
    ※また2009/05/08現在、ユーザー数は最大2万5千に限定されています。






【アカウント取得時の注意】
アカウント取得するには、まずG-Mailのアカウントを取得してください
※必ずG-Mailを使う必要はありません。
 通常のメールアドレスでもアカウント取得は可能です。
 ただし、G-Mail以外だと、そのメールアドレスをGoogleに登録する必要があります。
 心配だ・管理を分けたいという方は、G-Mailを。
 特に心配でもない方は、ご自分のメールアドレスを使用してください。

その後、アプリケーションを取得しますが、この承認に『一日』かかります。
 ※承認メールがたまに届かない場合があるようなので一日たったらデプロイを試してください。

上記承認には、初回のみ携帯電話(のメールアドレス)が必要です。
 ※ハードコピーとれなかったんですが、@docomo.co.jpなり@vodafonなり出てくる場面があります。


メールアドレス :user@domain.cco.uboaの場合、
ユーザー名   :user
ドメインがどうの:@domain.cco.uboa

となります。




【web.xmlの書き方について】
以下要項を満たせばOKです。

1.<web-app>タグを以下のものに書き換える。  ※web-app句は、変えなくても変わらないことが分かりました。

<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">

2.サーブレットマッピングのURL部を一行にまとめる。

Good    ><url-pattern>/drexgxt2/setAttribute</url-pattern>
Bad     ><url-pattern>
           /drexgxt2/setAttribute</url-pattern>

3.サーブレットマッピングのURL部は、必ず/か*で始める

Good    ><url-pattern>/drexgxt2/setAttribute</url-pattern>
Bad     ><url-pattern>drexgxt2/setAttribute</url-pattern>
                      ↑↑↑






【デプロイ時の注意】
デプロイ時にjava.lang.StackOverflowErrorになる場合があるため、以下のようにデプロイしてください。
コンパイルについては、GWT 1.6の環境設定も参考にしてください。

1.appenging-web.xmlを編集する(アプリケーション名とバージョンの設定
    1’.以降、デプロイ前にはアップするバージョンの確認をすること。(上書き対策)

Deploy1

2.HostedBrowserでプロジェクトを動かす。
3.HostedBrowserのコンパイルボタンからコンパイル。
    ※コンパイル時、VM引数に -Xss1024k を設定してください。
4.開いたウィンドウを全部閉じておく。
5.プロジェクトをリフレッシュ。
6.プロジェクトを右クリック>プロパティー>Google>Web Toolkit>チェックを外す。
    >6’.念のためリフレッシュ
7.プロジェクトを選択状態にして、デプロイボタン(ロケットのようなアイコン)からデプロイ。
    ※要求されるパス等は、Gmailと一緒です。
    ※アプリケーション名とバージョン設定は、7で開くウィンドウからも設定可能です。

Deploy15_2

Deploy2

Deploy3_2






【エラー対応】

  • ・ java.io.IOExceptionで、400 Bad Request、かつ Unable to assign value '\' to attribute 'url':等と出る場合

Web.xmlの書き方を見直してください。

  • ・ Max number of files and blobs is 1000.

デプロイする合計ファイル数が1000件超えています。
制限は1000件以内なので、頑張ってファイル数を減らしてください。
なお、GWTの場合はWarディレクトリ内のファイルです。
  ※つまりデプロイ時に使うファイルを消せっちゅうことですね。

[Tips : 削除のご注意]
    対象のファイルには画像等も含まれます。
    1000件に選ばれている基準はイマイチわかってません。
    ファイルを削除する場合、StaticとApplicationでかぶっているファイルがあるようです。
     つまり一件削除すると双方の総量が減るパターンがあるのでご注意。

  • ・ GWT1.6 Eclipseプラグインで、コンパイルボタン押しても反応しない。

バージョン1.0.1ではウンともスンとも言いません。
バグかと思われます。

  • ・ デプロイを強制キャンセルしたとき、ロールバックしてくださいと出る。

デプロイ中にEclipse落とす等、(私のように)ヤッチマッタ人に発生します。
もちろんロールバックが必要ですが、どこでやるか不明ですね?
下記【エラー対応EX1 : ロールバックの方法】をどうぞ。

  • ・ DataStore.Class does not seem to have been enhanced.といわれる。

プロジェクトのファイル数が多すぎるため、DataStoreクラスを認識できていないようです。
この場合、ORMからDataStoreがあるパッケージを指定する必要があります。
下記【エラー対応EX2 : Enhancedエラーを解決する】をどうぞ。


【エラー対応EX1 : ロールバックの方法】
通常のプラグインからでは出来そうにないので、コマンドプロンプトを使用します。
使用するコマンドファイルは『appcfg.cmd』です。

1.    プロジェクトの『appengine-web.xml』に、ロールバック要求しているアプリケーションとバージョンを指定します。
2.    コマンドプロンプトを起動します。
3.    cdコマンドで、最新のGAEjSDKの …/appengine-java-sdk/bin へ移動してください。
   例:cd C:\appengine-java-sdk\bin
   ※:Eclipseフォルダを『appengine-java-sdk』で検索すればHitします。

4.    appcfg.cmdを起動します。以下のように記述してください。

appcfg.cmd rollback [1.のファイルがあるwarフォルダのパス]

5.    記述後エンターを押せば、自動的に完了します。

※WarディレクトリがProgram Files下だとエラーになる場合があります。ご注意!


【エラー対応EX2 : Enhancedエラーを解決する】
このエラーはORMからDataStoreがあるパッケージを指定する必要があります。
プロジェクトを右クリック > プロパティー > Google > App Engine > ORM
から、該当の設定ページへ移動してください。

Orm

ORM項目にある、『追加』 または 『修正』から、DataStoreが保存されているパッケージを指定してください。

その後DataStoreを認識させるため、任意のファイルを更新し、上書き保存してください。
 ※この更新は改行→BSで改行消す→上書き保存で構いません。
保存したとき、コンソールに『 Enhancer completed 』の文字が出ればOKです。



Ex.ヘルプの見かた
appcfg.cmdのみで実行するとエラーを吐いて、一覧を出してくれます。
また 『 appcfg.cmd help [ヘルプを見たいアクション名] 』 でも見ることができます。
ちなみにこのコマンドからデプロイ(UPLOAD)することも可能です。

以上。参考程度にどうぞ。

D-RexGXTのデモ動画

D-RexGXTで画面設計をするデモの動画を作成しました。

FormLayoutのLayoutContainorを二つ作ってColumnLayoutのContentPanelに乗せて作ります。
クリックした後少々始まるまで時間がかかります。

ExtGWT用の画面開発ツールD-RexGxtを公開しました。

D-RexGxtをSourceForgeから公開しました。
http://sourceforge.jp/projects/drex/
ようやく、実用レベルのツールに仕上がったという感じです。
画面イメージ↓

Drexscreen_3


もしあなたがJavaプログラマーでリッチインターネットアプリケーションを開発したいと思ったら、ぜひExtGWTを試してください。そしてExtGWTで開発する気になったら、間違いなくD-RexGxtが役に立ちます。
GWT(Google Web Toolkit)およびExtGWTはAjaxをオールJavaでクラインからサーバーまで作れる点で画期的だと思うけど、HTMLでなく、プログラムで画面のデザインをするというのは予想以上につらいものです。(JavaScriptでも同じと思うが)
入れ子になったオブジェクトを複雑に組み合わせて、属性も設定して、という感じのソースを見ても画面イメージは浮かばないし、動かしては確認また修正と繰り返すのは忍耐を強いられます。
そこがD-Rexを作った理由で、これならブラウザーでの結果を見ながら貼り絵感覚でデザインできるのでAjax開発のハードルが随分下がるのではないかと思っております。
GWTを使い始めてからExtJS→GwtExt→ExtGWT(ややこしい)とあちこち彷徨って来ましたが、ExtGWT+D-RexGWTの組み合わせでようやく楽しく開発できそうな気になってきました(自我自賛)。
jarファイル等はSourceForgeの方にアップしてありますが、別にダウンロードしなくてもサーバーで公開しているので以下のURLでフル機能を試せます。
http://www.sweetie.atnifty.com/D-RexGxt2/
なお、http://drex.sourceforge.jp/に簡単な操作マニュアルがあります。

ExtGWTに関してはこちら。

http://extjs.co.jp/

ExtGWTの定番開発ツールとしてExtJsと共に発展していけたらと願っております。
D-RexGxtのサポートはこのブログで出来るだけやっていく予定ですのでご意見をお待ちしております。

ext.jsについて

Ext JSについて

GwtExt/ExtGWTを使うにはExt JSの知識が多少なりとも必要になります。そこでExt JSの基本的な話を少々書きます。Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ(フレームワーク)です。画面デザインの観点からいうと画面を構成する部品単位にすでにCSSも含めて作成済みのものが使用できることから、画面設計をより手っ取り早く行うことが出来ます。

Ext Jsの部品のサンプル
http://extjs.com/products/extjs/

コンフィグオプションによるコンポーネントの生成

Ext Jsの特徴としてコンフィグオプションがあげられます。コンポーネントの属性を設定するのに、GWTの場合は主にsetterを使用して設定しますが、Ext Jsではコンポーネント生成時にコンストラクターにコンフィグオプションという文字列(JSONだと思う)を与えることで基本的に(多分)すべての属性を決めることが出来ます。
コンフィグオプションは以下のように{}でオブジェクトひとつを表し、属性は 属性名:値 という書式になります。また配列は[]を使用します。(つまりJSON書式)
{labelWidth: 75,
   width: 350,
   title: 'FormPanel',
   layout: 'form',
   xtype: 'form',
   defaultType: 'textfield',
   buttons: [
     {text: 'Save'
     },
     {text: 'Cancel'
     }
   ],
   items: [
     {fieldLabel: 'First Name',
       name: 'first',
       allowBlank: false
     },
     {fieldLabel: 'Last Name',
       name: 'last'
     },
     {fieldLabel: 'Company',
       name: 'company'
     },
     {fieldLabel: 'Email',
       name: 'email',
       vtype: 'email'
     }
   ]
}
ここでitemsという属性はこのコンポーネントに含まれる他のコンポーネントの配列を意味します。したがってコンポーネントの入れ子になった構造もすべて一つの文字列だけですべて表現できる事を意味しています。上記コンフィグオプションは以下のような四つのtextfieldと二つのbuttonを含むFormPanelのインスタンスを生成します。

Ext01_2

xtype

xtype属性はExt Jsのコンポーネントのクラスを決定する重要な属性です。xtypeによりインスタンスのクラス自体も決定できるという事は言ってみればコンフィグオプションだけですべてを表現できる事を意味しています。xtypeとクラスの関係はExt JsのApiドキュメントのComponentの項にあります。
http://docs.ext-japan.org/docs/

layout

Panelクラスのlayout属性を設定することで様々な機能を持ったパネルのコンポーネントを作ることができます。

レイアウトの例


form layout

layout: 'form'
xtype: 'panel'またはxtype'form'
子のコンポーネントが縦に並ぶlayoutです。GWTのVerticalPanelに相当します。また、Ext.formパッケージのコンポーネントを貼り付けるにはform layoutが必要です。
xtype'form'の場合は、クラスがFormPanelとなり、submit機能等が付加されます。

column layout

layout: 'column'
xtype: 'panel'
子のコンポーネントを横に並べるlayoutです。基本的に貼り付ける各コンポーネントの位置はそれぞれのコンポーネントのcolumnWidth属性で決定します。

border layout

layout: 'border'
xtype: 'panel'
 Ext02_3

東西南北+中心のエリアを定義できるパネルです。GWTのDockPanelに相当します。しかも、オプションでボーダーをドラッグして大きさを配分を変化させる機能を付加することが出来ます。

TabPanel

layout: 'card'
xtype: 'tabpanel'
Ext03
タブによる選択を可能にするパネルです。

AcordionLayout

layout: 'acordion'
xtype: 'panel'
複数のパネルを重ねてそのうちひとつのパネルを選択可能にするレイアウトです。

GridPanel

layout: 'grid'
xtype: 'grid'
Ext04
データ表形式のパネル。元データとの連携機能も実装された強力なパネル。

TableLayout

layout: 'table'
xtype: 'panel'
Ext05
HTMLのテーブル構造を元にレイアウトできるパネルです。