Flash Builder 4によるデベロッパーの生産性改善

Flash Builder 4ベータ2には、新規または更新されたIDE成熟度機能が組み込まれています。これらは、デベロッパーの生産性を改善し、MXMLおよびActionScriptコードの作成の手間と時間を削減することを目的としています。これらの新機能は、データ中心機能、Flex 4サポートなど、Tim Buntelの記事Flash Builder 4ベータ版の新機能およびFive great new features in Flash Builder 4 betaで紹介されている優れた機能を補完するものです。

この記事では、Flash Builder 4ベータ2の新機能の中から、呼び出し階層ビュー、拡張ステートシンタックスのサポート、コードヒントの変更、エディターの改善について説明します。

ActionScript関数を調べていて、その関数がコードのどこで呼び出されているかを知りたいと思ったことはありませんか？呼び出し階層ビューには、選択されたActionScript関数、変数宣言、MXMLプロパティ宣言を呼び出すか参照している関数のリストが表示されます。この機能は、コード変更の影響の分析と予測に役立ちます。

呼び出し階層ビューを使用するには、関数またはプロパティ名を選択し、Navigate（ナビゲート）／Open Call Hierarchy（呼び出し階層を開く）を選択するか、Ctrl+Alt+Hを押します。ビューが起動され、選択した関数またはプロパティを呼び出すか参照している関数の一覧が表示されます（図1を参照）。さらにツリーをさかのぼって、これらの関数を呼び出している関数を表示することもできます。

ツリーのノードをダブルクリックすると、呼び出されている関数の参照を開いて選択できます。ツリーのノードを選択すると、右側のスニペットのテーブルに呼び出しのあるスニペットが表示されます。

ビューのアクションメニューを使用して、階層の検索範囲（ワークスペース、プロジェクト、ファイル）を指定したり、ビューの視覚的レイアウトをカスタマイズしたりできます。

プロジェクトのサイズや複雑さが増すとともに、呼び出し階層ビューは、ActionScriptおよびMXMLコードを調べてその内部の依存性を分析するための強力なツールとなります。

Flex 4で導入された新しい拡張ステートシンタックスを使えば、ステート固有の変更を、コンテキスト外部のオーバーライドタグを使うのではなく、インラインに容易に記述できます。Flash Builder 4ベータ2では、コードでのステート編集をサポートする新機能として、ステートコードヒントとステートビジュアリゼーションの2つが追加されています。

ステートコードヒント

新しいステートシンタックスは、ステート固有のコンポーネントとプロパティ値をサポートします。例えば、特定のステートだけでコンポーネントを表示したい場合、includeIn属性を使用し、ステート名のリストをコンマで区切って指定します。ステート固有のプロパティ値を割り当てるには、属性およびプロパティタグの新しいドット記法を使用して、ステートを指定します。例えば、<s:label.viewState>...、label.viewState="..."のようになります。Flash Builder 4ベータ版では、これらのコンテキストに対して、ステートおよびステートグループ名がコードヒントに表示されます（図2を参照）。

ステートビジュアリゼーション

デザインビューを使ったことがある方なら、ステートビューを使用してステートを切り替え、結果のUIをデザイン面に視覚化したことがあるかもしれません。Flash Builder 4ベータ版では、ソースビューでのコード編集の際にも同様の機能が使用できるようになりました。

MXMLファイルにステートが存在する場合、エディターの上部にすべてのステートを含むドロップダウンリストが表示されます。ステートを選択すると、そのステートに含まれないMXMLコードはグレーで表示されます（図2を参照）。Navigate（ナビゲート）メニューのアクションを使って、ファイル中のステートを順番にたどることができます。アクションには、Toggle State Visualization（ステートの表示を切り替え）(Ctrl+Shift+M)、Next State（次のステート）(Ctrl+Shift+.)、Previous State（前のステート）(Ctrl+Shift+,)があります。

コードヒントは、あらゆるIDEで最も頻繁に使用される機能の1つです。このリリースでは、コードヒントの動作にいくつかの小さな変更が加えられ、使いやすさと生産性が改善されています。

コードヒントの情報量の増加

コードヒントポップアップの提案に、より多くの説明情報が表示されるようになりました。

