Flash ProユーザーにもオススメなFlash Builder 4

今月号の記事

先日発売された「Flash Builder 4」。製品名がFlex BuilderからFlash Builderに変更されたことが示すように、バージョン4ではFlash Professionalとの連携が重視されています。本記事では、Flash Professional ユーザー向けの機能を中心に、Flash Builder 4の新機能を紹介します。

Flash Builder 4 が発表されました。Flash Builder 4 は Eclipse ベースの開発ツールで、豊富な機能により Flash アプリケーション開発者に生産性の高い開発環境を提供します。

Flash Builder の最新バージョンから、製品名が Flex Builder から Flash Builder に変更されました。これは、Flash Professional との連携をより重視したことが理由の 1 つです。Flex Builder の発売以来、Flex Builder を高機能な ActionScript エディターとして利用するユーザーが増え続けているという事実を踏まえて、Flash Builder 4 では Flash Professional と Flash Builder 間のラウンドトリップを実現する機能が追加されました。いままで、Flash Professional のエディタに物足りなさを感じていたり、サードパーティのエディタを使用していた人には、ぜひ新しい Flash Builder 4 を試してみていただきたいと思います。

もちろん、従来のユーザーの方々にも、エディター機能のさらなる強化や、プロファイラーの改善、ネットワークモニター、データ中心開発のサポートなど、開発を協力に支援する機能が盛りだくさんです。一度新しいバージョンを使ったらもう元には戻れない事保証です。

そこで、この記事では、Flash Professional ユーザー向けの機能を中心に、以下の 3 点をご紹介します。

  1. Flash Builder 4 と Flash Professional の連携機能
  2. Flash Builder 4 の強力な編集機能
  3. Flex 開発者向けの新機能

1. Flash Builder 4 と Flash Professional の連携機能

1.1 Flash Professional プロジェクトの作成

Flash Builder 4 で開発を行うには、まずプロジェクトを作成します。その後、プロジェクト内にファイルを作成してから編集を行います。他のツールのように、直接デスクトップ上のファイルをクリックして編集という使い方はできません。編集するファイルは必ずプロジェクト内に作成します。

プロジェクトは、複数の関連するファイルを編集するときに威力を発揮します。プロジェクトには、関連するファイル、ライブラリ、それからパブリッシュ設定などの環境情報がひとまとめになっているため、プロジェクト内全てのファイルの属性を一括して変更、といった事が簡単にできるのです。

さて、Flash Builder 4 から、「Flash Professional プロジェクト」 という新しいタイプのプロジェクトが作成できるようになりました。Flash Professional プロジェクトは、Flash Professional オーサリングツールと同じ環境を Flash Builder のプロジェクトとして作成するものです。これにより Flash Builder と Flash Professional どちらを使っても、同じ環境で ActionScript の開発ができるようになります。なお、この機能に対応する Flash Professional は、次期バージョンの Flash Professional からです。

下の図は、「ファイル」→「新規」からメニューを表示したものです。上から 3 つ目に新しく追加された Flash Professional プロジェクトがリストされています。

「ファイル」→「新規」

ここで Flash Professional プロジェクトを選択すると、下のダイアログボックスが表示されます。ダイアログボックス内で fla または xfl ファイルを指定します （xfl は Flash Professional 次期バージョンから追加される新しいファイルフォーマットです）。 必要な作業はこれだけです。これで 「終了」 ボタンを押せば、Flash Professional プロジェクトが作成されて、ドキュメントクラス用の .as ファイルも自動作成されます。

新しいプロジェクト作成画面

なお、Flash Professional 次期バージョン からも、Flash Builder のプロジェクトを作成することができます。Flash Professional 内でドキュメントクラスのエディターとして Flash Builder を選択すると、自動的に Flash Builder が起動され、上のプロジェクト作成画面が表示されます。こっちのやり方なら、Flash Builder を起動する事すら意識する必要はありません。Flash Professional ユーザーにはお勧めの方法です。

プロジェクトが生成されたら、使用しているライブラリを確認できます。下の画面は、その一例です。パブリッシュに使われる swc ファイルがいくつか表示されていますが、パスを見ると Flash Professional と同じものが使用されているのが分かります。繰り返しになりますが、Flash Builder のコードエディターを Flash Professional の環境内で使えるよう設定が行われているのです。

ビルドパスライブラリ

また、ライブラリだけでなく、ターゲットとなる Flash Player のバージョン等も自動的に引き継がれます。このように Flash Builder 側でいちいち設定することなく、Flash Professional と同じ環境が準備されるので大変便利です。

1.2 パブリッシュ、プレビュー、デバッグ

