本連載では、サーバサイドとして「Java」、リッチなクライアントサイドとしてJavaと相性の良い「Adobe Flex」(以降、Flex)を用いたRIA開発の基礎を解説します。EclipseベースのIDEである「Flex Builder」を使って、「Tomcat」で動くeラーニングのRIAが完成するまでお届けする予定です
編集部注:Flex Builderは、2010年3月の新版から「Flash Builder 4」に名称変更しています。期間限定の無料版をダウンロードして使えます
前回の「EclipseベースIDEとTomcatで始めるFlex+Java開発」では連載第1回ということで、Webアプリケーション開発の歴史とFlexの紹介、Flex+Java開発環境構築を紹介しました。
今回からはFlexとJavaを用いたアプリケーションを実際に触っていきたいと思います。第2回となる今回は、「Hello! S2BlazeDS」アプリケーションを教材に、FlexとJavaを用いたアプリケーション開発の基礎をお伝えしていきます。一般的な「Hello World!」のFlex+Java版です。このアプリケーションは画面の「Hello」ボタンをクリックすると、サーバのDBから「World!」の文字列を取得し、画面に表示するという簡単なものです。
非常に簡単なサンプルアプリケーションですが、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」アプリケーションを動かしてみましょう。前回構築した開発環境以外にも、以下を行う必要があります。
ここからプロジェクトファイル(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編集部)。
繰り返しますが、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切り替えの面倒はありますが、既存の環境を汚さないメリットがあります。
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ファイルは、本記事では利用しません。各種サンプルが入っているので、いろいろと動かして試してみるのもいいでしょう。
ダウンロードした「HelloS2BlazeDS_nonlib.zip」をFlex Builder 3にインポートします。メニューで[ファイル]→[インポート]→[Flexプロジェクト]を選択します。
[Flexプロジェクトのインポート]ダイアログが開くので、ダウンロードした「HelloS2BlazeDS_nonlib.zip」を選択します。
このダイアログで、Flex Builder 3のワークスペースに「HelloS2BlazeDS」という名前でプロジェクトがコピーされることを確認しておきます。[終了]ボタンをクリックするとインポートされます。しかし、プロジェクト内にライブラリがないので、警告が出ます。
プロジェクトに必要なライブラリファイルをコピーします。あらかじめ「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」にペーストします。ここまででエラーがなくなることを確認します。
TomcatプラグインでTomcatサーバの場所を設定しておきます。Flex Builder 3で[ウィンドウ]→[設定]→[Tomcat]を選択し、[Tomcat バージョン]を「バージョン6.x」にし、[Tomcat ホーム]にダウンロードしたTurnkeyを解凍した場所を指定します。[コンテキスト宣言モード]に[コンテキスト・ファイル]を設定して、[OK]ボタンをクリックします。
この段階では、「HelloS2BlazeDS」プロジェクトがTomcatにデプロイされてないので、デプロイしておくことにします。Flex Builder 3で「HelloS2BlazeDS」を選択し、右クリックします。[Tomcatプロジェクト]→[コンテキスト定義を更新]をクリックし、「操作が成功しました」と表示されたら成功です。
jdbc.diconでのH2データベースのパスを、以下のように書き換えてください。
C:/Users/fukuda.tomonari/Documents/FLEXBU~3/HELLOS~1/data/demo |
上記はWindows Vistaでのパスの書き方なので、XPの方は適宜ほかの場所も書き換えるように注意してください。
次ページでは、早速サンプルアプリケーションを動かしてみましょう。その後、サンプルの全体像やファイル構成、そしてサンプルプロジェクトの設定について解説します。
Copyright © ITmedia, Inc. All Rights Reserved.