アクセシビリティ
デベロッパーリソース

Flex アプリケーションのクライアントコードをデバッグする

Eric Anderson

Adobe

マクロメディア Flex の RIA (Rich Internet Application) アーキテクチャは、マクロメディア Flash Player のパワーと高い普及率を生かして、リッチで魅力的なインターネットアプリケーションを実現します。 Flex の登場により、 RIA 開発はこれまでになく簡単になりました。しかし開発者にとっては、クライアントの Flash Player で動作する ActionScript コードのデバッグが新たな課題となっています。

この記事では、クライアントサイド Flex アプリケーションのデバッグに必要なコンポーネントについて、そのインストールと設定手順を紹介します。また、クライアントで動作するアプリケーションをシンプルかつ効率よくデバッグする便利な方法を解説します。

Flex の RIA 開発アーキテクチャでは、アプリケーションをデバッグするいくつかの手段が用意されています。例えば Flex サーバーは、リモートオブジェクト呼び出しや Web サービス呼び出し、 HTTP リクエストをデバッグする豊富な機能を備えています。また Flex では、 AMF (Action Message Format) デバッグゲートウェイを利用して、 AMF による Flash Remoting 呼び出しのデバッグが可能です。さらには、 SWF ムービーの詳細なパフォーマンスチューニングのための SWF プロファイラーも利用できます。こうしたデバッグ機能のうち、この記事では Flex が生成した SWF ムービーをデバッグするテクニックにフォーカスして説明します。

この記事は2004年3月15日公開の英文記事の翻訳です。内容には、現状にそぐわない記述、リンク切れ、環境要件が古いものが含まれていることがありますので、ご了承下さい。

この記事に必要なもの

このチュートリアルでは、次のソフトウェアやファイルをインストールする必要があります。

Macromedia Flex

Macromedia Flash Player

Flash Debug Player のインストール

Flex のコマンドライン ActionScript デバッガ (fdb) では、デバッグ情報を ログ出力する手段として Flash Debug Player を利用します。そこで以下、 Flash Debug Player を設定してデバッグ環境を構築する手順を説明します。

まずは、開発に用いるブラウザにインストールされた Flash Debug Player のバージョンを確かめます。以下の Flash ムービーは、お手元のブラウザで動作している Flash Player のバージョンを表示するためのものです。右下にある「 I 」をクリックし、表示される情報をスクロールダウンして、以下に示す Flash Debug Player のバージョン情報を確認してください。

To view this movie, you need the latest version of the Macromedia Flash Player and JavaScript enabled. Download the free Macromedia Flash Player now >

この Flash ムービーでは、標準の Flash Player の場合は「 isDebugger:false 」、 Flash Debug Player の場合は「 isDebugger:true 」と表示します。 Flex では、バージョン 7,0,14,112 以降の Flash Debug Player が必要です。この条件に合致する Flash Debug Player がインストール済みであれば、以降の説明をスキップして「 Flash Debug Player の設定」セクションに進んでください。

インストールされていなければ、いまブラウザにインストールされている標準の Flash Player をアンインストールする必要があります。そのためには、 {flex.rootdir}/bin ディレクトリにある Flash アンインストールユーティリティ ( ファイル名 uninstall_flash_player.exe) を実行します。なおここで、 {flex.rootdir} とは Flex のインストール先ディレクトリを表します。通常 Windows では、同ユーティリティは C:\Program Files\Macromedia\Flex\bin に配置されます。

つづいて、 /bin ディレクトリにある Flash Debug Player をインストールします。 Internet Explorer の場合は ActiveXインストーラ ( ファイル名 Install Flash Player 7 AX.exe) を実行し、それ以外のブラウザ (Opera や Mozilla など)の場合は Flash プラグインインストーラ ( ファイル名 Install Flash Player 7.exe) を実行してください。

注： Flash Debug Player は、 Windows XP および Windows 2000 対応の Flex にのみ付属しています。 Linux 版は今年後半にリリースの予定です。

Flash Debug Player の設定

