レベル: 中級 小野 圭二 (ono@net8.co.jp), 代表取締役, (株)ネットエイト
2007年 10月 19日 日本では意外と知られていないオープンソースのRIA/Ajax開発プラットフォームであるOpenLaszloについて、”システム開発”の視点からその導入方法について紹介する連載です。WebシステムをRIA/Ajaxにしたい/してみたいとお考えの皆さん。OpenLaszloを使えばシステムに大幅な変更をせずに、今すぐにでも移行できます。OpenLaszloはMVCモデルを*完全に*実現します。そのため、OpenLaszloでクライアントプログラムを作成すればサーバサイドはほぼそのまま現状のものを使うことができます。連載第一回目は、OpenLaszloを導入した際にサーバサイドプログラムがどうなるかについて解説いたします。
1．OpenLaszlo
OpenLaszloは”オープンソースのRIA/Ajax開発プラットフォームです”とは、どうゆうことかと言いますと、3階層モデルで言いますところの”クライアント”を作成するための開発/実行環境です。
OpenLaszloはバージョン3まではFlash Player上で稼動するRIAを開発するものでしたが、バージョン4からは、コンパイルオプションを変えるだけでFlash Player上で稼動するRIAに加えてDHTML（Ajax）として稼動するRIAをもコンパイルアウトすることができるようになりました。昨今ではリッチインターネットを実現するためのアーキテクチャとして”Flash or Ajax”ないし、”Flash vs Ajax”の比較がされますが、双方に良さがあるわけで、これらを用途によって使い分けができるのはOpenLaszloだけです。
OpenLaszloはMVCモデルのViewを取り扱います。従来のWebアプリケーションでは、ダイナミックにデータをバインドするコンテンツは、サーバサイドでコンテンツを組み立て、その都度クライアントへ配信/表示していました。Strutsなどはその例です。この方式ですと、ユーザ要求の度に画面レイアウト情報とバインドデータを配信していることになります。つまり、”見た目”バインドされるデータが変わるだけなのに、クライアントとサーバ間では表示するテーブルタグやフォントタグを含めてその都度配信していることになります。
リスト1.1 従来のWebアプリケーションでダイナミックデータを扱う例（Struts)
<%@ page contentType="text/html;charset=Shift_JIS" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<html:html>
<head>
<title>データリストの表示</title>
</head>
<body>
<table border="1">
<logic:iterate id="dataInfo" name="data.view.info" scope="request">
<tr>
<td nowrap><bean:write name="dataInfo" property="data1" /></td>
<td nowrap><bean:write name="dataInfo" property="data2" /></td>
<td nowrap><bean:write name="dataInfo" property="data3" /></td>
</tr>
</logic:iterate>
</table>
</body>
</html:html>
|
リスト1.1の様に、このJSPがクライアントから呼び出されるたびに<html>～</html>が<bean>タグ内でデータをバインドした状態でクライアントに配信されます。”毎回”です。本当は<bean>タグ内だけあればいいのに。この例はまだ画面表示がシンプルですが、実際の業務アプリケーションではもっと込み入った画面になります。その画面では、<font>タグや<table>タグがそれこそ山のように入っているはずです。これではサーバもネットワークもたまりません。
OpenLaszloのようなRIAでは、画面のレイアウトは最初の一回だけクライアントに配信します。ユーザ要求の度にサーバから配信されるのはバインドされるデータのみになります。このため、通信トラフィック量は画面が複雑であればあるほど格段に少なくなります。
リスト1.2 OpenLaszloでダイナミックデータを扱う例
<?xml version=”1.0” encoding=”UTF-8” ?>
<canvas>
<dataset name=”dataInfo” src=”http:/foo/jsp_name” request=”true”/>
<view datapath=”dataInfo:/*>
<simplelayout/>
<text datapath=”data1” />
<text datapath=”data2” />
<text datapath=”data3” />
</view>
</canvas>
|
リスト1．2はOpenLaszloでリスト1．1を実現する例ですが、OpenLaszloでは<dataset>タグでサーバサイドプログラムからのデータを受けて（dataInfoオブジェクトに格納して）、datapath属性でバインドします。このとき、<?xml>～</canvas>の画面表示プログラムは最初の一回だけサーバからクライアントに送信されます。2回目からは<dataset>タグだけが実行され、dataInfoオブジェクトだけが更新されて<view>タグ内の実際の画面表示にデータがダイナミックにバインドされるというわけです。
2．OpenLaszloアプリケーションの開発言語
OpenLaszloによるRIAは、LZXという独自のXML言語とJavaScriptで記述します。”目に見える部分”、例えば入力フォームや画像表示等の静的な表示はLZXで記述され、これらを操作したり何らかのアクションを記述するにはJavaScriptを使います。XML（LZX）のタグとJavaScriptを組み合わせるところはDHTMLコンテンツの記述に似ています。
リスト2.1 LZXのサンプルコードと実行イメージ
<?xml version="1.0" encoding="UTF-8" ?>
<canvas>
<view width="300" height="200" bgcolor="0x0000ff">
<handler name="onclick">
this.setBGColor( "0x00ff00" );
</handler>
<text x="5" y="5">データ入力欄1：</text>
<edittext x="90" y="5"/>
<text x="5" y="30">データ入力欄2：</text>
<edittext x="90" y="30"/>
<text x="5" y="55">データ入力欄3：</text>
<edittext x="90" y="55"/>
</view>
</canvas>
|
図2.1 リスト2.1の実行画面
リスト2．1を実行すると、起動実行画面として図2.1の左側（背景色青）が表示されます。この表示はリスト2．1において、<view>タグで記述されているものです。
次に、背景色青の領域のどこかでマウスを右クリックすると、背景色緑の左側画面に表示が変わります。これは、リスト2．1の<handler>タグで記述されている動作が実行されたことによります。<handler>タグの中を見ると、setBGColor()関数が実行されていることがわかります。すなわち、JavaScriptでLZXをコントロールしていることです。ちなみに、setBGColor()はOpenLaszloのLzViewクラスで用意されているJavaScript関数です。
LZXはとてもパワフルな言語で、継承によるクラス作成（カスタマイズ）が容易です。標準で非常にバラエティに富んだ且つ、ユーティリティの高いコンポーネントが用意されています。これらの紹介や使い方については次回以降で解説します。
3．OpenLazloアプリケーションのデータインタフェース
本稿の主要目的は、OpenLaszloを導入した場合にサーバサイドプログラムはどの様になるかを解説するところにあります。RIAを導入することを検討する際に、全体システムの再検討は気になるところでしょう。フロントにRIAという新しいアーキテクチャを導入すると、当然バックオフィスであるサーバサイドプログラムも大幅な変更が必要になると考えるのは自然なことです。むしろ、作り直したほうがいいのではないかと。しかし、ちょっと待ってください。そのITシステムのシステムロジックは今現在順調に稼動しているのではないのですか？ 順調に問題なく稼動しているITシステムをいじるのは相当な勇気のいることです。しかしご安心ください。RIAは“View”モデルを実装するものですからバックオフィスのサーバサイドプログラムとの結合性はとても薄いものです。そのため、意外にもサーバサイドプログラムはちょっとした変更を行うだけでシステム全体をRIA化することができるのです。その“ちょっとした変更”とは、データインタフェースです。
OpenLaszloは（何度も言いますが）Viewを取り扱います。そしてデータはそのViewにバインドされます。Openlaszloで取り扱うデータフォーマットはXML形式のそれです。
－ Viewを取り扱う
－ XMLデータをバインドする
ということは、サーバサイドプログラムに対して
－ Viewを取り除く（ViewはOpenLaszloが取り扱うから）
－ XMLデータをクライアントに送信する
という変更を行えばいいことになります。
これらのことから、サーバサイドプログラムの変更はおおよそ想像されると思いますが、次の章で実際にサンプルプログラムで実行してみましょう。
4．サーバサイドプログラムの変更点
サーバサイドプログラムの”データ受信部”は全く変更の必要がありません。OpenLaszloはサーバにname=value形式でデータを渡すことができますので、“name”名とデータタイプが変更されない限り変更する必要がありません。
もちろん、ビジネスロジックやBeanも全く変更する必要がありません。
さて、変更が必要なのはデータアウトプット部分です。ここを画面イメージを出力するのではなく、XML形式のデータを出力するようにしてあげます。
リスト4．1、2は、クライアント入力に任意の文字列（お名前）を入力して、それをサーバサイドプログラムで処理し、処理結果をクライアントで表示する例を、従来のWebアプリケーションとOpenLaszloで実現したものです。
リスト4.1 従来のWebアプリケーションでの実現
【クライアント(HTML)】
<html>
<head><title></title></head>
<body>
<form method=”post” action=”Server.jsp”>
<inputtext name=”onamae”>
<button type=”submit”>
</form>
</body>
</html>
----------------------------------------------
【サーバサイドプログラム（JSP） ex. Server.jsp】
<%@ page language="java" pageEncoding="Windows-31J"
contentType="text/html;charset=Windows-31J" %>
<%
String onamae = ( String )request.getParameter( "onamae" );
%>
<html>
<head><title></tilte></head>
<body>
こんにちは<%= onamae %>さん。
</body>
</html>
|
リスト4.2 OpenLaszloでの実現
【クライアントプログラム(OpenLaszlo)】
<?xml version="1.0" encoding="UTF-8" ?>
<canvas>
<dataset name="d" src="http:Server.jsp" />
<simplelayout/>
<view layout="axis:x">
<edittext name="onamae" />
<button>決定
<handler name="onclick">
var d = canvas.datasets.d;
var p = new LzParam();
p.addValue( "onamae", parent.onamae.getText(), true );
d.setQueryString( p );
d.doRequest();
</handler>
</button>
</view>
<view>
<simplelayout axis="x"/>
<text>こんにちは</text>
<text datapath="d:/return/text()" />
<text>さん</text>
</view>
</canvas>
----------------------------------------------
【サーバサイドプログラム（JSP） ex. Server.jsp】
<%@ page language="java" contentType="text/xml" %>
<%
String onamae = ( String )request.getParameter( "onamae" );
%>
<return><%= onamae %></return>
重要：OpenLaszloクライアントはUTF-8エンコードでデータハンドルしますの
でサーバサイドプログラムのファイルエンコードもUTF-8とします
|
ご覧のとおり、クライアント部分は全然違ってきますが、サーバサイドプログラムはクライアントへの出力部分が違うだけです。リスト4．1のサーバサイドプログラムでは、データ（onamae)と一緒に、そのデータを表示するためのコードも一緒に出力しています。これに対して、リスト4．2のOpenLaszloはどうかといいますと、サーバサイドプログラムではクライアントへの出力としてデータ（onamae)をXML形式で出力しています。クライアントへの出力部分の上（JSPスクリプトレット部分）は何も変わっていないことにお気づきでしょう。これは、もっと込み入ったロジックでも一緒です。もちろんStrutsやTaglib等を使った場合でも全く同様で、HTMLによる画面表示を出力するのではなく、データをXML形式で出力するだけです。
実際に、データをXML形式で出力してみますと、サーバサイドプログラムで画面表示を意識しないですむので、出力データの取り扱いと可視性がとてもよくなります。
リスト4．2のクライアントプログラム3行目にあります<dataset>タグについて少し解説します。
<dataset>タグはタグ内属性srcで指定されるサーバサイドプログラムや、XMLソースファイルを読み込んで属性nameにオブジェクトとして格納する機能を持ちます。この<dataset>タグはデフォルトでGETインタフェースでサーバサイドプログラムとデータのやり取りを行います。また、デフォルトではイベントドリブンの動作ですので、<handler>タグ内でJavaScriptで記述されているようにdoRequest()関数が呼び出されて初めてサーバサイドプログラムと通信します。
これを、POSTインタフェースで行うには、以下の2通りがあります。
－ <dataset name="d" src="http:Server.jsp" querytype=”post” />
－ setQueryType( “post” )
5．OpenLaszloを使った時のサーバ運用方法
さて最後にもうひとつだけ、OpenLaszloによるRIAを既存のWebシステムに導入した際のサーバ構成について解説します。
OpenLaszloにはアプリケーションの運用モードとして、PROXY（プロキシ）モードとSOLO（ソロ）モードがあります。
PROXYモード：
PROXYモードは、JSPのようなスクリプトプログラムが、ユーザから呼び出される最初の時にコンパイルされ、以降はこのコンパイルされたバイナリ（キャッシュ）プログラムが実行されるのと同じように、LZXが動作します。すなわち、LZXソースコードがサーバサイドにデプロイされて、ユーザから呼び出される最初の時にコンパイルされ、以降はこのコンパイルされたバイナリ（キャッシュ）プログラムが動作するのです。コンパイルされたLZXバイナリプログラムは、ファイル名の拡張子がSWFです。これはフラッシュコンテンツそのものです。（DHTMLコンテンツとしてコンパイルする場合は、拡張子はJSになります）
PROXYモードでは、最初の実行時にコンパイルがされるのでJSP同様サーブレットコンテナが必要になります。これはTomcatやJBOSSのような環境で実現します。
PROXYモードでの運用理由はJSPプログラムをソースでデプロイしているシステムと同じ理由になりますが、OpenLaszloとして特有の理由は、OpenLaszloによるRIAがSOAP/RPCのサーバインタフェースを利用する場合には、PROXYモードでの運用が必須となります。
SOLOモード：
OpenLaszloにはもう一つ運用モードとしてSOLOモードというものがあります。
このモードは、あらかじめコンパイルされて拡張子がSWFになっているバイナリフラッシュコンテンツをHTTPサーバ上で運用するものです。SOLOモードで運用するRIAは、開発環境でSWFバイナリファイルにコンパイルされたものを、HTTPサーバにデプロイして運用しますので、PROXYモードで必要だったTomcatやJBOSSの様なサーブレットコンテナは必要ありません。
デプロイに際しては、OpenLaszlo開発環境でデプロイするコンテンツ一式（SWFバイナリファイル、embedタグつきHTMLファイル等）がSOLOコンパイルにより作成されますので、これらを一式デプロイすればいいのです。実に簡単です。サーバサイドプログラムにPHP等のスクリプト言語を使用している場合、OpenLaszloのためだけにわざわざTomcatを導入したくないですよね。そんな時にはSOLOモードで運用することで、サーバコンフィギュレーションを維持したままRIAを実現することができます。もちろんこの場合も、PHP等のサーバサイドプログラムの変更箇所は、
－ Viewを取り除く（ViewはOpenLaszloが取り扱うから）
－ XMLデータをクライアントに送信する
ということで一緒です。
開発環境ではLZXコンパイルのためにTomcatのようなサーブレットコンテナが必須ですが、実稼動環境ではサーブレットコンテナを使わない場合、開発環境のテスト時から実働環境に合わせて実施したいものです。しかしその度にSOLOモードコンパイルしてHTTPサーバにデプロイするなんて面倒です。そんなときは、アプリケーションレベルでSOLOモードにしておくと便利です。
－ <canvas proxied=”false”>
<canvas>タグに属性proxiedを指定します。指定しない場合のデフォルトはtrueになっています。
こうすることで、開発環境としてはTomcatがあっても、コンパイルアウトされたバイナリファイルはSOLOモードとして動きます。
最後に
OpenLaszloでRIAを実際に開発するためのコーディング方法は次回以降、解説します。OpenLaszloは、単一のLZXコードからコンパイルオプション（queryにlzr=dhtmlと設定、または、開発環境画面でオプションボタン指定）を指定するだけで、FlashコンテンツとしてもAjaxコンテンツとしても、どちらでも稼動するアプリケーションができる画期的なものです。日本語情報が少ないことから意外と知られていない、または使ってみることに敷居が高いイメージがありますが、実際にはとても易しい開発システムです。本連載の今後にご期待ください。
参考文献 学ぶために
製品や技術を入手するために
著者について  | 
| | 長くインターネットシステム開発に従事して来てWebアプリケーションの操作性に疑問を持ち続けていたところでOpenLaszloに出会う。現在、日本でOpenLaszloの普及を推進中。次々と出現するフレームワークに辟易し、OpenLaszloのマルチランタイム性こそプログラマを救うと考えている。いづれＷebは全てAjax/RIAになると確信している。Laszlo Systems社でトレーニングを受けた最初の日本人エンジニアでもある。 |
記事の評価
| 
