いつのまにかGWTもJava 8 対応になっていたようです

おちラボでは、現在でもGWTを使い続けていますが、GWTの最新リリースである2.8 では、Java8に対応していたようです。正確にいうとRC1の頃から対応していたようです。対応状況は、下記のリンクを参照のこと。

• Release Notes for 2.8.0 (RC1)

なお、現在の最新版はRCがとれています。RC1は昨年の７月下旬、RCが取れた正式版は10月にリリースされてますのでちょっとネタが古かったですかね。

GWTの画面遷移について

一般的なウェブアプリケーションでは、画面の変更＝URL（ページ）の変更です。しかしながら、JavaScript系のUI遷移がページ遷移を伴わないように、GWTにおいても画面の変更にページ遷移は伴ないわないのが定石です。つまり、画面の変更とは、表示するGWTのUIコンポーネントを切り替えるということになります。
具体的な手順は以下のとおり。

1. RootPanel.get().Clear()メソッドで、RootPanelに配置しているものをすべて消す
2. RootPanel.get().add(new XXX())で、新しいUIを表すクラスXXXを表示する

となります。ClearしてもClearされたクラスはまだ生きていますので、注意して下さい。

もちろん、モジュールの切り替えでページ遷移を実現する方法もアリですが、それは１画面/1モジュールという非効率な設計となるわけでお勧めできません。

参考：GWTで他のページ（モジュール）に移動する

Netbeans8対応のGWT4NBが出てます

最近はNetbeansを使ってないんですが、とりあえずの覚書です。

Netbeans対応のGWTプラグインであるGWT4NBが出ているようですね。下記URLからダウンロード、、、というか、NetBeans Plugin Portal Update Centerからダウンロードするようです。

• GWT4NB - plugin detail

Netbeansもいろいろ進化してますね。Eclipseから戻ってもいいかなと思う今日このごろです。

GWTBootstrap3にてModalウィンドウを使う

GWTBootstrap3にてボタンクリックでModalウィンドウを呼び出す方法です。いちおう方法としては、

• ボタンのクリックイベントを検知して表示
• UiBinderのタグにて定義しておく

の2種類の方法があります。個人的には前者の方法が無難かと思いますが、表示するだけならタグだけでもできるようです。

下記にサンプルを書いてますが、まずModalウィンドウについては、新たにxmlファイルを用意する必要はなく、呼び出し元となる画面内で定義しておいてもOK（表示されない）なようです。で、クリックされた時に、Modal::show()とするか、下記の例のようにタグで定義できます。ポイントは、

• b:id属性でModalの名前定義
• ボタン側でdataTarget属性で、呼び出すModalのidを記述

という感じでできるようです。

GWT: GWT-RPC用のデータクラスはIsSerializableを忘れずに

GWTのコンパイル時に

com.google.gwt.user.client.rpc.IsSerializable' and did not have a custom field serializer.

というエラーが出たら、RPCで利用するデータクラスのシリアライズに問題あるということなので、

• IsSerializable

が実装（Implement）されているか確認しましょう。今更な内容ですが、実は、

• ローカル環境ではOKでもGAE上では動かない

ということがあるので、要注意です。以前は、Java標準の serializable でもOKだったような気がしますが、少なくともGAEの環境では、IsSerializable が必須のようです。

GWT:週番号を取得する

過去の記事にも書いているように、GWTでは

• java.util.Calendar 
• java.text.SimpleDateFormat

が使えません。そこで、Dateクラスに頼らざるをえないのですが、DateクラスについてもgetYear() , getMonth() などは, deprecated (非推奨) になっています。このような制約のもと、任意の日付の週番号を取得するにはどうしたらよいか、、、ということですが、その解決策を下記に載せます。CalendarUtilクラスを利用するのがポイントですね。

なお曜日番号の取得は、下記になります。

Eclipse:GWTプロジェクトで 「missing required argument 'modules」と言われた場合の対処法

EclipseのGoogle Web Applicationプロジェクトにおいて、

• missing required argument 'modules

みたいなエラーが出る時があります。これは、結論から言えば、

• GWTを有効化しているのにGWTのモジュールが定義されてない

場合に発生します。

おちラボでは、Jettyがついてくるという手軽さを利用してGWTを使わない場合でも「Google Web Application」でプロジェクトを生成する場合があるのですが、その際によく陥るエラーですね。

解決方法としては、なんでもいいからGWT Moduleを作っておけばOKです。

Eclipseを起動させるJava VMのバージョンを指定する

GWTやGAE対応のアプリ開発をするときは、EclipseにGPE（Google Plugin for Eclipse）をインストールするのが普通ですが、現段階でのGPEの動作条件は

