Developers Summit 2010（2/19）に講演したFlash Builder 4の新機能紹介の資料です。 当日はデモ中心でしたので、追加の情報などは今後、アドビの技術者サイト「Adobe Developer Connection」で公開していきます。 http://www.adobe.com/jp/devnet/

1. Flex開発を加速する
Flash Builder 4 の
新機能紹介
アドビ システムズ 株式会社
轟 啓介
ktodorok@adobe.com
Twitter : @keisuke322
2010/2/19
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

2. Adobe Flash Platformの構成図
アプリケーション
コンテンツ
動画
Flash Platformによって
統合される
Adobe Creative Adobe ColdFusion Adobe Adobe
Suite Builder ColdFusion LiveCycle ES ®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

3. Flex フレームワーク
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

4. Flexフレームワーク
Adobe Flex SDK (Software Development Kit)
Flashアプリケーション、AIRアプリケーションを開発するための無償開発キット。
オープンソースのFlexフレームワークのためのAPI、コンパイラ、デバッガ、ド
キュメントなどが含まれている。
Flex 4 SDK (Gumbo) @Adobe Open Source
Download
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo
Flex アプリケーション
Flex フレームワーク
Flash Platform ランタイム
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

5. Flexフレームワークにおける開発手法
<mx:Button label="Hello" click="myAlert('Hello World')"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert
private function myAlert(alertStr:String):void{
Alert.show(alertStr);
}
]]>
</mx:Script>
ボタン自体は MXMLタグ をコード記述するだけ、
あるいはVBのようなドラッグ&ドロップ配置
ボタンの動作は ActionScript 3.0 で記述する
ソースはテキスト形式、SWFファイルにコンパイル
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

6. デモ
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

7. Adobe
Flash Builder
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

8. Flash Builderとは？
クロスプラットフォームのリッチインターネットアプリケーション
やコンテンツの迅速な開発を支援する、開発者のためのEclipse(TM)
ベースのプロフェッショナル水準IDE (Integrated Development
Environment；統合開発環境)
MXMLとActionScript ビジュアルなレイアウト インタラクティブなデバッグ・
コード編集 とスタイル設定 プロファイリング機能
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

9. Flexアプリケーションのアプローチ
一般的にデザインかデータのどちらかにフォーカスして開発が進む
デザインフォーカス データフォーカス
インフォメーション データ駆動、サービス駆動
アーキテクトの関与
タスク指向
Creative Suite ツールの使用 （DBへのレコード追加や更新など）
「ルック＆フィール」の重要視 ユーザビリティは大事だが、
「ルック＆フィール」要件への
こだわりは少ない
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

10. Flexアプリケーションのアプローチ
最初のフォーカスがどちらであれ、実装とテストの工程は共通
デザインフォーカス データフォーカス
実装 テストとデプロイ
ハンドコーディング プロファイル
保守性 デバッグ
コードフォーマット ビルドプロセス
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

11. Flash Builder 4 のテーマ
生産性の向上 データ中心型開発 デザイナー/
デベロッパー連携
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

12. 生産性の向上
Developer Productivity
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

13. コーディング生産性
パッケージエクスプローラ
getter/setterの生成
コードの自動インデント
ASDocツールヒント
呼び出し階層ビュー
…
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

14. テストとデプロイ（Premium版のみ）
ネットワークモニター
Unitテスト
コードカバレッジ
プロファイラー
コマンドライン・ビルド
デバッグ機能
（Standard版でも利用可）
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

15. SOAP REST
データ中心型開発
Data-Centric Development
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

16. データ中心型開発（Data-centric Development）
3. UIコンポーネントに
1. サービスを定義 2. サービスをモデル化
サービスの操作をバインド
Java Flash Builder で データバインド
サービスを検証
PHP UI生成
サービスモデルをビルド
ColdFusion ページング
データの型と操作を
SOAP 設定 データ管理
REST
…
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

17. データ中心型開発：サポートされるサービス
Java
BlazeDS
LiveCycle Data Services ES
‒ LiveCycle Model Editorとの新たなワークフロー
PHP
Zendフレームワークをビルトイン・サポート
Zendコンポーネント or 全てのPHP5クラスの利用
Zend Studioとの新たなワークフローでクラス生成
ColdFusion
あらゆるColdFusionコンポーネント(CFC)を利用
ColdFusion Builderとの新たなワークフローで
データアクセスCFCを自動生成
HTTP, REST, SOAP Web Services
拡張性 ‒ その他のバックエンドのサービス追加 REST
<WSDL>
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

18. データ中心型開発：クライアントサイド・データ管理
クライアントサイドのデータ
操作をサーバサイドの操作に
紐付ける
生成、取得、更新、削除など
データの一括更新と削除の自動化
DBレコードをインスタンス
に変換
データ変更時は画面に反映
（データバインド）
レコードセットのページング
指定したレコード数を自動取得
大量データを理想的なデータ量
にしてGridやListなどセット
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

19. デザイナー/
デベロッパー連携
Designer-Developer Workflow
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

20. デザイナー/デベロッパー連携
Adobe Flash Catalyst ワークフロー
Flash Catalystのプロジェクト（FXP）を
Flash Builderで開く
新しいステート編集機能
Adobe Flash Professional
ワークフロー
新たな “Flash コンポーネント”
Flash Professionalの起動からFlash コ
ンポーネントの生成、編集、そして
Builderへの反映まで
テーマのサポート
新たなテーマ設定画面
アプリケーションで簡単にFlexコンポ
ーネントのルック＆フィールを管理可能
®
25
Copyright 2009 Adobe Systems Incorporated. All rights
Copyright 2008 Adobe Systems Incorporated. All rights reserved. reserved. Adobe confidential.

21. 関連URL ‒ Build情報
Flash Builder 4 Beta @Adobe Labs
http://labs.adobe.com/technologies/flashbuilder4/
Flash Catalyst Beta @Adobe Labs
http://labs.adobe.com/technologies/flashcatalyst/
Flex 4 SDK (Gumbo) @Adobe Open Source
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo
AIR 2 @Adobe Labs
http://labs.adobe.com/technologies/air2/
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

22. 関連URL ‒ 技術情報
Flex Component Explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html
Flex Style Explorer
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
Adobe Developer Connection
http://www.adobe.com/jp/devnet/
Adobe Developer Box plus (AIRアプリケーション）
http://www.adobe.com/jp/joc/adb/
Tour de Flex（AIRアプリケーション）
http://www.adobe.com/devnet/flex/tourdeflex/
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

23. まとめ
Flexは、Flash Platform上でRIA
開発をするためのフレームワーク
MXMLとActionScript 3
標準コンポーネント多数
Flash Builder 4 のテーマ
生産性の向上
データ中心型開発
デザイナー/デベロッパー連携
Adobe Labsでベータ版公開中
2010年上半期にリリース
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

24. ®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.