お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

OpenLaszloでリッチなWebクライアントを実現

XMLとJavaScriptを使ってFlashウィジェットを作成

Joshua M. Woods (joswoods@us.ibm.com), Software Engineer, IBM

Joshua Woodsは、Extreme Blueの卒業生として幅広い開発経験を積んでいますが、最近は主に新興技術に取り組んでいます。IBMでは、主にコラボレーションとグリッド・コンピューティング分野でのソフトウェア技術者として働いています。最近は、AjaxやOpenLaszloの様々なコンポーネントの開発を行っており、目に見える形で技術進歩を示すことに貢献しています。

概要： OpenLaszloはリッチ・クライアントのアプリケーション・アーキテクチャーであり、MacromediaのFlashをデプロイメント手段として使用します。OpenLaszloの設計方式は宣言型であり、JavaScriptのロジックに依存しているため、従来のFlash開発よりも優れています。OpenLaszloの特長としては、高度なUI制約方式、オブジェクト指向設計手法、組み込みのWebサービスのサポート、リモート・プロシージャー・コール (RPC)のさまざまな機能などがあります。ここでは、OpenLaszloの基本的な概念について説明し、OpenLaszloソリューションが役立つ事例を示します。

タグを付ける!

日付: 2006年 2月 21日
レベル: 初級
この記事の原文: 英語
アクティビティー： 2337 ビュー
お気軽にご意見・ご感想をお寄せください：

リッチ・クライアントの技術をWebに取り入れるというのが、最近のWeb開発の傾向になっています。Ajax (Asynchronous JavaScript and XML)は、Webの可能性に対する開発者やユーザーの評価を高めたとして、標準のデスクトップ・リッチ・クライアントに代わるものとしてその地位を急速に確立しつつあります。ただし、Ajax (および現在のブラウザー技術)は、以下の領域においては期待を満たしていません。

重いアニメーションを含むユーザー・インターフェースを提供する
古いブラウザーを含むさまざまなブラウザー間での標準の表示を容易に保証する
オンザフライ描画を行うアプリケーションなど、特定の種類のアプリケーションを容易に実装する

これらは、OpenLaszloが優れている領域の一部に過ぎません。OpenLaszloのアーキテクチャーについて詳しく説明する前に、OpenLaszloの概要を簡単に説明します。

OpenLaszloで使用する言語であるLaszloは、XMLとJavaScriptを使ってウィジェットまたはアプリケーション全体を作成するための宣言型のアプローチです。このようなマークアップ言語とスクリプト言語の組み合わせは、現在のHTMLとJavaScriptの組み合わせに似ています。ブラウザーを使ってクライアント・サイドで言語を解釈する代わりに、サーバー・サイドでLaszloがMacromediaのFlash形式に変換されます。Flashには標準のランタイムが用意されているため、これにより実質的に自動のクロスブラウザー・サポートが提供されます。Flash形式はベクトル・ベースなので、非常に柔軟で流動的なユーザー・インターフェース構成要素を使用でき、これらは広い意味で再利用が可能です。

ただし、OpenLaszloの利点はこれだけではありません。OpenLaszloには、オプションのサーバー・サイド・コンテナーであるOpenLaszloサーバーが用意されています。OpenLaszloサーバーは、リモート・プロシージャー・コール、Webサービス、トランスコーディング・サービス (長時間のMP3ファイルをユーザーにストリーミングする際などに役立つ)の統合とサポートを提供することで、OpenLaszloを拡張します。言語としてのLaszloも、魅力的な概念や設計手法を採用しているため、真に再利用可能な構成要素を短時間で作成できます。Laszloを使うと、ユーザーにとって魅力的で使い慣れた外観の構成要素を作成できます。図1は、OpenLaszloで作成した株価表示アプリケーションのUIの例を示しています。

図1.OpenLaszloのUIの例

この記事を読むためにFlashの知識は必要ありません。ただし、この記事は、読者がJavaScriptの基本的な知識、および従来のオブジェクト指向プログラミング言語とJavaScriptとの違いを理解していることを前提としています。また、オブジェクト指向プログラミングの基本的な知識と、従来のユーザー・インターフェース開発 (Swing、Standard Widget Toolkit (SWT)、Microsoft Foundation Class (MFC)など)についての知識があると、この記事を読むうえでさらに役立ちます。