• ActionScriptおよびMXMLでは、タイプ名とタグ名に、それらが存在するパッケージが表示されます。例えば、「UIComponent - mx.core」のようになります。
• プロパティには、型と宣言されたクラスが表示されます。例えば、「name : String - MyClass」のようになります。
• ASDocコメントが存在する場合は、ツールヒントに表示されます。
• ActionScriptヒントは、プロパティ単位、さらに関数単位でグループ化されるようになりました。
• 名前空間が（use namespace mx_internalやthis.mx_internal::...などによって）開かれている場合、コードヒントにはこれらの名前空間での定義に関する提案が表示されます。

コードヒントのサイクル表示

MXMLの作成中に、特定の種類の使用可能なプロパティだけを見たい場合があります。例えば、s:Buttonでサポートされるすべての効果を見たい場合などです。このようなフィルタリング動作が、MXMLでのコードヒントのサイクル表示によって可能になりました。

これを実際に見るには、コードヒントポップアップを開き、ポップアップが開いた後でもう一度Ctrl+Spaceを押します（図3を参照）。デフォルトでは、次に表示されるサイクルはAll Properties（すべてのプロパティ）（または、属性スコープにいる場合はProperties（プロパティ））です。現在のサイクルの名前は、ポップアップの下部に表示されます。Effects（エフェクト）と表示されるまでCtrl+Spaceを繰り返し押せば、コードヒントには効果プロパティだけが表示されます。

デフォルトでは、サイクルの順序は次のとおりです。

1. すべて（タグスコープでのみ表示）
2. すべてのプロパティ
3. プロパティ
4. イベント
5. エフェクト
6. スタイル

コードヒントのサイクル表示の順序を変更したり、サイクル表示をオフにしたりするには、Preferences（設定）ダイアログを開き、Flash Builder／Editors（エディター）／MXML Code（MXMLコード）／Advanced（拡張）を選択します。

コードヒントの推奨事項

MXコンポーネントからSparkコンポーネントへの移行を容易にするため、MXMLコードヒントの提案に、コンポーネントが代替コンポーネントと置き換えられたことが示されるようになりました。Sparkに代替コンポーネントが存在するコンポーネント（例えばmx:Buttonなど）に対してコードヒントを起動すると、コードヒントには「use s:Button instead（代わりに s:Buttonを使用）」と表示されます（図4を参照）。また、mx:Buttonに対するコードヒントの下に「s:Button」が表示されます。

SDK 4 MXMLファイルでは、存在しないコンポーネントに対するヒントを検索すると、コードヒントに有効な代替コンポーネントが提案されます。例えば、s:HBoxを検索すると、コードヒントにはs:HGroupとmx:HBoxの2つが考えられる一致として提案されます（図5を参照）。

キャメルケースのサポート

Flex SDKの命名規則では、ほぼすべての識別子にキャメルケースパターン（単語の境界を大文字で示す）が使用されています。Flash Builder 4ベータ2では、単語の境界を示す大文字を使って、コードヒントをすばやく表示できます（図6を参照）。

例えば、mx:AdvancedDataGridで始まるすべてのタグを見るには、mx:AdvancedDataGと入力する代わりに、単にADGと入力すると、コードヒントの提案は意図したように絞り込まれます。プロパティや属性に対しても同じことができます。例えば、UIComponentからeMinと入力すると、explicitMinimumHeightとexplicitMinimumWidthが表示されます。各セグメントは先頭から照合されることに注意してください。

キャメルケースのサポートは、ActionScriptおよびMXMLエディターと、Open Type（タイプを開く）ダイアログ（Ctrl+Shift+T）で利用可能です。

言語およびFlex SDK機能

ActionScriptおよびMXMLのいくつかの言語機能が、新たにコードヒントでサポートされるようになりました。

• ActionScriptおよびMXMLでのVectorのフルサポート
  Vectorベースタイプ宣言で、コードヒントにクラス名とインターフェイス名が表示されます。また、メソッドとベクターへの配列アクセスに対するコードヒントに、強い型が正しく表示されます。
