連載：Flexのクライアントサイドをオープンソースで制覇する（2）

Flexのフレームワーク、Cairngormを使ってみよう

ダイヤモンドコンピューターサービス
SI技術部 技術推進グループ
吉田 靖宏
2006/6/16

前回（Cairngorm Frameworkとは何か？）では、Cairngorm Frameworkの概要や特徴、利用するメリットを説明した。今回は、実際にCairngorm Frameworkを使ってサンプルアプリケーションを開発するために、まずはFlexの開発環境の構築を行い、Cairngorm Frameworkに付属しているサンプルアプリケーションでフレームワークの動作を確認していく

■Flexのインストール

　

　まず、初めにFlexをインストールします。FlexはJ2EE（Java EE）アプリケーションサーバ上で動作するため、動作させるにはJDKとアプリケーションサーバが必要です。ここでは、これらのインストールも一緒に行います。

　Flexは、最新のバージョン2.0を使いたいところですが、まだベータ版リリースのため、今回は正式リリースされているバージョン1.5を使用します。

　Flex 1.5は、JDK 5.0には対応していませんのでJDKは1.4系を、アプリケーションサーバはApache Tomcatの5.0系をそれぞれ使用します。これらのインストールについては、Flashベースのリッチクライアントを体験（1） Macromedia Flexのインストールに詳しい説明があるので、そちらを参照して行ってください。なお、今回は開発環境にEclipseを用いる方法を紹介しますので、Flex Builderについては特にインストールする必要はありません。

■Eclipse上で開発する準備

　今回は、Flexアプリケーションの開発環境としてJavaエンジニアにはもはや必須の開発ツールとなったEclipseを使ってみたいと思います。Flexアプリケーションの開発環境としては、Macromediaが提供しているFlex BuilderというIDE（統合開発環境）がありますが、プロセスが重くEclipseと両方立ち上げていると、スペックの低いマシンでは動作が遅くなったり不安定になったりします。また、トライアル版では60日間の使用制限がありそれを過ぎると使えなくなってしまうというデメリットもあります。

　今回、紹介するのはEclipse上でMXMLのコードアシストを可能にする方法です。残念ながらFlex Builderのように、コンポーネントをドラッグ&ドロップしてGUIライクに開発することはできません。それでは、Eclipse上で開発する準備を進めていきましょう。

Flex Builder 2.0 Flex 2では、開発環境としてFlex Builder 2.0という製品が提供されます。Flex Builder 2.0は、Eclipseベースの開発環境であり本稿で紹介するMXMLのコードアシストはもちろん、コンポーネントをドラッグ&ドロップしてGUIライクに画面を作成することもEclipse上で可能になります。

・EclipseとWTPのインストール

　今回は、Eclipseのエディタ上でMXMLのコードアシストを可能にするために、WTP（Web Tools Platform）というプロダクトを使用します。WTPは、Eclipseの中のWTPプロジェクトで開発が進められており、Web開発に必要なツール群をEclipseのプラグインとして提供しています。WTPは、GEFやEMFなどいくつかほかに必要となるプラグインがありますので、WTPをインストールする際には、それらも一緒にインストールする必要があります。WTPをバンドル済みのEclipseもありますので、Eclipseを新規にインストールする場合は便利なこちらの使用をお勧めします。

　なお、本稿執筆時点での最新バージョンは、WTP 1.0.2です。今回は、このバージョンのWTPバンドル済みEclipse（Eclipseのバージョンは、3.1.1）を使って説明します。EclipseのWTPプロジェクトのページの右側にあるバージョン「WTP 1.0.2」をクリックし、開いたページの［Download WTP 1.0.2］をクリックして、そのまた先のダウンロード用ページから［wtp-all-in-one-sdk-R-1.02-XXX］という名前が付いているファイルをダウンロードしましょう。

・XMLエディタの設定

　EclipseとWTPのインストールが終わったところで、次にMXMLのコードアシストを可能にするためにXMLエディタの設定を行います。まず、Eclipseのメニューバーのウィンドウから設定を選択します。すると、以下のような設定ダイアログが表示されます。ここで左側のツリーから［一般］→ ［コンテンツタイプ］を選択します。右側のコンテンツタイプ表示欄にコンテンツタイプのツリーが表示されるので、［Text］→［XML］を選択します。

画面1 コンテンツタイプの設定ダイアログ

