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

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


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

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


サンプルをFlash/Ajaxモードで見てみよう

 論より証拠。実際にOpenLaszlo 4.1でできたサンプルアプリケーションをご紹介しましょう。今回作成したアプリケーションは、@ITのイベント情報RSSデータを表示するRSSリーダーです。アプリケーションは、main.lzxとライブラリファイルからなります。

 それでは、読者の皆さんの環境での実行手順を説明します。

手順【1】OpenLaszlo 4.1.1のインストール

 まずは、OpenLaszlo.orgのダウンロードサイトからOpenLaszlo 4.1.1をダウンロードします。皆さんのOSに合わせて、Windows、Mac OS X、UNIX/Linuxをダウンロードしてください。

図5 OpenLaszloのダウンロードサイト
図5 OpenLaszloのダウンロードサイト

 ダウンロードしたパッケージをダブルクリックすると、インストーラが走ります(参照)。

手順【2】RSSリーダーのソースファイルのダウンロードして展開

 こちらからRSSリーダーのソースをダウンロードし解凍して、先ほどOpenLaszloがインストールされたフォルダに展開します。展開するのは、下記の場所です(Windowsの例)。

\Program Files\OpenLaszlo Server 4.1.1\Server\lps-4.1.1

 上記場所に、解凍したフォルダを下記のようにコピーします。

\Program Files\OpenLaszlo Server 4.1.1\Server\lps-4.1.1\atIt0808

 「atIt0808」というディレクトリ名は任意です。変更しても構いません。

手順【3】OpenLaszloを起動する

 手順【1】でインストールされた方は、インストール終了と同時にOpenLaszloのコンソールが起動しているはずです。図6がWebブラウザに表示されていれば、起動しています。URLは「http://127.0.0.1:8080/lps-4.1.1/laszlo-explorer/index.jsp」です。

図6 OpenLaszloエクスプローラ画面
図6 OpenLaszloエクスプローラ画面

図7 OpenLaszloのショートカットアイコン
図7 OpenLaszloのショートカットアイコン

 もし起動していない場合は、図7のようなデスクトップにあるアイコンをクリックして起動してください。

 先ほどのURLの最後が「.jsp」となっていたり、OpenLaszloのコンソールの左上に「Tomcat」となっているのを見て、気付いた方もいるかと思いますが、OpenLaszlo 4.1.1はアプリケーションサーバであるTomcat上で動きます。バージョンは5.0.24です。

編集部注Tomcatについて詳しく知りたい読者は、@IT Java Solutuionのカテゴリ「アプリケーションサーバ(Tomcatなど)をご参照ください。

手順【4】Flashモードの実行

 それでは、実際にサンプルアプリを実行してみましょう。まずは、Flashモードです。Webブラウザで下記どちらかのURLにアクセスします。

  • http://127.0.0.1:8080/lps-4.1.1/atIt0808/main.lzx
  • http://127.0.0.1:8080/lps-4.1.1/atIt0808/main.lzx?lzr=swf8

 OpenLaszlo 4.1は、デフォルトではFlashのバイナリ形式であるSWFにコンパイルされるので、lzr=swf8の引数がなくてもFlashモードで実行します。下図では、このアプリがFlashコンテンツであることを明示するために、アプリ上で右クリックのコンテキストメニューをあえて表示させています。

図8 FlashモードのRSSリーダー
図8 FlashモードのRSSリーダー

手順【5】Ajaxモードの実行

 次に、Ajaxモードです。Webブラウザで下記URLにアクセスします。

  • http://127.0.0.1:8080/lps-4.1.1/atIt0808/main.lzx?lzr=dhtml

 URLの引数に「lzr=dhtml」と付けるだけでmain.lzxのソースプログラムはJavaScriptファイルにコンパイルされて実行されます。こちらも右クリックによるコンテキストメニューを表示しています。これで、Flashモードではないことが分かると思います。

図9 AjaxモードのRSSリーダー
図9 AjaxモードのRSSリーダー

 何度もいいますが、これらは同じソースからできています。コンパイルオプションを変えるだけで、FlashモードにもAjaxモードにもなります。そして、その見た目と操作性はまったくといっていいほど同じです。

Adobe AIRで動かすための準備、そして実行

 さて、ここまではWebブラウザ環境でした。今度は、デスクトップ環境、Adobe AIRモードです。アプリケーションをAIRパッケージ化するには、少し準備が必要です。

クロスドメイン問題

 実は、Adobe AIRモードでサンプルを普通に実行すると、クロスドメインの問題から読者皆さんの環境ではRSSデータを取得できません。そのため、main.lzxのデータ取得部分をローカルデータを参照するように変更して実行してください。

編集部注クロスドメインについて詳しく知りたい読者は、@IT Security&Trustの記事「Flashとポリシーファイルの密接なカンケイ」をご参照ください。
リスト1 main.lzxの13行目の変更前
<dataset name="rssList"
 
 src="http://www.atmarkit.co.jp/event/calendar/rss/new.xml"
  request="true" />

リスト2 main.lzxの13行目の変更後
<dataset name="rssList" src="test/atItRss.xml" request="true"/>

手順【1】Adobe AIR 1.1のインストール

 Adobe AIRの実行ランタイムをAdobe AIRランタイムのダウンロードサイトからダウンロードして、インストールします。

図10 Adobe AIRランタイムのダウンロードサイト
図10 Adobe AIRランタイムのダウンロードサイト

 次ページでは、引き続きAdobe AIRで動かす方法を説明します。

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
周回遅れ故の恩恵?

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



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間