さて、下はプロジェクト生成後の画面です。

画面左側はパッケージエクスプローラーと呼ばれるパネルで、プロジェクトに関連するファイルの一覧が表示されます。 mySample が今回生成されたプロジェクトの名前で、default package フォルダの下にある mySample.as というファイルが Flash Builder により自動的に生成されたドキュメントクラスです （名前が mySample になっているのはプロジェクト生成時に mySample.fla を指定したためです）。その他、リンクする swc ファイルやパブリッシュされた swf ファイルも、パッケージエクスプローラーから確認する事ができます。

画面右側は Flash Builder 4 のメインとなるエディターです。プロジェクトを作成すると、ドキュメントクラスのスケルトンが自動的に生成されます。ここにコードを追加してクラスを完成させます。

パッケージエクスプローラー

コードの編集が終わると、次は動作確認のためのプレビューやデバッグですね。これらの作業は Flash Builder ではできないので、Flash Professional にツールを切り替えることになります。編集と確認を繰り返すと、Flash Builder と Flash Professional を行ったり来たりすることになるので大変そうに思えるかもしれません。ところが Flash Builder 4 は Flash Professional とシームレスなラウンドトリップができるのです。

下の画面の 「ソース」 メニューの下に、赤い色を含むアイコンが 3 つ表示されています。これらは Flash Professional を呼び出すためのボタンで、左から順番に、パブリッシュ、プレビュー、デバッグが起動できます。これらのボタンを押すと Flash Professional が前に表示されて、Flash Professional 内でプレビューやデバッグを始められます。プレビューウィンドウを閉じると、今度は Flash Builder が前に表示されるため、アプリケーションを切り替える作業無しにコーディングに戻ることができます。

Flash Professional を呼び出すためのボタン

さらに、この 3 つのボタンには Flash Professional と同じショートカットキーが割り振られているため、ボタンを押す代わりに、例えば Ctrl＋Enter （Mac OS では Command+Enter） でプレビューができます。ユーザーは Flash Professional を使っているかのように作業を進めることができます。

2. Flash Builder 4 の強力な編集機能

元々開発者向けのツールである Flash Builder には豊富な編集機能が搭載されています。ここでは Flash Builder 4 から追加／改良された機能を 5 つ紹介します。

2.1 コードヒントと ASDoc

下の画面は、エディター内で変数宣言のクラスを指定しようとして "var foo:str" と入力した状態です。入力にあわせて str で始まるクラスが表示されています。この候補の中から 1 つを選択すると自動的にコードに反映されます。例えば String を選ぶと str を String で置き換えてくれます。

また候補から選択する際に、選択中のクラスの ASDoc が横に表示されます。そのため、クラスの情報を確認しながら選択するクラスを決定することができます。あまり使わないクラスとかは、名前だけだとなかなか判断に自信の持てなくて、選ぶ前に詳しい情報が知りたくなったりしますよね？Flash Builder 4 では、選択にあわせて情報がその場で切り替わって表示されるので、クラスの仕様の検索もさくさくです。

コードヒント

2.2 Getter/Setter の生成

Flash Builder 4 には変数の Getter/Setter のコードを自動生成する機能があります。変数は private 宣言をして Getter/Setter を定義するのがベストプラクティスだというのは分かっていても、変数の数が増えてくると、単純作業とはいえ Getter/Setter の記述は手間のかかるものです。この機能は、変数だけ宣言したら Getter/Setter のコード生成は Flash Builder に任せてしまおうというものです。

また、変数の public から private 宣言への変更も一緒に行えるので、とりあえず変数を Getter/Setter で置き換えて元の変数は private に、という変更にも対応します。

下は、Getter/Setter 生成用のダイアログボックスです。

Getter/Setter 生成

foo という public 変数を _foo という privete 変数にして Getter/Setter 両方を生成するよう指定されています。OK を押すと、下のようなコードが生成されます。

Getter/Setter

2.3 リファクタリング

リファクタリングは、変数の名前を変更したり、宣言の位置を変えたりという、コードの修正中にしばしば発生する作業を支援します。人手では間違えやすい作業を分かりやすく且つ効率的に行う事ができるようになります。

下は、変数の名前を変更する画面の例です。_foo を _bar に置き換えています。

変数の名前を変更

このようにオリジナルと変更後を並べて、文字の一致する箇所を 1 つずつ確認しながら更新することができます。参照先のみを変更するのであれば、一括で自動更新もできます。

2.4 過去のバージョンとの比較