構成要素: 柔軟で拡張可能

現在、拡張可能かつ柔軟なユーザー・インターフェース構成要素を作成する責任は開発者が担っています。カスタム・タグ・ライブラリー、PHPの抽象化を始めとする多くの技術が、共通の問題に取り組むために存在します。今日のWebアプリケーションで必要とされる複雑な構成要素を作成するために、開発者が多数のHTMLタグを組み合わせなければならないことも少なくありません。オブジェクト指向の手法が有益であることはよく知られており、Laszlo言語にもオブジェクト指向の多くのパラダイムが取り入れられています。ここでは、利用できる基本的な根本要素の一部を紹介します。

各LaszloアプリケーションはXMLファイル (宣言型のユーザー・インターフェース (UI)情報およびJavaScriptを含む)およびリソース・ファイル (画像、埋め込みのFlashコンテンツ、および音声)で構成され、OpenLaszloがこれらを組み合わせて最終的なコンテンツを作成します。ルート・コンテナーは <canvas> タグです。<canvas> は、HTML文書の <body> タグのようなものであり、幅、高さ、背景色などの多数の属性を指定できます。ソース・ファイルの <canvas> は単なるXMLタグですが、それぞれのタグが1つの構成要素(つまりクラス)であり、関連するメソッド、アニメーションなどを持つことができます。構成要素の機能については後で紹介します。ここでは、このタグと <statictext>アイテムを宣言的に使用して、リスト1に示す標準的な"Hello, World!"の例を作成します。

リスト1.Laszloでの"Hello, World!"の例

                
<canvas width="300" height="200" bgcolor="white">
   <statictext>Hello, World!</statictext>
</canvas>

構成要素でFlashを利用

ここではFlash形式への変換とデプロイの方法についての詳しい説明は省略し、この面倒な作業はOpenLaszloがすべて行うと述べるだけにとどめておきます。OpenLaszloの構成要素について2番目に重要なことは、これらの構成要素がFlashリソースによって支えられているということです。つまり、OpenLaszloの構成要素はベクトル・ベースにすることが可能であり、このため、さまざまな解像度で使用できる1つの共通構成要素を提供できます。基本構成要素の多くはそのまま利用できます。<button>、<checkbox>、<list>、<menu>、および<tree>などのアイテムは、グラフィカル・ユーザー・インターフェース (GUI)を作成している開発者なら誰でも使い慣れています。

ご察しの通り、これらの基本構成要素の多くは、独自のヴィジュアル・リソースを作成して提供することが可能です。例えば、onmouseoverなどのイベントを定義する標準の<basebutton>構成要素を使用して、独自のカスタム・ボタンを作成できます。簡単なロールオーバーを作成するには、単にPNGまたはJPGを使用しますが、これは目新しいことではありません。興味深いのは、任意のFlashファイルをリソースとして使用できることであり、Flashファイルを使用することで、スケーラブルで動きのあるボタンを作成できます。この結果、Flashリソースにはロジック(例えばActionScript)を配置しなくても、Flashのアニメーションのコンセプトをすべて利用できます。Flashを使ってリッチ・アプリケーションを作成するには、従来ではプログラミングのさまざまな側面を知っている必要がありましたが、OpenLaszloの場合はこの必要がありません。OpenLaszloシステムが、リソースのすべてのFlashファイルを1つにまとめてデプロイメント用のFlashファイルを作成します。これについては、「デプロイメント: プロキシ・アプリケーションとSOLOアプリケーション」で詳しく説明します。

イベントと継承

他の優れたオブジェクト指向の構成要素と同様、OpenLaszloの構成要素では、インライン(<button onclick="buttonClicked()">など)で宣言できるonmouseoverなどのイベントを処理できます。また、リスト2に示すように、特定の構成要素(つまり構成要素のインスタンス)のメソッド・イベント・ハンドラーを定義することもできます。このハンドラーを使用すると、コードを自然にグループ化することが可能になり、無名の内部関数のコンセプトがOpenLaszlo開発に取り入れられます。この技法は、すべての構成要素が拡張可能でカスタマイズ可能であることと相まって、非常に強力なものとなっています。

