マスカットフレームワークの概要

マスカットフレームワークは Ajax ベースのリッチクライアント開発を支援する実行時フレームワークです。HTML、CSS、JavaScript、XML などの Web 標準技術を用いて実装されており、Internet Explorer や Firefox など一般的な Web ブラウザ上で動作するように設計されています。

この文書ではマスカットフレームワークの概要について記述します。

目次

フレームワークの機能

マスカットフレームワークの中心的な機能は JavaScript で記述されており、Web ブラウザに読み込まれて実行されます。以下に、簡単な検索フォームを持つアプリケーションを例としたフレームワーク動作の模式図を示します。

overview.png

マスカットフレームワークが提供する主要な機能は以下のとおりです。

画面の自動生成

レイアウト定義 XML に画面部品を記述するだけで、HTML や JavaScript を記述せずにリッチクライアント画面を自動生成します。

イベント管理

マウスやキー操作などのイベントを捕捉し、イベント定義 XML に従って処理します。JavaScript を記述しなくてもサーバとの XML 通信や画面の更新処理ができます。また、イベント処理の各段階で JavaScript 関数を呼び出して、イベント処理をカスタマイズすることも可能です。

入力値検証

Web ブラウザ側での入力値検証機能を提供します。ユーザが入力したデータ形式が正しいか、必要な情報が入力されているかなどの検証をサーバへ処理を要求する前に実行可能です。入力値検証に失敗した場合はユーザにメッセージを表示し、以後のイベント処理が自動的にキャンセルされます。

同期・非同期通信

サーバとの同期通信・非同期通信をサポートします。同期通信ではサーバの応答があるまでユーザ操作がブロックされますが、非同期通信ではユーザ操作が継続できるため、複数のサーバ側処理を並行して実行させることもできます。

マスカットアプリケーションの構成ファイル

アプリケーション開発者がマスカットフレームワークに以下のファイルを追加することにより、リッチクライアント・アプリケーションとして動作します。

  • コンテナ HTML
  • 画面遷移定義 XML
  • レイアウト定義 XML
  • イベント定義 XML
  • JavaScript ファイル

ここでは各構成ファイルの役割や記述内容を説明し、サンプルとして四則演算アプリケーションにおける各ファイルの記述例を紹介します。

コンテナ HTML

マスカットアプリケーションを実行するために必要な HTML DOM ツリーや JavaScript のメモリ空間を確保する役割を持つ HTML 文書です。script タグでフレームワーク (maskat.js) のパスを指定し、div タグで GUI の描画領域を確保します。

コンテナ HTML の記述例を以下に示します。

<html>
  <head>
    <title>マスカット | 四則演算アプリケーション</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../maskat/core/maskat.js"></script>
  </head>
  <body>
    <div id="divMaskat"></div>
  </body>
</html>

画面遷移定義 XML

アプリケーションの開始時やイベント処理の終了時に実行される遷移処理を記述する XML 文書です。アプリケーションが初期表示するレイアウトもこの XML で指定します。遷移処理では以下の 7 種類のコマンドを実行することができます。

  1. レイアウトを読み込む
  2. レイアウトをメモリから解放する
  3. レイアウトを表示する
  4. レイアウトを非表示にする
  5. レイアウトに入力値検証ルールを読み込む (※ LiveValidation プラグインが必要)
  6. コンテナ HTML に外部 JavaScript を追加する
  7. コンテナ HTML に外部 CSS スタイルシートを追加する

画面遷移定義 XML の記述例を以下に示します。

<?xml version="1.0" encoding="UTF-8"?>
<transitionDef>
  <init>
    <loadJS fileName="calculation" />
    <loadLayout xmlFile="layout.xml" target="divMaskat" show="true" />
  </init>
</transitionDef>

レイアウト定義 XML

マスカットにおける画面の描画単位である「レイアウト」を定義するための XML 文書です。画面に配置する GUI オブジェクトのコンポジット構造を XML タグの親子関係に対応付けて記述します。

レイアウト定義 XML の記述例を以下に示します。

<?xml version="1.0" encoding="UTF-8"?>
<layoutDef>
  <layout name="calculation">
    <frame name="calculationFrame" left="12" top="24" width="577" height="157"
           title="四則演算アプリケーション">
      <text name="leftOperandText" left="23" top="23" width="85"
            tabIndex="1" datatype="N"/>
      <combo name="operatorCombo" left="119" top="23" width="50" tabIndex="2">
        <comboItem text="+" value="+"/>
        <comboItem text="-" value="-"/>
        <comboItem text="*" value="*"/>
        <comboItem text="/" value="/"/>
      </combo>
      <text name="rightOperandText" left="179" top="23" width="85"
            tabIndex="3" datatype="N"/>
      <label name="equalLabel" left="275" top="23" text="="/>
      <text name="resultText" left="299" top="23" width="85"
            tabIndex="4" datatype="N" disable="true"/>
      <button name="localCalculateButton" left="23" top="83" title="ローカル"/>
      <button name="remoteCalculateButton" left="23" top="107" title="リモート"/>
    </frame>
  </layout>
</layoutDef>

イベント定義 XML

GUI オブジェクトで発生するイベント (ボタンをクリックする、など) に対する処理を記述します。イベント処理方式は大きく分けて、ブラウザ内で処理する「ローカルイベント」と、Web サーバとの HTTP 通信によってサーバ側に処理を依頼する「リモートイベント」の 2 種類があります。

イベント定義 XML の記述例を以下に示します。

