JavaScriptだけで作れるAjax Webアプリ：Aptana Jaxerクイックスタート

白石俊平（あゆた）
2008-02-01 17:05:00
サーバサイドJavaScriptを実現するアツイ製品Aptana Jaxerの使い方、を解説する。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

初めてのサーバサイドJavaScript

　インストールが完了したら、早速アプリケーションを作ってみよう。以下のサンプルは、アクセスするとJaxer.buildNumber（Jaxerのビルド番号）という変数の値を出力する。

初めてのJaxer

　Jaxerのデフォルトでは、「Jaxerインストールフォルダ/public」フォルダ内に格納したファイルに対してブラウザからアクセスすることができる。以下のコードを同フォルダに「firstJaxer.html」という名前で保存し、「http://localhost:8081/firstJaxer.html」にアクセスすれば良い。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta>
  <!-- (1) サーバサイドで実行されるJavaScriptコード -->
  <script runat="server">
    function init(){
      // (2) DOMにアクセス
      document.body.innerHTML = "Jaxerのビルド番号は:" + Jaxer.buildNumber;
    }
  </script>
</head>
<!-- (3) サーバ上で実行されるonloadイベント -->
<body onserverload="init()">
</body>
</html>

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

  • (1) このスクリプトブロックは、runat="server"という指定があるため、サーバサイドで実行される。
  • (2) そのスクリプトブロック内でDOMにアクセスし、ビルド番号を書き出している。
  • (3) body.onserverloadイベントはJaxer固有のイベントだ。サーバサイドでページを解析し終わり、DOMが構築された後に呼び出される。ブラウザ上と同じく、構築が終わるまではDOMにアクセスすることはできないのだ。

　このページにアクセスして実行結果を確認したら、ブラウザのソース表示を行って、ダウンロードしたHTMLを確認してみていただきたい。<script runat="server">の部分は消え、bodyタグ内に文字列が埋め込まれているはずだ。つまりクライアントに対しては、サーバサイドでDOMを操作した後の結果が再度HTMLとしてシリアライズされ、ダウンロードされるということになる。

リスト: サンプルコードをHTML表示した結果

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript">
    /** Jaxer clientFramework_compressed.js - ..(略).. */
  </script>
  <!-- サーバサイドで実行されるJavaScriptコード -->
</head>
<body>Jaxerのビルド番号は:0.9.0.1903</body>
</html>

　今回のサンプルは、「サーバサイドでJavaScriptコードが実行され、DOMにアクセスできる」という事実をお見せするだけにとどまった。さらに強力な、Jaxerのありがたみがわかるようなサンプルは、次回以降に紹介していきたい。

まとめ

　今回は、Jaxerの概要とインストール方法、もっとも初歩的なプログラムの作成方法について解説した。次回は、Jaxerの「サーバプロキシ」がどれほどAjaxプログラミングを簡潔にするか、についてお話ししたい。

  • 新着記事
  • 特集
  • ブログ