Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

太田禎一 | アドビシステムズ株式会社テクニカルエバンジェリスト

Adobe RIA製品のご紹介Flash PlatformとFlexフレームワーク

2011.02.23


Agenda

RIAとは

RIAの効果

Flash Platform

Flash Player

エンタープライズ導入

AIR Runtime

Flexフレームワーク

Flex Builder

Flash & HTML5

2


RIA以前

3


RIA以降

4


コンシューマー向けRIAは高収益と低コストをもたらす

魅力的で情報に富んだセルフサービス指向のRIAが生む効果：サイト滞在時間の増加利用の活性化離脱率の減少購買の増加他ユーザーへの「オススメ」再訪問の増加

優れたコンシューマー向けRIAの成功例：オンラインセールスが最大30%向上* コンバージョン、クロスチャネルセール

ス、アップセルが最大40%向上* お問い合わせ電話を年間最大20%削減*

“…オンラインカスタマーエクスペリエンスの控えめな改善だけでも年間売り上げが11,700万ドルから31,100万ドルに増加した。その理由は追加の購入、他社への乗り換えがしづらいこと、そして同僚や友人へオススメしやすいことだ”

– Forrester “Customer Experience Boosts Revenue” by Bruce D. Temkin, June 22, 2009

Source: *Forrester “The Business Case for Rich Internet Applications” by Ron Rogowski, March 12, 20075

http://www.adobe.com/enterprise/pdfs/Forrester_RRogowski_BusCase_for_RIAs3_07.pdf�


エンタープライズにおけるRIAの効果

6

業務システムにおけるRIAの効果：混在する (レガシー含む) さまざまな形式のデータ資源を画面上で容

易に統合従業員の生産性向上データ入力時間を最大40%削減入力エラーの減少オペレーティングコストの減少

Source: http://www.adobe.com/enterprise/pdfs/infotech-ria-business-case.pdf

http://www.adobe.com/enterprise/pdfs/infotech-ria-business-case.pdf�


Adobe Flash Platform全体像

7

Adobe Flash Player

Adobe Flex Adobe Flash Media Server

Family

デザイン & 開発ツールクライアントサーバーフレームワーク

Adobe AIRAdobe Flash CS5 Professional

Adobe Flash Catalyst

Adobe FlashBuilder

Adobe LiveCycle

アプリ & コンテンツ & ビデオ(マルチスクリーン)

サービス

Adobe Flash Platform Services

Flash Platformと連携← するAdobe製品群 →

Creative Suite 5 ColdFusion Builder

Open SourceMedia

Framework


Flash Platformテクノロジーレイヤー

8

ブラウザ実行環境（ランタイム）

ローカルDB

HTML+

JavaScriptアプリケーション(フレームワーク)

AIRアプリケーション Flashアプリケーション

WIN Mac LinuxOS WIN Mac Linux

APPサーバー

XML/

JSO

N

HTM

L

(Req

uest

)

Ajax(.js/.html)

サーバーおよびクラウド

サーバー間通信データ形式

Appサーバー/ Service

XML/

SOAP

バイ

ナリ

通信

デー

タプ

ッシ

ュ

AIR(.air)デスクトップ向け

Appサーバー/ Service

XML/

SOAP

バイ

ナリ

通信

デー

タプ

ッシ

ュ

Flash(.swf)ブラウザ向け

Flexフレームワーク Flexフレームワーク

WIN Mac Linux

AIR RuntimeFlash Player

ブラウザ

SQLite


Adobe Flash Player

9

普及率：98% FP9 : 99.7%/FP10 : 97.1%

最新バージョンは FP10.2

スマートフォン/Google TVに対応 Androidは Ver2.2以降

マルチタッチ＆ジェスチャー

GPUサポート

DRM対応 (Flash Access 2.0)


Flash Playerのエンタープライズ普及

10

米国での調査：2009年6月時点でFlash Player 9以上が98.2%

ただし日本では違うかもしれず、さらに言えば企業ごとにポリシーがあるためケースバイケースとしか言えない

個々の企業において普及率やポリシーを確認する事が非常に重要

Flash Playerは企業内利用のためのデプロイメントの仕組みを用意

Source: http://www.adobe.com/products/player_census/flashplayer/enterprise_penetration.html

http://www.adobe.com/products/player_census/flashplayer/enterprise_penetration.html�


