CodeZine(コードジン)

特集ページ一覧

サンプルソースで理解する! Flash Builder 4新機能チュートリアル

Flex 4マスターシリーズ

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/05/26 14:00

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

本稿は、Adobe Developer Connection「Flex 4マスターシリーズ #02 Flash Builder 4 新機能」の転載記事です。「Flex 4マスターシリーズ」の他の記事を読みたい方はコチラからどうぞ。

はじめに

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

必要なもの

Flash Builder 4 Premium Edition
※編集部注

Flash Builder 4のインストール方法等は、下記の記事で紹介しています。

新機能紹介

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

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

移動リファクタリング(サンプルプロジェクト : RefactoringSample.fxp)

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

図 01. RefactoringSampleプロジェクトのパッケージ
図 01. RefactoringSampleプロジェクトのパッケージ

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

図 02.パッケージエクスプローラーのメニュー
図 02.パッケージエクスプローラーのメニュー

 「移動」のダイアログボックスが表示されますが、移動先パッケージを指定して[OK]ボタンを押すと、クラスファイルが指定パッケージに移動されます(com.adobe.containerパッケージを指定)。

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

図 03. 「移動」ダイアログボックス
図 03. 「移動」ダイアログボックス

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

図 04. 「移動」ダイアログボックス
図 04. 「移動」ダイアログボックス
図 05. 「移動」リファクタリングのプレビュー
図 05. 「移動」リファクタリングのプレビュー

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

図 06. RefactoringSampleプロジェクトのパッケージ
図 06. RefactoringSampleプロジェクトのパッケージ

条件付きブレークポイント(サンプルプロジェクト : ConditionalBreakpointsSample.fxp)

 ブレークポイントを設定する任意のコード行に対して、マーカーバーでダブルクリックしてブレークポイントを追加します(マーカーバーは、コードエディタの左端に沿ってあります)。ブレークポイントマーカーは、マーカーバーとFlashデバッグパースペクティブの「ブレークポイントビュー」のブレークポイントの一覧に追加されます。

 デバッガがブレークポイントを検出すると、アプリケーションが中断され、Flashデバッグパースペクティブが表示されます。また、コードエディタで、ブレークポイントのマークが付いたコード行がハイライト表示されます。

図 07. ブレークポイントを設定
図 07. ブレークポイントを設定

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

図 08. マーカーバーのメニュー
図 08. マーカーバーのメニュー

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

図 09. 「ブレークポイントプロパティ」ダイアログボックス
図 09. 「ブレークポイントプロパティ」ダイアログボックス

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

図 10. 「ヒット数」チェックボックスを選択して、正の整数を入力
図 10. 「ヒット数」チェックボックスを選択して、正の整数を入力

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

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

図 11. 「条件を使用する」チェックボックスを選択して、条件式を入力
図 11. 「条件を使用する」チェックボックスを選択して、条件式を入力

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

図 12. 「条件値の変更」ラジオボタンを選択
図 12. 「条件値の変更」ラジオボタンを選択

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

監視ポイント(サンプルプロジェクト : WatchPointsSample.fxp)

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

図 13. 「変数」ビューのメニューから「監視ポイントを切り替え」を選択
図 13. 「変数」ビューのメニューから「監視ポイントを切り替え」を選択

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

図 14. 「ブレークポイント」ビューの監視ポイント
図 14. 「ブレークポイント」ビューの監視ポイント

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

図 15. 変数numが登録されているので、numの値が変化した直後にブレークされる
図 15. 変数numが登録されているので、numの値が変化した直後にブレークされる

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

図 16. 「式」ビューのメニューから「監視ポイントを切り替え」を選択
図 16. 「式」ビューのメニューから「監視ポイントを切り替え」を選択

指定行まで実行(サンプルプロジェクト : RunToLineSample.fxp)

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

図 17. 任意のコード行でブレークポイントを使用して、アプリケーションを中断
図 17. 任意のコード行でブレークポイントを使用して、アプリケーションを中断

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

図 18. エディタのメニューから「指定行まで実行」を選択
図 18. エディタのメニューから「指定行まで実行」を選択

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

図 19. 指定行まで実行されて、アプリケーションが中断される
図 19. 指定行まで実行されて、アプリケーションが中断される

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

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

  • すべての演算子(is演算子や===演算子など)
  • 正規表現
  • EX4
図 20. 「監視式を編集」ダイアログボックス(is演算子で評価)
図 20. 「監視式を編集」ダイアログボックス(is演算子で評価)
図 21. 「監視式を編集」ダイアログボックス(EX4で出力)
図 21. 「監視式を編集」ダイアログボックス(EX4で出力)
図 22. 「監視式を編集」ダイアログボックス(正規表現で評価)
図 22. 「監視式を編集」ダイアログボックス(正規表現で評価)

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

図 23. 「式」ビュー(図20監視式の結果)
図 23. 「式」ビュー(図20監視式の結果)
図 24. 「式」ビュー(図21監視式の結果)
図 24. 「式」ビュー(図21監視式の結果)
図 25. 「式」ビュー(図22監視式の結果)
図 25. 「式」ビュー(図22監視式の結果)

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

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

図 26. プロファイリングを実行
図 26. プロファイリングを実行

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

図 27. プロファイラー設定のダイアログボックス
図 27. プロファイラー設定のダイアログボックス

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

図 28. 量産されたボタン
図 28. 量産されたボタン

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

図 29. 「プロファイル」ビュー
図 29. 「プロファイル」ビュー

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

図 30. 「プロファイル」ビューの「メモリのスナップショット」
図 30. 「プロファイル」ビューの「メモリのスナップショット」

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

図 31. 「メモリのスナップショット」ビュー
図 31. 「メモリのスナップショット」ビュー

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

図 32. 「オブジェクト参照」ビュー
図 32. 「オブジェクト参照」ビュー

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

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

図 33. 「オブジェクト参照」ビュー(GCルートへのパスを確認)
図 33. 「オブジェクト参照」ビュー(GCルートへのパスを確認)

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

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

図 34. メモリリークの原因になっているコード行をコメントアウト
図 34. メモリリークの原因になっているコード行をコメントアウト

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

図 35. 「オブジェクト参照」ビュー
図 35. 「オブジェクト参照」ビュー

おわりに

 以上がFlash Builder 4の新機能の一部でした。

 Flex Builder 3と比べて、細かいところにまで手が届くかのように、機能が強化されたことに気付いていただけたかと思います。これらのチュートリアル、サンプルコードを試すことによって、Flash Builder 4での開発効率は格段に上がるでしょう。

「FlexではじめるRIA開発」特集、絶賛公開中!
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 廣畑 大雅 (taiga)(ヒロハタ タイガ)

    taiga.jp フリーランスの Web ディレクター/デザイナー。 Flash コンテンツ、Flex アプリケーションの設計/開発を中心に活動中。 Adobe 公式ユーザグループ F-site にも懇親会専用スタッフとして活動する。

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5