1つのコードでAjax、Flash、
Adobe AIRを作るには？

特集：オープンソースRIA「OpenLaszlo 4.1」の魅力

株式会社ネットエイト
小野 圭二
2008/8/18

■ 参照するライブラリ

リスト5　lib/library.lzx

<?xml version="1.0" encoding="UTF-8"?> <library>   <include href="rssItem.lzx"/>   <include href="resources.lzx"/> </library>

　こちらは、参照するライブラリのLZXファイルを明記しています。

■ RSS Itemを表示するためのクラス

リスト6　lib/rssItem.lzx

<?xml version="1.0" encoding="UTF-8"?> <library> <class name="rssItem" clip="true" layout="axis:y">   <attribute name="rowHeight" value="18"/>   <attribute name="eventState" value="true" type="boolean"/>   <!--【1】-->   <view name="rssTitleBar" width="${parent.width}" height="18"     layout="axis:x">     <view name="title" width="${parent.width-10}"       height="${classroot.rowHeight}"resource="rssitem"       layout="axis:x;spacing:5">       <text fgcolor="#ffffff" datapath="category/text()" width="80"/>       <text width="8"><b>:</b></text>       <text fgcolor="#ffffff" datapath="title/text()" resize="true"/>       <!--【2】-->       <method name="changeImage" args="s,n">           this.setAttribute( "frame", Number( n ) );           parent.parent.contents.setAttribute( "visible", s );       </method>       <handler name="onmouseover">           if( classroot.eventState ) this.changeImage( true, 2 );       </handler>       <handler name="onmouseout">           if( classroot.eventState ) this.changeImage( false, 1 );       </handler>       <!--【2】終わり-->     </view>     <!--【3】-->     <view name="clipper" width="10" height="${classroot.rowHeight}"       resource="clipper">       <handler name="onclick">           var fn = 2;           if( parent.parent.contents['visible'] ){               fn = 1;           }           this.setAttribute( "frame", fn );           parent.title.changeImage(!parent.parent.contents['visible'],                fn );           classroot.setAttribute("eventState",!classroot.eventState );       </handler>     </view>     <!--【3】終わり-->   </view>   <!--【1】終わり-->   <!--【4】-->   <view name="contents" bgcolor="0x99ffcc" layout="axis:y"     width="${parent.width}" visible="false">     <text datapath="title/text()" resize="true"/>     <text datapath="description/text()" width="${parent.width}"       multiline="true"/>   </view>   <!--【4】終わり--> </class> </library>

　こちらは、RSS Itemを表示するためのクラスです。タイトル部と本文部があります。各コードの説明は下記にまとめます（下記リストの番号はコードの番号と対応しています）。

1. RSSデータの1行分を表示している
2. このデータ行にマウスが当たっているときに、背景画像を入れ替えている
3. このデータ行の右端にある矢印画像をクリックして、ビューのクリッピングをしている
4. このRSSデータの詳細部分を表示している

■ 参照する画像ファイルを明記

リスト7　lib/resources.lzx

<?xml version="1.0" encoding="UTF-8"?> <library>   <resource name="bgimg" src="../img/back1.png"/>   <resource name="logo" src="../img/logo.png"/>   <resource name="net8" src="../img/net8.png"/>   <resource name="rssitem">     <frame src="../img/rssitem1.png"/>     <frame src="../img/rssitem2.png"/>   </resource>   <resource name="clipper">     <frame src="../img/clipper1.png"/>     <frame src="../img/clipper2.png"/>   </resource> </library>

　こちらは、参照する画像ファイルを明記しているライブラリです。

周回遅れ故の恩恵？

　日本でのRIAの普及はまだまだ途上にあるようです。その原因の1つとして、RIAを扱うエンジニアの不足が挙げられています。確かに、Flash系とAjax系にキッパリ分かれたアーキテクチャの中では、それぞれを学習しなければならず、なかなか「Hello World」の世界から抜け出せないのが現状です。

　米国では、すでに3年前からRIAは主流になり、WebアプリケーションのフロントはRIAであることが当たり前になっています。そのRIA先進国で、FlashとAjaxの統合が果たされたのは当然のことなのでしょう。