リスト2.<view>のインスタンスで定義されたイベント

                
<canvas>
   <view bgcolor="0xcccccc" width="50" height="50">
      <method event="onmouseover">
         // Keyword this is used in the familiar JavaScript sense. 
         // Most of JavaScripts scoping
         // concepts apply directly to Laszlo
         this.setAttribute('bgcolor', 0x000000);	
      </method>

      <method event="onmouseout">
         this.setAttribute('bgcolor', 0xcccccc);
      </method>
   </view>
</canvas>

リスト2のコードは、再利用が不要な場合などには便利ですが、再利用が必要な場合はどうでしょうか。その場合は、既存の構成要素を拡張して、新しい構成要素を作成できます。その際に必要な作業は、<class>タグを使用して新しいクラスを定義することだけです。次に例を示します。

<class name="customView" extends="view">

デフォルトでは、すべてのカスタム・クラスは<view>を拡張します。これは、HTMLの<span>が主にコンテナーとして機能するのと似ています。属性を使って個々のニーズに合わせて構成要素をカスタマイズできるので、単純な拡張でさえも有用であることがわかります。基本的な機能は本質的にCSSとほぼ同じで、デフォルトのサイズ、背景色などを提供します。もちろん、それだけではありません。メソッド、アニメーション、コンストラクターのプロパティーその他を構成要素に含めることができます。Swingのように完全なオブジェクト指向のUI手法に、HTMLの簡単で高速な開発機能を盛り込んだものを想像してください。

上に戻る

制約: 強力な相互作用

リッチ・ユーザー・インターフェースで主な問題となるものの1つは、レイアウト管理です。Laszloでは、レイアウト構成要素を介して多くの標準的な手法をサポートします。例えば、軸属性とスペーシング属性という2つの主要な属性を持つ<simplelayout>要素を使用できます。軸属性ではレイアウト方向(x軸またはy軸)を指定でき、スペーシング属性では構成要素間の間隔を制御できます。1つのコンテナーに対して複数のレイアウトを宣言して、垂直方向と水平方向のスペーシングを組み合わせることができます。Laszloの他の機能と同様、これは単純ながらも、よく考えられた概念です。Laszloには、グリッド・レイアウトや領域に合わせて折り返すレイアウトも用意されていますが、これらはLaszloに固有のものではありません。Laszloの魅力は、その制約モデル、UI制御の仕方、およびアニメーション効果にあると言えます。

多くのイベントに代わるもの

Laszlo構成要素で属性が変更されるたびに、イベントが駆動します。「イベントと継承」で説明したように、これらのイベントを監視することが可能です。この機能は、属性ごとにリスナーなどを追加する必要がないという点では優れていますが、依然としてコードは冗長になります。スプレッドシートで依存関係を適用するように、これらの属性変更をもっと便利なやり方で要素が使用できるようにしたいものです。制約を使用すると、これが可能になります。Laszloの任意の属性について、標準の値の代わりに制約式を代入できます。制約式はドル記号で始まり、次のような形式になります。

$when{ConstrainedExpression}

ここで、whenはalways、once、またはimmediatelyのいずれかです。whenを指定しなかった場合は、デフォルトで値がalwaysに設定されます。alwaysでは、ContrainedExpressionの依存関係が変更されるたびに、制約が再評価されます。初期化後の制約が静的な場合は、値をonceに設定すると便利です。これにより、制約が1回のみ評価されるようになり、効率が上がります。もう1つの値であるimmediatelyは、エンクロージング要素が定義されていて、制約が他のオブジェクトに依存しない場合に使用します。

簡単な例から考えてみましょう。サイズ変更可能なアイテムがあり、このアイテムの中心には常に別のアイテムがあるとします。リスト3に、この例を示します。この例では、標準のLaszlo構成要素スライダーを使用して、長方形の境界のサイズを制御しています。