Flash Playerのエンタープライズデプロイメント

イントラネットやCD-ROMによる(インターネットに接続しない) クライアント配置が可能

要申請 (無償)

Microsoft Systems Management Server (SMS) 2003 R2 Custom Updates Publishing Tool (CUPT) およびMicrosoft System Center Configuration Manager (SCCM/ConfigMgr) System Center Updates Publisher (SCUP) を利用した配置のためにFlash Player catalogを提供

Citrixにも対応 (イントラ・エクストラネット限定)

11Source: http://www.adobe.com/jp/devnet/flashplayer/articles/flash_player_admin_guide.html

http://www.adobe.com/jp/devnet/flashplayer/articles/flash_player_admin_guide.html�


Adobe AIR Runtime

12

Web技術をデスクトップへ

ランタイムインストール数：3億＋

最新バージョンは AIR 2.5.1

スマートフォン/スマートTVに対応 Androidは Ver2.2以降

最新WebKit搭載 (HTML5対応)

SQLite搭載

PDFの表示

ソケット機能 (Server/Client)

UDP通信サポート

外部プロセス起動と連携 Browser(WebKit)

Database(SQLite)


2つのユースケースに対応

13

ブラウザ内Webアプリスタンドアローンアプリ


Adobe Flex Framework

14

開発者向けのフレームワーク

Flash/AIR アプリケーションに最適

オープンソース (MPL1.1)

最新バージョンは Flex 4.1

MXMLとActionScript 3で開発

約70の標準ビジュアルコンポーネント Button、DataGrid、ComboBox、BarChart…

スマートフォンに対応 (Preview版公開中)

Flash Platformランタイム

Flexアプリケーション

Flexフレームワーク


<s:Button label="Hello" click="myAlert('Hello World!')"/>

<fx:Script><![CDATA[

import mx.controls.Alertprivate function myAlert(alertStr:String):void{

Alert.show(alertStr);}

]]></fx:Script>

Flexフレームワークにおける開発手法

15

ボタン自体はMXMLタグをコード記述するだけ、あるいはVBのようなドラッグ&ドロップ配置

ボタンの動作はActionScript 3で記述するソースはテキスト形式、SWFファイルにコンパイル

MXML(UI定義)

ActionScript 3(動作・振る舞い)


Flexフレームワークの進化

16

Mobile

Web

"Hero"

Web

Flex 1 – Flex 2(2004/03) (2006/07)

Web

Desktop

Flex 3 – Flex 4(2008/02) (2010/03) (2011/1H)

Desktop


開発者コミュニティ、プログラム、パートナー

17

CAIRNGORM

ADOBE OPEN SOURCE (opensource.adobe.com)

フレームワークパフォーマンス測定 & 負荷

試験ツールプラグインコンポーネント拡張機能、関数、コード

1,000以上のシステムインテグレーター、ISV、VAR

52以上のAdobeエージェンシーパートナー

250以上のトレーニングパートナー

70以上のOpen Screen Projectメンバー企業

500以上のユーザーグループ

Flex Users Group Japan (FxUG) は3,000名以上の登録メンバー1

AIR/Flash for Androidワーキンググループ2

パートナープログラムテクノロジーコミュニティ

開発者300万以上 (ワールドワイド)

アプリ開発およびプロジェクト進行に役立つ150以上の関連テクノロジー

Links: 1 FxUG http://fxug.net/ 2 AF4A http://groups.google.com/groups/AF4A/

http://fxug.net/�

http://groups.google.com/groups/AF4A/�


Flex Builder

18

Flexの開発効率を高めるIDE

Eclipseのプラグイン

JDTと同様の機能コードヒント/コード自動生成

参照階層表示

ステップスルーデバッグ

ユニットテスト (FlexUnit)

SVN対応/ANT対応

その他の強力機能プロファイラー

ネットワークモニター


LiveCycle DS

19

J2EEサーバーとクライアントを最も効率よく連携

バイナリー通信大量のデータ通信における応答時間の短縮

データプッシュリアルタイムにサーバーからクライアントに

データを送信

データマネジメント複数クライアントによる同一データ変更の

衝突管理などを自動で行う

その他機能データモデリング機能

Reliable Communication

Data Throttling

最新バージョンは ES2.5 オープンソース版 BlazeDS は無償

