Flex 4 マスターシリーズ #02 Flash Builder 4 新機能

Flex 4 マスターシリーズ 連載記事一覧

• #01 MXML 2009
• #02 Flash Builder 4 新機能
• #03 Flex 4 ステート
• #04 Flex 4 CSS
• #05 Spark コンポーネント
• #06 データ中心型開発（DCD） Part1
• #07 Spark Skining part 1
• #08 Spark Skining part 2
• #09 Flex 4 エフェクト
• #10 Flex 4 Spark Layouts
• #11 FlexUnit 4
• #12 データ中心型開発（DCD）Part2

はじめに

このチュートリアルでは、Flash Builder 4 の新機能について紹介します。
Flex Builder 3 から追加された主な項目について、チュートリアルを交えながら解説していきます。

新機能紹介

Flash Builder 4 では、Flex Builder 3のリファクタリング、デバッグ、プロファイラーについて、最も要望の多かった機能強化を行いました。

• リファクタリング機能
  • 移動リファクタリング
• デバッグ機能
  • 条件付きブレークポイント
  • 監視ポイント
  • 指定行まで実行
  • 式評価
• プロファイラー機能 (Premium Editionのみ )
  • オブジェクト参照

 ( サンプルプロジェクト : RefactoringSample.fxp )

以下のようなプロジェクトを用意して、com.adobe.control パッケージの MyComponent クラスを com.adobe.container パッケージに移動します。

MyComponent.as を選択して、パッケージエクスプローラーのメニューを開き、「移動」を選択します。

「移動」のダイアログボックスが表示されますが、移動先パッケージを指定して [OK] ボタンを押すと、クラスファイルが指定パッケージに移動されます。( com.adobe.container パッケージを指定 )
このとき、「参照を更新」チェックボックスは、デフォルトで選択されている状態になっているので、移動したクラスファイルはリファクタリングされますが、「参照を更新」チェックボックスを非選択状態にして [OK] ボタンを押すと、リファクタリングされず、クラスファイルのパッケージ移動のみ行われます。

また、「文字列リテラル内のテキスト発生を更新（プレビューを強制）」チェックボックスを選択して [プレビュー] ボタンを押すと、リファクタリング対象の情報を確認することができます。

com.adobe.container パッケージに MyComponent.as が移動されリファクタリングされました。

( サンプルプロジェクト : ConditionalBreakpointsSample.fxp )

ブレークポイントを設定する任意のコード行に対して、マーカーバーでダブルクリックしてブレークポイントを追加します。( マーカーバーは、コードエディタの左端に沿ってあります。 ) ブレークポイントマーカーは、マーカーバーと Flash デバッグパースペクティブの「ブレークポイントビュー」のブレークポイントの一覧に追加されます。
デバッガがブレークポイントを検出すると、アプリケーションが中断され、Flash デバッグパースペクティブが表示されます。また、コードエディタで、ブレークポイントのマークが付いたコード行がハイライト表示されます。

条件付きブレークポイントを設定するには、ブレークポイントがマークされている行でマーカーバーのメニューを開き、「ブレークポイントプロパティ」を選択します。

「ブレークポイントプロパティ」のダイアログボックスが表示されます。
「有効」チェックボックスは、マークしているブレークポイントの有効 / 無効を切り替えます。

「ヒット数」チェックボックスは、選択すると数字入力テキストインプットが有効になり、正の整数を入力することができます。 ( 下記図では「 50 」を入力 )

コードをデバッグすると、ブレークポイントのマークが付いたコード行が、入力した値の回数実行されたときに、初めてブレークポイントが検出され、アプリケーションが中断され、Flash デバッグパースペクティブが表示されます。( このとき、コード行の処理直前でアプリケーションが中断されるため、コンソールの行末には「 trace : 48 」と出力されているはずです。 )

「条件を使用する」チェックボックスは、選択すると条件式テキストインプットが有効になり、条件や trace() を入力することができます。 ( 下記図では「 i == 50 」を入力 )