• MXML 2009のライブラリタグ定義
  MXML 2009ドキュメント内で宣言された定義は、通常のMXMLコンポーネントと同様にコードヒントで利用可能です。定義は名前変更リファクタリングもサポートします。
• FXGのサポート
  FXGコンポーネントにも他のコンポーネントと同様にヒントが表示されます。名前変更および移動リファクタリングをサポートし、通常のクラスと同様にOpen Type（タイプを開く）ダイアログに表示されます。
• タイプへのメタデータ参照
  [Event]、[HostComponent]などのActionScriptメタデータタグには、完全修飾タイプ名を指定する属性があります。このような参照が認識されるようになり、定義へ移動、発生をマーク、名前変更および移動リファクタリングなど、タイプ参照に対して通常使用できる機能をサポートするようになりました。

Flash Builder 4ベータ2では、コード編集に対してもいくつかの改善が行われています。

貼り付けおよび改行時のインデント

あるファイルから別のファイルにコードを貼り付けたとき、あるいはWebからサンプルコードを貼り付けたときに、従来はインデントを手作業で修正する必要がありました。Flash Builder 4ベータ2では、貼り付けたコードがインデント設定に合わせて自動的に更新されます。

また、改行を挿入したときに、親タグ、コードブロック、ステートメントに基づいて、インデントが正しく挿入されます。例えば、1行のif式の後でEnterキーを押すと、ifステートメントから1レベルインデントされた新しい行が作成されます。

自動インデントの設定は、Flash Builder／Indentation（インデント）で変更できます。ここにはActionScriptとMXMLに対する固有の設定ページがあり、設定を変更してプレビューを表示できます。

必要な場合、Source（ソース）／Correct Indentation（インデントを訂正）を選択するかCtrl+Iを押すことにより、開いているファイルのインデントを修正できます。

タブとスペースの設定

Flash Builder 4より前には、タブとスペースはFlash Builder／Indentation（インデント）で指定された設定を必ずしも反映せず、現在の行のインデントに基づいて異なる動作をする場合がありました。このようなバグは製品全体を通じて修正されました。

生成されたコード、インデント（改行、貼り付け、Source（ソース）／Correct Indentation（インデントを訂正）による）、Tabキーは、すべて現在のインデント設定に基づいて正しくタブまたはスペースを挿入します。

かっこの対応付け

かっこの強調表示が、波かっこだけでなく通常のかっこもサポートするようになりました。波かっこまたはかっこの後にカーソルを置くと、対応する開きかっこまたは閉じかっこが強調表示されます。Go To Matching Bracket（対応するかっこ） Ctrl+Shift+P もかっこをサポートするようになりました。この機能は、ActionScript、MXML、CSSエディターで動作します。この機能は、Flash Builder／Editors（エディター）／Highlight Matching Braces（対応するかっこを強調表示）設定でオンまたはオフにできます。

MXMLファイルでのインポートの整理

Flex Builder 2以降、MXMLおよびActionScriptエディターでコンテンツアシストを使用すると、MXMLスクリプトブロックまたはActionScriptファイルにクラスが自動的にインポートされます。デフォルトでは、インポートはアルファベット順に並べられます。この動作は、Flash Builder／Editors（エディター）／ActionScript Code（ActionScriptコード）の設定でKeep Imports Organized（読み込みの順序を維持）を選択することによって制御できます。また、デフォルトでは、未使用のインポートは整理の際に削除されます。この機能は、Remove Unused Imports When Organizing（整理中に不要な読み込みを削除）設定でオンまたはオフにできます。

Flash Builder 4ベータ2では、MXMLエディターが、スクリプトブロックでのインポートの整理と未使用のインポートの削除をサポートするようになりました。

エディタータブのエラーマーカー

ファイルに対するエラーマーカーは、ベータ1のパッケージエクスプローラーで導入されました。新たに、MXML、ActionScript、CSSファイルのエディタータブにも、エラーマーカーが表示されるようになりました。

次のステップ

新しいFlash Builder 4ベータ2をダウンロードして、デベロッパーの生産性を改善する新機能を、日常の開発ワークフローで試してみることをお勧めします。

お試しになったら、Flash BuilderおよびFlex SDKフォーラムでご意見をお聞かせください。