Java 7(JRE 7) かつ最新のEclipse

となっています。Javaを利用するのがEclipseだけならまだいいですが、すでにJava8がインストールされていた場合、、、わざわざ新しい方を消すというのも勧められません。共存するためには、EclipseだけJava7で動かす必要があります。で、その方法ですが、eclipse.iniファイルにおいて、

-vm
C:\Program Files\Java\jre7\bin\javaw.exe

という記述を追加すればOKです。ここの書き方の注意点は、オプション名と値を必ず2行に分けて記述することです。 また、-vmargsよりも前に書かないとダメです。

GWTにてFlexTableに配置されたボタンのクリックを特定する ～IDの設定と取得～

下記の図のように、FlexTableにボタンを配置して、押されたボタンの位置（行）を特定することを考えます。

その方法は下記のようになります。

• getElement().setIdを利用して各ボタンにidを割り振る（id=行とする）
• クリックイベントにてevent.getSource()を呼び出し、クリックされたボタンを取り出す
• そのボタンのidを調べる

以上の方法により、下記のような動作をします。

（一番上のボタンをクリックした場合。）

（上から３番目のボタンをクリックした場合）

コードは下記のようになります。

GWT：FlexTableを利用して動的にWidgetを張り付けながら管理する

データベースに入っている内容をそのまま表示したり修正したりするには、データをFlexTableに表示するのがベターです。しかし、その際には

• Widgetsを動的に配置
• 配置したWidgetsにJavaコード内で管理

という条件を満たす必要があります。その際は、表示しているWidgetを内部でも同様に管理するのがベターです。例えば下記のような方法です。ここでは、配置しているWidgetを行単位でリストに保存しています。

Eclipse 4.4 (Luna)を利用する際はJDK/JREは1.7以上に

ラボのPCでGWTの環境を再構築したものの、GWTが使えないという事象が発生。Google Plugin for Eclipseのインストールには成功しているのだが、そのplug-inが有効にならない。ファイルの新規プロジェクトメニューにGoogleのカテゴリーが出てこないという、、、で、原因は

• LunaはJDK1.7以上が要求仕様であり、PCのJDKが1.6のままであったため

ということ。正確に言えば、Lunaは正常に？起動するが、多くのplug-inが1.7ベースになっているというので、まともに動かないということのようだ。。。

Javaのバージョンは下記のように確認できる。

なお、現在のJDKは 1.8が最新版だが、GAE/Jは1.7を前提にしているので注意が必要だろう。

プロ生ちゃん #カレンダープログラミング プチコンテスト 2014に応募しました

現実逃避の一環として、表題のイベント

• プロ生ちゃん #カレンダープログラミング プチコンテスト 2014

に応募しました。カレンダー出力するだけのプログラムが対象なのでお気軽にできるかなーというのと、久しぶりにGWTで書いてみようかということでチャレンジしましたが、意外と手こずり、３時間もかかってしまいました。GWTではCalendarクラスが使えないので、代替するクラスを調べたり自作したり、、、という余計な手間がかかったのが原因です。見栄えのところは全く手付かずで、とりあえずLabelにHTML出力しただけです。ソースコードは下記の通り。

GWT: 楽天トラベルの検索結果（JSON）をParseするサンプル

GWTで楽天トラベルの検索結果（JSON）をParseするサンプルです。APIへのアクセスはサーバー側で行っていて、GWT-RPCでJSONデータを受け取ったという前提です。

GWT: 楽天市場APIの検索結果（JSON）をParseするサンプル

GWTで楽天市場の検索結果（JSON）をParseするサンプルです。APIへのアクセスはサーバー側で行っていて、GWT-RPCでJSONデータを受け取ったという前提です。

GWT：HTTPリクエストパラメータのためのエンコーディング処理

GWTで他サイトのAPIを利用する時に、サーバーサイドでHTTPアクセスをする場合があると思います。その際、日本語の文字列がリクエストに含まれている場合は、URLエンコーディングをする必要があります。そのエンコーディングは、GWTのメソッドを使うと簡単に行えます。

String encStr = com.google.gwt.http.client.URL.encode("もみじまんじゅう");

サーバに送る前にクライアント側で事前に変換しておきましょう。

GWTClientUtilリリースしました

GWTClientUtilリリースしました。名前が少し大きいですが、とりあえず作ったのは、GWT-RPCを逐次的に呼び出すためのクラスです。

• https://github.com/ochilab/GWTClientUtil

今後、色々便利なクラスを公開したいと考えています。

GWTで呼び出し可能なライブラリの作成方法

