レベル: 中級 久世 宏明 (minamotonoason@gmail.com), Web プログラマー, (株)ネットエイト
2007年 10月 26日 OpenLaszloは非同期通信、動的更新といったAjaxの特徴を備えながら、しかもFlashコンテンツなどリッチなUIを持つRIAアプリ開発を実現できるフレームワークです。OpenLaszloバージョン4からそれらの特長を生かしたままDHTML(Ajax)出力もできるようになり、適用範囲が大きく広がりました。本稿では一例として同じ動作をするサンプルプログラムについて一般のAjaxとOpenLaszloでのコードを比較し、その大きな違いとOpenLaszloの利点について解説します。
1. マルチランタイム(Flash、DHTML)対応OpenLaszloの特徴
Ajaxが登場する以前のWebアプリケーションは、画面の一部書き換えのためにページ全体が遷移し、あるいは並び替えなどデータ操作時にサーバからの応答があるまで他に何もできないなど、いわゆるデスクトップアプリケーションに比べると非常に使い勝手が悪いものでした。これは処理をすべてサーバ側で行い、ブラウザはその結果の表示端末でしかなかったためです。
それを解消する手段の一つとしてJavaアプレットやFlashなどのリッチクライアントが登場しました。これらはブラウザへの専用プラグインのインストールが条件ですが、従来のWebアプリケーションの欠点を補う有効な選択肢でしょう。OpenLaszloは既に広く普及しているFlashプラグインに注目し、Flashコンテンツとして動作するオープンソースのRIA開発プラットフォームとして登場しました。今では95％以上のブラウザでFlashが動作するとも言われています。
ところがGoogle MapsをきっかけにAjaxが大変注目されることになります。Ajax自体はJavascriptを中心とした既存の技術の集まりでしかないのですが、最近になって急速に実用化されだしました。常時接続で高速化されたネットワークの普及、JavascriptやDHTMLなどのブラウザごとの動作の安定化が、見過ごすことのできない主な原因でしょう。Ajaxを使えば非同期通信の機能を利用したページ遷移のないデータ更新や、DHTMLを駆使した使い勝手の良いリッチなWebアプリケーションの構築が可能になりました。
OpenLaszloでは、2007年3月リリースのバージョン4から従来のFlash対応に加えAjaxにも対応しました。これでFlash対応していない残りの5％のブラウザもターゲットにすることができるということです。特に一つのソースコードからFlashにもAjaxにも出力できるというマルチランタイム機能はOpenLaszloの最大の特徴です。もちろんマルチランタイムという意味では、FlashやAjaxのような有望な他のランタイムが将来出現しても、その都度OpenLaszloでそのランタイム向け出力ができるようになれば、これまでのコーディングのノウハウはそのまま継承でき、生かすことができるということです。
2. OpenLaszloのAjax出力の特徴
2.1. FLASH出力との違い
OpenLaszloのDHTML(Ajax)出力について、Flash出力との決定的な違いは、実行環境としてFlash Playerプラグインなどのプラグイン類が一切不要であるという点です。これによりOpenLaszloアプリは他の一般的なAjaxアプリと同じ条件で動作することもできるようになり、適用範囲が一気に広がりました。
また、開発環境の面から見ると、一般的なAjaxでは直接Javascriptを記述するか、あるいは色んなAjaxライブラリを利用するのに対して、OpenLaszloはLZXという単一の言語だけを使用するという違いがあります。Ajaxライブラリで提供されているようなフェード効果、ドラッグアンドドロップ、リサイズなどの基本的なエフェクトはOpenLaszloにも標準で提供されておりそれ一つで完結するような総合的なフレームワークとなっています。もしOpenLaszlo標準搭載のコンポーネントや機能で足らないと感じた場合は、ほとんどのコンポーネントがオブジェクト指向言語LZXで作成されているので、ソースを参考にしながら必要なクラスを自由に自作、改良することができます。標準コンポーネントもすべてクラスになっているので、それを継承した新しいコンポーネントを作ることも可能です。
2.2. マルチランタイムでの使い分け
同一コードからFlashにもAjaxにも出力できるため、ケースに応じて出力すれば良いことになります。動画・音声や組み込みフォントなどFlashでしかできない機能はFlash出力で対応できます。
組織の運用方針などによりFlash Playerプラグインのダウンロードやバージョンアップ等ができない環境では、DHTML(Ajax)モード出力で対応できます。
3. 一般的なAjaxとOpenLaszloのコーディング比較
OpenLaszloで扱うデータ形式はXML形式になります。
下記に示したリスト1のXMLデータを表形式でブラウザに表示する簡単なプログラムを一般的なAjaxとOpenLaszloで記述した場合のコーディングの比較をしてみます。Ajaxコードはprototype.jsなどのAjaxライブラリは使っていません。
リスト 1. XMLデータファイル
<response>
<country>
<name>日本</name>
<city>東京</city>
</country>
<country>
<name>アメリカ合衆国</name>
<city>ワシントンD.C.</city>
</country>
<country>
<name>ニュージーランド</name>
<city>ウェリントン</city>
</country>
</response>
|
AjaxではXMLHttpRequestオブジェクトのresponseXML経由でXMLデータを取得することができます。一方、OpenLaszloでは、XMLデータはデータセット<dataset>経由で取得します。
取得したデータを表示するには、AjaxではDOMを使います。表示したいコンポーネントに設定されたid値をgetElementById で取り出してオブジェクト化し、そのinnerHTMLプロパティに値を入れて表示するという形です。一方、OpenLaszloではXPathを使い、表示したいコンポーネントにdatapathを設定することで表示します。
3.1. Ajaxでのコーディング例
リスト2のコード例はOpenLaszloのものではなく、一般のAjaxコードです。
リスト 2. 一般のAjaxコード
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<script>
var httpObj = false;
function load() {
if( typeof(window.XMLHttpRequest) != 'undefined' ) {
try { httpObj = new XMLHttpRequest(); }
catch(e) { httpObj = false; }
} else if( typeof(window.ActiveXObject) != 'undefined' ) {
try { httpObj = new ActiveXObject('Msxml2.XMLHTTP'); }
catch(e) {
try { httpObj = new ActiveXObject('Microsoft.XMLHTTP'); }
catch(e) { httpObj = false; }
}
}
if(httpObj) {
var callback = function(){
if (httpObj.readyState == 4 && httpObj.status == 200 && httpObj.responseXML) {
var dArea = document.getElementById('dispDataArea');
var xmlObj = httpObj.responseXML.getElementsByTagName('country');
for( var i = 0; i < xmlObj.length; i++ ) {
var itemData = xmlObj.item(i);
var dName = itemData.getElementsByTagName('name');
var dCity = itemData.getElementsByTagName('city');
var row = dArea.insertRow(-1);
row.insertCell(-1).innerHTML = dName.item(0).firstChild.nodeValue;
row.insertCell(-1).innerHTML = dCity.item(0).firstChild.nodeValue;
}
}
}
httpObj.onreadystatechange = callback;
httpObj.open('GET', 'sample.xml', true);
httpObj.send('');
}
}
</script>
</head>
<body>
<table id="dispDataArea" border="1" width="300">
<tr>
<th>国名</th>
<th>首都名</th>
</tr>
</table>
<input type="button" onClick="load();" value="Load"></input>
</body>
</html>
|
load()関数の前半部分で非同期通信を行うためのXMLHttpRequetオブジェクトを生成しています。後半のcallback関数で、取得したXMLデータからタグ名をもとにデータを取り出し、<table>に表示させるようになっています。
リスト2のコードを実行すると、図1の画面が表示されます。ここでLoadボタンを押すと、図2の画面のようにデータが非同期に取得されて画面遷移せずに表示されます。
図 1. Ajaxコード(リスト2)の初期画面
図 2. Ajaxコード(リスト2)のデータロード後の画面
3.2. OpenLaszloでのコーディング例
それではリスト2と同じ動きをするプログラムをOpenLaszloで作成してみましょう。リスト3のようになります。
リスト 3. LZXコード
<?xml version="1.0" encoding="UTF-8"?>
<canvas>
<dataset name="ds" type="http" src="sample.xml" />
<simplelayout/>
<button onclick="ds.doRequest();">Load</button>
<grid name="dispDataArea" showhlines="true" showvlines="true" datapath="ds:/response">
<gridtext datapath="name/text()">国名</gridtext>
<gridtext datapath="city/text()">首都名</gridtext>
</grid>
</canvas>
|
LZXの場合はたった10行でずいぶんすっきりしています。
このようにデータを表示するだけの簡単なプログラムではタグの組み合わせだけで実現することもできます。リスト3で使われているJavascriptコードは<button>タグのonclick属性に記述したds.doRequest()だけです。これはdsと名付けた<dataset>オブジェクトに対し、データ取得を要求するメソッドです。
リスト3のコードを実行した画面は、図3の通りです。これもLoadボタンを押すと、図4のように表形式でデータが表示されます。もちろん画面遷移はありません。
図 3. OpenLaszloコード(リスト3)の初期画面
図 4. OpenLaszloコード(リスト3)のデータロード後の画面
リスト3のサンプルで使った<grid>というコンポーネントはデータを表形式で表示するものです。列幅を自由に変更したり、ヘッダのクリックで並べ替えをしたり、セル内のデータをオンラインで編集することができます。それらの作業をしたときの例を図5に示します。（列幅や、データの並び順が変わっていることに注目してください。さらに東京という文字を変更しようとしています。）
データや見栄えを変更してもこれらの動作はクライアント上でのみ行われるので、サーバとの通信は発生しません。もしサーバ上のデータベースに変更データを保存したい場合は、<grid>上の現在の値を取り出して、データセットにname=value形式で更新リクエストを送信するだけです。
図 5. OpenLaszloコードの実行画面(列幅変更と並べ替えの後、データ編集中の画面)
今回の例ではAjaxとOpenLaszloでコーディング量の違いはありますが、Ajax側の決まり文句的な記述量の多さはともかくとして、その大きな違いは繰り返しデータの処理部分です。どちらもXMLデータが存在する分だけ表示するようになっていますが、そこの記述に違いがあります。リスト2のAjaxコードではfor文を使って繰り返していましたが、リスト3のOpenLaszloコードではfor文がありません。OpenLaszloには複製の機能があって、datapathを設定したコンポーネントを一つ配置しておけば自動的にデータの数だけ自身を動的に複製して表示します。この機能のおかげでコンポーネントへのデータバインディングは通常のAjaxよりも非常に簡単に記述することができるようになります。
4. まとめ
JavascriptとHTMLベースの一般のAjaxでの開発では、各種エフェクト効果や決まり文句の記述を楽にするライブラリが急速に成長しており、大変便利になってきています。
OpenLaszloでは一つの完結したAjax開発フレームワークとしてWebアプリケーションに必要なコンポーネントやエフェクト機能等の類が一通り揃えてあり、一貫性のあるコーディングが可能になっています。本稿のサンプルコードでご覧になったとおり、基本がタグベースということもあり、直接HTMLを書いてWeb構築をした経験のある方にはとっつきやすく、簡単にリッチなAjaxアプリを構築することができます。
参考文献 学ぶために
製品や技術を入手するために
著者について  | | | 京都市在住。長年サーバ、ネットワーク構築を経験してきましたが、多少のHTMLとスクリプトの知識で簡単にRIAを構築できるOpenLaszloに感心し、ひょんなきっかけで現在OpenLaszloベースのWebプログラマをしています。OpenLaszlo.jpの運営を担当しています。Laszlo Japanにはハンドルネームasonとして参加。音楽が趣味で、オフはデスメタルバンドのドラム担当。 |
記事の評価
| 
