flex開発を加速するflash builder 4新機能紹介
DESCRIPTION
Developers Summit 2010(2/19)に講演したFlash Builder 4の新機能紹介の資料です。 当日はデモ中心でしたので、追加の情報などは今後、アドビの技術者サイト「Adobe Developer Connection」で公開していきます。 http://www.adobe.com/jp/devnet/TRANSCRIPT
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Flex開発を加速する Flash Builder 4 の 新機能紹介
アドビ システムズ 株式会社
轟 啓介 [email protected]
Twitter : @keisuke322
2010/2/19
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Adobe Flash Platformの構成図
アプリケーション コンテンツ 動画
Flash Platformによって 統合される
Adobe Creative Suite
Adobe ColdFusion Builder
Adobe ColdFusion
Adobe LiveCycle ES
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Flex フレームワーク
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Adobe Flex SDK (Software Development Kit) Flashアプリケーション、AIRアプリケーションを開発するための無償開発キット。 オープンソースのFlexフレームワークのためのAPI、コンパイラ、デバッガ、ドキュメントなどが含まれている。
Flexフレームワーク
Flex 4 SDK (Gumbo) @Adobe Open Sourcehttp://opensource.adobe.com/wiki/display/flexsdk/Gumbo
Download
Flash Platform ランタイム
Flex アプリケーション
Flex フレームワーク
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
<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ファイルにコンパイル
Flexフレームワークにおける開発手法
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
デモ
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Adobe Flash Builder
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
MXMLとActionScript コード編集
ビジュアルなレイアウトとスタイル設定
インタラクティブなデバッグ・ プロファイリング機能
クロスプラットフォームのリッチインターネットアプリケーションやコンテンツの迅速な開発を支援する、開発者のためのEclipse(TM)ベースのプロフェッショナル水準IDE (Integrated Development Environment;統合開発環境)
Flash Builderとは?
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Flexアプリケーションのアプローチ
一般的にデザインかデータのどちらかにフォーカスして開発が進む
インフォメーション アーキテクトの関与
Creative Suite ツールの使用
「ルック&フィール」の重要視
データ駆動、サービス駆動
タスク指向 (DBへのレコード追加や更新など)
ユーザビリティは大事だが、 「ルック&フィール」要件への こだわりは少ない
デザインフォーカス データフォーカス
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Flexアプリケーションのアプローチ
最初のフォーカスがどちらであれ、実装とテストの工程は共通
実装 ハンドコーディング 保守性 コードフォーマット
テストとデプロイ プロファイル デバッグ ビルドプロセス
デザインフォーカス データフォーカス
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Flash Builder 4 のテーマ
生産性の向上 データ中心型開発 デザイナー/ デベロッパー連携
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
生産性の向上 Developer Productivity
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
コーディング生産性
パッケージエクスプローラ
getter/setterの生成
コードの自動インデント
ASDocツールヒント
呼び出し階層ビュー
…
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
テストとデプロイ(Premium版のみ)
ネットワークモニター
Unitテスト
コードカバレッジ
プロファイラー
コマンドライン・ビルド
デバッグ機能 (Standard版でも利用可)
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
データ中心型開発 Data-Centric Development
SOAP REST
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
データ中心型開発(Data-centric Development)
Java
PHP
ColdFusion
SOAP
REST
…
Flash Builder で サービスを検証
サービスモデルをビルド
データの型と操作を 設定
データバインド
UI生成
ページング
データ管理
2. サービスをモデル化 1. サービスを定義 3. UIコンポーネントに サービスの操作をバインド
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
データ中心型開発:サポートされるサービス
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.
®
データ中心型開発:クライアントサイド・データ管理
クライアントサイドのデータ操作をサーバサイドの操作に紐付ける
生成、取得、更新、削除など
データの一括更新と削除の自動化
DBレコードをインスタンスに変換
データ変更時は画面に反映 (データバインド)
レコードセットのページング 指定したレコード数を自動取得
大量データを理想的なデータ量にしてGridやListなどセット
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
デザイナー/ デベロッパー連携 Designer-Developer Workflow
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
デザイナー/デベロッパー連携
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 reserved. Adobe confidential.
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
関連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.
®
関連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.
®
まとめ
Flexは、Flash Platform上でRIA開発をするためのフレームワーク
MXMLとActionScript 3
標準コンポーネント多数
Flash Builder 4 のテーマ 生産性の向上
データ中心型開発
デザイナー/デベロッパー連携
Adobe Labsでベータ版公開中
2010年上半期にリリース
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®