コードをデバッグすると、ブレークポイントのマークが付いたコード行が実行されかつ、入力した条件式が true を返したときに、ブレークポイントが検出され、アプリケーションが中断され、Flash デバッグパースペクティブが表示されます。( このとき、コード行の処理直前でアプリケーションが中断されるため、コンソールの行末には「 trace : 49 」と出力されているはずです。 )

「条件値の変更」ラジオボタンを選択した場合は、入力した条件式の評価が変化したときにブレークポイントが検出さるので、図 12. の例では、i の値が 50 のときと、51 のときと 2 回ブレークポイントが検出されます。

( サンプルプロジェクト : WatchPointsSample.fxp )

監視ポイント機能を使用するためには、最初に監視対象の変数を登録します。デバッグ中のアプリケーションを、ブレークポイントを使用して中断させているときに、「変数」ビューのメニューから「監視ポイントを切り替え」を選択することによって登録することができます。( 図 13. の例では、変数 num を監視ポイントのターゲットとして登録しています。 )

監視ポイントが追加されると、「ブレークポイント」ビューに登録されます。

監視ポイントを登録することによって、監視対象の変数の値が変化するたびに、値が変化した直後のコード行でアプリケーションが中断されます。

また、「監視ポイントを切り替え」の切り替えは、「式」ビューから登録することもできます。

( サンプルプロジェクト : RunToLineSample.fxp )

アプリケーションが中断されている状態から、「指定行まで実行」機能を使えるようになりました。

次にブレークさせたいコード行までキーカーソルを移動させて、エディタのメニューを開き「指定行まで実行」を選択します。

指定行までコードを実行して、再度アプリケーションが中断されました。

( サンプルプロジェクト : ExpressionEvaluatorSample.fxp )

「式」ビューで扱える機能が大幅に改善され、以下のような ActionScript 式のサポートが使用できるようになりました。

• すべての演算子 ( is 演算子や === 演算子 など )
• 正規表現
• EX4

ブレークポイントを使用して、アプリケーションを中断することにより、監視式の出力結果を確認することができます。

(Premium Editionのみ ) ( サンプルプロジェクト : ObjectReferencesSample.fxp)

プロファイラーの「オブジェクト参照」機能が改善され、指定オブジェクトの GC (Garbage Collection) ルートからのパス一覧が表示できるようになりました。

プロファイラー設定のダイアログボックスが表示されたら、すべてのチェックボックス項目にチェックします。[ 再開 ] ボタンを押すと、プロファイリングが始まります。

サンプルプロジェクトを実行すると、真っ白な画面が表示されるので、好きなところをクリックしてください。クリックした位置にボタンが生成されます。ボタンをクリックすると、ボタンは破棄されます。

量産されたボタンをすべて削除します。このとき、メモリリークが発生していないかを調べます。「プロファイル」ビューを開き、実行中のプロファイルを選択して、[ メモリのスナップショット ] ボタンを押します。

「メモリのスナップショット」が作成されるので、選択してダブルクリックします。

ダブルクリックすることにより、「メモリのスナップショット」ビューが表示されます。

サンプルアプリケーションで量産されたボタンのクラス名は MoveButton です。このクラスを選択してダブルクリックすることにより、「オブジェクト参照」ビューが表示されます。

さきほど、量産されたボタンはすべて削除したのにも関わらず、多くのインスタンスが残りメモリリークを起こしています。このメモリリークの原因を探るために「オブジェクト参照」は役に立ちます。

GC ルートへのパスを確認するため、[ プラス (+)] ボタンを押してインスタンスを展開します。

インスタンスを展開すると、サンプルプロジェクトの MoveButton.mxml の 21 行目に原因があることが確認できるはずです。

メモリリークの原因になっているコード行をコメントアウトして、再度プロファイリングを行い、同じ手順を踏んで、メモリリークが発生するかを確認します。

「オブジェクト参照」ビューで、メモリリークが解消されたことが確認できました。

「おわりに」

以上がFlash Builder 4 の新機能の一部でした。
Flex Builder 3 と比べて、細かいところにまで手が届くかのように、機能が強化されたことに気付いていただけたかと思います。

これらのチュートリアル、サンプルコードを試すことによって、Flash Builder 4 での開発効率は格段に上がるでしょう。