Flash Debug Player は、エラーやトレースの情報をログファイルに出力するエラーレポート機能を備えます。デフォルト設定では、同プレイヤーが動作するローカルマシンに flashlog.txt というファイル名でログを保存します。この Flash Debug Player のエラーレポート機能を正しく動作させるには、環境変数 HOMEDRIVE および HOMEPATH が示す場所が読み書き可能である必要があります。 Windows 2000 マシンや Windows XP マシンでは多くの場合、 HOMEDRIVE はシステムディスクのある C ドライブを、そして HOMEPATH はホームディレクトリのある \Documents and Settings\ ＜ユーザー名＞ をそれぞれ指しているはずです。

ただし、 Windows ドメイン設定やローカル設定の違いにより、 これらの環境変数の値が異なるか、設定せれていないことがあります。その場合は、各変数に値を設定してください。 Windows における環境変数の設定方法を以下に示します。

  1. デスクトップもしくはエクスプローラのマイコンピュータを右クリックします。
  2. メニューから [ プロパティ ] を選択します。
  3. [ 詳細設定 ] タグを選択します。
  4. [ 環境変数 ] ボタンをクリックします。
  5. ユーザー環境変数の [ 新規 ] もしくは [ 編集 ] ボタンをクリックし、環境変数 HOMEDRIVE および HOMEPATH に適切な値を設定します。
  6. マシンを再起動します。

環境変数 HOMEDRIVE および HOMEPATH の値が変わらない場合は、管理者に依頼して、読み書き可能なアクセス権を持つ場所にこれらの変数を設定してもらう必要があります。

Flash Debug Player のエラーレポート機能を動作させるには、 Flash デバッグ設定ファイルを作成します。 mm.cfg という名称のファイルを作成し、 HOMEDRIVE および HOMEPATH が指す場所 ( 例えば c:\Documents and Settings\ ＜ユーザー名＞ \mm.cfg など ) に置きます。この mm.cfg ファイルには、以下のような設定を記述して、デフォルトのエラーおよびトレースログ機能を動作させます。

TraceOutputFileEnable=1

ErrorReportingEnable=1

mm.cfg ファイルが正しい場所に配置されていないと、 flashlog.txt ファイルへのエラーメッセージ出力が働きません。なおこのログファイルは、デフォルトでは mm.cfg ファイルと同じディレクトリに作成されます。

注： Flash Debug Player では、 flashlog.txt ファイルへ出力するエラーメッセージの数を、 SWF ファイルの起動ごとに 100 件に制限しています。このデフォルト値を変更するには、 mm.cfg ファイルで MaxWarnings プロパティを指定します。以下の例では、最大数を 500 としています。

MaxWarnings=500

注： MaxWarnings=0 と指定することで、 flashlog.txt ファイルに出力するメッセージ数の制限を解除できます。

また、 TraceOutputFileName= ＜保存先ディレクトリ名＞ / ＜任意のファイル名＞ と記述することで、 flashlog.txt ファイルを任意の場所に出力できます。以下は、 c:\ の下に flexlog.log というファイル名で保存する設定例です。

TraceOutputFileName=c:\flexLog.log

Flash Player の trace 関数

Flash Debug Player では、 trace 関数 を利用することで flashlog.txt ファイルに簡単なログを出力できます。この trace 関数 は、デバッグ作業時に変数の値やその他の診断情報を flashlog.txt に記録する手段として使えます。以下の簡単な ActionScript の例では、 TestEffectHandler 関数 の中で trace 関数を呼び出しています。

function TestEffectHandler(): Void {
            var counter:Number;
            var tempCounter:Number = 0;;
            for (counter=0; counter<5; counter++) {
                        tempCounter=counter+tempCounter;    
                        trace("Counter = " + counter);
                        }
            debugText.text = "Total Counted = " + tempCounter.toString();
}

この関数を呼び出すと、 flashlog.txt には以下のデータが書き込まれます。

Flex の XMLObjectOutput ユーティリティ

trace 関数は、簡単なデータ型や情報を表示する手段としては便利なものの、モデルやツリーといった複雑なデータ構造のデバッグには不便です。そこで Flex では、こうしたデータ構造の情報を解析する手段として、 XMLObjectOutput と呼ばれるユーティリティを提供しています (Flex のドキュメントには掲載されていません ) 。このユーティリティは、 XML オブジェクト、配列、そしてその他の ActionScript オブジェクトの値や属性をトレースし、簡単な文字列データとして flashlog.txt に記録します。

