S2BlazeDSを用いたFlex+Javaアプリの【いろは】業務用RIAの本命!? Flex+Java開発入門(2)(1/4 ページ)

» 2008年06月26日 00時00分 公開
[福田寅成クラスメソッド株式会社]

本連載では、サーバサイドとして「Java」、リッチなクライアントサイドとしてJavaと相性の良い「Adobe Flex」(以降、Flex)を用いたRIA開発の基礎を解説します。EclipseベースのIDEである「Flex Builder」を使って、「Tomcat」で動くeラーニングのRIAが完成するまでお届けする予定です

編集部注:Flex Builderは、2010年3月の新版から「Flash Builder 4」に名称変更しています。期間限定の無料版をダウンロードして使えます

「しょせん、Hello World!アプリだろ」と、侮るなかれ

 前回の「EclipseベースIDEとTomcatで始めるFlex+Java開発」では連載第1回ということで、Webアプリケーション開発の歴史とFlexの紹介、Flex+Java開発環境構築を紹介しました。

 今回からはFlexとJavaを用いたアプリケーションを実際に触っていきたいと思います。第2回となる今回は、「Hello! S2BlazeDS」アプリケーションを教材に、FlexとJavaを用いたアプリケーション開発の基礎をお伝えしていきます。一般的な「Hello World!」のFlex+Java版です。このアプリケーションは画面の「Hello」ボタンをクリックすると、サーバのDBから「World!」の文字列を取得し、画面に表示するという簡単なものです。

図1 「Hello! S2BlazeDS」アプリケーションの動作イメージ 図1 「Hello! S2BlazeDS」アプリケーションの動作イメージ

 非常に簡単なサンプルアプリケーションですが、FlexとJavaを連携したアプリケーション開発における各種技術要素を広範囲に網羅したものとなっています。

技術名 簡単な説明
Flex 3 画面描画を担当するFlexの最新バージョン
BlazeDS FlexとサーバサイドのJavaアプリケーションとの通信処理を担当
Seasar2 「少量設定」「HOT deploy」でおなじみのDIコンテナ
S2BlazeDS BlazeDSを用いてFlexとSeasar2を連携させるフレームワーク
S2JDBC DBアクセス処理開発に高生産性を提供するO/Rマッピングのフレームワーク
H2 埋め込みDB(100% Java製)
Turnkey 上記Flex 3以外のサーバ側の実行環境。BlazeDSが設定済みのTomcat
表1 「Hello! S2BlazeDS」アプリケーションの技術要素

テンプレートとしても使える!

 このアプリケーションは、前回環境を準備したFlex開発環境であるFlex Builder 3ベースのプロジェクトになっています。Flex側やJava側でのファイルの構成を中小規模のFlex+Javaアプリケーションで利用可能な簡単なパッケージ構成(ファイル階層構造)にしてあるので、この「Hello! S2BlazeDS」アプリケーションをほかのアプリケーションのテンプレート(ブランクプロジェクト)として利用することも可能です。

 今回解説するアプリケーションの基は、後述する「S2BlazeDSクライアントサンプル」です。主に設定ファイルを流用しています。プロジェクト内のパッケージ構成は大幅に修正してあります。また、「S2BlazeDSクライアントサンプル」添付の各種サンプルは同梱せず、今回解説する「Hello! S2BlazeDS」アプリケーションのみを同梱しています。

「Hello! S2BlazeDS」アプリを動かしてみよう

 まずは、「Hello! S2BlazeDS」アプリケーションを動かしてみましょう。前回構築した開発環境以外にも、以下を行う必要があります。

手順【1】「Hello! S2BlazeDS」アプリケーションのダウンロード

 ここからプロジェクトファイル(HelloS2BlazeDS_nonlib.zip)をダウンロードしてください。このファイルには、Java側で必要なライブラリファイルを同梱していません(H2データベースのJARファイル(h2-2007-12-27.jar)のみ同梱しています)。

おわびと訂正のお知らせ

上記h2-2007-12-27.jarがZIPファイルに同梱されていませんでした。大変申しわけございませんでした。ご指摘をいただきました読者さま、大変ありがとうございます。h2-2007-12-27.jarを同梱したHelloS2BlazeDS_nonlib.zipファイルに交換いたしました。

すでにサンプルアプリケーションをダウンロードした方は、こちらから当該JARファイルのみをダウンロードできます。ダウンロードしたh2-2007-12-27.jarをプロジェクトのWEB-INF/libにコピーし、プロジェクトのプロパティのJavaビルドパスのライブラリに設定していただくようよろしくお願いします。

内容に関しましては、これからも最新の注意と確認を行って記事の作成を行ってまいりますが、今回のような間違いがございましたらご連絡をいただけますよう、今後ともよろしくお願い申し上げます(2008年7月3日、@IT編集部)。