リスト3.内側の長方形のサイズに影響する長方形のサイズを制御するスライダー

                
<canvas>
   <slider id="sliderItem" y="20" x="10" minvalue="50" maxvalue="300" 
           value="50"/>

   <view y="$once{sliderItem.y + sliderItem.height + 5}" 
       x="$once{sliderItem.x}" bgcolor="0xff0000" 
       width="${sliderItem.value}" height="${width}">
		
      <view bgcolor="0x0000ff" 
         width="${parent.width / 5}" height="${width}"
         x="${(parent.width / 2) - (width / 2)}"
         y="${(parent.height / 2) - (height / 2)}"/>
   </view>
</canvas>

この例に示すように、xは<view>の属性の1つに過ぎないので、制約を使って値を設定できます。Laszloでは、アイテムの特定のために階層構造の手法を使用し、親オブジェクトは常にコンテナー・コントロールを表します。この構文を使用すると、構造の最上位まで移動できるだけでなく、名前とIDの属性を指定することもできます。この2つの違いは、IDは特定のアイテムを指定(したがって1つの文書で1回のみ使用)するので、グローバルに使用できるということです(リスト3ではスライダー・コントロールに対してidを使用し、そのidを制約${sliderItem.value}で使用しています)。

この例では、カラーの長方形のx位置とy位置を指定する制約に対してonceオプションを使用しています。図2は、リスト3のコードの出力を示しています。

図2.リスト3の出力

高度な制約

制約は、単純なイベントの代わりとして、また、レイアウト制約をモデル化する場合に便利ですが、それ以外にも多くの機能を提供します。任意の属性値(ユーザー定義の値を含む)を制約式に設定し、それを制約で使用できるので、多くの可能性があります。次のセクションでは、制約をLaszloのアニメーション・システムと組み合わせて使用して、明解かつ簡単な結果を生成します。

上に戻る

アニメーションと描画

最新のインターフェース設計において重要な表示要素の1つはアニメーションです。アニメーションは、インターフェースを使用しているユーザーに対して、直観に訴えるだけでなく、視覚的刺激を与えます。これは、MacromediaのFlashの大きな強みであると共に、ひいてはOpenLaszloの強みでもあります。現在、特別な拡張機能なしに各種ブラウザー間で効率的に実現できない機能は多くはありませんが、アニメーションはその1つです。

アニメーション・タグ

Laszloには、アニメーション開発に役立つ2つの要素が用意されています。1つは<animator>要素であり、すべてのアニメーションの基礎となるものです。もう1つは<animatorgroup>であり、これは<animator>アイテムのコンテナーです。Laszloでは、アニメーションを単に、一定の期間の間に複雑な組み合わせで属性値を変化させる機能ととらえています。この単純な考え方と基礎を使えば、ほとんどのことが可能になります。

<animator>要素には、当然のことながら、attributeという名前の必須属性があります。これにより、animatorの動作の属性が指定されます。また、toという名前の必須属性は、数値を受け入れ、アニメーション作成される属性の最終値を表します。最後の必須属性はdurationであり、これは、このアニメーション・ステップの時間をミリ秒単位で表します。使いやすさのために、<animator>要素にはオプションのfrom属性も用意されており、属性値の開始点を設定するために使用します。これらの属性だけを使用して、リスト4に示す、ビューの幅に対する変更をアニメーションにする簡単なプログラムを作成できます。

リスト4.簡単なアニメーションの例: ビューの幅を変更する

                
<canvas>
   <view bgcolor="#ff0000" width="50" height="${width}">
      <animator attribute="width" to="200" duration="1000"/>
   </view>
</canvas>

この例では、赤い正方形が表示され、1秒間かけて200×200ピクセルの大きさに拡張されます。この例を実際に試してみると、動きが線形でないことに気付くでしょう。その理由は、motion属性のデフォルト値がeasebothであるためです。easein、easeout、またはeasebothを使用した場合、アニメーションの最初と最後がそれぞれゆっくりとした動きになります。motionの4つ目の(そして最後の)値はlinearであり、アニメーション速度が一定に保たれます。また、アニメーションはすぐに開始されますが、これはstart属性で変更できます。デフォルト値はtrueです。その他の属性としては、このステップを繰り返す回数を指定するrepeatがあります。また、各種イベント(onstart、onfinishなど)が用意されており、1つのステップが完了した後にカスタム・ロジックを追加できる機能がサポートされています。

<animatorgroup>による複雑なアニメーション