　追加ボタンを押すと、以下のようなダイアログが表示されるのでファイル・タイプに“*.mxml”と入力してOKボタンを押します。すると、ファイルの関連付け欄に*.mxmlが加わります。デフォルト・エンコードには自動的にUTF-8が設定されるので、ここはそのままで結構です。

画面2 ファイルタイプの新規追加

　続けて、設定ダイアログの左側のツリーから［Web and XML］→ ［XML Catalog］を選択します。右側の［XML Catalog Entries］表示欄に［XML Catalog］の一覧が表示されるので、［User Specified Entries］を選択します。

画面3 XML Catalogの設定ダイアログ

　Addボタンを押すと、以下のようなダイアログが表示されるので［URI］にMXMLのXMLスキーマファイルの場所を指定します。スキーマファイルは、Flexをインストールしたディレクトリ/extras/schema/mxml.xsdになるので、各自の環境に合わせて指定してください。URIを入力すると、［Key Type］と［Key］には自動的に値が入るので、そこは変更せずにOKボタンを押します。

画面4 XML Catalogの追加

　ここまでできたら、Eclipseの適当なプロジェクトにMXMLファイルを作成し［Ctrlキー］＋［スペースキー］を押して、以下のようにMXMLのコードアシストが可能になるかどうか確認してください。

画面5 MXMLのコードアシストの確認

Action Script Development Tool（ASDT） Eclipseには、Action Scriptのコードアシストやキーワードの強調表示を可能にするASDTというプラグインがあります。本稿では詳細に解説しませんが、興味のある方はsourceforgeのWebサイトからダウンロードすることができますので試してみてください。ただし、ちゃんと使用するにはフリーのAction Scriptコンパイラ（MTASCなど）を別途インストールして設定することが必要であり、使うのがやや大変です。Flex Builder 2.0では、Action Scriptのコードアシストも可能になります。

・Tomcat起動・停止の設定

　次に、Eclipse上でTomcatを起動・停止できるようにしましょう。実は先ほどインストールしてもらったWTPには、Eclipse上でTomcatを起動・停止する機能が用意されています。Sysdeoなどが提供しているTomcatプラグインを使っても同様のことは実現できますが、今回はせっかくWTPをインストールしたのでこちらを使います。まず、Eclipseのメニューバーのウィンドウから設定を選択します。すると、以下のような設定ダイアログが表示されます。ここで左側のツリーから［Server］→［Installed Runtimes］を選択します。

画面6 Installed Runtimesの設定ダイアログ

　Addボタンを押すと、以下のようなダイアログが表示されるので［Apache］→［Apache Tomcat v5.0］を選択して、次へボタンを押します。

画面 7 Server RuntimeにTomcat v5.0を選択

　すると以下のようなダイアログが表示されるので、［Tomcat installation directory］にTomcatをインストールしたディレクトリを、JREにEclipseで設定しているJREを指定してください。Nameは任意なので好きな名前に変更することもできますが、ここではデフォルトのままにしておきます。入力が終わったら終了ボタンを押します。

画面 8 Server RuntimeにTomcatを追加

JREの指定 JREの指定のところで、場合によっては「JSPファイルをコンパイルするためにTomcatがJDKを欲しがっています。」というメッセージが表示されることがあります。これは、JSPコンパイラがJREには含まれていないために表示されるもので、この場合JREではなくJDKを指定します。Ｅｃｌｉｐｓｅのインストール済みのJREに表示されるJREのロケーションがC:\ProgramFiles以下（Windows環境の場合）などになっている場合、JREが設定されていますのでJDKをインストールしたディレクトリ（ex : C:\j2sdk1.4.2_06など）にロケーションを変更してください。

  以下の設定ダイアログの右側の欄に、いま追加したTomcatが表示されていることを確認し、チェックボックスにチェックを付けてOKボタンを押します。これで、Eclipse上でTomcatを起動・停止する準備が整いました。

画面 9 Tomcatの追加を確認

1/2

INDEX
連載：Flexのクライアントサイドをオープンソースで制覇する（2） 　開発環境の構築とCairngorm Frameworkの動作確認
	Page1　Flexのインストール Eclipse上で開発する準備／Flex Builder 2.0／EclipseとWTPのインストール／XMLエディタの設定／Tomcat起動・停止の設定／JREの指定
	Page2　Cairngorm Frameworkの動作確認 Cairngorm Frameworkのダウンロード／プロジェクトの作成／Antの利用／ログインサンプルの実行

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）