Adobe AIRで作るデスクトップアプリケーション

第3回Flex Builderによる開発

Flex BuilderとApolloエクステンションのインストール

前回はApolloアプリケーションの開発環境としてSDKを紹介しました。もう1つの開発環境がFlex Builderです。Flex BuilderはもともとFlashベースのWebアプリケーションを開発するためのツールですが、Flex Builder 2.0.1にApolloエクステンション(機能拡張)をインストールすることでApolloアプリケーションの開発が可能になります。統合開発環境なのでSDKと比べて開発効率も良く、扱いも簡単です。トライアル版がダウンロードできるので試してみましょう。

残念ながらFlex Builder 日本語版はApolloエクステンションとの動作確認が行われていないため、現時点では英語版を使ったほうが無難です(ただし自己責任の範囲であれば、アドビの上条さんのブログで日本語版を使用する手順が紹介されています⁠⁠。Flex Builderをインストールしたら、Adobe LabsからApolloエクステンション(Apollo Extension for Adobe Flex Builder 2.0.1)をダウンロードしてインストールしましょう。

プロジェクトの作成

Flex BuilderでApolloアプリケーションを開発するには、まず新規プロジェクトを作成します。

  1. ⁠File]メニューの[New]から[Apollo Project]を選びます。新規プロジェクトウィザードが表示されます。

    画像
  2. アプリケーションのデータへのアクセス方法は[Basic]のまま[Next]をクリックします。

    画像
  3. プロジェクト名を入力します。ここではTestAppとしました。⁠Next]をクリックします。

    画像
  4. ソースファイルやコンパイル先のパス等を指定できますが、デフォルトのままで構いません。⁠Next]をクリックします。

    画像
  5. アプリケーションの情報を入力します。この情報はアプリケーションのインストール時に使われます。IDはApolloアプリケーションを識別するためのもので、ユニークな値が求められます。ドメイン名を逆にした反転ドメインを利用するとよいでしょう。以下、順番にアプリケーション名、発行元、アプリケーションの説明、コピーライトを入力したら[Finish]をクリックします。

    画像

アプリケーションの制作とテスト

Flex Builderでは、各種コンポーネントをMXMLというタグ言語でレイアウトしてアプリケーションを組み立てます。プロジェクトを作成した直後は数行のMXMLが表示された状態になっており、最初からアプリケーションの土台となる部分が用意されているわけです。そのまま実行すればApolloアプリケーションのウィンドウのみが表示されますが、それでは寂しいのでテキストを入れてみましょう。

TestApp.mxmlと書かれたタブの下にある[Design]ボタンをクリックしてデザインモードに切り替えます。これはMXMLを直接編集することなくコンポーネントを視覚的にレイアウトできるモードです。

デザインモードではコンポーネントの配置やプロパティの変更が楽に行える
デザインモードではコンポーネントの配置やプロパティの変更が楽に行える

画面左下の[Components]ビューからLabelコンポーネントを配置して「Hello again !」と入力します。フォントサイズ等のプロパティは画面右の[Flex Properties]ビューで変更可能です。⁠Source]ボタンをクリックしてソースモードに戻れば、今配置したコンポーネントがMXMLに反映されていることが分かるでしょう。作業が終わったら保存して[Run]ボタンまたは[Debug]ボタンをクリックしてみましょう。すると作成中のアプリケーションが起動して動作チェックができます。

[Run]ボタン(左)[Debug]ボタン(右⁠⁠。trace()やブレイクポイントを使ってデバッグを行うときは[Debug]ボタンを使う
[図][Run]ボタン(左)と[Debug]ボタン(右)。trace()やブレイクポイントを使ってデバッグを行うときは[Debug]ボタンを使う
実行中のアプリケーション
実行中のアプリケーション

アプリケーションのパッケージング

アプリケーションが完成したら、Flex BuilderからAIRファイルとして書き出すことができます。

  1. [File]メニューから[Export...]を選ぶと書き出しウィザードが表示されます。

    画像
  2. [Deployable AIR file]を選択し、⁠Next]をクリックします。

    画像
  3. AIRファイルの書き出し先を指定し、⁠Finish]をクリックするとAIRファイルが作成されます。

    画像

以上がFlex Builderを使ったApolloアプリケーション開発の流れです。

おすすめ記事

記事・ニュース一覧