既に述べたように、<animatorgroup>は、<animator>要素および他の<animatorgroup>要素のコンテナーに過ぎません。しかし、このコンテナー・タイプを追加することで、さまざまな可能性が開かれます。<animatorgroup>では、<animator>で定義できるすべての属性に加えて、processという新しい属性を定義できます。前述の属性が適用されている場合、それらは<animatorgroup>にカスケードされます。この新規属性processは、グループの子が実行される順序を制御します。この値がsequentialの場合は、グループ全体が完了するまでアイテムが1つずつ順番に実行されます。指定可能なもう1つの値はsimultaneousです。

これらの2つの値を使用することで、魅力的で洗練された効果が可能になります。例えば、画面を周回しながら同時にサイズが変わるアイテムを作成できます。また、グループには他のグループを格納できるので、優れた構造と順序を持つアニメーションを定義できます。

制約とカスタム属性で印象的な結果を実現

上の概要を読むと、アニメーション・プロセスがごく単純で限定的という印象を持つかもしれません。より複雑な計算を必要とするアニメーションを実行するにはどうすればよいのかと疑問に思うかもしれません。多くの場合、カスタム・プロパティーと制約を使用することで、複雑なアニメーションを実行することが可能です。例えば、円軌道を描いて画面を周回するアイテムを作成するとします。当然、x属性とy属性をこのようにアニメーションにすることはできません。この場合は、x位置とy位置を、一定の範囲にわたってアニメーション表示するカスタム属性の関数として制約します。リスト5に示すように、制約を使用すると、円軌道を描いて移動するビューを簡単に作成できます。

リスト5.制約とアニメーションを組み合わせて使用

                
<canvas>
   <view bgcolor="#ff0000" width="20" height="$once{width}"
      x="${radius + (radius * Math.cos(animCnt))}"
      y="${radius + (radius * Math.sin(animCnt))}">

      <attribute name="animCnt"/>
      <attribute name="radius" value="30"/>

      <animator attribute="animCnt" from="0" to="$once{Math.PI * -2}" 
            duration="1000" motion="linear" repeat="Infinity"/>
   </view>
</canvas>

これらの技法を使用すると、非常に印象的なアニメーションを作成できます。フレーム・レートなどの計算についての詳細は取り除かれているので、気にする必要がありません。また、制約には複数の構成要素が関与できるので、1つの構成要素のアニメーションによって、別の構成要素の状態を変化させることができます。

カスタム描画

OpenLaszloの特長の1つは、カスタム・シェイプを簡単に描画できることです。これらのカスタム・シェイプは静的なものでも動的なものでもよく、ユーザーの操作に応答したり、グラフィック・アプリケーションを作成したりできます。カスタム描画は、キャンバスとして機能する<drawview>構成要素に対して実行できます。描画は宣言型ですが、プロシージャー型の性質を依然として持っています。描画方法を習得すれば、それを動的または静的なユース・ケースに応用するのは簡単です。

<drawview>要素には、実際には、fillStyle、globalAlpha、lineWidth、およびstrokeStyleという4つのカスタム属性しかありません。これらの属性はグローバルであり、キャンバスに描画されるセグメントのデフォルトのプロパティーを制御します。<drawview>に固有の10個のカスタム・プロシージャーを使用して、これらの属性を変更できます。

描画のプロシージャー

描画インターフェースは、10個のプロシージャーで定義されます。これらのプロシージャーによってペンが移動し、最終的に、グラジエントや色で描かれるパスまたは(閉じたパスの場合は)塗りつぶすパスが作成されます。

ペンの開始位置は0,0です。ペンは、moveTo(x, y)メソッドを使って新しい位置に移動できます。このメソッドにより、新しいパスも作成されます。パスは一連の点であり、後でこの上に線が描かれるか、塗りつぶされます。lineTo(x, y)メソッドを使用して現在のパスにサブパスを追加し、指定した位置にペンを配置することもできます。quadraticCurveTo(cpx, cpy, x, y)メソッドという似たメソッドがありますが、このメソッドは座標および曲線制御点座標を取ることを除き、lineTo()と同じように振る舞います。

