builder Top
RIA/Ajax
- ColdFusion
- ColdFusion
- Dojo
- RIA
- YUI
- ...

Aptana Jaxerのアーキテクチャ：“JavaScriptだけ”を可能にする仕組み

白石俊平

2008/02/04 16:15

今回は、Jaxerのパワーを如実に表す例を紹介した後、さらに高度なJaxerプログラミングを行うための布石として、Jaxerのアーキテクチャについて簡単にお話ししたい。

さらに高度なJaxerプログラミングに向けて

　今回は、Aptana Jaxerに関する特集の第二回目だ。前回は、Jaxerの概要とインストール方法を学んだ後、最も初歩的なJaxerプログラミングを行った。しかし、Jaxerはまだまだまだまだ奥が深い。

　今回は、Jaxerのパワーを如実に表す例を紹介した後、さらに高度なJaxerプログラミングを行うための布石として、Jaxerのアーキテクチャについて簡単にお話ししたい。

「Hello, Jaxer」

　前回紹介した「Jaxerのメリット」の中で、次のように述べた。

ブラウザで動作するJavaScriptコードと、サーバサイドJavaScriptコードをシームレスに統合できる。サーバサイドで動作する関数をクライアントから普通に呼び出し、戻り値を受け取ることができる。サーバサイドのロジックとクライアントのロジックを別ファイルに保存する必要すらない。恐ろしいほどの見通しの良さを実現できる。

　これから紹介するサンプルは、その「恐ろしいほどの見通しの良さ」を紹介しようというものだ。サーバサイドで定義した関数を、クライアント側から呼び出すのが目的である。

　テキストフィールドに文字列を入れてボタンを押すと、「Hello, 」に続けてその文字列がアラート表示される。

Hello, Jaxer

　以下のコードを「Jaxerインストールフォルダ/public」フォルダ内に「hello.html」という名前で保存し、「http://localhost:8081/hello.html」にアクセスする。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta>
  <!-- (1)サーバサイドで実行されるJavaScriptコード -->
  <script runat="server-proxy">
    function hello(name) {
      // (2) Helloに続けて、Jaxerのビルド番号を返す
      return "Hello, " + name + 
        "(build number: "+ Jaxer.buildNumber +")";
    }
  </script>

  <!-- (3) クライアントサイドで実行されるJavaScriptコード -->
  <script type="text/javascript">
    function execute() {
      var name = document.getElementById("name").value;
      if (!name) {
        return;
      }
      // (4) サーバサイドで定義されたhello()の呼び出し
      alert(hello(name));
    }
  </script>
</head>
<body>
  <h2>Hello, Jaxerアプリケーション</h2>
  名前<input type="text" id="name"/>
  <button onclick="execute()">クリック！</button>
</body>
</html>

　ポイントを以下に解説する。

(1) runat属性に注目してほしい。runat="server-proxy"となっているが、このスクリプトブロック内の関数は、「サーバで実行されるが、クライアントから呼び出すことができる」ようになる。
(2) このメソッドは渡された文字列の前に「Hello, 」を付けて返す。ただしそれだけではサーバサイドで処理が行われたのかどうかよくわからないので、Jaxer.buildNumber（前回も参照）の値もつけて返す。
(3) このスクリプトブロックにはrunat属性がついていないため、通常通りクライアント側で実行される。
(4) そして、サーバサイドで宣言されたhello()を呼び出し、戻り値を表示している。一見なんでもないコードのように思えるが、実際はHTTPリクエストを行って、サーバのロジックを同期で呼び出している。

　サーバサイドのロジック定義と、クライアントサイドからの呼び出しが、非常にシームレスに統合されていることがお分かりだろう。一見しただけでは、hello()関数がサーバサイドで実行されるとは気づかないほどだ。