手順【2】Turnkeyのダウンロード

 繰り返しますが、TurnkeyはBlazeDSが設定済みのTomcatです。「Adobe Open Source」サイトのTurnkeyの説明の冒頭で「Turnkeyはさまざまなサンプルアプリケーションが付属したBlazeDS WARファイルがあらかじめデプロイされ、設定された状態のTomcat(バージョン6.0.14)が同梱されていて、すぐに利用できるようになっています」と、説明されています。

 Seaser2のサイトからTurnkeyをダウンロードします。2008年6月の原稿執筆時のバージョンは「turnkey_3_0_0_544.zip」です。このサイトのTurnkeyは、Tomcatの「webapp」フォルダ内にサンプルが入っていませんが、設定済みというところは「Adobe Open Source」のサイトのTurnkeyと同様です。

 Adobe Open Sourceのサイトから最新のTurnkeyをダウンロードしてきてもOKです。2008年6月の原稿執筆時の最新バージョンは「blazeds-turnkey-3.0.1.2030.zip」です。「Hello! S2BlazeDS」アプリケーションは「turnkey_3_0_0_544.zip」と「blazeds-turnkey-3.0.1.2030.zip」双方で動作を確認しています。

 ダウンロードしたZIPファイルを適当な場所に解凍しておきます。以後、C:\turnkey以下に配置したと仮定して進めます。

 実業務で使っているTomcatがすでに開発環境内に存在する方も、上記Turnkeyをダウンロードして環境を作ることをお勧めします。Tomcat切り替えの面倒はありますが、既存の環境を汚さないメリットがあります。

手順【3】S2BlazeDSサイトからブランクアプリケーションをダウンロード

 S2BlazeDSのダウンロードサイトから、3つのZIPファイルをダウンロードします。

ダウンロードするもの ファイル名
S2BlazeDSクライアントサンプル
(Flex Builder 3用)
s2blazeds-client-example-1.0.0.zip
S2BlazeDSサーバサンプル s2blazeds-server-example-1.0.0.zip
S2BlazeDSサーバひな型 s2blazeds-server-blank-1.0.0.zip
表2 「S2BlazeDSサンプル」

 適当な場所に保存しておきます。このうちの「s2blazeds-server-blank-1.0.0.zip」を後で使います。ほかのサンプル2ファイルは、本記事では利用しません。各種サンプルが入っているので、いろいろと動かして試してみるのもいいでしょう。

手順【4】「Hello! S2BlazeDS」アプリケーションのFlex Builder 3へのインポート

 ダウンロードした「HelloS2BlazeDS_nonlib.zip」をFlex Builder 3にインポートします。メニューで[ファイル]→[インポート]→[Flexプロジェクト]を選択します。

図2 「Hello! S2BlazeDS」アプリケーションのインポート 図2 「Hello! S2BlazeDS」アプリケーションのインポート

 [Flexプロジェクトのインポート]ダイアログが開くので、ダウンロードした「HelloS2BlazeDS_nonlib.zip」を選択します。

[Flexプロジェクトのインポート]ダイアログ 図3 [Flexプロジェクトのインポート]ダイアログ

 このダイアログで、Flex Builder 3のワークスペースに「HelloS2BlazeDS」という名前でプロジェクトがコピーされることを確認しておきます。[終了]ボタンをクリックするとインポートされます。しかし、プロジェクト内にライブラリがないので、警告が出ます。

手順【5】ライブラリファイルのコピー

図4 ファイルのコピー&ペーストは直接できる 図4 ファイルのコピー&ペーストは直接できる

 プロジェクトに必要なライブラリファイルをコピーします。あらかじめ「s2blazeds-server-blank-1.0.0.zip」をデスクトップに解凍しておきます。

 まず、「デスクトップ\s2blazeds-server-blank\libのgeronimo-servlet_2.4_spec-1.0.jar」をプロジェクトのルートのlibフォルダにコピーします。上記ファイルをコピーしたら、直接Flex Builder 3の[Flexナビゲータ]上の「lib」フォルダにペーストします。

 次に、「デスクトップ\ s2blazeds-server-blank\webapp\WEB-INF\lib」内のすべてのJARファイル(拡張子jar)をプロジェクトの「WEB-INF\lib」にペーストします。ここまででエラーがなくなることを確認します。

手順【6】Tomcatを設定する

 TomcatプラグインでTomcatサーバの場所を設定しておきます。Flex Builder 3で[ウィンドウ]→[設定]→[Tomcat]を選択し、[Tomcat バージョン]を「バージョン6.x」にし、[Tomcat ホーム]にダウンロードしたTurnkeyを解凍した場所を指定します。[コンテキスト宣言モード]に[コンテキスト・ファイル]を設定して、[OK]ボタンをクリックします。

図5 Tomcatプラグインの設定 図5 Tomcatプラグインの設定

 この段階では、「HelloS2BlazeDS」プロジェクトがTomcatにデプロイされてないので、デプロイしておくことにします。Flex Builder 3で「HelloS2BlazeDS」を選択し、右クリックします。[Tomcatプロジェクト]→[コンテキスト定義を更新]をクリックし、「操作が成功しました」と表示されたら成功です。

手順【7】jdbc.diconファイルの書き換え

 jdbc.diconでのH2データベースのパスを、以下のように書き換えてください。

C:/Users/fukuda.tomonari/Documents/FLEXBU~3/HELLOS~1/data/demo

 上記はWindows Vistaでのパスの書き方なので、XPの方は適宜ほかの場所も書き換えるように注意してください。

 次ページでは、早速サンプルアプリケーションを動かしてみましょう。その後、サンプルの全体像やファイル構成、そしてサンプルプロジェクトの設定について解説します。

       1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。