[ThinkIT] 第1回：マスカットが変えるAjax開発環境 (1/3)

リッチクライアントを加速させるAjax開発環境「マスカット」の全貌

第１回：マスカットが変えるAjax開発環境
著者：NTTデータ川田洋平 2006/11/30

1 2 3 次のページ

Ajax開発の問題点

最近のWebアプリケーションでは、表現力、操作性、配布の容易性といった観点からリッチクライアント（注1）が注目を集めています。その中でも、オープンな技術に基づいているAjax（注2）は高い人気を誇っており、様々なところで話題をよんでいます。

※注1：リッチクライアント
詳細は連載「リッチクライアントの現状と今後の動向」を参照
※注2： Ajax
詳細は連載「Ajaxが開く未来」を参照

しかし、Ajaxを用いたWebアプリケーションの開発手法はいまだに発展途上であり、商用の開発レベルには到達していないという見方があります。その要因として表1に示すようなことが考えられます。

JavaScriptの生産性の悪さ: Ajaxではプログラミング言語としてJavaScriptを利用しますが、JavaScriptを用いて本格的な開発をしようとすると、他のプログラミング言語に比べてその生産性の悪さが課題となります。
ドキュメント不足: 最近ではJavaScriptの生産性の悪さをカバーするためのAjaxライブラリが数多く出てきていますが、その多くはドキュメントが整備されていません。さらに日本語のドキュメントとなると皆無に等しいといえます。
統合開発環境の未整備: Ajaxベースのリッチクライアント開発を支援するIDE（Integrated Development Environment：統合開発環境）は現在のところほとんどありません。
アプリケーション開発方針の未発達: Ajaxベースのリッチクライアントを開発する際に、画面やユーザイベント処理をどのように設計し、実装するのかといったアプリケーションレベルでの開発方針が整っていません。

表1：Ajaxを用いたリッチクライアントの開発の難しさ

Ajaxの開発を変える「マスカット」

表1にあげた問題から、商用レベルのWebアプリケーションにAjaxベースのリッチクライアントを適用するには抜本的な解決策が必要でした。

そこで注目を集めているのが、Ajaxベースのリッチクライアント開発フレームワーク「マスカット」です。マスカットはNTTデータが主体となって開発を進め、2006年9月にはオープンソース化し、現在ではSourceForgeにて開発が進められています。

マスカットプロジェクト情報
ダウンロード可能なパッケージ一式や、ユーザと開発者が情報交換できるフォーラムなどがあります。http://sourceforge.jp/projects/maskat/

マスカット・プロジェクトホームページ
デモや各種ドキュメントなどがあります。http://maskat.sourceforge.jp/

ここでは、Ajax開発の欠点を改善し、商用の開発レベルに耐えうる開発環境を提供するマスカットの特徴について説明します。

JavaScript不要の開発

   マスカットでは、開発者は画面を定義する「レイアウト定義XML」と動作を定義する「イベント定義XML」の2種類のXMLファイルを作成するだけでリッチクライアントを構築することができます。そこではJavaScriptを基本的には記述することはありません。

   画面の描画、ユーザイベントの処理、送信メッセージおよび受信メッセージのデータバインディングなどの裏方の処理は、開発者が作成したレイアウト定義XMLとイベント定義XMLに基づきマスカットのフレームワークがすべて処理します。

   簡単な例として、足し算をするアプリケーションを以下に示します。ソースコードを見ればおわかりのように、JavaScriptを一切記述していません。

図1：足し算サンプルのアプリケーション画面

レイアウト定義XML


		<?xml version="1.0" encoding="UTF-16LE"?>

		<layoutDef>

		   <layout name="addLayout">

		      <label name="title" top="10" left="10" text="足し算プログラム" />

		      <text name="arg1" top="50" left="10" width="50" datatype="A" />

		      <label name="plus" top="50" left="70" text="+" />

		      <text name="arg2" top="50" left="90" width="50" datatype="A" />

		      <button name="equal" top="50" left="160" title="=" />

		      <text name="ans" top="50" left="270" width="50" datatype="A" />

		   </layout>

		</layoutDef>

イベント定義XML


		<?xml version="1.0" encoding="UTF-16LE"?>

		<eventDef>

		   <component id="equal">

		      <event id="onclick" remoteUrl="add">

		         <param rootNode="addParam">

		            <source obj="arg1" node="arg1"/>

		            <source obj="arg2" node="arg2"/>

		         </param>

		         <result rootNode="addResult">

		            <target out="ans" in="ans"/>

		         </result>

		      </event>

		   </component>

		</eventDef>

1 2 3 次のページ

著者プロフィール
株式会社NTTデータ川田洋平
技術開発本部ソフトウェア工学推進センタエキスパート
同社の研究開発部門にてWebシステムの研究開発に従事。マスカットの開発には初期から携わり、オープンソース化後はマスカットプロジェクトのプロジェクト運営委員会(PMC)およびコミッタとして活動を続けている。

この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。
ご意見、ご要望にお応えします！インプレスIT INSIDE

INDEX
第1回：マスカットが変えるAjax開発環境
	Ajax開発の問題点
	サーバアーキテクチャを選ばない
	マスカットの導入効果

リッチクライアントを加速させるAjax開発環境「マスカット」の全貌
第1回	マスカットが変えるAjax開発環境
第2回	実践！マスカットIDEをセットアップする
第3回	実践！マスカットアプリケーションの画面作成
第4回	実践！マスカットアプリケーションの画面＆イベント作成
第5回	実践！マスカットアプリケーションのサーバサイド作成