2006/11/16
中垣 茂

連載目次へ >>

　前回に引き続き「Flex Builder 2」について，知っておくと便利なオプション設定やデバッグ方法について説明します。

動作するJava仮想マシンのバージョンを変更する

　Flex Builder 2はEclipseベースなので「JVM（Java Virtual Machine＝Java仮想マシン）」上で動作します。Flex 2 SDKのコンパイラもJVM上で実行されます。デフォルトではFlex Builder 2は付属のJRE1.4のJVM上で実行されますが，例えばサーバーサイドのJava（JRE1.5）とクライアントサイドは，同じ環境で開発したいというニーズはよくあると思います。

　こうした場合はFlex Builder 2の起動設定を変更することで対応できます。Flex Builder 2のJVMのバージョンを変更する方法は二つあります。

方法1．Flex Builder 2のインストール・フォルダ＊1にある「FlexBuilder.ini」ファイルに引数を記述する（図1）。

図1●「FlexBuilder.ini」のサンプル [画像のクリックで拡大表示]

方法2．Flex Builder 2のインストール・フォルダにある「FlexBuilder.exe」のショートカットを作成し，FlexBuilder.exeに引数を渡す（図2）。

図2●「FlexBuilder.exe」の引数サンプル [画像のクリックで拡大表示]

　FlexBuilderの主要な引数は以下の通りです。
【-vm】：動作させるJVMを指定できます
【-data】：開くワークスペースを指定できます
【-vmargs】：JVMに渡す引数を指定できます

　JVMの主要な引数は以下の通りです。
【-Xms】：JVMが確保するヒープメモリーの最小サイズ
【-Xmx】：JVMが確保可能なヒープメモリーの最大サイズ
【-XX:MinHeapFreeRatio】と【-XX:MaxHeapFreeRatio】：ヒープメモリーの空き容量と使用済み領域の比率を特定の範囲内に収めるための設定＊2

　実行しているFlex Builder 2の構成を確認する方法は以下の通りです。

「ヘルプ」メニュー → 「製品の詳細」をクリック → 「Adobe Flex Builder 2 について」ダイアログボックス（図3）の「構成の詳細」をクリック

図3●「製品の詳細」ダイアログ [画像のクリックで拡大表示]

ワークスペースを作成し，オプションを設定する

　「ワークスペース」は，複数のプロジェクトを一つの作業環境で管理するための作業領域のことです。スタンドアローン版のFlex Builder 2は，デフォルトで下記のフォルダがワークスペースになります＊3。

${ユーザープロファイルフォルダ}\My Documents\Flex Builder 2

　上記フォルダの直下には「.metadata」というフォルダが作成され，このフォルダの中にワークスペースの設定各種が保存されます。レジストリやアプリケーション・フォルダには保存されません。

　したがって，異なる設定で複数のワークスペースを作成することも可能です。例えば，開発プロジェクトごとにワークスペースを分けるなどの使い方をします（コラム「快適な作業には2ギガのメモリーが欲しい」を参照）。

　別のワークスペースを作成する方法は以下の通りです。

「ファイル」メニュー → 「ワークスペースの切り替え」をクリック → 適当なフォルダを指定 → 「OK」をクリック

　これでFlex Builder 2が再起動します。

　次に，ワークスペースのオプションの設定にはどのようなものがあるのか，主要なものについて説明をします。ワークスペースのオプションを設定する画面は，「ウィンドウ」メニュー → 「設定」をクリックすると開きます（図4）。

図4●ワークスペースの設定画面 [画像のクリックで拡大表示]

・一般 → Web ブラウザ
　Flex2のアプリケーションを(通常)実行，または，デバッグ実行するときに起動するブラウザを指定できます（図5）。

図5●使用ブラウザの指定 [画像のクリックで拡大表示]

・一般 → エディター
　扱うファイルの文字コードを指定できます。デフォルトは「UT-8」で保存されます（図6）。

図6●文字コード [画像のクリックで拡大表示]

・一般 → エディター → テキスト・エディター → 行番号
　MXMLファイルやActionScriptファイルなどのコードを編集するときに行番号を表示/非表示はここで設定します（図7）。

図7●行番号の表示/非表示設定 [画像のクリックで拡大表示]

・一般 → キー
　ショートカットキーの一覧です。キーの割り当てを変更することもできます（図8）。