パスを作成したら、そのパスを描くか塗りつぶしてから、可視にします。stroke()メソッドの呼び出しでは、strokeStyle(0x000000など16進形式の色)およびlineWidthの現在の属性値を使用して、パスの描き方を決定します。fill()メソッドはすべてのサブパスを閉じて、fillStyle(色または後述するグラジエント・オブジェクト)を使用して各サブパスを順番に塗りつぶし、塗りつぶしの描き方を決めます。リスト6に、簡単な例を示します。この例では、3つの正方形をさまざまな方法で描いて塗りつぶしています。

リスト6.簡単な描画の例

                
<canvas width="115" height="95">
   <drawview width="200" height="200" x="5" y="5">
      <method event="oninit">
         // Draw a black square
         this.strokeStyle = 0x000000;
         this.moveTo(0, 0);
         this.lineTo(25, 0);
         this.lineTo(25, 25);
         this.lineTo(0, 25);
         this.closePath();

         this.stroke();

         // Reset the path and draw a square with red fill 
         // and a black outline
         this.beginPath();
         this.fillStyle = 0xff0000;
         this.moveTo(40, 0);
         this.lineTo(65, 0);
         this.lineTo(65, 25);
         this.lineTo(40, 25);
         this.closePath();

         this.fill();

         // Draw a square with a square filled with a gradient 
         // from white to gray
         this.beginPath();

         // Create the gradient, adding color 'stops' (where 
         // the color shifts)
         var gradient = this.createLinearGradient(80, 0, 105, 25);
         gradient.addColorStop(0, 0xffffff);
         gradient.addColorStop(1, 0x000000);
         this.fillStyle = gradient;

         this.moveTo(80, 0);
         this.lineTo(105, 0);
         this.lineTo(105, 25);
         this.lineTo(80, 25);
         this.closePath();

         this.fill();
         this.stroke();
   </method>
   </drawview>
</canvas>

図3は、リスト6の出力がブラウザー・ウィンドウにどのように表示されるかを示しています。

図3.リスト6の出力

この例では、すべてのオブジェクトで利用できるoninit()メソッドを使用しています。これによりbeginPath()メソッドとclosePath()メソッドが導入され、パス管理に使用されます。また、グラジエントも導入されます。Laszloでは、グラジエントは線形と放射状の2つの形式があります。各グラジエントは、長方形または円として座標スペースにマップされます。色を設定するには、addColorStop()メソッドを使用します。このメソッドは、0から1までの範囲で色を配置します。停止点0の色はグラジエントの起点になり、1は最端になります。停止色を設定する前に、globalAlphaプロパティーを変更して、部分的に半透明なグラジエント色を使用できます。

描画とアニメーションの組み合わせ

OpenLaszloが提供する基本的な描画機能は、描画とアニメーションの組み合わせによって実現されます。それでは、「アニメーションと描画」で説明したアニメーション機能を、このプロシージャー型の描画APIとどのように組み合わせて使用するのでしょうか。1つの方法は、<drawview>にカスタム属性を追加することです。例えば、円を動的に描画して、その半径のサイズをアニメーションにする場合は、radiusという属性を作成し、通常のやり方でそのプロパティーをアニメーションにし、半径変更イベントのイベント・ハンドラー(<method event="onradius">)を定義し、要素が再描画されるようにします。この方法を使えば、ほとんどのことを行うことができます。

上に戻る

デプロイメント: プロキシ・アプリケーションとSOLOアプリケーション

皆さんの中には、どのようなOpenLaszloアプリケーションが利用できるのかを早く知りたくて、読み飛ばして「参考文献」に進んだ方がいるかもしれません。ここまで順を追って読んできた方は、どうすればLaszloファイルをWebにデプロイ可能な形式に変換できるのかを知りたいのではないでしょうか。ここでは、このトピックを取り上げます。また、プロキシとSOLOのどちらをデプロイメント・モデルとして使用するかを決定する際の基準についても説明します。

SOLOデプロイメント

