Flex2でWebアプリ開発(1)
 1/2

モックを3日で仕上げるFlex2とは?



クラスメソッド
成瀬 勉
2006/11/16

 Adobe Flex2(以下Flex2)はFlashをベースとしたRIAを開発するための開発ツールです。Flex1(Flashベースのリッチクライアントを体験(1))と比べてどこがバージョンアップされたかを一言で表すなら、開発効率がぐんと向上したことでしょう。私自身、これまで3週間かかっていたWebアプリケーションのモックの開発工程が3日になったという経験があります。

 本連載はFlex2の特徴的な機能を用いたサンプルの作成を通して、基本的なFlex2アプリケーションの開発手法を解説します。インストールの説明からスタートし、最後には、Flex2のCSSやカスタムコンポーネント、データグリッドを用いて、YouTubeと連携できる簡単なWebアプリの作成の仕方を紹介したいと考えております。では、まずはFlex2のインストールとHello Worldを表示する簡単なWebアプリの作成方法をお伝えします。

Adobe Flex Builder 2とは

 Adobe Flex Builder 2(以下Flex Builder 2)とは、EclipseベースのFlex2のIDE(統合開発環境)です。

 Flex2 SDKは無償で提供されていますので、テキストエディタとコマンドラインのみでFlex2アプリケーションの開発を行うことは可能です。しかしFlex Builder 2にはコードデバッガやWYSIWYGエディタが搭載されているため、非常に効率的にFlex2アプリケーション開発を行うことができます。

Flex Builder 2のダウンロード

 Flex Builder 2のトライアル版はアドビのサイトからダウンロードすることができます。Adobe IDの取得が必要ですが、無料で30日間すべての機能を評価することができます。現在はWindows版のみしか提供されていませんが、Linux版やMacOS版も今後提供される予定です。

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

 「with Charting」というのはFlex2の表現力を活用したチャートコンポーネント群を指します。こちらはFlex Builder 2には標準で含まれないため別途購入する必要がありますが、Flex Builder 2と同様に体験版で評価することが可能です。

Flex Builder 2のインストール

 サイトからダウンロードした「FLXB_2.0_Win_JPL.exe」を実行します。

 インストールウィザードが起動するので、指示に従いインストールを進めます。

 途中でインストールセットの選択が表示されます。Flex Builder 2の動作方式にはスタンドアローン方式とプラグイン方式の2つがあり、Flex Builder 2はEclipseの環境として動くため、すでにEclipseの環境がある方はプラグイン方式を選択することができます。それ以外の場合はスタンドアローン方式である「Flex BuilderおよびFlexSDK」を選択します。Flex SDKのみをインストールしたい場合はどちらを選択しても構いません。

画面1 Adobe Flex Builder2のインストール画面(画面をクリックすると拡大します)

 また、途中でFlashPlayer 9のデバッグバージョンのインストール選択の画面が表示されます。InternetExplorer用とNetscape、Firefox用の両方にチェックが入っていることを確認します。FlashPlayer 9のデバッグバージョンをインストールすることで、ランタイムエラーの表示やデバッグ機能を利用することができるようになります。

画面2 FlashPlayer 9のデバッグバージョンもインストールしておくといい(画面をクリックすると拡大します)

  最後にColdFusion拡張機能を使うための説明を見るかどうかの確認ダイアログが表示されますが、どちらを選んでも構いません。

 以上でFlex Builder 2のインストールは終了です。

 以上の作業が完了したらFlex Builder 2を「スタート→すべてのプログラム→Adobe→Adobe Flex Builder 2」から起動します。

画面3 トライをクリックするとFlex Builder2が起動する

 シリアル番号の入力ダイアログが表示されますが、体験版を利用する場合は「トライ」を押すとFlex Builder 2が起動します。

画面4 Flex Builder2の起動画面(画面をクリックすると拡大します)

1/2

 INDEX

Flex2でWebアプリ開発(1)
モックを3日で仕上げるFlex2とは?
Page1
Adobe Flex Builder 2とは/Flex Builder 2のダウンロード/Flex Builder 2のインストール
  Page2
サンプルアプリケーションの起動/単純なアプリケーション作成




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間