図8●ショートカットキー [画像のクリックで拡大表示]

・一般 → 外観 → 色とフォント
　コードを編集するときの文字フォントを設定できます（図9）。

図9●フォント [画像のクリックで拡大表示]

・Flex → エディター
　インデント幅やタブ幅を指定できます（図10）。

図10●インデント幅とタブ幅 [画像のクリックで拡大表示]

・チーム → CVS
　Flex Builder 2にはオープンソースのバージョン管理ツール「CVS（プラグイン）」＊4が標準でインストールされています。Source Forgeなどでのソース管理はここで設定します（図11）。

図11●バージョン管理ツール [画像のクリックで拡大表示]

プロジェクトのオプション

　前回，「MyFirstFlex2」プロジェクトを作成しましたね。このプロジェクトの例で，主要な設定を説明します。プロジェクトのオプションを設定する方法は以下の通りです。

「ナビゲータビュー」（初期配置は左上）で「MyFirstFlex2」を選択 → 「プロジェクト」メニュー → 「プロパティ」をクリック（図12）。

図12●プロジェクトのプロパティ画面 [画像のクリックで拡大表示]

・Flexアプリケーション
　Flexプロジェクトでは複数のメインMXMLを一つのプロジェクトに保存できます（新規作成 → MXML アプリケーション）。その場合に，「プロジェクト実行/デバッグ」で起動されるメインアプリケーションを指定できます（図13）。

図13●Flexアプリケーション [画像のクリックで拡大表示]

・Flexコンパイラ
　コンパイル時のオプションやコンパイラに渡す追加の引数を設定できます（図14）＊5。

図14●Flexコンパイラ [画像のクリックで拡大表示]

・Flexサーバー
　FDS2（Flex Data Services 2）用プロジェクトを作成したときに使用します。

・Flexビルドパス
　開発で使用するソースのパスやライブラリを管理できます。例えば，ワークスペース外にある共有ソースなどを設定することが可能です（図15）。ライブラリはSWC（Flashコンポーネント）ファイルへのパスを指定します（図16）。

図15●Flexビルドパス（ソース） [画像のクリックで拡大表示]

図16●Flex ビルドパス（ライブラリ） [画像のクリックで拡大表示]

　「出力フォルダ」が「bin」の場合はローカルファイルシステム上のファイルをブラウザで開いて実行/デバッグを起動しますが，図17のように「出力フォルダ」に「C:\Inetpub\wwwroot\MyFirstFlex2」を指定し，「出力フォルダ URL」に「http://localhost/MyFirstFlex2/」と指定すると＊6，実行/デバッグがそのURL（のブラウザ）から起動されます＊7。

図17●「出力フォルダ」の設定例

デバッグ方法

　最後にFlex Builder 2の目玉とも言えるデバッグ機能と，関連ビューを説明します。

Step1．サンプル・プロジェクトの取り込み

　まず，効果的にデバッグが試せるプロジェクトを作成する必要があります。一から作ると結構手間がかかりますので，ここではサンプルを利用します。

「ヘルプ」メニュー → 「Flex スタートページ」をクリック → 「サンプルアプリケーション」欄の「他のインストールされたサンプル」をクリック（図18） → 「フォトビューアー」の「プロジェクトを開く」をクリック（図19）

図18●「他のインストールされたサンプル」リンク

図19●「プロジェクトを開く」リンク

　これで，「photoviewer」プロジェクトが自動的に作成されます。

Step2．ブレークポイントの設定

　デバッグにおいて実行を一時停止させるための「ブレークポイント」を設定します。

「photoviewer」プロジェクト → 「samples」フォルダ → 「photoviewer」フォルダ → 「PhotoService.as」（図20）を開く

図20●「PhotoService.as」の場所

　次に「PhotoService.as」の38行目の「resultHandler」関数にブレークポイントを設定します。ブレークポイントを設定する際には，コードビューの左端，もしくは，行番号をダブルクリックするか，同位置で右クリック → 「ブレークポイントの切り替え」をクリックすることでON/OFFを切り替えることができます。ブレークポイントが有効になると青い丸が表示されます。

Step3．デバッグ構成と実行

　デバッグを起動する前に，その構成を少し見ておきましょう。

「実行」メニュー → 「デバッグ」をクリック → 「その他」をクリック

　これで，「構成およびデバッグ」画面が表示されます（図21）。

