HTML/CSS/DOMを書かないWebアプリケーションフレームワーク「qooxdoo」

qooxdoo(クークスドゥー)はJavaScriptをベースとしたAjaxアプリケーションフレームワークである。通常のWebアプリケーションフレームワークとは趣向が異なり、HTMLやCSSをいっさい記述することなく、JavaScriptのコードのみでAjaxを利用したインタラクティブなWebアプリケーションを開発することができる。DOMなどの知識も必要なく、使うのはqooxdooで用意されたオブジェクト指向ベースのJavaScript APIのみ。

たとえばWebページ上に表示するボタンやリスト、テーブル、フォームなどのGUI部品もすべてqooxdooのAPIでラップされており、利用するためにHTMLやDOMを意識する必要はまったくない。それどころか、ウィジェットをさまざまな形で配置するためのコンテナや、レイアウトを自動で整えるレイアウトマネージャなども用意されており、デスクトップアプリケーションを構築するのと同様の感覚でWebアプリケーションが作れてしまう。もちろん、ラップされたGUI部品ばかりでなく、HTMLやDOMなどを直接扱うためのAPIも用意されている。

提供される個々のクラスはqooxdoo独自のものだが、その構成はJavaにおけるJFC/Swingなどとよく似ているので、使いはじめてしまえばそれほど違和感を持つことはないだろう。またAPIビューアをはじめとして各種ドキュメントも充実しているほか、ソースコード中にもJavadocライクなコメントが埋め込まれている。

qooxdooを使って何ができるかを知るためには、デモページを見るのが一番早いだろう。ここではqooxdooを用いてWebサイトを構築する一連の流れを紹介する。

qooxdooによるWebアプリケーションの構築

qooxdooは公式サイトのダウンロードページよりダウンロードすることができる。サーバサイドとの連携などを考慮せず、クライアントサイド(ブラウザ上)でのみ動作するアプリケーションを構築する場合には、とりあえずSoftware Development Kit(SDK)があればよい。

qooxdoo SDKに含まれる各種ツールはPythonで作られているため、動作させるにはPythonの実行環境が必要となる。本稿ではActivePythonをインストールしたWindows上で利用する方法を紹介する。Windowsの場合は、そのほかにCygwinを利用する方法もある。また、Linuxなど他のOSでもPythonが動作すればquuxdooを使うことができる。

パッケージをダウンロードしたら、それを展開してインストールしたいフォルダに移動する。ここではC:\qooxdoo-1.0.1-sdkにインストールしたものとする。このqooxdoo SDKは以下の4つのフォルダから構成されている。

• application - サンプルアプリケーション(前述のデモページで見られるアプリと同じもの)
• component - 開発をサポートするためのアプリケーション群
• framework - フレームワークの本体
• tool - フレームワークで利用するツール群

まずはtool\binフォルダにあるcreate-application.pyを利用してアプリケーションの雛型を作成する。次のコマンドは、「myapp」という名前のアプリケーションを「C:\workspace」フォルダに作成する場合の例である。

プロンプト1

> C:\qooxdoo-1.0.1-sdk\tool\bin\create-application.py --name=myapp --out=C:\workspace

このコマンドによってC:\workspace\myappフォルダ以下にアプリケーションの雛型が作成される。続いてC:\workspace\myappに移動し、generate.pyを利用して次のようにアプリケーションを構築する。

プロンプト2

> cd C:\workspace\myapp
> .\generate.py source-all

以上で準備完了だ。アプリケーションのトップページはmyappフォルダ以下に生成されたsource\index.htmlである。これをウェブブラウザで開くと[First Button]というボタンがひとつだけ表示され、クリックすると図2のようにメッセージダイアログが表示される。

sourceフォルダ以下にはindex.htmlのほかに次の4つのフォルダが生成されているはずだ。

• class - JavaScriptのクラス群
• resource - アプリケーションで使う画像などのリソースを格納するフォルダ
• script - ソースから自動生成されるスクリプトが格納されるフォルダ
• translation - アプリケーションを複数言語に対応させる場合に言語ファイルを格納するフォルダ

index.htmlを読むと、scriptフォルダにあるmyapp.jsを読み込んでいることがわかる。myapp.jsは先ほどのgenerate.pyによって生成されたスクリプトファイルで、元になっているのはclassフォルダにあるJavaScriptだ。アプリケーションの中心となるのはこのclass以下にあるmyapp\Application.jsであり、中身はリスト1のようになっている(コメントなどを見やすいように書き換えてある)。

リスト1

qx.Class.define("myapp.Application",
{
  extend : qx.application.Standalone,

  members :
  {
    main : function()
    {
      // Call super class
      this.base(arguments);

      // ログ出力を有効にする
      if (qx.core.Variant.isSet("qx.debug", "on"))
      {
        qx.log.appender.Native;
        qx.log.appender.Console;
      }

      /*
      -------------------------------------------------------------------------
        以下を修正してアプリケーションを作成する
      -------------------------------------------------------------------------
      */
      // ボタンを作成
      var button1 = new qx.ui.form.Button("First Button", "myapp/test.png");

      // アプリケーションのルートオブジェクトを取得
      var doc = this.getRoot();

      // ボタンを配置
      doc.add(button1, {left: 100, top: 50});

      // ボタンにイベントリスナを登録
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }
  }
});

myapp.Applicationというクラスが定義され、メンバとしてmain()関数がひとつだけ宣言されている。このmain()を書き換えることでアプリケーションをカスタマイズできる。先程表示したindex.htmlのボタンは、このmain()の「以下を修正してアプリケーションを作成する」の部分より構築されたものである。

最初にqx.ui.form.Buttonオブジェクトを生成し、それをルートオブジェクトに座標を指定してadd()する。続いてButtonオブジェクトにaddListener()でイベントリスナを登録し、リスナ内ではalert()関数を呼び出している。APIの詳細は分からなくても、なんとなくコードの意味はつかめるだろう。

デバッグとデプロイメント

qooxdooで生成されたアプリケーションにはデフォルトでログ出力を行うデバッグモードが搭載されている。ひとつはWebブラウザに搭載されたデバッグツールの機能を利用するもので、リスト2のコードによって有効になる。この機能では、たとえばFirefoxであればFirebug拡張などの機能を利用してログ出力を行う。

リスト2

qx.log.appender.Native;

もうひとつはそのような機能を持たないブラウザでも簡易的なログ出力を可能にする機能で、リスト3のコードによって有効になる。このモードでは、アプリケーションを実行しているページ上で[F7]キーを押すことで図3のような簡易コンソールが表示される。

リスト3

qx.log.appender.Console;

最後に、本番環境にデプロイメントするアプリケーションの構築方法を紹介する。qooxdooでは開発者が作成したJavaScriptクラスから、自動的にアプリケーションのJavaScriptファイルを生成する。したがって本番環境にデプロイする際には元になったJavaScriptクラスは不要となる。そこで、次のコマンドによって不要なファイルを除外した"build"バージョンのアプリケーションを生成することができるようになっている。

プロンプト3

> .\generate.py build

このコマンドでC:\workspace\myappフォルダ以下にbuildフォルダが作られる。本番環境にはこのフォルダをデプロイすればよいというわけだ。

次回はqooxdooのAPIを利用してApplication.pyをカスタマイズしてみたいと思う。