Flash Builder 4.5 のコーディング生産性の強化ポイント

作者 Sreenivas Ramaswamy/Sameer Bhatt 投稿日 2011年5月22日

セクション

運用/インフラ,

設計/アーキテクチャ,

デベロップメント

トピック

Java EE ,

Java ,

Webフレームワーク ,

Flash ,

Flex ,

言語 ,

オープンソース ,

Adobe ,

RIA ,

テクノロジー ,

プログラミング ,

Architecture ,

リッチクライアント/デスクトップ ,

Eclipse

共有 |

Flash Builder 4をさらに強化したFlash Builder 4.5のコード編集環境には、FlexおよびActionScriptを使ったコーディングの生産性向上に役立つ様々な改良が施されています。

コーディングの生産性を高めるには、どのようなツールが用意されているかを知り、いつ、どのようにそれらを呼び出せばよいかを知ることが大切です。この記事を読めば、今回のリリースに盛り込まれた新機能を把握して、すぐにコーディング作業に活用できます。

Flash Builder 4.5の新機能のうち、特に重要なものを以下に紹介します。

• コードテンプレート
• メタデータコード補完
• メソッドのオーバーライド/実装
• クイックアシスト：ファイル内またはワークスペース内の名前変更、importの整理、フィールドへの変換、変数への代入、変数宣言の分割など
• 記述中コードからの生成：ローカル変数、フィールド、メソッド、クラス、インターフェイス、イベントハンドラーを、使用側のコードに基づいて逆に生成
• Flash Builderによって生成されたコードを変更するための、カスタマイズされたコード生成
• CSS機能の強化

必要条件 

必要となる他の製品

Flash Builder 4.5リリース

• ダウンロード
• さらに詳しく

注意：現在Adobe Labsからダウンロードできるのは、初期プレビューリリースです。Flash Builder 4.5およびFlex 4.5 SDKの最終リリースは、5月上旬にダウンロード可能になる予定です。

この記事に必要な予備知識

FlexとActionScript 3のいずれか、または両方を使い慣れていること

コードテンプレート 

例えば、Arrayタイプの変数を定義した後に、その配列の要素をすべて処理する「forループ」を作成しなくてはならない場合があります。Flash Builder 4.5には、そのようなforループを手で記述せずに自動生成させる機能があります。自動生成を実行する操作は、「fori」と入力してCtrl+スペース（またはCmd+スペース）を押すだけです（図1）。

図1. テンプレートを使ってforループを挿入

コードテンプレートを利用すると、よく使うコードのパターンをコンテンツアシスト（Ctrl+スペース）で自動挿入できます。状況に応じたコードを生成でき、ActionScriptの「forループ」からMXMLのWebServiceタグまで、様々な場面に幅広く利用できます。Flash Builder 4.5には、定義済みの100を超えるActionScript、MXML、およびCSSテンプレートが同梱されています。

• ActionScriptのパッケージ、クラス、forループ、whileループ、try-catchブロックなど
• MXMLのButton、DataGrid、HttpService、WebServiceなど
• CSSのButton、DataGrid、@font-faceなど

定義済みのテンプレートを参照または編集するには、Preferences（環境設定）／Flash Builder／Editors（エディター）／Code Templates（コードテンプレート）／ActionScript/CSS/MXMLを選択します（図2）。

図2. コードテンプレートの環境設定ページ

コードテンプレートには、よく使うコーディングのパターンを新しいテンプレートとして定義できます。また、テンプレートの読み込みと書き出しがサポートされ、チーム環境で全員が統一的なテンプレートセットを共有できます。

カスタマイズされたコード生成 

独自のコードテンプレートの作成に加え、イベントハンドラー、関数、getter/setterなど、様々なシナリオでFlash Builderを使って自動的にコードを生成できます。その後、テンプレートを使って、Flash Builderによって生成されたコードをカスタマイズできます。これらのテンプレートを参照または編集するには、Preferences（環境設定）／Flash Builder／Editors（エディター）／Code Templates（コードテンプレート）／Flash Builderを選択します（図3）。

図3. コード生成テンプレート

テンプレートは編集できます。また、テンプレートの読み込みと書き出しがサポートされ、チーム環境で全員が統一的なテンプレートセットを共有できます。

生成された名前空間がprivate、ハンドラー名がcomponentName_on_eventになるようにイベントハンドラーテンプレートをカスタマイズするために、イベントハンドラーテンプレートを変更できます（図4）。

図4. イベントハンドラーテンプレート

生成されたイベントハンドラーは図5のようになります。

図5. 生成されたイベントハンドラー

メタデータコード補完  

