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

2011.02.23

Adobe RIA製品のご紹介
Flash PlatformとFlexフレームワーク
太田禎一 | アドビシステムズ株式会社テクニカルエバンジェリスト

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

Agenda

 RIAとは
 RIAの効果
 Flash Platform
 Flash Player
 エンタープライズ導入
 AIR Runtime
 Flexフレームワーク
 Flex Builder
 Flash & HTML5

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

RIA以前


RIA以降


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

魅力的で情報に富んだセルフサービス指向の
RIAが生む効果：
 サイト滞在時間の増加
 利用の活性化
 離脱率の減少
 購買の増加
 他ユーザーへの「オススメ」
 再訪問の増加
“…オンラインカスタマーエクスペリ
優れたコンシューマー向けRIAの成功例：エンスの控えめな改善だけでも年間
売り上げが11,700万ドルから31,100
 オンラインセールスが最大30%向上*
万ドルに増加した。その理由は追加
 コンバージョン、クロスチャネルセールの購入、他社への乗り換えがしづら
ス、アップセルが最大40%向上* いこと、そして同僚や友人へオスス
メしやすいことだ”
 お問い合わせ電話を年間最大20%削減*
– 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, 2007

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

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

 データ入力時間を最大40%削減

 入力エラーの減少

 オペレーティングコストの減少

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

Adobe Flash Platform全体像

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

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

Adobe Flash CS5 Adobe Flash Adobe Flex Adobe AIR Adobe Flash Adobe Flash
Professional Catalyst Platform Media Server
Services Family

Adobe Flash Open Source Adobe Adobe
Builder Media Flash Player LiveCycle
Framework

Flash Platformと連携
← するAdobe製品群 →
Creative Suite 5 ColdFusion Builder

Flash Platformテクノロジーレイヤー
AIR(.air) Flash(.swf) Ajax
デスクトップ向けブラウザ向け (.js/.html)

サーバー Appサーバー Appサーバー
APPサーバー
およびクラウド / Service / Service

データプッシュ

データプッシュ
バイナリ通信

バイナリ通信
XML/SOAP

XML/SOAP

XML/JSON

(Request)
HTML
サーバー間通信
データ形式

AIRアプリケーション Flashアプリケーション HTML
アプリケーション +
(フレームワーク) JavaScript
Flexフレームワーク Flexフレームワーク

Flash Player
実行環境
AIR Runtime ブラウザ
（ランタイム）
ブラウザ

OS WIN Mac Linux WIN Mac Linux WIN Mac Linux

ローカルDB SQLite

Adobe Flash Player

 普及率：98%
 FP9 : 99.7%/FP10 : 97.1%
 最新バージョンは FP10.2
 スマートフォン/Google TVに対応
 Androidは Ver2.2以降
 マルチタッチ＆ジェスチャー
 GPUサポート
 DRM対応 (Flash Access 2.0)


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

 米国での調査：2009年6月時点で
Flash Player 9以上が98.2%
 ただし日本では違うかもしれず、
さらに言えば企業ごとにポリシー
があるためケースバイケースとし
か言えない
 個々の企業において普及率やポリ
シーを確認する事が非常に重要
 Flash Playerは企業内利用のための
デプロイメントの仕組みを用意

Source: 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にも対応 (イントラ・エクス
トラネット限定)

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

Adobe AIR Runtime

 Web技術をデスクトップへ
 ランタイムインストール数：3億＋
 最新バージョンは AIR 2.5.1
 スマートフォン/スマートTVに対応
 Androidは Ver2.2以降
 最新WebKit搭載 (HTML5対応)
 SQLite搭載
 PDFの表示
 ソケット機能 (Server/Client)
 UDP通信サポート
 外部プロセス起動と連携 Browser Database
(WebKit) (SQLite)


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

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


Adobe Flex Framework

 開発者向けのフレームワーク
 Flash/AIR アプリケーションに最適

 オープンソース (MPL1.1)
 最新バージョンは Flex 4.1
 MXMLとActionScript 3で開発
 約70の標準ビジュアルコンポーネント
 Button、DataGrid、ComboBox、BarChart…

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

Flexアプリケーション

Flexフレームワーク

Flash Platformランタイム


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

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

<fx:Script> MXML
<![CDATA[ (UI定義)
import mx.controls.Alert
private function myAlert(alertStr:String):void{
Alert.show(alertStr);
}
]]>
ActionScript 3
</fx:Script> (動作・振る舞い)

 ボタン自体はMXMLタグをコード記述するだけ、