XMLObjectOutput は、 XML オブジェクトを簡単な型のオブジェクトに変換する ActionScript クラスです。同クラスは Flex に付属しており、 {flex.rootdir}/extras/XMLObjectOutput ディレクトリに XMLObjectOutput.as ファイルとして配置されています。このクラスを使うには、同ファイルを Flex の user_classes ディレクトリにコピーします。デフォルトでは、 user_classes ディレクトリは {flex.rootdir}/jrun4/servers/default/flex/WEB-INF/flex/user_classes にあります。

ActionScript の中でこのユーティリティを利用するには、以下のように記述して XMLObjectOutput クラスのインスタンスを生成します。

var myDebugger:XMLObjectOutput = new XMLObjectOutput() ;

つづいて、以下のように traceObject メソッドを呼び出し、対象となるデータ構造の内容を flashlog.txtに出力します。

myDebugger.traceObject( myEmployeeModel );

例として、 MXML で記述された XML モデルを XMLObjectOutput がどのような形式で flashlog.txt に記録するのかを見てみます。

MXML による XML データは以下の通りです。

The MXML representation of XML data:
 <mx:Model id="myEmployee">
   <employee employeeId="5">
            <firstName>John</firstName>
            <lastName>Smith</lastName>
            <phone>617-219-3345</phone>
   </employee>
 </mx:Model>
XMLObjectOutput representation of the same data
Object:  [object Object]
 |-- employee [object]
       |-- employeeId: 5
       |-- firstName: John
       |-- lastName: Smith
       |-- phone: 617-219-3345

このように、 XMLObjectOutput クラスを使えば、かなり複雑なスキーマを持つ XML データも詳細表示が可能です。

コマンドラインでのデバッグ作業

Flex のコマンドライン ActionScript デバッガ (fdb) を使えば、 Flash Debug Player で動作する MXML ファイルを構成する ActionScript コード全体のプロパティやふるまいをリアルタイムに表示できます。この fdb では、 ActionScript コードにブレークポイントを設定してステップ実行したり、 SWF ファイルをブラウザで動作させながらアプリケーションのトレースデータを確認したりできます。

Flex では、 ActionScript と SWC 、 MXML のリンクとコンパイルを実行するとき、コンパイル済み MXML ファイルごとに 2 つのファイルを作成します。そのうちの 1 つとして、コンパイル済み MXML ファイルに関連するクラスのクラス定義を記した＜ MXML ファイル名＞ .1 ファイルがあります。同ファイルは、 SWF の init 関数をはじめ、イベントハンドラ、その他 MXML の実装に必要な ActionScript コードを含みます。このファイルにあるイベントハンドラ以外の関数の大半にブレークポイントを設定できます。

なお、イベントハンドラへのブレークポイント設定は、オリジナルの MXML についてのみ可能です。また、 Flex が生成する 2 つ目のファイル＜ MXML ファイル名＞ .2 には、 MXML に対応するクラスについて、遅延インスタンス生成のエントリが必要に応じて記述されます。

クライアントデバッグ時の Flex Server 設定

Flex では、デバッグ用の設定を行うことで、リクエストされた MXML テンプレートに対して SWF ファイルと SWD ファイル (Flash デバッグファイル ) の両方を生成できます。この SWD ファイルは、 SWF ファイルと同じディレクトリに保存されます。 これら 2 種類のファイルが存在しない場合やどちらかが欠けている場合、 fdb で MXML テンプレートをデバッグしようとするとエラーが発生します。

Flex のデバッガを利用するときは、 Flex サーバーの設定ファイル flex-config.xml にいくつか変更を加える必要があります ( flex-config.xml ファイルは、 JRun 利用時は通常 C:\Program Files\Macromedia\Flex\jrun4\servers\default\flex\WEB-INF\flex ディレクトリにあります。ただし JRun 以外のアプリケーションサーバー利用時は、この場所は異なります ) 。Flex のデバッグ機能は、プロダクションモードを無効に設定した時にのみ動作するので、同ファイルが以下のように設定されているか確認します。

<production-mode>false</production-mode>

