OpenLaszlo: RIA/Ajax にも Write Once Run Anywhere の波

ページオプション JavaScript を要するドキュメントオプションは表示されません

レベル: 初級

小野 圭二 (ono@net8.co.jp), 代表取締役, (株)ネットエイト

2008年 7月 25日

コードネーム Legal, OpenLaszlo v4.1 が 2 年の歳月を経てリリースされました。このバージョンから、OpenLaszlo は DHTML(Ajax) をサポートしました。これまでは、RIA（Flex 等の Flash）や、Ajax を開発するには別々のテクノロジーをマスターしなければならず、プログラマーに多大な負担がかかっていましたが、OpenLaszlo を採用することで、RIA も Ajax もこれひとつで開発できるようになりました。

v4.1

OpenLaszoの概要につきましてはこちらのシリーズ記事を参照してもらうとして、今回リリースされた新バージョンについてお話します。

今回の一番の目玉は、コンパイルオプションとしてDHTML(Ajax)が正式サポートされたことです。

お馴染みのHello Worldで説明しますと。

                
<?xml version=”1.0” encoding=”UTF-8” ?>
<canvas>
    <text>Hello World</text>
</canvas>

これをOpenLaszloでコンパイルする方法はいくつかあるのですが、最も簡単な方法としてURLにコンパイルオプションの引数を付けてやります。

なんとこれだけです。これだけで、OpenLaszloで作ったアプリケーションがSWFにもDHTMLにもなるのです。もちろん、Helloのような単純なテキストではなく、ちょっとしたデザインでも全く同じ様に見えます。これらの違いを知るには、画面上でマウスの右クリックで表示されるコンテキストメニューを見て、FlashPlayerを使っているのか、DHTMLなのかを知ることができます。

見た目も動作も同じであるが、動作環境がFlashPlayerプラグイン上か、プラグインなしかで分かれます。デザイン的には、FlashPlayerプラグイン上では画像ファイルにSWFファイルが使えますが、DHTMLでは使えませんので画像変換がされています。

この様に、それぞれの動作環境に合うように各種変換がなされて、一つのソースファイルから異なるコンテンツをコンパイルアウトできるようになりました。

上に戻る

Flash or Ajax

一つのソースから2つのタイプのコンテンツが作成できるのは何がいいのでしょう？一般に、アプリケーションが動作するターゲット環境を決めるのは、開発の上流工程になります。上流工程では、システムに要求される機能や、実際にアプリケーションが稼動する環境を調査して、開発のターゲットを絞りこみます。つまり、そのアプリケーションがどのような環境で使われるかは上流工程で決定される大前提事項ですので、後でターゲット変更が発生することは開発工程上大変なことなのです。一度Flashコンテンツをターゲットとしたら、途中でAjaxコンテンツが欲しくなってもそれは別プロジェクトにせざるを得ないことがよくあります。

上に戻る

Flash and Ajax

ところが、OpenLaszloを採用すると、（なんと）ターゲットは運用時に決めればいいことになります。開発中はFlash又はAjaxコンテンツの開発としてソースコーディングを行い、運用時にどちらを使うか決めればいいのです。もちろん、どちらも使うという選択もあります。

具体例で考えますと、FlashLiteを搭載しているPDAや携帯電話をターゲットとしてアプリケーションを開発しているとします。そこにiPhoneの登場です。ご存知の通りiPhoneはsafariブラウザを搭載していますがFlashPlayerはありません。こんなときは、iPhone用にはDHTMLを使えばいいというわけです。FlashもAjaxもどちらも使えることが、この様に新規デバイスの登場にシームレスに即応できるだけでなく、幅広いターゲットにリーチできるアプリケーションが開発可能になるのです。

上に戻る

Adobe Airへの対応

最近はAdobe Airが話題になっています。WebアプリケーションをPCデスクトップ上で稼動させるためのプラットフォームなのですが、脱ブラウザとして注目を集めています。さてこのAdobe Airはプラットフォームですのでその上で動かすアプリケーションのファイルフォーマットを指定します。ここでは、SWFファイルをAirアプリとしてみましょう。手順は以下の通りです。

1. OpenLaszloでアプリケーションを作成する
2. 作成したアプリケーションをSOLOモードでコンパイルする
3. コンパイルにより作成されたSWFファイルを使用してAirアプリにパッケージにする

それでは、簡単にリスト1.1.のHelloWorld.lzxを使ってやってみましょう。もちろん、AirとFlexSDKを使用しますのでインストールしておいてください。それと、インストールした先のbinにpathを通すこともお忘れなく。

1. OpenLaszloでアプリケーションを作成する
   リスト1.1.を使うので、ここはいいでしょう
   
   
2. 作成したアプリケーションをSOLOモードでコンパイルする
   OpenLaszloの開発では、デベロッパーズコンソールがデフォルトで表示されます。ここで”SOLO”ボタンをクリックするとウィザードに従って、SOLOモードでコンパイルされたコンテンツ一式が得られます。（ウィザード画面の最後でzipファイル一式をダウンロードするリンクが表示されるのですが、これは日付がファイル名になっており、OSが日本語環境ですとリンク名も日本語になってダウンロードに失敗します。そのときは、$LPS_HOME/lps/adminにありますので、ここから取得してください。）
   
   図4.1 OpenLaszloデベロッパーズコンソール
   
   
   