図21●「構成およびデバッグ」画面 [画像のクリックで拡大表示]

　よく見ると，まだ「photoviewer」が作成されていませんね＊8。

「新規作成」をクリック → 新たに作成された構成情報の「名前」に「photoviewer」と入力（図22） → 「適用」ボタンをクリック → 「デバッグ」ボタンをクリック

図22●「photoviewer」の実行/デバッグ構成画面 [画像のクリックで拡大表示]

　これで，「photoviewer」が作成されます。

Step4．ステップ実行と変数のデバッグ

　デバッグを実行し，ブレークポイントで停止すると図23のような画面が表示されます。こうした，各開発モードで使用するビューのセットを，パースペクティブと呼びます。デバッグの際にはパースペクティブを「Flex開発」から「Flexデバッグ」に変更します。図23の画面で「はい」をクリックしてください。

図23●パースペクティブの変更確認画面

　パースペクティブが「Flex デバッグ」に切り替わるといろいろとビューが追加されます（図24）。デバッグにおける主なビューを簡単に説明していきます。

図24●「Flex デバッグ」用パースペクティブ [画像のクリックで拡大表示]

　図24の(1)では，「デバッグ」ビューでステップ実行やデバッグの停止やスレッドの実行などをコントロールします。ツリーを展開すると図25のようにメインスレッドの情報が表示されます＊9。

図25●デバッグ情報とコントロールボタン

・「再開」はスレッドが実行されます。
・「終了」はデバッグそのものを終了します。
・「ステップイン」は停止位置がメソッドであった場合に，さらにそのメソッドの内部に入ってステップ実行します。
・「ステップオーバー」は現在の行を実行し，次の行で停止します。
・「ステップアウト」はステップインなどでメソッドの内部に入った場合にそのメソッドを最後まで実行し，そのメソッドを実行したライン，又は，次の行で停止します。

　図24の(2)には複数のビューがまとめられています。一番重要なのは「変数」ビューです。前述の「デバッグ」ビューで「メインスレッド」のすぐ下の行を選択すると「変数」ビューに変数の型情報や変数の中身がツリー形式で表示されます（図26）。

図26●「変数」ビュー [画像のクリックで拡大表示]

　「this」は表示しているコンポーネント，又は，アプリケーションそのものを表します。変数のスコープによって色分けがされおり，大変重宝します。「式」ビューには変数に独自の計算式を加えた値を表示することが可能ですが，ここでは省略します。

　図24の(3)は，trace関数などで指定したトレース情報を表示する「コンソール」ビューです。「変数」ビューと「コンソール」ビューをうまく使い分けることで効果的，かつ，効率的にデバッグできます。

　以上，第2回と第3回で，「Flex Builder 2」の基本的な使い方や機能を説明しました。さぁ，いろいろいじってどんなことができるのか試してみましょう！

　次回からは，MXMLベースのサンプルを使用して，プログラミングの基本的な作法や，コンポーネント（＝クラス）の使い方について解説していきます。お楽しみに。

快適な作業には2ギガのメモリーが欲しい 　一つのワークスペース内に大量のプロジェクトを作成するのはお勧めしません。著者も簡単なサンプル・プロジェクトを一つのワークスペース内に30個以上作成したことがあるのですが，使用しているうちにメモリー使用量が600メガを超えてしまいました。メモリーを1ギガ積んでいるノートパソコンでしたが，ここまで一つのアプリに占有されてしまうとOSの動作も遅くなり，作業効率が下がってしまいます。快適な作業のためにはメモリーを2ギガバイトほしいところですが，ノートパソコンのメモリーはデスクトップよりも割高です。なので，ワークスペースを分けるなどして工夫する必要があります。 　大きめのアプリケーション（多数のMXMLファイルやASファイル，さらには画像ファイルなどがある）を開発する場合はそれなりのスペックのあるデスクトップ・パソコンで開発するほうが良いでしょう。開発作業中は，コンパイル処理は言うまでもなく，MXMLファイルやASファイルを開くにもメモリーを消費し，ディスクI/Oも発生します。この動作の処理時間はトータルすると決してばかになりません。 　なので，Flex2開発者にはそれなりのスペックのパソコンを支給してあげてください。ただし，「速くなったのだから，それだけ仕事してね」というプレッシャーはかけないほうが良いかもしれません。