SOLOデプロイメント(SOLOはStandalone OpenLaszlo Outputの略)は、Flashファイルを提供できるすべてのWebサーバーでサポートされます。LaszloアプリケーションをFlashファイルに変換するには、「lzc file.lzx」(.lzxはLaszloファイルの拡張子)などと入力してコンパイラーを起動し、必要条件を満たすバージョンのFlashを持つすべてのユーザーが再生できる出力ファイルを生成します。後は、生成されたファイルをWebサーバーにデプロイし、HTML文書のBODYに含めるだけです。リソースの結合、コード生成などの面倒な作業はすべてOpenLaszloコンパイラーが行います。ただし、SOLOデプロイメントでできることには制限があり、SOLOデプロイメントで利用できない一部の機能(Webサービス呼び出し、RPC、特定の種類のメディア・ストリーミングなど)は非常に強力な機能です。

プロキシ・デプロイメント: すべての機能が利用可能

プロキシ・デプロイメントの場合は、OpenLaszloシステムで提供されるすべての機能を利用できます。ただし、1つ問題があり、このデプロイメント・モデルを使用するには、ご使用のサーバーにOpenLaszloサーバー環境をインストールする必要があります。サーバー環境はJ2EEアプリケーション・サーバーまたはサーブレット・コンテナーの最上位に位置するWebアプリケーションであり、.lzxファイルに対するすべての要求を処理します。OpenLaszloサーバーの洗練された機能の1つは、OpenLaszloサーバー・コンポーネントがインストールされたサーバーにLaszloファイルを配置するだけで、ページをブラウズして結果を参照できることです。これが可能なのは、サーバーによってファイルがオンザフライでコンパイルされてキャッシュに入れられるからです。OpenLaszloサーバーのもう1つの大きな特長は、デプロイされたアプリケーションとアクセスする必要があるその他のリソースの間にOpenLaszloサーバーが介在して必要な変換を行うことです。これにより、(プロキシされた場合)LaszloでXML-RPCなどをサポートできるようになります。

多くのユーザーにとって、OpenLaszloサーバーのインストールは簡単です。OpenLaszloサーバーは、インストールしやすいパッケージの形式でTomcatにバンドルされています。IBM WebSphere®または他のJ2EEアプリケーション・サーバーを使用している場合は、「参考文献」に示す場所から、Webアプリケーションのアーカイブ・ファイルおよび環境の設定方法の説明を入手できます。この記事では管理については記載しませんが、管理に関するいくつかのリソースが「参考文献」に示されています。

プロキシ・デプロイメントを使用するのはどのような場合か

SOLOデプロイメントの場合はメディア要求がプロキシされないため、SOLOアプリケーションではメディア・タイプとしてFlash、JPG、およびMP3のみがサポートされます。また、データがプロキシされないため、SOLOデプロイメントでは、RPC、SOAP、およびサーバーへの永続的接続などはサポートされません。

この記事ではプロキシ・デプロイメントとSOLOデプロイメントの簡単な概要のみを紹介していますが、OpenLaszloサーバーの能力の概要をつかむには十分でしょう。最後のセクションでは、Laszloがサポートするデータ・バインディングとRPC機能について説明します。これらの機能の一部は、プロキシ・モードでデプロイされることが必要なものや、プロキシ・モードでデプロイされた場合に動作が異なるものがあります。

上に戻る

データ・バインディング機能とRPC

Laszloで大量のデータを表示する場合、Laszloのデータ・バインディング機能が役立ちます。データ・バインディングを使用すると、追加のプログラミングの必要なしに、特定の構成要素値を既存のデータ構造にマップできます。データ・バインディングは主に、フォーム・ベースのレイアウト作成の際に多数のアイテムをビジュアル・テンプレートに挿入する必要がある場合に使用します。UIのテキスト・フィールドおよびその他のコンテンツを外部データ・ストアにバインドしたり、そのデータを使用してリスト・ボックスやチェック・ボックスなどのウィジェットを設定したりできます。

データ・ソースは通常はXML文書であり、静的にコンパイルされてOpenLaszloアプリケーションが生成されるか、動的にフェッチされます。XMLHttpRequestのようなAPIを使用して手動操作を多く含む方法で開発することもできますが、データ・バインディングを使用すれば、開発時間を短縮できます。OpenLaszloでは、バインドするXML文書の要素を指定するには、datapath属性にXPathを追加します。リスト7に、連絡先情報をテキスト領域にバインドする簡単な例を示します。