オープンソース版BlazeDS

機能制限比較http://www.adobe.com/jp/products/livecycle/dataservices/compare.html/

http://www.adobe.com/jp/products/livecycle/dataservices/compare.html/�

http://www.adobe.com/jp/products/livecycle/dataservices/compare.html/�


バイナリーデータ通信形式Flex AMFのデータ転送パフォーマンス

20

Ajax HTML Ajax XML JSON Flex AMF

Rendering 1500 1500 1600 91

Parsing 0 25200 761 3

Transfer 5600 2600 2200 591

Server 271 228 645 79

0

5000

10000

15000

20000

25000

30000

35000

Perf

orm

ance

(mill

isec

onds

)

20,000行のデータを転送 & 表示

Ajax HTML Ajax XML JSON Flex AMF

Bandwidth 6.3 4.7 3.1 0.3

0

1

2

3

4

5

6

7

Band

wid

th (M

B)

Benchmark: Internet Explorer 8 on Lenovo ThinkPad W500

※ Flex AMF通信 (HTTP) はFlash Player + LiveCycle DS/BlazeDSで実現

http://en.wikipedia.org/wiki/Action_Message_Format�

http://www.adobe.com/jp/products/livecycle/dataservices/�

http://opensource.adobe.com/wiki/display/blazeds/Overview�


Flexフレームワークにおけるデータサービスの位置づけ

21

LiveCycleDataServices

LiveCycle DataServices ES2 （J2EEアプリケーション）•リモーティング(RPC)•AMF3によるバイナリ通信•メッセージングによるプッシュ、コラボレーション•データマネジメントによるデータの同期などなど…

クライアント間及びJAVA/JMSと連携したデータプッシュを実現

バックエンドシステム

Application

Ajaxと同じテキストベースのHTTP通信によ

る限界 <XML>

Java

AMF3によるバイナリ通信で大量なデータも高速通信

JMS

Java

Source: http://www.adobe.com/jp/products/livecycle/function.html

http://www.adobe.com/jp/products/livecycle/function.html�


Flash Platform Total Addressable Market

22

インターネット接続OS市場シェア (Jan 2011)

Desktop [email protected]%

[email protected]%

[email protected]%

Others (incl.

smartphones)@1.33%

Source: http://en.wikipedia.org/wiki/Usage_share_of_operating_systems

赤いトコ以外Flash Platformは何の問題もありません

赤いトコもアプリならOK♡

http://en.wikipedia.org/wiki/Usage_share_of_operating_systems�


加速する、各種デバイスのFlash Platform対応

23Source: http://www.adobe.com/flashplatform/certified_devices/

http://www.adobe.com/flashplatform/certified_devices/�


HTML5テクノロジーの普及は？

24Source: *When Can I use... (Feb. 2011) http://caniuse.com/

"HTML5"はW3Cで策定中の次期HTML仕様に含まれる機能のほかに、CSS3、SVG、その他ブラウザベンダー独自の先行実装機能も含めて使われる幅広いコトバ

RIA実装では、具体的に個々の機能がどれだけ普及しているかが重要

Canvas support (basic) @50.88%* CSS3 Animation support @19.31%* Video support (H.264) @20.07%* スマートフォン限定なら全然アリコンシューマー向けPCサイトは時期

早尚。企業内向けはモダンブラウザを一斉導入できれば問題ない感じ

フレームワーク重要

http://caniuse.com/�


関連情報

「FlexとJavaについて学ぶ」 Java開発者向けのFlex、ActionScript3の技術記事

http://www.adobe.com/jp/devnet/flex/flex_java.html

「Flexリソース」 Flex関連の全ての技術ドキュメントを掲載

http://www.adobe.com/support/documentation/jp/flex/

「AIRリソース」 AIR関連の全ての技術ドキュメントを掲載

http://www.adobe.com/support/documentation/jp/air/

「ksk studio」 Flash Platformデベロッパーマーケティング担当轟啓介 @keisuke322 のブログ

http://kskstudio.wordpress.com/

25

http://www.adobe.com/jp/devnet/flex/flex_java.html�

http://www.adobe.com/support/documentation/jp/flex/�

http://www.adobe.com/support/documentation/jp/air/�

http://twitter.com/keisuke322/�

http://kskstudio.wordpress.com/�

Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク

Technology

Transcript of Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク