
マスカットフレームワーク 2.2.1
README - はじめにお読みください

最終更新日: 2010/9/30

マスカットプロジェクト
http://maskat.sourceforge.jp/


 1. 概要
───────────────────────────────────

マスカットフレームワークは Web ブラウザ上で動作するリッチクライアント
アプリケーションのための実行環境および開発フレームワークです。

この文書では、マスカットアプリケーション開発者にとって重要となる以下の
項目について説明します。

  ・動作環境
  ・インストール手順
  ・マスカットアプリケーションの構成ファイル
  ・マスカットフレームワークの動作概要
  ・その他の情報源


 2. 動作環境
───────────────────────────────────

2.1 クライアント (Web ブラウザ)

マスカットフレームワークは AJAX 技術を利用しているため、JavaScript 1.5
以降をサポートし XMLHttpRequest オブジェクトが利用可能な Web ブラウザ
での動作を想定しています。

マスカットプロジェクトでは、以下の環境及びバージョンを元に動作確認を
行なっています。この環境およびバージョン以外の動作を制限するものでは
ありませんが、ご利用環境のブラウザに応じて動作確認をお願いします。

  ・Windows XP Professional SP3（32bit）
  　－Internet Explorer 6
    －Mozilla Firefox 3.0, 3.5

  ・Windows Vista Business（32bit）
    －Internet Explorer 7
  
  ・Windows 7 Professional（32bit）
    －Internet Explorer 8


2.2 Web サーバ

マスカットフレームワークは以下の要件を満たすアプリケーションサーバ、
プログラミング言語、ミドルウェアと連携可能です。

  ・フレームワークの構成要素である HTML, XML, JavaScript, CSS, 画像
    などの静的なコンテンツを取得できること
  ・サーバ側の動的な処理によって、XML メッセージの送受信ができること

マスカットプロジェクトでは、以下の環境及びバージョンを元に動作確認を
行なっています。この環境およびバージョン以外の動作を制限するものでは
ありませんが、開発／運用環境に応じて動作確認をお願いします。

  ・OS      : Windows XP Professional SP3（32bit)
              Windows Vista Business（32bit）
              Windows 7 Professional（32bit）
  ・言語    : Sun JDK 6.0 Update 18 (1.6.0_18-b07)
  ・サーバ  : Apache Tomcat 6.0.24


 3. インストール手順
───────────────────────────────────

以下の手順に従い、Web サーバ上にマスカットフレームワークをインストール
してください。

  1) マスカットフレームワークの配布アーカイブをダウンロードします。
  2) 配布アーカイブを展開すると、maskat フォルダが生成されます。
  3) maskat フォルダを Web サーバの公開フォルダに配置します。
  4) maskat フォルダ直下にあるプロパティファイル (properties.json) を
     編集し、アプリケーションで使用したいプラグインを有効化します。

プロパティファイルではプラグインの有効／無効の切り替えや、プラグインの
動作設定を行います。プロパティファイルの例を以下に示します:

----------------------------------------------------------------------
{
    "core": {
        "log.default.level" : "INFO",
        "log.factory" : "maskat.log.SimpleLogFactory",
        ... (省略) ...
    },

    "compat": { "enabled": true },

    "html": { "enabled": false },

    "google": { "enabled": false, "key": "ABCDE" },

    "rialto": {
        "enabled": false,
        "isDebug": false,
        "traceLevel": 0,    
        "isTestVersion": false,
        "language": "en",
        "skin": "standart"
    },

    ... (省略) ...
}
----------------------------------------------------------------------


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

マスカットフレームワークは HTML, JavaScript, CSS などの Web 標準技術を
用いて実装されたアプリケーション実行環境です。以下のファイルを追加する
ことによってアプリケーションとして動作します:

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

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

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

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

  ・画面遷移定義 XML
    アプリケーションの開始時やイベント処理の終了時に実行される遷移処理
    を記述する XML 文書です。アプリケーションが初期表示するレイアウト
    もこの XML で指定します。


 5. マスカットフレームワークの動作概要
───────────────────────────────────

5.1 フレームワークのロード

アプリケーションの実行は、Web ブラウザがコンテナ HTML を読み込むことで
開始されます。このときコンテナ HTML 内に記述された script タグにより、
ブラウザのメモリ上にマスカットフレームワークが読み込まれます。

マスカットフレームワークは静的なコンテンツとして読み込まれるため、次回
以降のアクセスにはブラウザやプロキシなどのキャッシュ機構による高速化が
活用できます。


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

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

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

5.3 レイアウトの読み込み

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

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


5.4 イベント処理ループ

マスカットアプリケーションのユーザがレイアウト内の GUI オブジェクトに
対してマウスやキーなどの入力操作を行うと、対応する HTML DOM ノード上で
イベントが発生します。

マスカットフレームワークはこれらのイベントを捕捉し、イベント定義 XML
に記述されたイベントハンドラを起動します。リモートイベントでは以下の
手順でサーバとの通信処理を行います。

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

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

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

イベント処理はレイアウトがメモリから解放されるか、ブラウザが他の URL
に遷移するまで繰り返し実行可能です。


5.5 画面遷移処理

レイアウト内のイベント処理が正常終了した場合、画面遷移定義 XML に記述
されている遷移処理を実行します。遷移処理では以下の 7 種類のコマンドを
実行することができます。

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


 6. その他の情報源
───────────────────────────────────

6.1 マスカットプロジェクトのホームページ

マスカットプロジェクトの Web サイトでは、マスカットアプリケーションの
サンプル実装例やチュートリアル、タグリファレンスなどの豊富な情報が公開
されています。

また、開発者同士の情報交換を行うフォーラムや、マスカットフレームワーク
に関する不具合、改善要望のトラッキングやなどのコミュニケーションの場も
提供しています。ぜひ一度ご覧ください。

http://maskat.sourceforge.jp/


6.2 マスカットの公式解説書

シンクイット社から、マスカットプロジェクトの開発メンバが執筆した解説書
「リッチクライアントを加速させる Ajax 開発環境マスカットの全貌」を出版
しています。マスカットフレームワーク 1.4.2 を対象に執筆していますが、
チュートリアルや各定義ファイルにおける XML タグのリファレンスを豊富に
掲載しています。

  ・「リッチクライアントを加速させる Ajax 開発環境マスカットの全貌
    MASKAT REFERENCE BOOK (単行本)」
    高野 一利、川田 洋平 著、スタジオ・フロッグス 編
    
    定価  ：2,625円 (税込)
    出版社: シンクイット
    発売日: 2007/03/19
    ISBN  : 9784844370291    


以上

───────────────────────────────────
Copyright(C) 2006-2010 マスカットプロジェクト