あるいはVBのようなドラッグ&ドロップ配置
 ボタンの動作はActionScript 3で記述する
 ソースはテキスト形式、SWFファイルにコンパイル

Flexフレームワークの進化

Mobile

Desktop Desktop

Web Web Web

Flex 1 – Flex 2 Flex 3 – Flex 4 "Hero"
(2004/03) (2006/07) (2008/02) (2010/03) (2011/1H)


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

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

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

アプリ開発および
プロジェクト進行
CAIRNGORM
に役立つ150以上
の関連テクノロ
ジー ADOBE OPEN SOURCE
(opensource.adobe.com)

 1,000以上のシステムイン  フレームワーク  70以上のOpen Screen  500以上のユーザー
テグレーター、ISV、VAR Projectメンバー企業グループ
 パフォーマンス測定 & 負荷
 Flex Users Group
 52以上のAdobeエージェ試験
Japan (FxUG) は
ンシーパートナー  ツールプラグイン 3,000名以上の登録
 250以上のトレーニングメンバー1
 コンポーネント
パートナー  AIR/Flash for
 拡張機能、関数、コード Androidワーキング
グループ2
Links: FxUG http://fxug.net/ AF4A http://groups.google.com/groups/AF4A/
1 2

Flex Builder

 Flexの開発効率を高めるIDE
 Eclipseのプラグイン
 JDTと同様の機能
 コードヒント/コード自動生成
 参照階層表示
 ステップスルーデバッグ
 ユニットテスト (FlexUnit)
 SVN対応/ANT対応
 その他の強力機能
 プロファイラー
 ネットワークモニター


LiveCycle DS

 J2EEサーバーとクライアントを最も効率よ
く連携
 バイナリー通信
 大量のデータ通信における応答時間の短縮
 データプッシュ
 リアルタイムにサーバーからクライアントに
データを送信
 データマネジメント
 複数クライアントによる同一データ変更の
衝突管理などを自動で行う
 その他機能
 データモデリング機能
 Reliable Communication
 Data Throttling オープンソース版
BlazeDS
 最新バージョンは ES2.5
機能制限比較
 オープンソース版 BlazeDS は無償 http://www.adobe.com/jp/products/livecycle/datase
rvices/compare.html/


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

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

30000
6
Performance (milliseconds)

25000
5
20000

Bandwidth (MB)
4
15000

10000 3

5000 2

0
Ajax HTML Ajax XML JSON Flex AMF 1
Rendering 1500 1500 1600 91
Parsing 0 25200 761 3
0
Transfer 5600 2600 2200 591 Ajax HTML Ajax XML JSON Flex AMF
Server 271 228 645 79 Bandwidth 6.3 4.7 3.1 0.3

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

Benchmark: Internet Explorer 8 on Lenovo ThinkPad W500

Flexフレームワークにおけるデータサービスの位置づけ
Ajaxと同じ
テキストベース
のHTTP通信によ
る限界 <XML>

AMF3によるバックエンド
バイナリ通信でシステム
大量なデータも
LiveCycle
DataServices
高速通信
Application
Java

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

JMS

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

Flash Platform Total Addressable Market

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

赤いトコもアプリ
ならOK♡ Desktop PC@96.05%

iOS@2.05%

Android@0.57%

Others (incl.
赤いトコ以外 smartphones)@1.33%
Flash Platformは何の
問題もありません 

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

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

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

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

 "HTML5"はW3Cで策定中の次期
HTML仕様に含まれる機能のほか
に、CSS3、SVG、その他ブラウザベ
ンダー独自の先行実装機能も含めて
使われる幅広いコトバ
 RIA実装では、具体的に個々の機能
がどれだけ普及しているかが重要
 Canvas support (basic) @50.88%*
 CSS3 Animation support @19.31%*
 Video support (H.264) @20.07%*
 スマートフォン限定なら全然アリ
 コンシューマー向けPCサイトは時期
早尚。企業内向けはモダンブラウザ
を一斉導入できれば問題ない感じ
 フレームワーク重要

Source: *When Can I use... (Feb. 2011) 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/


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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (7)

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

Similaire à Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク (20)

Plus de Teiichi Ota

Plus de Teiichi Ota (20)

Dernier

Dernier (9)

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