　日本では周回遅れが幸いして、この“統合”の恩恵を受けることができます。周回遅れのおかげでOpenLaszloだけ使えれば、FlashでもAjaxでも作り放題です。本来、ユーザーエクスペリエンス向上のためのRIAですので、アーキテクチャ論争はあまり意味を成しません。JavaかPHPかRubyかという選択とは違うのです。

　これからRIAを始める方にはOpenLaszloは絶対にお勧めです。何といっても、「Write Once Run Anywhere」なのですから。OpenLaszloを始めるにはチュートリアルから始めるのがいいでしょう。日本語チュートリアルがありますので、一読してみてはいかがでしょうか。

■ 日本語コミュニティも充実

　また、OpenLaszloについてはサイトにて逐次、情報が発信されています。「Laszlo Japan」という日本語フォーラムもありますので、興味が沸いた方はぜひ見てみてください。

図14　「Laszlo Japan」のサイト

　さらに、SNSサイト「Facebook」には非匿名によるコミュニティ「OpenLaszlo Japan users and developers」が運営されているので、ぜひこちらものぞいてみてください。

■＠IT関連記事

Ajaxが追い風となるか？Open Laszlo WCR Watch ［5］　オープンソースのリッチクライアント「Open Laszlo」はEclipseと同様のライセンスモデルを持ち、ビジネスアプリケーションに自在に組み込める 「Web Client & Report」フォーラム 2005/6/30

Open Laszloを使って作るリッチクライアント オープンソースで提供されているリッチクライアントであるOpen Laszloとは何か。インストールして実際に使ってみよう

OpenLaszloアドバンスド・テクニック 次期バージョン（StarAnise）でFlashとAjaxの両対応を決めたオープンソース・リッチクライアント製品のOpenLaszlo。本連載では業務アプリケーションを意識したリッチクライアントの開発テクニックを紹介する

オープンソースがRIA市場の起爆剤となる、ラズロCEO リッチクライアントベンダ・インタビュー（5）　2004年10月、自社のRIA技術をOpenLaszloとして、オープンソース化した米ラズロCEOが、その理由と今後の戦略を語った 「Web Client & Report」フォーラム 2005/5/21

Accessの操作感を再現した“OpenLaszlo” リッチクライアント導入事例（2）　既存のグループウェアでは代替できないAccessアプリケーション。その自由度の高いUIをWebブラウザで再現できたのはOpenLaszloだった 「リッチクライアント ＆ 帳票」フォーラム 2006/3/30

いまさら聞けない、“Ajax”とは何なのか？ いまさら聞けないリッチクライアント技術（3）　Googleマップで有名になり、もはやWebの定番といっても過言ではないAjax。その生い立ちや仕組み、構成技術について解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/8/23

いまさら聞けない！ FlashとActionScriptについて いまさら聞けないリッチクライアント技術（5）　今回は一般的にもおなじみの技術であるFlashの利点や欠点、作り方、中核技術であるActionScript、歴史などについて解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/10/18

いまさら聞けないFlex、そして、いまこそ入門のとき!? Flex 3正式版リリース！ Flexの過去・現在・未来　先日ついに正式リリースされたFlashベースのRIA技術Flex 3。いまが入門に最適なFlexの過去・現在・未来を一挙に解説 「リッチクライアント ＆ 帳票」フ ォーラム 2008/3/31

いまさら聞けないAdobe AIR「超」入門 作って学ぶAIRウィジェットの基礎→応用（1）　最近よく聞くAdobe AIRって何だっけ？ ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門記事 「リッチクライアント ＆ 帳票」フ ォーラム 2008/1/25

1-2-3-4

INDEX
特集：オープンソースRIA「OpenLaszlo 4.1」の魅力
	Page1 AjaxやFlash、Adobe AIRまでカバーするOpenLaszlo 4.1 Flash／Ajaxの統合が生きる場面とは？
	Page2 サンプルをFlash／Ajaxモードで見てみよう Adobe AIRで動かすための準備、そして実行
	Page3 OpenLaszloのソースコードを見てみよう
	Page4 周回遅れ故の恩恵？

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）