WebSphere sMash の強力さを Adobe Flex と組み合わせる

ページオプション JavaScript を要するドキュメントオプションは表示されません ダウンロード 原文はこちら

レベル: 中級

Jorge Rasillo, Staff Software Engineer, IBM
Mike Burr, Senior Software Engineer, IBM

2008年 08月 13日

最近では、住んでいる地域の天気予報の入手から、身近な 500 人の友人達とのビデオの共有に至るまで、すべてに Web 2.0 アプリケーションが使われています。Web 2.0 に依存する環境の増加に対応するため、IBM® は WebSphere® sMash をリリースしました。WebSphere sMash はアジャイル開発や単純さ、そして RESTful なインターフェースなどの概念を中核に設計されたアプリケーション・フレームワークです。WebSphere sMash の大部分の例では、Ajax と、単純な HTML または Dojo Toolkit を使って表現したユーザー・インターフェースを使っていますが、この記事では簡単なサンプル・アプリケーションを取り上げ、Adobe Flex で作成された Web 2.0 ユーザー・インターフェースをサポートするように機能強化する方法を説明します。またサーバーの実装を Groovy と PHP の両方で提供します。この記事は、REST を使った経験があり、また Adobe Flex Development Kit を使った開発の経験がある中級の開発者を対象としています。

IBM WebSphere Developer Technical Journal より.

はじめに

