Webエンジニア susumuis の技術ブログ

このブログの内容は個人の見解であり、所属する組織の公式見解ではありません

GWTでJavaプログラミングをはじめよう！

java

Java アドベントカレンダー2011 31日目です。

みんな大晦日だよ！僕が子供の頃は青いネコ型ロボットが出るアニメが特番をやるのが楽しみでした。「こんなことできたらいいな」と思って「叶えてくれる」と言ったら、「はい、Java言語」ということで子供たちの夢を叶えるプログラミングを今Javaで入門したらどうなるのかを試みてみようと思います。

Javaを使ったプログラミングってどんなことが一般的に行われているでしょうか？

  • JavaEEベースのWebアプリ
  • Androidアプリ
  • 黒画面でHelloWorld
  • Applet（……忘れましょう）

Webアプリ開発は現時点で大変実用的な分野ではありますが、これを最低限でもこなすためには「HTML」「HTTP」「JavaScript」「CSS」「JSP」「XML」やら各種フレームワークやら、覚えることがたくさんありすぎて、大変であることが経験上わかりました。

Androidアプリは僕はよくわからないので、今回はスルーします（ぉぃ）

黒い画面でHelloWorldとかソートをひたすら作っていくのは王道ですよね？遅かれ早かれこうした環境で勉強するのは必要だと僕も思っています。が、いきなりそこから入って多くの挫折した人々を見ていますし、昔DelphiやVBのようなものから入った軟弱者としては、最初から「びじゅある」な夢を見させてもらってもいいじゃないかと思います。

さて、作ったものを人に配布できないとモチベーションがぐっと下がります。そんなわけで、スタンドアロンアプリケーションでは不利です。やはりWeb関連が便利です。Google App Engineのようなプラットフォームにデプロイするだけでいきなり全世界に配信できる楽さは利用しない手はないでしょう。GAEにデプロイするならEclipseにGoogleプラグインを入れると手っ取り早いです。

何を隠そう、Google App Engineがリリースされたばかりの日、僕もGAEを触ってみようとしてアカウントを取得しましたが、Eclipseプラグインをインストールしてアプリケーションを作り始めて「すげーｗｗ簡単じゃん」と感激して作っていたのはGAE関係なく、単なるGWTのアプリケーションでした(^^;

ということで、今回は、これからプログラミングを覚える人に、GWTを勧めたらどうなるでしょうか？まずは自分が入門者になったつもりでアプリを作ってみます！

開発環境を整える

まずは開発環境を整えなければいけません。Snow Leopard以前のMacなら最初からJava入ってるよねーで済んだのですが、いまだとえっと、ここに詳しく書いてあるみたいです。

「JDKをMacOSX Lionにインストール」- 三十路ＳＥ（みそじシステムエンジニア）日記

Windowsの人はOracleの公式サイトからインストーラをダウンロードできるので、そこからインストールするといいでしょう。
http://www.java.com/ja/download/help/download_options.xml

次にEclipseのインストールと、GAEのアカウント作成がありますが、人の記事に助けていただきます。

「Google App Engine (for Java) の開発環境構築」 - Tech Booster

さらに、GAE for Javaでの開発はとりあえず、Slim3を使ったほうが便利です。このページを真似してみましょう。

「開発環境の構築‎ > ‎Slim3 Plugin for Eclipse」- Slim3room

さて、他人のふんどしを履いて光速で開発環境が整ったということで、早速最初のプログラムを作ってみようと思います。

画像を表示してみよう

まずはSlim3プロジェクトを作成します。この時Use Google Web Toolkitというのを選びます。

せっかくなら、HelloWorldではなくて、画像を表示しましょう。まず絵を書いて、Eclipseのここにドラッグアンドドロップします。

そして、Main.javaというコードをこのようなコードを書き変えましょう。

Main.java

package com.example.nekogata.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;

public class Main implements EntryPoint {

    public void onModuleLoad() {
        Image image = new Image("nekogata.png");
        RootPanel.get().add(image);
    }
}

そうしたら実行の右三角ボタンを押せば早速プログラムを動かすことができます。

と、ここまで書いて挫折しました。さらりと書いていますが、ChromeのGWTプラグインが不安定だったり、プラグインのインストールで手こずったり、コンパイルで手こずったりするうちにざっと2時間も経過してしまいました。年の瀬で忙しいので嫁に呼ばれてしまったので、ここから先は年内はあきらめます。年明けに気が向いたら続きを書きます。

ちなみに、本当はボタンを押したら画像がON/OFFしたりはしようとしました。

結論

GWTでプログラミング入門はまだ無謀かもorz
開発環境ががが…………

追記 (12/31 22:00)

このままではあんまりなので、カウントダウン時計を作ってみました。ちゃんと動くのかはわかりませんが……

package com.example.nekogata.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class Main implements EntryPoint {
    public void onModuleLoad() {
        final long newYearTime = DateTimeFormat
                                    .getFormat("yyyy/MM/dd")
                                    .parse("2012/01/01")
                                    .getTime();
        final Image image = new Image("nekogata.png");
        final Image image2 = new Image("nekogata2.png");
        final Label label = new Label();
        
        RootPanel.get().add(label);
        RootPanel.get().add(image);
        RootPanel.get().add(image2);
        image2.setVisible(false);
        Timer timer = new Timer() {
            @Override
            public void run() {
                long now = System.currentTimeMillis();
                long rest = newYearTime - now;
                if (rest > 0) {
                    label.setText("新年まであと" + rest / 1000 + "秒");
                } else {
                    label.setText("A Happy New Year !!");
                    image.setVisible(!image.isVisible());
                    image2.setVisible(!image2.isVisible());
                }
            }
        };
        timer.scheduleRepeating(100);
    }
}

http://gwtnewyear2012.appspot.com/

きっと、ちゃんと動くよ！うん、GWT簡単ですね！コーディングが直感的で気持ちいいよ！＞＜

さらに追記 (12/31 22:30)

調子に乗ってこんなボタンを作ってみた。
http://2.gwtnewyear2012.appspot.com/
やっぱりGWT面白いよ！！いいよ！

それでは皆さん良いお年を〜