Flashベースのリッチクライアントを体験
(3) 1/2

Flex Builderで新規アプリの開発に着手しよう



電通国際情報サービス
比嘉 康雄
2005/6/10

 「Macromedia Flex」(以下、Flex)は、J2EEアプリケーション・サーバ上で動作するプレゼンテーション・サーバであり、XMLのタグベースでFlashによるユーザー・インターフェイスを定義します。マクロメディア社から提供されているHTMLオーサリングツール「Macromedia Dreamweaver」をベースとした開発ツールが用意されており、それが今回紹介する「Macromedia Flex Builder」(以下、Flex Builder)になります。WYSIWYGにデザインすることができるため、非常に快適に開発を進められます。

 前回の記事「Flex開発環境「Flex Builder」のセットアップ」で、FlexBuilder 1.5 英語版のトライアル版をインストールしていると思いますが、まだの方はインストールしておいてください。

ひな型(flex.war)のインストール

 前回は、既存のサイト(samples.war)を使いましたが、今回はひな型をベースに新規にサイトを作成してみましょう。Tomcatが起動している場合は、いったん停止させます。停止させたら、「C:\Program Files\Macromedia\Flex\flex.war」(注1)を「C:\Program Files\Apache Software Foundation\Tomcat 5.0\webapps」(注1)に「flex-example.war」という名前でコピーします。

注1:ここでは前回の記事で解説したインストール環境を想定しています。パスは必要に応じて各自の環境に変更してください。
画面1 flex.warのコピーとリネーム(画面をクリックすると拡大します)

 Tomcatを起動し、新たにflex-exampleフォルダが作成されたことを確認します。これでflex-exampleという空のサイトが作成されました。Flexはwarファイルのままでは動作しません。いったん解凍する必要があります。Flexで開発する場合は、flex.warをひな型にするとよいでしょう。

画面2 flex-exampleディレクトリ(画面をクリックすると拡大します)

サイトの設定

 Flex Builderで開発を始めるときには「サイトの設定」を行う必要があります。サイトの設定について自信のない方は、前回の記事をもう一度復習してください。今回の設定は次のようになります。

入力項目 説明
Site name flex-example
Local root folder C:\Program Files\Apache Software Foundation\Tomcat 5.0\webapps\flex-example\
Flex server root folder C:\Program Files\Apache Software Foundation\Tomcat 5.0\webapps\flex-example\
URL prefix http://localhost:8080/flex-example/
表1 Flex Server Site Setupの設定

 環境設定が終わったので、次はいよいよFlex Builderを使ったアプリケーションの作成に入ります。(次ページへ続く)

1/2

 INDEX

Flashベースのリッチクライアントを体験 第3回
Flex Builderで新規アプリの開発に着手しよう
Page1
ひな型(flex.war)のインストール
サイトの設定
  Page2
アプリケーション作成
まとめ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間