Web 2.0 という用語は、あまりにも多くの意味に使われています。この用語を最も適切に定義するなら、迅速なアプリケーション・プログラミングのためのインターフェース (例えば REST (REpresentational State Transfer など) を活用して使いやすいアプリケーションを開発するためのアーキテクチャー・スタイル、のように言えるでしょう。

アーキテクチャー・スタイルとしての Web 2.0 は、クライアント (ブラウザー) サイドにもサーバー・サイドにも、特定の技術を要求しません。実際、Web 2.0 アプリケーションの魅力的な特徴の 1 つは、クライアント技術とサーバー技術が明確に分離されていることで、このおかげで、直面している状況に適しているかどうかに基づいてクライアント・サイド技術とサーバー・サイド技術を選択することができ、「1 つであらゆることに対処できる」ソリューションに頼る必要がありません。

サーバー・サイドの技術のなかでも、Java™ のバックグラウンドを持つ開発者が (動的なスクリプト言語を使うことで通常実現される) 短時間で価値を生み出せることを要求するのに対し、特に適しているのは、WebSphere sMash です。

WebSphere sMash は Groovy (Java の構文を持つ動的スクリプト言語) と PHP の両方をサポートしているため、広範にわたる開発者がすぐに WebSphere sMash を利用することができます。

WebSphere sMash からクライアント・サイドの技術への要求はありませんが、WebSphere sMash のアプリケーションはほとんどの場合、HTML/Ajax で表現された (場合によっては Dojo Toolkit によって拡張された) ユーザー・インターフェースと組み合わされます。これらの技術は多くのユーザー・インターフェースの要求を満足しますが、アプリケーションによってはユーザーとの対話動作を一層リッチにするように、さらに成熟したフレームワークを要求するかもしれません。Adobe Flex (現在はバージョン 3) はそうしたフレームワークを提供し、RIA (Rich Internet Application) の領域ではユーザーに広く認知されています。

この記事では、WebSphere sMash による簡単な ToDo アプリケーションを取り上げ、視覚に訴えるユーザー・インターフェースを Adobe Flex を使って作成することで、WebSphere sMash と Adobe Flex とを組み合わせて使う上で役に立つ手法の概要を説明します。このアプリケーションは意図的に簡単にしてありますが、それは WebSphere sMash と Adobe Flex とを組み合わせる手法を明確に説明するためです。WebSphere sMash の原則に従って、ブラウザーとサーバーとの間の通信はすべて RESTful であり、標準的なデータ・エンコーディングを使っています。WebSphere sMash と Adobe Flex が共に柔軟であることを示すため、次のような複数のバリエーションでアプリケーションを示します。

• WebSphere sMash アプリケーションを Groovy と PHP の両方で表現します。
• WebSphere sMash のコードと Adobe Flex のコードとの間のデータ転送に XML を使った場合と JSON を使った場合の両方を示します。

上に戻る

WebSphere sMash を使う

WebSphere sMash についてあまり詳しくない人のために説明すると、WebSphere sMash は、コミュニティー主導の商用開発プロジェクトである Project Zero というインキュベーター・プロジェクトとして開始され、単純さとアジリティー、そしてスピードという 3 つを念頭に開発されたものです。WebSphere sMash が持つこうした性格から、WebSphere sMash を使うことで、再利用可能で作成しやすく、そして最小限の作業で変更に対応可能なアプリケーションを実現する、堅牢なフレームワークを提供することができます。また、迅速なアプリケーション開発を迫られる今日の多くのビジネスでは、アジリティーを念頭に置いて設計された WebSphere sMash を使うことによって、安定したアプリケーションを迅速かつ容易に開発することができます。

WebSphere sMash の依存関係管理システムによって、アプリケーションのデプロイに付随する面倒な作業の多くをなくすことができ、アプリケーションを異なる環境に移行する際にもクラスパスの依存関係を気にする必要がなく、容易に移行を行うことができます。他の多くのアプリケーション環境とは異なり、WebSphere sMash は必要なモジュールのみを含むため、とても小さなフットプリントのアプリケーションを作成することができます。また、初期化もすぐに完了するため、アジャイルな開発環境として非常に優れています。

Web 2.0 と REST スタイルのプログラミング

多くの人は REST という言葉をアーキテクチャーと混同しています。この記事では、Web 2.0 アーキテクチャーを実現するための API (application programming interface) として REST を使います。REST のインターフェースは従来の list/create/read/update/delete 操作を標準的な GET、POST、PUT、DELETE という HTTP メソッド使って公開します。こうしたメソッドの例を後ほどいくつか説明します。

Web 2.0 では、ビジネスがもたらす真のメリットは、そのビジネスの内部サービスや内部データ・ソースをブラウザー・ベースのアプリケーションで使いやすい新たなフォーマット (ATOM、JSON、RSS、RESTful などのインターフェース) で Web に公開することにあることに気付いています。Google や Amazon などの企業は、開発者が既存の機能を活用でき、その上に最小限の努力で構築を行える API によって、Web 2.0 の世界をリードしています。

AppBuilder

AppBuilder は WebSphere sMash アプリケーションを開発するためのツールです。(この記事に含まれている .zip ファイルは AppBuilder を使ってパッケージされたものです。) AppBuilder には、構文強調機能やサーバーの起動/停止機能、そしてコンソールからランタイム・ログやトレース・ログにアクセスできる機能を持つエディターが組み込まれているため、アプリケーションを素早く作成することができます。AppBuilder は Project Zero の Web サイトから入手することができます (「参考文献」を参照)。

Groovy と PHP

この記事での主な焦点は、Adobe Flex のフロントエンドを作成することで既存のアプリケーションを利用できる、ということを示すことです。そのためこの記事では、WebSphere sMash のインフラの一部の側面のみを説明します。

WebSphere sMash の特質の 1 つは、アプリケーションを非常に迅速に作成できることであり、そのために Groovy や PHP といったスクリプト言語の強力さを活用しています。

WebSphere sMash には、アプリケーションの中で RESTful なリソースを簡単かつ直接的に作成するための規則が組み込まれています。WebSphere sMash アプリケーションの app/resources ディレクトリーに置かれたすべての Groovy スクリプトまたは PHP スクリプトは、自動的に RESTful なリソースとして公開されます (表 1)。

詳細については「Resource (REST) programming model and conventions」を参照してください。

最初の課題は、ToDo リスト・アプリケーションのサーバー・サイドの実装を作成することです。

Groovy による ToDo サービスの例

Groovy は Java なしでは生きられないプログラマーのためのスクリプト言語です。Groovy は既存の Java コードとの統合が容易であり、またスクリプト機能を持っているため、スピードと単純さという期待に応えます。

このコードはグローバル・コンテキストの app ゾーンを使ってユーザーの ToDo リストを保存しています。ここでは以下のメソッドを使っています。

• onList: 現在の ToDo 項目を一覧表示します。
• onCreate: 指定された項目を追加することで ToDo リストに新しいエントリーを作成します。
• onRetrieve: インデックス ID に基づいてその ID の項目を表示します。
• onDelete: ToDo リストからエントリーを削除します。

このアプリケーションは最初、XML フォーマットでデータを返すように作成されます。ここに示すコードは、先ほど触れた Project Zero の資料の中にあるサンプルの REST リソースと実質的に同じです。下記のスニペットに対応する WebSphere sMash の完全なソースは、この記事に含まれているダウンロード・ファイルの CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_xml_grovy.groovy の中にあります。

def onList() {
    logger.INFO {"onList(): called"}
 
    def todos = app.todosXML[]
 
    if (todos == null) {
        todos = []
    }
    else {
        todos = todos.values()
    }
 
    outputXML(todos)
    logger.INFO {"onList(): returning ${todos}"}
}

def onCreate() {
    logger.INFO {"onCreate(): called"}
 
    def item = request.params.item[]
    request.status = HttpURLConnection.HTTP_BAD_REQUEST
 
    if (item != null && item.length() > 0) {
        def todos = app.todosXML[]
        def index = app.index[]
 
        if (todos == null) {
            todos = [:]
            index = 0
        }
 
        index++
        todos.put(index, [id:index, value:item])
 
        app.todosXML = todos
        app.index = index
 
        request.status = HttpURLConnection.HTTP_CREATED
        request.headers.out.Location = request.uri[] + '/' + index
 
        logger.INFO {"onCreate(): created id ${index} -> ${item}"}
    }
}

def onRetrieve() {
    logger.INFO {"onRetrieve(): called"}
 
    def id = request.params.todos_xml_groovyId[]
 
    if (id != null) {
        def todos = app.todosXML[]
        def value = todos.get(id.toInteger())
 
        if (value != null) {
            outputXML(value)
            logger.INFO {"onRetrieve(): returning ${value}"}
            return
        }
    }
 
    send404()
}

def onDelete() {
    logger.INFO {"onDelete(): called"}
 
    def id = request.params.todos_xml_groovyId[]
 
    if (id != null) {
        def todos = app.todosXML[]
 
        if (todos.remove(id.toInteger())) {
            app.todosXML = todos
            logger.INFO {"onDelete(): deleted ${id}"}
            return
        }
    }
 
    send404()
}

def outputXML(data) {
    logger.INFO {"converting ${data} to XML"}
 
    request.headers.out.'Content-Type'='application/xml'
    request.view = 'XML'
    request.xml.output = data
    render()
}

PHP による ToDo サービスの例

PHP は汎用のスクリプト言語です (「参考文献」を参照)。このセクションでは、上で説明した Groovy による実装と機能的に等価な、PHP による実装を説明します。この 2 つの実装の間での主な違いは、構文の違いです。シリアライズされるオブジェクトの複雑さに応じて、WebSphere sMash によって間接的なレンダリングが適切に行われます。

下記のコード・スニペットに対応する WebSphere sMash の完全なソースは、ダウンロード・ファイルの CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_xml_php.php の中にあります。

function onList() {
 
    $todos = zget("/app/todos_xml_php");
 
    if ($todos == null) {
        $todos = array();
    }
 
    zput('/request/view', 'XML');
    zput('/request/xml/output', array_slice($todos, 0));
    zput('/request/xml/rootelement', 'arraylist');
    render_view();
}

function onCreate() {
 
    $item = zget("/request/params/item");
    zput("/request/status", 400);
 
    if ($item != null && strlen($item) > 0) {
        $todos = zget("/app/todos_xml_php");
        $index = zget("/app/index");
 
        if ($todos == null) {
            $todos = array();
            $index = 0;
        }
 
        $index++;
        $todos[$index] = array('id' => $index, 'value' => $item);
 
        zput("/app/todos_xml_php", $todos);
        zput("/app/index", $index);
 
        zput("/request/status", 201);
 
        $uri = zget("/request/uri");
        zput("/request/headers/out/Location", "$uri/$index");
    }
}

function onRetrieve() {
 
    $id = zget("/request/params/todos_xml_phpId");
 
    if ($id != null) {
        $todos = zget("/app/todos_xml_php");
        $value = $todos[$id];
 
        if ($value != null) {
            zput('/request/view', 'XML');
            zput('/request/xml/output', $value);
            render_view();
            return;
        }
    }
 
    // Error handling
    zput("/request/status", 404);
    echo "An error occurred while processing your request";
}

function onDelete() {
 
    $id = zget("/request/params/todos_xml_phpId");
 
    if ($id != null) {
        $todos = zget("/app/todos_xml_php");
        unset($todos[$id]);
 
        zput("/app/todos_xml_php", $todos);
        return;
    }
 
    // Error handling
    zput("/request/status", 404);
    echo "An error occurred while processing your request";
}

JSON の概要

WebSphere sMash は Web 2.0 の性質を持ち合わせており、XML だけではなく JSON (JavaScript™ Object Notation) もサポートしています (JSON に関する詳細は「参考文献」を参照)。Groovy の大きな強みの 1 つは、XML と JSON を容易に構文解析することができるため、構文解析のためのコードの作成に大量の時間を費やす必要がないことです。

WebSphere sMash は直接的な API を使うか、または間接的なレンダリングによって、HTTP レスポンスの本体をレンダリングすることができます。ここでは、XML 出力を生成する場合にも JSON 出力を生成する場合にも、間接的なレンダリングを使います。通常、レンダラーを呼び出すためには次のような手順に従います。

1. GlobalContext の /request/view の値を、対応するレンダラーに設定します。
2. 必要に応じて、GlobalContext の中にレンダラー専用の値をさらに設定します。
3. zero.core.views.ViewEngine.render() を呼び出します。

これまでに挙げた例は XML データのみを生成します。以下のセクションでは、コードの変更を最低限に抑えた上で、Groovy と PHP で JSON データを生成する方法について説明します。

JSON 出力を生成するための WebSphere sMash の完全なソース・ファイルは、ダウンロード・ファイルの CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_json_groovy.groovy と CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_json_php.php の中にあります。

def outputJson(data) {
    logger.INFO {"converting ${data} to JSON"}
 
    request.headers.out.'Content-Type'='application/json'
    request.view = 'JSON'
    request.json.output = data
    render()
}

zput('/request/view', 'JSON');
zput('/request/json/output', $todos);
render_view();

上に戻る

Adobe Flex を使う

この記事ではここまで、アプリケーションのバックエンドの作成方法を説明してきました。次に、上で作成したばかりの WebSphere sMash バックエンドとやり取りする、ブラウザー・ベースのアプリケーションを作成する方法を説明します。

Adobe Flex によって、主要なブラウザーやデスクトップ、オペレーティング・システムのすべてに対して同じように適切にデプロイ可能な、プラットフォームに依存しない RIA (Rich Internet Application) を生成することができます (「参考文献」を参照)。Adobe Flex によって作成された RIA は、Adobe Flash プレイヤーを使ってブラウザーで実行することができ、または AIR (Adobe Integrated Runtime) を使ってデスクトップで実行することができます。

下記のスニペットに対応する Adobe Flex の完全なソース・ファイルは、ダウンロード・ファイルの CombiningThePowerOfWSWithAdobeFlex/src/todoJSON.mxml と CombiningThePowerOfWSWithAdobeFlex/src/todoXML.mxml の中にあります。

Adobe Flex アプリケーションを作成するためには次の手順に従います。

1. WebSphere sMash からデータを取得します。

   Adobe Flex では、HTTPService コンポーネントを使って外部データを容易にロードすることができます (「参考文献」を参照)。ここでは HTTP リクエストを行うための方法を 2 つ説明します。1 つは XML を使う方法、もう 1 つは JSON を使う方法です。Adobe Flex には XML のサポートが組み込まれています (つまり Adobe Flex は e4x (ECMAScript for XML) を使ってデータを解析します)。そのため、作成するコードは XML を使う方法の方が少なくなります。Adobe Flex で JSON のシリアライズをサポートするためには corelib ライブラリーをダウンロードする必要があります (「参考文献」を参照)。リスト 12 のサンプル・コードは HTTPService コンポーネントを作成します。このコンポーネントによってアプリケーションにアクセスすることができ、WebSphere sMash アプリケーションで生成された XML データを使った ToDo リストの項目の削除、取得、作成を行うことができます。

   Adobe Flex の MXML コード (リスト 12) では、Adobe Flex のバインディング機構 (中括弧の中にある変数名) を積極的に使うことで、実行時にリクエストが送信された場合にリソース名と ID とを動的に置き換えています。<mx:HTTPService> 要素上で指定された URL は、WebSphere sMash によって、先ほど作成した Groovy スクリプトまたは PHP スクリプトにマッピングされます。method 属性とURL は、これらのスクリプトの、どのメソッドまたは関数を呼び出すことでリクエストを処理するかを決定します。

   result 属性と fault 属性はそれぞれ、リクエストが適切に完了した場合、あるいはエラー条件が発生した場合に実行するためのコードを提供します。MXML コードの中の、他のデータ・バインディングは、list 呼び出しと retrieve 呼び出しによって返されるデータを自動的に処理します。create 呼び出しと delete 呼び出しは、完了するとさらに list 呼び出しをすることによって、表示されているデータを更新します。

   
   
   リスト 12. XML を使って HTTPService コンポーネントを作成する
   

   <!-- REST call to retrieve list of todo items --> <mx:HTTPService id="listTodosHS" url="/resources/{resource}" method="GET" resultFormat="e4x"/> <!-- REST call to fetch details on an item --> <mx:HTTPService id="retrieveTodoHS" url="/resources/{resource}/{idToRetrieve}" method="GET" resultFormat="e4x" result="detailsBox.visible = true"/> <!-- REST call to add a new todo item --> <mx:HTTPService id="createTodoHS" url="/resources/{resource}" method="POST" result="listTodosHS.send()" fault="listTodosHS.send()"> <mx:request xmlns=""> <item>{itemToAdd.text}</item> </mx:request> </mx:HTTPService> <!-- REST call to delete a todo item --> <mx:HTTPService id="deleteTodoHS" url="/resources/{resource}/{idToDelete}" method="POST" result="listTodosHS.send()" fault="listTodosHS.send()"/>

   
   

   JSON ライブラリーを使うと、同様の機能 (つまり WebSphere sMash アプリケーションが生成する JSON データを解析する機能) を作成することができます (リスト 13)。リスト 13 の JSON コードとリスト 12 に示した XML コードの主な違いは、リスト 13 では list 呼び出しと retrieve 呼び出しの result ハンドラーの中にある JSON データをデコードするために明示的な呼び出しを行っている点です。

   
   
   リスト 13. JSON を使って HTTPService コンポーネントを作成する
   

   <!-- REST call to retrieve list of todo items --> <mx:HTTPService id="listTodosHS" url="/resources/{resource}" method="GET" resultFormat="text" result="todoItems = JSON.decode(listTodosHS.lastResult as String);"/> <!-- REST call to fetch details on an item --> <mx:HTTPService id="retrieveTodoHS" url="/resources/{resource}/{idToRetrieve}" method="GET" resultFormat="text" result="detailItem = JSON.decode(retrieveTodoHS.lastResult as String); detailsBox.visible = true;"/> <!-- REST call to add a new todo item --> <mx:HTTPService id="createTodoHS" url="/resources/{resource}" method="POST" result="listTodosHS.send()" fault="listTodosHS.send()"> <mx:request xmlns=""> <item>{itemToAdd.text}</item> </mx:request> </mx:HTTPService> <!-- REST call to delete a todo item --> <mx:HTTPService id="deleteTodoHS" 0 url="/resources/{resource}/{idToDelete}" method="POST" result="listTodosHS.send()" fault="listTodosHS.send()"/>

   
   

2. データを解析して表示します

   Adobe Flex のコンポーネントを利用すると、HTTPService リクエストの結果を容易に処理することができます (リスト 14)。

   
   
   リスト 14. HTTPService リクエストを処理する
   

   <!-- todo items list --> <mx:HBox left="10" horizontalGap="15"> <mx:VBox backgroundColor="white" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" cornerRadius="5" borderThickness="1" borderStyle="solid" borderColor="black" dropShadowEnabled="true" shadowDistance="3" shadowDirection="right"> <mx:Text text="Your todo items:" fontWeight="bold" fontSize="14"/> <mx:Repeater id="todoItemsRp" dataProvider="{listTodosHS.lastResult.item}"> <mx:HBox width="100%" verticalAlign="middle" paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="3" rollOver="event.currentTarget.setStyle ('backgroundColor', 0xffff88)" rollOut="event.currentTarget.clearStyle ('backgroundColor')"> <mx:CheckBox click="deleteItem(event)" toolTip="Click to delete item"/> <mx:Text text="{todoItemsRp.currentItem.value}"/> <mx:LinkButton label="details" fontSize="8" textDecoration="underline" click="getItemDetails(event)"/> </mx:HBox> </mx:Repeater> <mx:Spacer height="10"/> <mx:HBox width="100%" verticalAlign="middle"> <mx:Text text="Add:"/> <mx:TextInput id="itemToAdd" toolTip="Press Enter to add the new item." enter="createTodoHS.send(); event.currentTarget.text = ''"/> </mx:HBox> </mx:VBox> <!-- details for an individual item --> <mx:VBox id="detailsBox" visible="false" showEffect="{fade}" backgroundColor="white" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" cornerRadius="5" borderThickness="1" borderStyle="solid" borderColor="black" dropShadowEnabled="true" shadowDistance="3" shadowDirection="right"> <mx:Text text="Item details:" fontWeight="bold" fontSize="14"/> <mx:Text text="ID: {retrieveTodoHS.lastResult.id}"/> <mx:Text text="Value:"/> <mx:TextArea text="{retrieveTodoHS.lastResult.value}"/> </mx:VBox> </mx:HBox>

   
   

Adobe Flex でのイベント処理

Adobe Flex は ActionScript を使っています。ActionScript は ECMAScript をベースにしたオブジェクト指向のスクリプト言語であり (「参考文献」を参照)、イベント処理などの対話動作を実現する動的なユーザー・インターフェースを作成することができます (リスト 15)。Adobe Flex が HTTP REST 呼び出しを生成する方法と WebSphere sMash が受信を想定しているものとの間を調整するために、creationComplete() 関数に追加のステップが必要なことに注目してください。

/**
 * Logic to run after the mx:Application has been created.
 */
 internal function creationComplete():void {
    // initial population of the list
    listTodosHS.send();

    // Flex doesn't know how to generate an HTTP DELETE.
    // Fortunately, sMash/Zero will interpret an HTTP POST with
    // an X-Method-Override: DELETE header as a DELETE.
    deleteTodoHS.headers['X-Method-Override'] = 'DELETE';

    // set a dummy body for the POST so Flex won't change it to
    // a GET
   deleteTodoHS.request['foo'] = 'I really do want a POST';
  }


 /**
  * Called when the user requests details for an item.
  */
  internal function getItemDetails(event:MouseEvent):void {
     // find id of item to be deleted
     var lb:LinkButton = event.currentTarget as LinkButton;
     var i:int = lb.parent.parent.getChildIndex(lb.parent);
     idToRetrieve = listTodosHS.lastResult.item[i-1].id;

     // hide details box while we're getting details
     detailsBox.visible = false;

     // ask server for details
     retrieveTodoHS.send();
  }


  /**
   * Called when the user checks on a box to delete an item
   */
  internal function deleteItem(event:MouseEvent):void {
     // find id of item to be deleted
     var cb:CheckBox = event.currentTarget as CheckBox;
     var i:int = cb.parent.parent.getChildIndex(cb.parent);
     idToDelete = listTodosHS.lastResult.item[i-1].id;

     // hide details if deleting same item
     if (retrieveTodoHS.lastResult != null &&
     idToDelete == retrieveTodoHS.lastResult.id)
     detailsBox.visible = false;

     // tell server to delete item, list will be updated when
     // delete finishes
     deleteTodoHS.send();
  }

この記事のダウンロード・ファイルには、このサンプル・プログラムの完全なソース・コードが含まれています。

上に戻る

全体をまとめる

Adobe Flex は、そのままでは JSON のシリアライズをサポートしていません。このサポートを追加するためには、Adobe から corelib ライブラリーをダウンロードし、WebSphere sMash アプリケーションの libs ディレクトリーに追加する必要があります (「参考文献」を参照)。Adobe Flex アプリケーションをデプロイするためには、そのアプリケーション (.swf) を WebSphere sMash アプリケーションの公開ディレクトリーに保存する必要があります。この記事に含まれているソース・コードには 2 つの Adobe Flex アプリケーションが含まれており、一方のアプリケーションは XML を使用し、もう一方のアプリケーションは JSON を使用しています。これらのアプリケーションにアクセスするためには、WebSphere sMash サーバーが起動している状態で、それぞれ http://localhost:8080/todoXML.html または http://localhost:8080/todoJSON.html までナビゲートします。

以下に示す図から、次のことがわかります。

• アプリケーションが最初にロードされると、onList() メソッドが実行された後にアプリケーションが呼び出されます (図 3)。
• Adobe Flex のフロントエンドが HTTP POST リクエストを送信し、新しい項目を ToDo リストに追加します (図 4)
• Adobe Flex のインターフェースは (チェックボックスがいつ選択されたかを知るために) onclick イベントをリッスンし、ToDo リストから項目を削除します (図 5)。
• ToDo リストの項目をクリックすると、onRetrieve() が呼び出されます (図 6 と 7)。
• アプリケーションは、Groovy によるサーバー・サイド実装と PHP によるサーバー・サイド実装との間を切り替えることができます (図 8)。

上に戻る

まとめ

WebSphere sMash は迅速に Web アプリケーションを作成するための、単純ながら強力なフレームワークです。WebSphere sMash は Groovy と PHP という動的スクリプト言語を両方サポートしているため、容易に使いこなすことができ、また Web 2.0 アプリケーションの開発に即座に活用することができます。この記事で説明した標準に基づいた RESTful な手法を使うことで、Adobe Flex で作成したリッチで高度な対話機能を持つユーザー・インターフェースと WebSphere sMash によるバックエンド・ロジックとを組み合わせることができます。この記事で説明した話題に関する詳細な情報は、下記の参考文献を参照してください。

上に戻る

ダウンロード

	ダウンロード形式について

参考文献

• IBM WebSphere sMash の製品情報を見てください。
  
  
• Project Zero の開発コミュニティーに加わってください。
  
  
• Project Zero の Resource (REST) プログラミング・モデルと規則を見てください。
  
  
• Project Zero の JSON サポートについて調べてください。
  
  
• Project Zero のレスポンス描画について調べてください。
  
  
• Groovy について調べてください。
  
  
• PHP について調べてください。
  
  
• JSON の紹介を見てください。
  
  
• Adobe Flex の紹介を見てください。
  
  
• Adobe Flex の資料、Working with XML を見てください。
  
  
• corelib プロジェクトについて調べてください。
  
  
• Adobe Flex のリソース・ライブラリーを見てください。
  
  
• Roy Thomas Fielding が 2000年に執筆した Architectural Styles and the Design of Network-based Software Architectures を読んでください。

著者について

		Jorge Rasillo は IBM Austin のソフトウェア・エンジニアです。彼は現在 AIX Scale Out and Solutions チームのメンバーとして、Blue Cloud ソリューションの業務を行っています。彼は息子と遊んだり妻とくつろいだりする時以外はトライアスロンのトレーニングに励んでいます。

		Mike Burr は IBM Raleigh のソフトウェア・エンジニアです。彼は WebSphere Technology Institute に所属し、IBM の WebSphere 製品群の将来の方向性を探っています。

記事の評価

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

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

上に戻る