次に、 generate-debug-swfs タグを以下のように設定し、SWF ファイルに対応する SWD ファイルを生成するように Flex に指示します。

<generate-debug-swfs>true</generate-debug-swfs>

ちなみに、この generate-debug-swfs タグで無効に設定されている場合でも、 MXML のリクエスト URL に特定のクエリ文字列を付加することで Flex に SWD ファイルの生成を指示できます。この機能を利用するには、 flex-config.xml ファイルの process-debug-query-params タグが以下のように設定されていることを確認し、クエリ文字列のオーバーライドを有効にします。

<process-debug-query-params>true</process-debug-query-params>

このように設定しておけば、 URL に「 ?debug=true 」と付加することで、リクエストした MXML に対応する SWD ファイルが生成されます。例えば、以下のような URL を用います。

http://mymachine/flex/debugging.mxml?debug=true

Flex のクライアント ActionScript デバッガ (fdb) の設定と実行

fdb を起動する前に、次に説明する設定が正しく行われているか確認してください。 fdb を実行するマシンには、 JRE (Java Runtime Environment) 1.4.x がインストール済みである必要があります。まだインストールされていない場合は、 http://www.java.com にて入手してください。また、jvm.config ファイル (C:\Program Files\Macromedia\Flex\bin に格納 ) の java.home プロパティが、 JRE のインストール先ディレクトリを正しく指していることを確認してください。例えば、以下のような設定になります。

java.home=C:/j2sdk1.4.2_04

つづいて、デフォルトブラウザに Flash Debug Player がインストールされていることを確認します。

JRE と Flash Debug Player を正しくインストールすれば、 fdb を使いアプリケーションをデバッグする準備が整います。

  1. {flex.rootdir}/bin ディレクトリに移動し、 fdb を起動します。
  2. fdb のコンソールで run ＜デバッグする MXML ファイルのURL＞と入力し、デバッグする MXML ファイルを起動します。以下は、 ActionScript でカウンターを実装した簡単な MXML ファイルをデバッグしたときのコマンド入力と表示の例です。 
    (fdb) run http://e-apple:8100/flex-support/debug/debugmxml.mxml
Attempting to launch and connect to Player using URL:
http://e-apple:8100/flex-support/debug/sample.mxml
Player connected; session starting.
[SWF] /flex-support/debug/sample.mxml.swf - 487,496 bytes

  3. 次のステップとして、アプリケーションの MXML テンプレートに基づいてFlex サーバーが生成したファイルを確認します。 Flex が生成もしくは称したファイルを確認するには、 fdb コンソールで info sources コマンドを実行します。以下は、 explorer.mxml ファイルのデバッグ時に同コマンドを実行した例です。

    (fdb) info sources
