EclipseでJavaScript削減Ajax開発 − マスカットとは：TERASOLUNAでAjaxもラクラク開発（後編）（1/4 ページ）

JavaScript記述を削減するAjax「マスカット」とは

　前回の『業務システムでAjaxを使う際の「JavaScript問題」とは』では、「TERASOLUNA Client Framework for Ajax」（以下、TERASOLUNA Ajax）の概要について説明しました。

　今回は、TERASOLUNA Ajaxのオープンソース版である「マスカット」と、その開発環境「マスカットIDE」を利用し、簡単なAjaxアプリケーションを作成する手順を紹介します。

FrontPage - マスカット via kwout

Eclipseプラグイン「マスカットIDE」の機能と構成

　マスカットIDEはEclipseベースの統合開発環境です。マスカットIDEを利用すると、Ajaxアプリケーションの動作に必要な「レイアウト定義XML」「イベント定義XML」を直感的に編集できます。

　マスカットIDEはマスカットエディタ、［プロパティー］ビュー、［アウトライン］ビューの3つから構成されています（図1）。

図1　マスカットIDEの構成

【1】マスカットエディタ

　［レイアウト］エディタ、［ソース］エディタ、［プレビュー］からなるレイアウト（画面）編集用のエディタです。［レイアウト］エディタでレイアウトをグラフィカルに編集し、編集した内容を［ソース］エディタや［プレビュー］で確認します。編集した内容はレイアウト定義XMLに保存されます。

【2】［プロパティー］ビュー

　GUI部品のプロパティ、イベントハンドラを設定するためのビューです。編集した内容はそれぞれレイアウト定義XML、イベント定義XMLに保存されます。

【3】［アウトライン］ビュー

　レイアウト構造の確認やGUI部品の選択に利用するビューです。

開発環境の整備

　本稿では、表1に示す開発環境を利用します。

　マスカットIDEは、Eclipseのプラグインとして動作します。マスカットのポータルサイトから「maskatide-2.1.1.v20090731.zip」をダウンロードし、解凍して得られた「features」「plugins」フォルダをEclipseのインストールフォルダにコピーしてください。

　マスカットIDEで作成したアプリケーションを動作させるためには、「レイアウト定義XML」などの静的ファイルをWebサーバ上の公開ディレクトリに配置する必要があります。本稿では、アプリケーションの動作確認をより簡単にするため、Eclipseの[ワークスペース]をTomcatの「webapps」配下（webapps\workspace）に作成します（図2）。

図2　ワークスペースはTomcatのwebapps配下に作成

作成するAjaxアプリケーションの概要

　本稿では、下記のフローで動作する簡単なログイン処理を実装します（図3）。

図3　作成するAjaxアプリケーションの概要

　本アプリケーションは以下の手順で作成していきます（下記リストは、インデックスになっています）。