メタデータコード補完は、メタデータタグの挿入操作を補助する新機能です。エディター上で、クラス、メソッド、変数が定義されている場所の近くに「[」（左角かっこ）を入力すると、メタデータのヒントが表示されます。表示されるリストには、状況に応じて、クラス内やMXML内で有効なメタデータタグが含まれており、使いたいメタデータタグをリストから選んで挿入できます。必要なメタデータタグが見つからない場合は、Ctrl+スペースをもう一度押すと、使用できるタグすべてのリストが表示されます（図6）。

図6. クラスレベルのメタデータ入力候補

タグを選択すると、必須属性を含んだメタデータタグが生成されます。ここでTabキーを押すと属性値の間を簡単に移動できます（図7）。

図7. 挿入されたEventメタデータと必須属性

メタデータタグのクラス名とプロパティ名は、コンテンツアシストを使って簡単に入力できます。例えば、[Event]タグを挿入すると、そのプロジェクトで使用できるすべてのイベントクラスがリスト表示され、必要なイベントクラスをそこから選択できます（図8）。

図8. Eventメタデータのイベントタイプに指定する値の入力候補

オプションの属性についても、コンテンツアシストを使って入力できます。

サードパーティーSWCのメタデータタグについても、必要なmetadata.xmlファイルが埋め込まれていればFlash Builderで扱うことができます。

メソッドのオーバーライド/実装 

クラスの実装作業とベースクラスビヘイビアーのカスタマイズ作業では、スーパークラスメソッドをオーバーライドすることやインターフェイスメソッドを実装することがたびたび必要になります。Flash Builder 4.5では、Source（ソース）メニューからOverride/Implement methods（メソッドをオーバーライドまたは実装）ダイアログボックスを開いて、この処理を簡単に実行できます。このダイアログボックスには、現在アクティブなクラスに継承されているクラスおよび実装されているインターフェイスのリストが表示されます（図9）。


図9. Override/Implement methods（メソッドをオーバーライド/実装）ダイアログ（SampleInterfaceを実装するSampleClassの例）

各スーパークラスからオーバーライドするメソッドと、各インターフェイスから実装するメソッドを選択します。また、メソッドを挿入する位置を指定することもできます。ここで選択した各メソッドに対して、コードスタブが自動生成されます。

クイックアシスト  

クイックアシストは、日常的なコーディング作業を補助するアクションリストを状況に応じて表示する機能です。クイックアシストを呼び出すには、ショートカットキーのCtrl+1（またはCmd+1）を押すか、コンテキストメニューからQuick Fix/Assist（クイックフィックスとクイックアシスト）を選択します（図10）。

図10. 変数クイックアシスト

Flash Builder 4.5で新設されたクイックアシストは次のとおりです。

• Rename in file（ファイル内の名前変更）—変数名、メソッド名、クラス名、引数名について、ローカルの名前変更を、ダイアログボックスを開くことなくインラインで実行できます。このクイックアシストを呼び出し、選択した要素に変更を加えるだけで機能します。キー入力のたびに、ファイル内でその要素を参照している箇所すべての名前が変更されます。
• Rename in workspace（ワークスペース内で名前を変更）—Rename refactoring（変数の名前を変更）ダイアログボックスを簡単に開くことができます。
• Convert local variable to field（ローカル変数をフィールドに変換）—ローカル変数をフィールド変数に昇格できます。新しいフィールド変数が作成され、元のローカル変数の宣言は削除されます。
• Assign to variable（ステートメントを新規ローカル変数に代入）—式ステートメントから新しい変数を作成できます。式を入力してからクイックアシストを呼び出すことで機能します。新しい変数が生成され、その変数への代入ステートメントとなる式が作成されます。
  例えば、関数の呼び出し結果を新しい変数に代入する場合は、関数呼び出しにカーソルを合わせてCtrl+1を押し、表示されるメニューから「Assign to variable（ステートメントを新規ローカル変数に代入）」を選択します（図11、図12）。

図11. Assign to variable（ステートメントを新規ローカル変数に代入）クイックアシスト

図12. Assign to variable（ステートメントを新規ローカル変数に代入）クイックアシストで作成した変数

• Split variable declaration（変数宣言を分割）—初期化付きの変数宣言を、変数宣言と初期化に分割できます。
• Generate getter/setter（getterとsetterを作成）—従来と同じGetter/Setterを生成ダイアログボックスを簡単に開くことができます。
• Organize imports（読み込みの整理）—現在のファイルに含まれるimportステートメントを整理できます。
• Insert import（クラス／インターフェースを読み込み）—ファイル内で使用されている不明なClass/Interface用にimportを追加できます。

記述中コードからの生成  

コーディングをしていると、必要な変数、メソッド、クラス、インターフェイスを定義していないことに後で気が付き、その定義を作成しないと現在の作業を続けられなくなることがよくあります。記述中コードからの生成は、そんなときに定義を用意する機能であり、クイックアシスト（Ctrl+1）からプレースホルダーのスタブコードを簡単に生成できます。定義されていない箇所を把握して「Generate from usage（記述中コードからの生成）」を使用できるように、未定義の参照はすべてオレンジ色の波線でハイライトされます。
 

記述中コードからの生成機能では次のことができます。

• 変数の生成—作成したい変数の名前を入力し、クイックアシストを呼び出して「Create a variable（変数を作成）」を選択すると、その変数の宣言が生成されます。式の入力中にも、定義されていない項目からクイックアシストを呼び出して実行できます。このオプションを他のクラスのインスタンス変数を作成するために使用することもできます。例えば、objがMyClassタイプのオブジェクトである場合に、obj.propertyでCtrl+1キーを押すと、MyClassクラスのインスタンス変数propertyを生成するためのオプションが表示されます。このオプションを他のクラスのインスタンス変数を作成するために使用することもできます。例えば、objがMyClassタイプのオブジェクトである場合に、obj.propertyでCtrl+1キーを押すと、MyClassクラスのインスタンス変数propertyを生成するためのオプションが表示されます。
   
• メソッドの生成—変数の生成と同じように、メソッド名を入力し、クイックアシストを呼び出して「Create function（メソッドを作成）」を選択すると、必要な引数をとるメソッドが生成されます（図13）。変数の生成機能を使用して他のクラスのインスタンス変数を生成できるのと同様に、このオプションも他のクラスのメソッドを生成するために使用できます。変数の生成機能を使用して他のクラスのインスタンス変数を生成できるのと同様に、このオプションも他のクラスのメソッドを生成するために使用できます。

図13. メソッドの生成

• クラスまたはインターフェイスの生成—不明なタイプの変数を作成しようとしてクイックアシストを呼び出すと、クラスまたはインターフェイスを作成するオプションが表示されます（図14）。

図14. クラスまたはインターフェイスの生成

• イベントハンドラーの生成—ActionScriptコンポーネントにイベントハンドラーを追加する作業が、従来よりはるかに簡単になります。
  「component.addEventListener("EVENT_NAME", myHandler);」と入力し、クイックアシストを呼び出して「Generate event handler（イベントハンドラーを生成）」を選択すると、ハンドラーが生成されます（図15）。

図15. クラスまたはインターフェイスの生成

ドキュメントのCSS編集機能の強化 

前述の改良されたコード編集機能に加え、Flash Builder 4.5にはCSSコード編集のための拡張サポートが備わっています。

コンテンツアシストの強化

Flash Builder 4.5では、次の図に示されているClassReferenceタグ内で利用可能なコンテンツアシストを使って簡単にクラスに参照を挿入できます（図16）。

図16. ClassReferenceタグ内のコンテンツアシスト

Flash Builder 4.5では、様々なメディアクエリーエレメントのコード補完サポートが提供されています（図17）。

図17. メディアクエリーサポート

ハイパーリンク

次の図に示されているハイパーリンクを使って、セレクターのクラスまたは参照されているクラスに移動できます（図18、図19）。CtrlキーまたはCmdキーを押しながらマウスポインターを置くと、ハイパーリンクが表示されます。カーソルがClassReferenceタグ内のセレクターまたはクラス名の上にあるときにNavigate（ナビゲート）／「Open Declaration（宣言を開く）」メニューオプションを使用することもできます。

図18. 参照されているクラスへの移動

図19. セレクターからの移動

次のステップ 

これで、このリリースで利用可能なコーディングの生産性向上に役立つ新機能の説明は終了です。続いてFlash Builder 4.5をダウンロード（注意：現在Adobe Labsからダウンロードできるのは、初期プレビューリリースです。Flash Builder 4.5およびFlex 4.5 SDKの最終リリースは、5月上旬にダウンロード可能になる予定です。）し、その機能をご自身で体験してみてください。さらに詳しく知るには、次の記事をお読みください。

• 新しいFlash Catalyst CS5.5およびFlash Builder 4.5のワークフローの理解

「Flash Builder 4.5の新機能」という記事では、ここで取り上げなかった他の新機能について詳しく説明しています。併せてご覧ください。

この記事は、Creative Commons Attribution-Noncommercial 3.0 Unported Licenseのもと提供しています。

著者について