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

第12回　Echo Web FrameworkのクライアントサイドAPIによるWebアプリケーションの作成

ツール, OSS, Echo, Java, JavaScript, プログラミング, 開発, Webアプリケーション, フレームワーク

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

JavaScriptによるWebアプリケーションの作成

前回は，軽量Webアプリケーションフレームワークのひとつである「Echo Web Framework」（⁠以下，Echo）について，サーバサイドのJava用APIを利用してWebアプリケーションを作成する方法を解説しました。EchoのサーバサイドAPIを利用した場合，HTMLを一切記述することなく，JavaプログラムだけでWebサイトのUIが構築できます。

その一方で，EchoにはJavaScriptによるクライアントサイド用のAPIも用意されています。これを利用した場合，今度はサーバ側のプログラムを一切記述することなく，JavaScriptと最小限のHTMLだけでUIが構築できます。サーバサイド／クライアントサイドで，それぞれ個別に，同等のUIを実現するAPIを備えているというのがEchoの特徴なのです。今回はクライアントサイドのJavaScriptを利用したアプリケーションの作成方法を解説します。

JavaScript用のライブラリは，配布ファイル中の「JavaScriptLibraries」フォルダにあります。このフォルダにあるすべてのファイルを，WebアプリケーションのJavaScriptまたはHTMLファイルからアクセスできる場所にコピーしましょう。今回はHTMLファイルと同じ階層に「echo」ディレクトリを作り，そこに配置することにします。

HTMLファイルでは，これらのJavaScriptファイルのうち必要なものをscriptタグで読み込んでおきます。次のような具合です。

<script type="text/javascript" src="./echo/Core.js"></script>
<script type="text/javascript" src="./echo/Core.Web.js"></script>
<script type="text/javascript" src="./echo/Application.js"></script>
<script type="text/javascript" src="./echo/Render.js"></script>
<script type="text/javascript" src="./echo/Client.js"></script>
<script type="text/javascript" src="./echo/Serial.js"></script>
<script type="text/javascript" src="./echo/FreeClient.js"></script>
<script type="text/javascript" src="./echo/Sync.js"></script>
<script type="text/javascript" src="./echo/Sync.ArrayContainer.js"></script>
<script type="text/javascript" src="./echo/Sync.ContentPane.js"></script>
<script type="text/javascript" src="./echo/Sync.Label.js"></script>

Sync.XXXX.jsは利用可能なコンポーネントが定義されたファイルです。ラベルコンポーネントを表すEcho.Labelクラスを使う場合にはSync.Label.jsが，Echo.TextFieldなどのテキストコンポーネントを使う場合にはSync.TextComponent.jsなどが必要になります。

続いてJavaScriptコードを書いていきましょう。まずは前回同様，ページに「Hello Echo3!」と表示するだけのHelloEchoクラスを作ってみます。基本的なコードの形は以下のようになります。

<script type="text/javascript">
  HelloEcho = Core.extend(Echo.Application, {
    $construct: function() {
	Echo.Application.call(this);
        
	// ここにUIを構築するコードを書く
  });

  // 初期化（HelloEchoの構築）
  init = function() {
    var app = new HelloEcho();
    var client = new Echo.FreeClient
            (app, document.getElementById("contentsArea"));
    client.init();
  };
</script>

Core.extend()メソッドを利用してHelloEchoを定義し，それをEcho.FreeClientクラスを使ってページコンテンツとして貼り付ける形です。UIコンポーネントの構築ですが，Labelコンポーネントであれば次のようにしてオブジェクトを生成できます。

var label = new Echo.Label({
  text: "Hello, Echo3!"
});

Labelクラスにはtextプロパティの値を設定するためのsetText()というメソッドが用意されているので，上のコードは次のように書くこともできます。

var label = new Echo.Label();
label.setText("Hello, Echo3!");

また，すべてのコンポーネントの親クラスであるComponentクラスには汎用的にプロパティを設定するためのset()メソッドが用意されている。これを利用すれば，上のコードは次のようにも書けます。

var label = new Echo.Label();
label.set("text", "Hello, Echo3!");

その他，コンポーネントクラスの使い方の詳細はAPIドキュメントを参照してください。以下に，今回作成したHTMLを含むコード全体を示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Echo Framworkのサンプル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Echo FrameworkによるJavaScriptライブラリの読込み -->
    <script type="text/javascript" src="./echo/Core.js"></script>
    <script type="text/javascript" src="./echo/Core.Web.js"></script>
    <script type="text/javascript" src="./echo/Application.js"></script>
    <script type="text/javascript" src="./echo/Render.js"></script>
    <script type="text/javascript" src="./echo/Client.js"></script>
    <script type="text/javascript" src="./echo/Serial.js"></script>
    <script type="text/javascript" src="./echo/FreeClient.js"></script>
    <script type="text/javascript" src="./echo/Sync.js"></script>
    <script type="text/javascript" src="./echo/Sync.ArrayContainer.js"></script>
    <script type="text/javascript" src="./echo/Sync.ContentPane.js"></script>
    <script type="text/javascript" src="./echo/Sync.Label.js"></script>
    
    <script type="text/javascript">
      HelloEcho = Core.extend(Echo.Application, {
        $construct: function() {
          Echo.Application.call(this);
          
          // ラベルを作成してフォントを設定
          var label = new Echo.Label({
              text: "Hello, Echo3!"
          });
          label.set("font", {
                typeface: ["Serif"],
                size: 36,
                bold: false
          });

          // ラベルを配置
          this.rootComponent.add(label);
        }
      });
      
      // 初期化（HelloEchoの構築）
      init = function() {
        var app = new HelloEcho();
        var client = new Echo.FreeClient
              (app, document.getElementById("contentsArea"));
        client.init();
      };
    </script>
  </head>

  <body onload="init();">
    <div id="contentsArea">
      <!-- ここにEchoで生成したコンテンツが配置される。 -->
    </div>
  </body>
</html>

this.rootComponentはデフォルトのルートコンポーネントで，今回はこれに対してadd()メソッドを使ってラベルを追加しています。bodyタグにはonload属性でinit()メソッドを実行するように指定してあります。作成したコンテンツは，「⁠contentsArea」のIDを付けた場所に挿入されます。このIDはEcho.FreeClientクラスのコンストラクタで指定しているものです。

このファイルをWebサーバにデプロイしてWebブラウザからアクセスすると，図1のような表示になります。

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

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

ツール, OSS, Echo, Java, JavaScript, プログラミング, 開発, Webアプリケーション, フレームワーク

著者プロフィール

杉山貴章（すぎやまたかあき）

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

著書