本格派エンジニアの工具箱

第11回 JavaのみまたはJavaScriptのみでのWebアプリケーション開発が可能な「Echo Web Framework」

この記事を読むのに必要な時間:およそ 3.5 分

Echo Web Frameworkとは

Echo Web Framework⁠以下,Echo)は,Ajaxに対応したオープンソースのWebアプリケーション・フレームワークです。Webアプリケーション開発向けのフレームワークは無数に存在しますが,Echoがそれらのフレームワークと大きく異なるのは,サーバサイドのJavaコードのみによるアプリケーション開発と,クライアントサイドのJavaScriptのみによるアプリケーション開発の両方を同時にサポートしている点です。

Javaコードによるアプリケーション開発では,AWT/Swingに似たコンポーネント・ベースのプログラミングモデルによってUIを作成します。クライアントとサーバとの通信にはServletの仕組みが利用されます。すなわち,UIを構成するJavaコードはServletプログラムとして動作し,クライアントからの接続要求があると,自動でJavaScriptを利用したHTMLページを構築して返す仕組みになっています。したがって,開発者が直接HTMLやJavaScriptのコードを記述する必要はありません。

一方,JavaScriptによるアプリケーション開発では,HTMLで用意されたタグ・コンポーネントではなく,Echo独自のJavaScriptオブジェクトによるコンポーネントを用いてUIを作成します。したがってコードのほとんどはJavaScriptのみで構成され,HTMLは最小限,サーバ側のプログラムに至っては一切記述する必要がありません。コンポーネントモデルは,サーバサイドと同様にJavaのAWT/Swingに似たものになっているため,JavaのGUIアプリケーションと同じ感覚でUIを構築することが可能です。

Javaのみ,またはJavaScriptのみでの開発を可能にするフレームワークは他にもありますが,Echoの場合は,その両方を同時にサポートしており,双方で似たプログラミング・モデルを採用しているという点がきわめて特徴的です。今回は,まずサーバサイド,すなわちJavaコードによるWebアプリケーションの開発方法を紹介したいと思います。

JavaコードによるWebアプリケーションの作成

本稿執筆時点では,Echoの次期バージョンとなるEcho3のRC1(リリース候補1)が公開されているので,今回はこれを利用します。Echo 3 RC1はこのページよりダウンロードできます。ダウンロードしたファイルを解凍すると,JavaLibrariesフォルダに「Echo3_App.jar」「Echo3_WebContainer.jar」という2つのjarファイルがあります。この2つを作成するWebアプリケーションプロジェクトのクラスパスに追加すれば,Echo3を使うことができます。

Echoのサーバサイド・アプリケーションは,ApplicationInstanceクラスを継承して作成します。ApplicationInstanceはabstractクラスであり,初期化用のinit()というメソッドがひとつ定義されているので,これをオーバーライドしてアプリケーションの中身を作っていきます。UIの構成にはAWT/Swingに似たコンポーネントモデルが採用されており,まずベースとなるWindowクラスがあって,そこにContentPaneをはじめとする各種Paneや,LabelやButtonなどのコンポーネントをサブコンポーネントとして追加していきます。たとえば,画面に「Hello, Echo3!」と表示するプログラムは次のようになります。

package jp.gihyo.toolbox.echo;

import nextapp.echo.app.*;

public class HelloEcho extends ApplicationInstance {
  @Override
  public Window init() {
    Window window = new Window();
    window.setTitle("Echo Framworkのサンプル");

    // ContentPaneの作成
    ContentPane contentPane = new ContentPane();
    contentPane.setInsets(new Insets(new Extent(20)));
    window.setContent(contentPane);

    // フォントを指定してラベルを配置
    Label label = new Label("Hello, Echo3!");
    Font font = new Font(Font.SANS_SERIF, Font.PLAIN, new Extent(36));
    label.setFont(font);
    contentPane.add(label);
        
    return window;
  }
}

Insetsはコンポーネントの周り(内側)の余白を表すクラスです。Extentは直線距離を表すためのクラスで,コンポーネントの縦/横サイズや,コンポーネント間の距離の設定などに利用します。各クラスの詳細は,APIドキュメントを参照してください。

前述のように,Echoのサーバサイド・プログラムはServletの一種として動作します。そのため,起点となるためのWebContainerServletを継承したクラスを作成する必要があります。WebContainerServletにはApplicationInstanceオブジェクトを返すnewApplicationInstance()メソッドが定義されているので,次に示すように,これをオーバーライドしてHelloEchoクラスのインスタンスを返すようにします。

package jp.gihyo.toolbox.echo;

import javax.servlet.annotation.WebServlet;
import nextapp.echo.app.ApplicationInstance;
import nextapp.echo.webcontainer.WebContainerServlet;

@WebServlet("/hello")
public class HelloEchoServlet extends WebContainerServlet {
  @Override
  public ApplicationInstance newApplicationInstance() {
    return new HelloEcho();
  }  
}

ここでは,web.xmlは使わずに@WebServletアノテーションを利用してServlet名の設定を行っています。プロジェクトをサーバにデプロイしたら,Webブラウザから@WebServletで設定した"/hello"にアクセスします。URLは,たとえば「http://localhost:8080/EchoSample/hello」のようになります。正しくデプロイできていれば図1のように表示されるはずです。

図1 EchoのJava APIで作成したWebページの例

図1 EchoのJava APIで作成したWebページの例

著者プロフィール

杉山貴章(すぎやまたかあき)

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌,書籍,Webメディアで多数の著作をもつ。

著書

コメント

コメントの記入