Flash Builder 4 のヒストリーパネル内には、編集中のファイルの保存履歴が改訂した時刻順に表示されます。履歴の中から 1 つを選ぶと、その時点のファイルの内容との比較を行うことができます。下がヒストリーパネルのスクリーンショットです。

ヒストリーパネル

ヒストリーパネルからある時刻のバージョンを選択すると下の画面の状態になります。エディター内の最新テキストと、ヒストリーパネルから選択された時刻におけるテキストが並べて比較されています。一致しない箇所はハイライトで表示されるため、どこが変更されていたのかが一目で分かります。

ある時刻のバージョンを選択

保存されている任意のバージョンと現行のテキストを入れ替えることもできます。修正により問題が発生した場合などにかなり便利な機能です。

2.5 プロファイラ

プロファイラは Flash Builder 4 Premium 版に搭載されている機能です。ActionScript コードのどの部分にどのくらい時間がかかったか、どのオブジェクトにどのくらいのメモリが使われているか、などを知ることができます。パフォーマンスチューニングやメモリリークの発見を確実に行いたい場合には必須の機能です。以前のバージョンからある機能ですが、Flash Builder 4 になりさらに使いやすくなりました。

3. Flex 開発者向けの新機能

最後に Flex 開発者向けの新機能も 3 つ紹介します。

3.1 Flash Professional コンポーネント

以下に紹介する機能は Flex アプリケーション専用の機能です。が、Flash Professional ユーザーには関係ない、という訳でもありません。Flash Builder 4 は、Flex アプリケーションの UI 部品トを Flash Professional で開発するためのラウンドトリップ機能を持っているからです。Flash Professional ユーザーは、今まで以上に Flex アプリケーション開発でも活躍できるのです。

下は、Flash Builder 4 のデザインビューのスクリーンショットです。ステージ上に置かれているのは、画面左下のコンポーネントパネルからドラッグしてきた Flash Professional コンポーネントです。画面右下の 「Flash Professional で作成」 をクリックすると Flash Professional が起動されてこのコンポーネントを編集できます。もちろんタイムラインも自由に使えます。Flash Professional での編集を終了すると、デザインビュー内のコンポーネントが自動的に更新されます。この間、Flash Professional ユーザーは Flex のコードを一切見る （知る） 必要はありません。

Flash Builder 4 のデザインビュー

事前に、Flash Professional で作成しておいた Flex コンポーネントも同じように利用できます。ライブラリに Flash Professional から書き出した swc を追加すると、コンポーネントパネルのカスタムフォルダ内に、Flash Professional で作成したコンポーネントも表示されるようになります。あとは、適当にステージ上に配置すれば、上で説明したのと同じ手順で Flash Professional を使った編集作業ができるようになります。

3.2 ネットワークモニター

ネットワークモニターは Flex アプリケーションがサーバーと通信した内容をすべて表示することができます。ネットワークアプリケーションのデバッグは面倒くさいものですが、ネットワークモニターを使えば Flash Builder 内の情報だけでかなりの問題点を発見できるようになります。

下はツリービューと呼ばれる、データを解析して構造化したものを表示するビューです。この他にも、データを素のまま表示する未加工ビューや、データ を 16 進数で表示するビューもあります。HTTPService や WebService だけでなく AMF にも対応します。

ネットワークモニター

3.3 データ中心開発のサポート

これは、データモデルを定義したら、必要なコードは自動生成で済ませよう、という開発方法をサポートするものです。コーディングにかける時間を大幅に削減できます。

Flex アプリケーション側で必要な処理は、サーバーもしくはサービスのやり取りに使用されるデータモデルの指定です。これだけでサービスへの要求と結果の取得に必要なメソッドを自動生成できます。さらに、生成されたメソッドを 「データとサービス」 のパネルからデザインビュー内の UI コンポーネントにドラッグ & ドロップすることで、UI コンポーネントとメソッドの戻り値をバインドするコードも自動生成できます。UI を作る手間もかけたくないという人には、入出力フォームを自動生成する機能もあります。

下は、接続したいサービスを指定するパネルです。Flash Builder 4 はサービスへの接続に成功すると、データモデルの解析と、サービスにアクセスするためのメソッドの生成を自動的に行います。

データとサービスにアクセス

4. まとめ

コーディングは Flash プラットフォームを活用するために重要な作業の一部です。Flash Builder 4 はコーディング作業を行うユーザー向けに、少しでも作業が効率的、効果的になるよう開発を重ねたツールです。また、他の Adobe 製品と連携して、コーディング作業とデザイン作業をスムーズに連携させることもできます。是非 Flash Builder 4 を活用して、よりよい開発環境を実現してください。初めての人には、無償のトライアル版も用意されています。

‹ 戻る