3. コンパイルにより作成されたSWFファイルを使用してAirアプリにパッケージにする
   SOLOでコンパイルされたファイルは、HelloWorld.lzx.lzr=swf8.swfという名前になっています。（swf8をターゲットとした場合です。） これを、FlexSDKのadtコマンドでAirにパッケージングします。

   >adt -package -storetype pkcs12 -keystore myCert.pfx HelloWorld.air HelloWold-app.xml HelloWorld.lzx.lzr=swf8.swf

   
   myCert.pfxはAirで使う著名ファイル。HelloWorld-app.xmlはAirで使うADFファイルです。各ファイルの詳細はAdobe Airのサイトを参照してください。
   
   これでHelloWorld.airというパッケージができました。これをダブルクリックするとインストーラがはしり、SWF版、Ajax版と同じアプリケーションがデスクトップ上でも稼動します。

上に戻る

v4.1の脅威

OpenLaszlo v4.1はRIA開発のフレームワークです。と同時に運用環境も提供します。開発環境と運用環境をシームレスにすることで、開発後の実装問題や配備手順を簡略にしています。ここまではv3までと同じです。そして（何度も言いますが）、v4.1からはとうとう同一ソースからコンパイルオプションだけで、FlashとDHTMLをコンパイルアウトするようになりました。

これは誰にとって有益なのでしょうか？　このことは、顧客、SE、プログラマの全ての層にとってとても有益です。なぜなら、どうなるかわからない実運用環境を、開発フェーズに持ち込まなくてすむからです。そして複雑化する一方のソフトウェア開発の学習スパイラルからプログラマを解放します。そう、OpenLaszloで全てできるのですから。

上に戻る

その他の新機能

v4.1では、目玉のDHTML以外にもいくつか重要な機能追加・変更がされていますのでご紹介します。

1. CSSの採用 今やWebデザインに欠かせない、CSSがサポートされています。CSSが対象とするセレクタには以下の4つが設定されています
   
   — Attribute
   — Element
   — ID
   — Descendant
   
   このうち、Atrributeがカバーする範囲はとても広くて、LZXのタグに設定される標準Attributeから、カスタムクラスの独自Attributeまで広く適用できます。
   
   リスト6.1 CSSの採用(attribute)
   

   <canvas> <stylesheet> [name="PurpleView"] { width: 100; height: 100; bgcolor: #9900FF } </stylesheet> <class name="myPurpleView"> <view name="PurpleView" height="$style{'height'}" width="$style{'width'}" bgcolor="$style{'bgcolor'}"/> </class> <myPurpleView/> </canvas>

   
   
   
   
2. JSONの採用
   データの扱いにJSONが採用されました。これにより、getXXXの多くがdeprecated対象となりました。どのgetXXXメソッドが対象になっているかは、デバックウィンドウに表示されます。
   
   リスト6.2 JSONの採用
   

   ex. プロパティを取得する 　　canvas.getHeight() canvas.getAttribute( “height” ) 　 →　canvas.height 又は、 canvas['height'] に変更

   
   
   
   
3. クラス定義の変更
   これまで独自クラスは任意の名前でnewされることが許されてきましたが、v4.1からはLZXのクラスであることを明確にするため、クラス名の前に”lz”を付けて呼び出すことになりました。
   
   リスト 6.3 クラスの呼び出し方変更
   

   <canvas> <class name="myClass"> <view x="100" y="100" width="100" height="100" bgcolor="green"/> </class> <button text="load class"> <handler name="onclick"> new lz.myClass( canvas ); ←　lz.が必要になりました </handler> </button> </canvas>

   
   
   
   

上に戻る

今後のリリース

v4.1が6/30にリリースされて、そのバグフィックス版であるv.4.1.1が10日後にリリースされました。この素早いリリースは、7/末にリリース予定のv4.2があるからです。

v4.1のターゲットはDHTMLサポートでした。このリリースのために実に、v4.0.0～v4.0.12までトライアルバージョンが出ました。この間コードネームRingDingが、SWF9をサポートすべく並行して開発されており、RingDingがマージされてリリースされるのがv4.2というわけです。

参考文献

• OpenLaszloチュートリアル日本語訳
  
  
• Developer's Guide
  
  

• (株)ネットエイト
  
  
• OpenLaszlo 日本語サイト

著者について

		長くインターネットシステム開発に従事して来てWebアプリケーションの操作性に疑問を持ち続けていたところでOpenLaszloに出会う。現在、日本でOpenLaszloの普及を推進中。次々と出現するフレームワークに辟易し、OpenLaszloのマルチランタイム性こそプログラマを救うと考えている。いづれＷebは全てAjax/RIAになると確信している。Laszlo Systems社でトレーニングを受けた最初の日本人エンジニアでもある。

記事の評価

サイト改善のため、ご意見をお寄せください。こちらのフォームからお願いいたします。 この情報はお客様が目的を達成するうえで役に立ちましたか？ はい いいえ わからない   お気軽にご意見・ご感想をお寄せください。   この記事は役に立ちましたか？ 1 2 3 4 5 不充分・不完全である 大変素晴らしい

この記事を共有する del.icio.us newsing FC2ブックマーク Choix！ ニフティクリップ Yahoo!ブックマーク MM/memo CZブックマーク livedoorクリップ はてなブックマーク Buzzurl（バザール）

上に戻る