GWTでは外部のライブラリを利用する時には、～.gwt.xmlファイルに inheritsタグにより追記（定義）が必要であるということはGWTの基本中の基本ですね。
では、自分で作成したGWT用のライブラリを第3者にも使えるようにするにはどうすればいいのでしょうか？実は、1点だけ注意点が必要です。

inheritsタグとは何なのか？
inheritsタグには、自分が作成したクラスのクラス名（パッケージ名含む）をかけばいいというものではありません。実はこのタグは、そこに記述されたGWTモジュールを呼びだそうとします。つまり、inheritsタグはクラスを呼び出しているのではなく、GWTモジュール（～gwt.xmlファイル）を呼び出しているのです。

～.gwt.xmlファイルを用意する
自作したライブラリに、.gwt.xmlファイルを用意しましょう。
このファイルを下記のようにおきます。

上記の例では、org.ochilab.gwt.client.util パッケージに SRMC.gwt.xmlというファイルを置いてます。これにより、呼び出し元のGWTモジュールにおいては、

< inherits name='org.ochilab.gwt.client.util.Gwttool'/>

というように呼び出すことができます。

GWT: GWTでmoment.jsを使う

JavaScript界隈では、moment.js という時間関係のライブラリがちょくちょく話題になっています。というのも、JavaScripでは標準では時間関係のメソッドが弱いんようなんですよね。ふだんJavaScriptを使わない私ですが、この問題は無視できません。なぜならGWTはJavaScriptに最終的になるわけですから、JavaScriptでできないことはGWTでもできないわけです。本BLOGでも時間のフォーマットについて記事を書いたことがあります。

このmoment.jsをGWTで使うことができないか？当然そういうことを思っている人はいるわけで、

• momentgwt

というプロジェクトがGitHubにありました。GWTユーザは必須のライブラリでしょう。

GASとGWTの面白い関係

GASで記述するコードは、基本的にはサーバーサイドで動かすことを前提にしています。しかし、GASには「UiApp」と呼ばれるクラスがあり、これを利用することでHTMLのUIを作成することができます。
このUiAppを利用して作成されたHTMLページ（画面）は、実はGWTの形式で出力されていることが、ページのソースを見ることでわかります。つまり、

• GAS（JavaScript）→GWT変換→ JavaScript

という、ある意味よくわからないことを内部処理でやっていることになります。
もちろんこれは、UI回りの変換だけです。AJax的な記述はGASの範疇ではないです。GASで作成できるウェブアプリは、基本的にHTTPリクエストによるページ遷移をベースにした従来型のウェブアプリケーションですので。

ただ、もしかすると将来的にAJax的な処理をかけるようになるのではないかなぁという気がしてます。

GWT（クライアント）+GAS（サーバ）というソリューション

先日からGASが気になってしょうがないので、その使いドコロについて考えているのだが、表題のように

• GWT（クライアント）+GAS（サーバ）

というのは魅力的なソリューションとしてOKかもしれない。その利点は下記の通り。

クライアント＞サーバというニーズ

昨今のAJaxとかGAEの実装などの流れをみると、サーバではあんまりガリガリやらなくてクライアントで処理をやるというのがトレンド。とすれば、GWTでリッチクライアントを実装してGASのフロントエンドとするのは不自然ではないでしょう。

GWTとGAS間の処理はJSONPで

GWTはJavaScriptと性能は同じなので、クロスドメイン通信禁止の制約は当然もってます。しかし、JavaScriptと同様、JSONPによるクロスドメイン通信は可能なわけです。試しにGASでJSONを吐き出す簡易サーバを作成して、GWTのJsonpRequestBuilderを利用してアクセスすると無事、成功しました。

GoogleDrive（SpreadSheet）の操作が容易に

GASを利用する際に一番良く使いそうなのは、SpreadSheet。SpreadSheetをデータベース的に使うのはあまり現実的ではないですが、ログ環境的なデータの保存場所として利用するのはアリ！システム利用履歴とか記録など、あとから分析したいデータなどは、別にデータベースに入れておかなくてもSpreadSheetに直接入れておくほうが、閲覧もラクですしね。

ローコスト

GASの料金は基本的に無料。意外とGASでできることは豊富で、GAEよりも制約は低い感じ。GWTもサーバサイド処理を使わなければ、静的コンテンツとして場所はどこでもOK。DropBoxでもGoogle Driveでも置いておけばいいのです。

個人的には、JavaScriptが嫌いでGWTにハマっているわけで、正直、GASには若干抵抗があります。しかし、ちょっと触ってみて思うのが、JavaScriptって意外とクライアントサイドよりサーバサイドにあっているのかな、、ということ。Node.jsが流行っているのもその点かもしれません。