リスト7.連絡先情報の簡単なデータ・バインディング

                
<canvas>
   <dataset name="contactInfo">
      <contacts>
         <contact>
            <name>John Doe</name>
            <phone>555-2000</phone>
            <DOB>16-01-1973</DOB>
            <role>Developer</role>
         </contact>
         <contact>
            <name>Jane Doe</name>
            <phone>555-3000</phone>
            <DOB>27-02-1974</DOB>
            <role>Manager</role>
         </contact>
      </contacts>
   </dataset>

   <view datapath="contactInfo:/contacts/">
      <simplelayout axis="y" />

      <view datapath="contact/">
         <simplelayout axis="x" />

         <text datapath="name/text()" />
         <text datapath="phone/text()" />
         <text datapath="DOB/text()" />
         <text datapath="role/text()" />
      </view>
   </view>
</canvas>

上の例では、データ・バインディングのもう1つの重要な概念であるXPath継承が示されています。この例からわかるように、外側のビューがXML文書のルート・ノード(<contacts>)にバインドし、ネストされたビューが個々の<contact>ノードにバインドしています。興味深い点は他にもあり、図4に示すように、両方の項目が表示されます。

図4.リスト7の出力

特定のcontactノード(例えばdatapath="contact[1]")を指定しない限り、これはデフォルトの動作です。このデフォルトの動作を使用して、LzReplicationManagerは対応する<view>アイテムを必要に応じて複製します。

<dataset>オブジェクトをリモートとして定義できるので、データ・バインディングで実現できることは他にもあります。また、オブジェクトを動的に更新することも可能です。その際、面倒な作業はすべてデータ・バインディング層によって実行されます。もちろん、Laszloの大部分の機能と同様、データ・バインディングをさまざまな方法で使用できます。datapath属性を宣言しているアイテムのapplyData()メソッドをオーバーライドして、データのカスタム・フォーマットを行うことができます。また、<dataset>のondataイベントを使用して、カスタム更新を行うこともできます。このような単純なオーバーライドの他に、Laszloには、上級のLaszlo開発者が使用できる複雑なインターフェースやオブジェクト(<datapointer>要素を含む)が多数用意されています。

RPCオプション

ここではRPCのしくみについて詳しい説明は行いませんが、OpenLaszloでのRPCのサポートについて簡単に説明します。プロキシ・デプロイメントの場合、OpenLaszloはJavaRPC、SOAP、およびXML-RPCという3種類のRPCをサポートします。これらのメソッドはすべて、関連する固有の構成要素を持っていますが、いずれもOpenLaszloのRPC構成要素<rpc>を継承します。RPCの場合もOpenLaszloサーバーが必要です。OpenLaszloサーバーはデータのマーシャリングを処理し、要求をリモート・サーバーにプロキシします。

JavaRPC(またはその他のRPCメソッド)を使用すると、OpenLaszloに対応させるために既存のサーバー・サイド・ロジックを変更する必要はありません。これは、Ajaxベースのソリューションと比べて優れている点です。Ajaxベースのソリューションでは、多くの場合、カスタム・ソフトウェアまたはサード・パーティー・ソフトウェアでAjax形式の要求をJavaRPCモデルにマップする必要があります。また、OpenLaszloによって(Laszlo Delegatesを使用する)プロキシ・スタブが自動的に作成されるため、開発者の作業負荷が軽減されます。OpenLaszloで利用可能なRPCメソッドは従来のRPCメソッドとよく似ているので、RPCを使い慣れている開発者はすぐに使用できます。また、RPCの経験がない場合も、直観的な方法によるサーバー・サイド・ロジックとの緊密な結合ができるRPCサポートが用意されているので、心配ありません。

まとめ

上に説明したように、OpenLaszloには多数の優れた機能が用意されています。OpenLaszloは、将来の懸案事項に対処するための洗練された完全なソリューションを提供します。この記事では、OpenLaszloのいくつかの固有な機能の概要と、開発プロジェクトでOpenLaszloの使用を開始するために十分な基本情報について記載しました。この記事の「参考文献」セクションに記載されている資料とサンプルを参照してください。一度こつがわかれば、OpenLaszloでの開発は非常に迅速で価値あるものとなるでしょう。

上に戻る

ダウンロード