<?xml version="1.0" encoding="UTF-8"?>
<eventDef>
  <component id="localCalculateButton">
    <event id="onclick" finish="calculate" type="local"/>
  </component>
  <component id="remoteCalculateButton">
    <event id="onclick" remoteUrl="./calculate.php" async="false">
      <param rootNode="request">
        <source obj="leftOperandText" node="leftOperand" type="byte"
                desc="パラメータ1"/>
        <source obj="rightOperandText" node="rightOperand" type="byte"
                desc="パラメータ2"/>
        <source obj="operatorCombo" node="operator"/>
      </param>
      <result rootNode="response">
        <target out="resultText" in="result"/>
      </result>
    </event>
  </component>
</eventDef>

JavaScript ファイル

イベント処理の各段階で JavaScript 関数の呼び出し (コールバック) を行うことで、マスカットアプリケーションの動作を拡張可能です。コールバックのタイミングや呼び出し先の関数名はイベント定義 XML に指定し、関数本体は独立した JavaScript ファイルに記述します。

JavaScript ファイルの記述例を以下に示します。

function calculate(){
	var left = Number(leftOperandText.getValue());
	var right = Number(rightOperandText.getValue());
	var result = NaN;
	
	switch (operatorCombo.getValue()) {
	case "+":
		result = left + right;
		break;
	case "-":
		result = left - right;
		break;
	case "*":
		result = left * right;
		break;
	case "/":
		result = left / right;
		break;
	}

	resultText.setValue(result);
}

また、マスカットフレームワークと通信してアプリケーションのビジネスロジックを処理するサーバサイドの実装が必要です。マスカットフレームワークは Java EE、.NET、Ruby on Rails、PHP など、さまざまなサーバサイドのアプリケーションサーバ・プログラム言語と連携させることができます。

動作概要

マスカットフレームワークは以下の手順で動作します。

フレームワークのロード

アプリケーションの実行は、Web ブラウザがコンテナ HTML を読み込むことで開始されます。このときコンテナ HTML 内に記述された script タグにより、ブラウザのメモリ上にマスカットフレームワークが読み込まれます。マスカットフレームワークは静的なコンテンツとして読み込まれるため、次回以降のアクセスにはブラウザやプロキシなどのキャッシュ機構による高速化が活用できます。

アプリケーションの初期化

マスカットフレームワークはコンテナ HTML の読み込み完了 (onload) イベントを捕捉して、アプリケーションの初期化処理を行います。この段階で以下の処理を行います。

プラグインの初期化
プロパティファイル (properties.json) で有効化されたプラグインを読み込んで初期化を行います。通常、この処理によって追加の JavaScript ファイルや CSS スタイルシートが読み込まれます。
初期画面の表示
コンテナ HTML と同じフォルダにある画面遷移定義 XML (transition.xml) を読み込んで画面遷移コントローラを構成します。また、初期画面として指定されているレイアウトを読み込みます。

レイアウトの読み込み

マスカットフレームワークは、コンテナ HTML の指定された DOM ノード内にレイアウトを読み込みます。1 つのレイアウトに対してレイアウト定義 XML、イベント定義 XML が 1 つずつ読み込まれ、以下の処理を行います。

レイアウトの描画
レイアウト定義 XML に記述された GUI オブジェクトのコンポジット構造に従い、HTML 文書に DOM ノードの階層からなるサブツリーを生成します。生成された DOM ノードには CSS スタイルが設定され、ブラウザ上に部品として表示されます。
イベントハンドラの登録
レイアウト内の GUI オブジェクトに対して、イベント定義 XML の記述に従ってイベントハンドラを登録します。ここで登録したイベントハンドラはレイアウト内の DOM ノードでイベントが発生した際に実行されます。

イベント処理ループ

マスカットアプリケーションのユーザがレイアウト内の GUI オブジェクトに対してマウスやキーなどの入力操作を行うと、対応する HTML DOM ノード上でイベントが発生します。マスカットフレームワークはこれらのイベントを捕捉し、イベント定義 XML に記述されたイベントハンドラを起動します。リモートイベントでは以下の手順でサーバとの通信処理を行います。

要求メッセージの送信
レイアウト内の GUI オブジェクトや変数から取得したデータを用いて XML 形式のメッセージを生成し、サーバ側に HTTP 要求を送信します。
応答メッセージの受信
サーバから HTTP 応答を受信した場合、応答に含まれる XML メッセージを解析し、レイアウト内の GUI オブジェクトや変数の更新を行います。
通信エラー処理
サーバ側エラーや応答待ちタイムアウトが発生した場合には、イベント定義 XML で指定されたハンドラ関数を起動してダイアログ表示やログ出力を行うことができます。

イベント処理の実行中に、以下のタイミングでユーザ定義の JavaScript 関数を呼び出すことができます。

  1. イベント処理の開始直後
  2. 要求メッセージの送信直前 (※ リモートイベントのみ)
  3. 要求タイムアウトの発生時 (※ リモートイベントのみ)
  4. 応答メッセージの受信直後 (※ リモートイベントのみ)
  5. エラーメッセージの受信時 (※ リモートイベントのみ)
  6. イベント処理の終了直前

レイアウト内のイベント処理が正常終了した場合には画面遷移定義 XML に記述されている遷移処理を実行し、次のイベント発生まで再び待機します。イベント処理はレイアウトがメモリから解放されるか、ブラウザが他の URL に遷移するまで繰り返し実行可能です。