sample-generated.as#2
sample.mxml#1

  4. 4. つづいてファイルにブレークポイントを設定し、 fdb 上でステップ実行します。このときアプリケーションのソースコードを表示するには、 list ＜ファイル名＞ コマンドを以下のように入力します。

          (fdb) list sample.mxml
 1     <?xml version="1.0" encoding="utf-8"?>
 2     <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="600" height="450">
 3
 4     <mx:Script>
 5     <![CDATA[
 6
 7     function TestEffectHandler(): Void {
 8
 9      var counter:Number;
 10     var tempCounter:Number = 0;;
(fdb)
 11
 12     for (counter=0; counter<5; counter++) {
 13             tempCounter=counter+tempCounter;
 14             trace("Counter = " + counter);
 15             }
 16
 17     debugText.text = "Total Counted = " + tempCounter.toString();
 18
 19    }

  5. sample.mxml ファイルの 13 行目にブレークポイントを追加します。以下はその例です。

    (fdb) break 13

Breakpoint 1 at 0x76a91: file sample.mxml, line 13

  6. continue コマンドを実行し、関数をステップ実行しながら出力を確認します。

    (fdb) continue

Breakpoint 1, TestEffectHandler() at debugmxml.mxml:13

13             tempCounter=counter+tempCounter;

    ここでは、サンプルの ActionScript コードのループをステップ実行し、 tempCounter オブジェクトの値を表示してみます。そのためには、 print ＜オブジェクト名＞コマンドを入力します。以下の例では、 fdb に対して tempCounter オブジェクトの表示を指示し、つづいて step コマンド ( 短縮形は s ) でループをステップ実行しながら同オブジェクトの値を表示しています。 

    (fdb) print tempCounter
$1 = 0
(fdb) step
 14             trace("Counter = " + counter);
(fdb) s
[trace] Counter = 0
 13             tempCounter=counter+tempCounter;
(fdb) s
 14             trace("Counter = " + counter);
(fdb) s
[trace] Counter = 1
 13             tempCounter=counter+tempCounter;
(fdb) s
 14             trace("Counter = " + counter);
(fdb) s
[trace] Counter = 2
 13             tempCounter=counter+tempCounter;
(fdb) s
 14             trace("Counter = " + counter);
(fdb) n
[trace] Counter = 3
 13             tempCounter=counter+tempCounter;
(fdb) n
 14             trace("Counter = " + counter);
(fdb) n
[trace] Counter = 4
 17     debugText.text = "Total Counted = " + tempCounter.toString();

ここでは、 fdb のデバッグセッションを開始し、コードにブレークポイントを設定したり、偏すウチを確認しながらステップ実行したりする簡単な例を紹介しました。 fdb のコンソールで help コマンドを実行すれば、デバッグに利用可能なすべての機能が表示されます。また、以下の Flex オンラインドキュメントも参考にしてください。
http://livedocs.macromedia.com/flex/1/flex_docs/wwhelp/wwhimpl/js/html/wwhelp.htm

その他のポイント

Flex におけるクライアントのデバッグ作業では、いくつかの落とし穴があることに注意してください。デバッガ利用時のいくつかの問題点や対処方法を以下に示します。

  1. Flex 開発者にとって、デバッグ時のもっともやっかいな問題は、 Flash Debug Player がインストール済みか簡単に確認できないことです。インストール済みかどうか分からない場合は、この記事の「 Flash Debug Player のインストール」セクションを参考にしてください。
  2. 多くのアプリケーションサーバーと同様に、 Flex でも内部処理用の予約語がいくつか存在します。例えば、 MXML や ActionScript ファイル内で debug というキーワードを使うと、問題が発生する可能性があります。
  3. デバッグ中に SWD ファイルが正しく生成されない場合があります。アプリケーションの MXML ページが キャッシュされた SWF ファイルもしくは SWD ファイルを参照している可能性がある場合は、ブラウザキャッシュをクリアし、 Flex サーバーを再起動してから同ページのデバッグを再度試してください。
  4. Flash Debug Player が fdb と接続できないことがあります。こうした場合は、 Flash デバッガホストが動作する場所を問い合わせる以下のようなポップアップウィンドウ ( 図 1) が表示されます。 fdb で run コマンドを実行したとき、もしくは MXML ページをリクエストしたときにこれが表示されたならば、サーバーの設定と、 MXML ファイルの起動に用いた URL が正しいことを確認します。

    5. Remote DeBug

    図 1. fdb での run コマンド実行時もしくは MXML ページのリクエスト時にこのウィンドウが表示されときは、サーバーの設定と URL が正しいことを確認します。

  5. fdb のデバッグセッション開始時に「 WARNING: The Player that you are using does not support all fdb commands 」というメッセージが表示されたときは、異なるバージョンの Flash Debug Player がインストールされていることを示します。 fdb と Flash Debug Player のバージョンが合っているか確認してください。

まとめ

Flex のクライアントサイドデバッグでは、 Flex 開発環境に特化した多彩なツールやテクニックを利用でき、非常に複雑なアプリケーションのデバッグも可能です。 Flash Debug Player や trace 関数によるログ出力など、 Flash Player に内蔵されたデバッグ機能を活用できます。また Flex では、 コマンドラインでのデバッグ作業を可能にする fdb や、 複雑なオブジェクト構造を表示する XMLObjectOutput など、強力なツールが新たに提供されています。これらの手段は、 RIA のデバッグ作業でとても役に立つはずです。

著者について

Eric Andersonは現在アドビでFlex Enterprise Servicesのプロダクトマネージャをしています。Flexチームに携わる前は、マクロメディア社およびAllaire社の顧客サービス部門でColdFusion、JRun、Flash LiteおよびFlexのサポート業務に従事していました。