リッチクライアント比較2006.08.21 株式会社四次元データ TECHSCORE 編集部 1.1. 概要現在、Web の世界では Ajax という技術が流行しています。それによってもたらされたリッチクライアントは、Google Map をはじめとしてユーザに衝撃をあたえました。2, 3 年先の事ですら想像するのが難しい IT 業界ですが、Web がますますリッチクライアントの方向が進んでいくことは間違いないとみています。 最も有力なものとして Ajax があげられますが、他にも商用、オープンソースなど様々な手法があります。 それらは、時には併用して使えることもありますが、この特集ではそれぞれを独立して、比較検討したいと思います。そして今回対象にする技術は、Java で Web アプリ開発をしていたひとがそのまま移行できるような手法を対象とします。 Flex2, OpenLaszlo, Ajax (特に Yahoo! UI Library をとりあげます), Java Web Start, XUL です。JavaWebStart などは若干色合いが違いますが、Java6 でデスクトップ環境が強化されることもあり、十分有力な手段だと思っております。かつ Java が一番最初に目指していた方向性は、アプレットに代表されるように、リッチクライアントの方向です。 以下にそれぞれの情報サイトと概略を示します。
これらのサイトは見るのが重要ですが、百聞は一見にしかずということで TechScore ではそれぞれに対してサンプルを作りましたので、それらを見ていきましょう。 1.2. サンプルFlex2
MXML ソース
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="348" height="226">
<mx:Script>
<![CDATA[
public function helloWorld():void{
myPanel.visible = false;
clickMe.visible = true;
}
public function showPanel() : void{
myPanel.visible = true;
clickMe.visible = false;
}
]]>
</mx:Script>
<mx:Panel id="myPanel" x="48" y="72" width="250" height="75"
layout="absolute" title="hello world example" visible="false">
<mx:Label id="myLabel" x="10" y="4" text="Hello World!!" fontSize="18"
fontWeight="bold"/>
<mx:Button id="myButton" x="160" y="8" label="OK" click="helloWorld();"/>
</mx:Panel>
<mx:Button id="clickMe" x="128" y="108" label="click me" click="showPanel();"/>
</mx:Application>
OpenLaszlo
LZX ファイル
<canvas>
<window name="hellowindow" title="hello" visible="false" width="200" height="100">
<simplelayout />
<text x="${(parent.width - this.width)/2}">Hello world!!</text>
<button text="OK" x="${(parent.width - this.width)/2}">
<method event="onclick">
parent.setVisible(false);
</method>
</button>
</window>
<button text="hello" x="100" y="100">
<method event="onclick">
canvas.hellowindow.setVisible(true);
</method>
</button>
</canvas>
Ajax (Yahoo! UI Library)ただの DHTML も Ajax の一部とします。ここでは、フレームワークとして Yahoo! UI Library を使います。他にも様々な Ajax フレームワークが提案されていますが、現時点で機能が最も豊富でオープンに使えるものだと認識しています。
HTML ファイル
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="./TGW-RES/javascript/yui/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="./TGW-RES/javascript/yui/event/event.js" ></script>
<script type="text/javascript" src="./TGW-RES/javascript/yui/dom/dom.js" ></script>
<script type="text/javascript" src="./TGW-RES/javascript/yui/container/container-min.js"></script>
<script type="text/javascript" src="./TGW-RES/javascript/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="./TGW-RES/javascript/yui/animation/animation.js" ></script>
<link rel="stylesheet" href="./TGW-RES/javascript/yui/container/assets/container.css" type="text/css"/>
<script type="text/javascript">
var handleOK = function() {
this.hide();
}
function hello(){
var dlg = new YAHOO.widget.SimpleDialog("dlg",
{ width: "20em", effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
fixedcenter:true, modal:true, draggable:false });
dlg.setHeader("Sample");
dlg.setBody("Hello World!");
dlg.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
dlg.cfg.setProperty("buttons", [ { text:"OK", handler:handleOK, isDefault:true }] );
dlg.render(document.body);
}
</script>
</head>
<body>
<input type="button" onclick="hello();" value="Hello World!"/>
</body>
</html>
Java Web Start
JNLP ファイル
<jnlp
spec="1.0+"
codebase="http://localhost:8080/tuigwaa/" href="test.jnlp">
<information>
<title>Hello World</title>
<vendor>4dd</vendor>
<offline-allowed/>
</information>
<resources>
<j2se version="1.5"/>
<jar href="hello.jar"/>
</resources>
<application-desc main-class="example.Hello"/>
</jnlp>
Java ソースファイル
package example;
import javax.swing.JFrame;
import javax.swing.JLabel;
public class Hello {
public static void main(final String[] args) {
HelloFrame frame = new HelloFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(320, 240);
frame.setLocation(100, 100);
frame.setVisible(true);
}
static class HelloFrame extends JFrame {
private static final long serialVersionUID = 7239204413316549554L;
private static final String title = "Java Web Start";
private static final String message = "Hello World!";
public HelloFrame() {
super(title);
JLabel label = new JLabel(message);
getContentPane().add(label);
}
}
}
HTML ファイル
<html>
<head>
<title>Java Web Start Hello!</title>
</head>
<body>
<a href="./hello.jnlp">
Hello World!
</a>
</body>
</html>
サーバ環境 MIME-TYPE の設定 <mime-mapping> <extension>jnlp</extension> <mime-type>application/x-java-jnlp-file</mime-type> </mime-mapping> XUL
HTML ファイル
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="Hello World"
title="Hello World"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox>
<button id="HelloWorld" label="Hello World!"
oncommand="window.open('/richclient/hello-xul-2.xml', 'hello', 'chrome,modal=yes,width=100,height=50')"/>
</hbox>
</window>
hello-xul-2.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="hello"
title="hello"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox>
<label id="HelloWorld" value="Hello World!"/>
<hbox>
<button id="okbutton" label="OK" oncommand="window.close();"/>
</hbox>
</vbox>
</window>
1.3. 数値化それぞれのサンプルとソースコード見て、どのように開発をしてどのような成果物ができるかが、少しながらでもご想像いただけたのではないでしょうか。やはり、それぞれの手法にメリット、デメリットがあります。今後、どの手法を使っていくのがいいのか考えるためにそれぞれの手法を数値化してみたいと思います。 比較は各ツールの基本点を定め、その点数に用途に応じた重みを掛け合わせて求めます。用途には「一日中同じ人が机の前で使う業務アプリケーション」と「一般消費者に使ってもらう Web アプリケーション」という一般的な２つの用途を考えました。 (注) 数値化に際しては、TechScore 編集部の独断と偏見で実施しております。 
今回比較を行った結果は上のようになりました。表中の黒字で書かれた数字が各ツールの基本点となります。例えば「Flex2 の UI の美しさ」の基本点は「4」となります。「重み1」と「重み2」はそれぞれ「一日中同じ人が机の前で使う業務アプリケーション」と「一般消費者に使ってもらう Web アプリケーション」に適すると思われる重み係数です。例えば、「一日中同じ人が机の前で使う業務アプリケーション」には「信頼性」は重要ですが「移植性」はそれほど求められないので、重み1の「信頼性」の値は「5」、「移植性」の値は「2」になっています。 各ツールの青字で書かれた数字は基本点と重み1の値を掛けることで求めた値です。同様に赤字で書かれた数字は基本点と重み2の値を掛けて求めた値です。 例： 
結果今回の比較から
が適しているという結果になりました。 1.4. まとめこのリッチクライアント特集では、それぞれのサンプルの作成を通してそれぞれのメリットデメリットを明確化して、数値化しました。そして、どのような場合にどのような技術を採用すべきか、という一例をご紹介しました。 リッチクライアントは今後ますます進んでいきますが、その中でどの手法を使っていくかを選択するひとつの目安としていただければ幸いです。
|
|
