flex開発を加速するflash builder 4新機能紹介

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

®

Flex開発を加速する Flash Builder 4 の新機能紹介

アドビシステムズ株式会社

轟啓介 [email protected]

Twitter : @keisuke322

2010/2/19


®

Adobe Flash Platformの構成図

アプリケーションコンテンツ動画

Flash Platformによって統合される

Adobe Creative Suite

Adobe ColdFusion Builder

Adobe ColdFusion

Adobe LiveCycle ES


®

Flex フレームワーク


®

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 フレームワーク


®

<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フレームワークにおける開発手法


®

デモ


®

Adobe Flash Builder


®

MXMLとActionScript コード編集

ビジュアルなレイアウトとスタイル設定

インタラクティブなデバッグ・プロファイリング機能

クロスプラットフォームのリッチインターネットアプリケーションやコンテンツの迅速な開発を支援する、開発者のためのEclipse(TM)ベースのプロフェッショナル水準IDE (Integrated Development Environment；統合開発環境)

Flash Builderとは？


®

Flexアプリケーションのアプローチ

一般的にデザインかデータのどちらかにフォーカスして開発が進む

インフォメーションアーキテクトの関与

Creative Suite ツールの使用

「ルック＆フィール」の重要視

データ駆動、サービス駆動

タスク指向（DBへのレコード追加や更新など）

ユーザビリティは大事だが、「ルック＆フィール」要件へのこだわりは少ない

デザインフォーカスデータフォーカス


®

Flexアプリケーションのアプローチ

最初のフォーカスがどちらであれ、実装とテストの工程は共通

実装ハンドコーディング保守性コードフォーマット

テストとデプロイプロファイルデバッグビルドプロセス

デザインフォーカスデータフォーカス


®

Flash Builder 4 のテーマ

生産性の向上データ中心型開発デザイナー/ デベロッパー連携


®

生産性の向上 Developer Productivity


®

コーディング生産性

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

getter/setterの生成

コードの自動インデント

ASDocツールヒント

呼び出し階層ビュー

…


®

テストとデプロイ（Premium版のみ）

ネットワークモニター

Unitテスト

コードカバレッジ

プロファイラー

コマンドライン・ビルド

デバッグ機能（Standard版でも利用可）


®

データ中心型開発 Data-Centric Development

SOAP REST


®

データ中心型開発（Data-centric Development）

Java

PHP

ColdFusion

SOAP

REST

…

Flash Builder でサービスを検証

サービスモデルをビルド

データの型と操作を設定

データバインド

UI生成

ページング

データ管理

2. サービスをモデル化 1. サービスを定義 3. UIコンポーネントにサービスの操作をバインド


®

データ中心型開発：サポートされるサービス

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>


®

データ中心型開発：クライアントサイド・データ管理

クライアントサイドのデータ操作をサーバサイドの操作に紐付ける

生成、取得、更新、削除など

データの一括更新と削除の自動化

DBレコードをインスタンスに変換

データ変更時は画面に反映（データバインド）

レコードセットのページング指定したレコード数を自動取得

大量データを理想的なデータ量にしてGridやListなどセット


®

デザイナー/ デベロッパー連携 Designer-Developer Workflow


®

デザイナー/デベロッパー連携

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.


®

関連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/


®

関連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/


®

まとめ

Flexは、Flash Platform上でRIA開発をするためのフレームワーク

MXMLとActionScript 3

標準コンポーネント多数

Flash Builder 4 のテーマ生産性の向上

データ中心型開発

デザイナー/デベロッパー連携

Adobe Labsでベータ版公開中

2010年上半期にリリース


®

flex開発を加速するflash builder 4新機能紹介

Technology

rights reserved

adobe

examples

gumbo

labs

opensource

www