クロスプラットフォーム戦略の優位性

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

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

クロスプラットフォーム戦略の優位性

2011.04.12


アジェンダ

ビジネスにおけるクロスプラットフォームの重要性

スマートフォンの台頭とプラットフォーム分断化

マルチプラットフォーム対応の問題点

できればワンソース・マルチユースで…

クロスプラットフォームアプリ開発ソリューションAdobe AIR

開発技術選択のスイートスポットを見極める

TAM (最大市場規模) に効率的にリーチするための最適解は？

まとめ

補足資料

2


ビジネスにおけるクロスプラットフォームの重要性

3


インターネット接続デスクトップOSワールドワイドシェア

91.4%

7.4%

1.1%

WindowsMacLinux

4Source: Wikipedia (March 2011) http://en.wikipedia.org/wiki/Usage_share_of_operating_systems

この市場でもっとも効率的にビジネスを

するには？

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


Adobeの場合：デスクトップ製品25%以上の売り上げはMacから

75%

25%

WindowsMac

5Source: CNET News (Feb 23, 2005) http://news.cnet.com/Adobe-versus-the-world---page-2/2008-1082_3-5586294-2.html

単純な少数派切り捨て

ではビジネス機会を損失する

http://news.cnet.com/Adobe-versus-the-world---page-2/2008-1082_3-5586294-2.html�


スマートフォンの台頭とプラットフォーム分断化

6


スマートフォンOSワールドワイドマーケットシェア予測

39.5% 45.4%

14.9%13.7%

15.7%15.3%

20.9%0.2%

5.5%20.9%

2011 2015

OthersWP7/WMSymbianiOSBlackBerryAndroid

7Source: IDC (March 29, 2011) http://www.idc.com/getdoc.jsp?containerId=prUS22762811

スマートフォンの世界ではプラットフォームの分断化

がキビシイ…

http://www.idc.com/getdoc.jsp?containerId=prUS22762811�


スマートフォンOSワールドワイド年間出荷台数予測 (億台)

0

2

4

6

8

10

12

2010 2011 2012 2015

OthersMicrosoftiOSRIMAndroidSymbian

8Source: Gartner (April 2011) http://www.gartner.com/it/page.jsp?id=1622614

iOSだけ！とか1つに「賭け」てしまうとビジネス機会損失も増大

http://www.gartner.com/it/page.jsp?id=1622614�


マルチプラットフォーム対応の問題点

9


おカネがかかります

開発会社Golden Gekkoが公表した、商用モバイルアプリを外注した場合の目安となる金額： Budget for iPhone app: Simple apps: 10-20.000 euro (1,200〜2,400万円)

Average cost of branded apps: 30.000 euro (3,600万円)

Budget for Android app: Simple apps: 15-25.000 euro (1,800〜3,000万円)

Average cost of branded apps: 40.000 euro (4,900万円)

Q&AサイトStack Overflowに寄せられた回答： "Twitterrific" iPadアプリはおよそ$250,000 (2,100万円)

"Barack Obama" iPhoneアプリはおよそ$50,000〜$150,000 (420〜1260万円)

これらが対応プラットフォームごとに追加。QA・アップデート・サポート費用を考慮するとさらにコストが…

10Source: Golden Gekko http://bit.ly/fDSJTE Stack Overflow http://bit.ly/g5bOdx

http://bit.ly/fDSJTE�

http://bit.ly/g5bOdx�


できればワンソース・マルチユースで…

11


そこでクロスプラットフォームなアプリ開発ソリューション

12


...ちょっとまって、HTML5でいいじゃん、ほか要らないじゃんか！

HTML5では「App Store」で配布・販売できるアプリが作れない

HTML5ではネイティブ機能 (カメラとか) にアクセスできるアプリが開発できない (なのでPhoneGapでラップする)

スマートフォンブラウザ間でHTML5の実装やパフォーマンスが(いまのところ) 違いすぎる実装の違いはjQuery Mobileで吸収

すると幸せかも

…なので、やりたいこと次第でHTML5でよかったり良くなかったり、です

13


HTML5：When can I use... http://caniuse.com/

14

このサイトを常にウォッチして

動向を掴む

http://caniuse.com/�


クロスプラットフォーム開発ソリューション比較

Adobe AIR Titanium Corona Unity PhoneGap

提供形態有償 (無償トライアルあり)＋無償SDK

有償 (無償の機能限定版あり)

有償 (無償のストア登録不可版あり)

有償 (無償の機能限定版あり)

無償

対応OS Windows/Mac/Linux/iOS/Android/Smart TV/BlackBerry Tablet OS

Windows/Mac/Ubuntu/iOS/Android

iOS/Android Win/Mac/Linux/iOS/Android/Wii/Xbox360/PS3

iOS/Android/BlackBerry/Windows Mobile/webOS/Symbian

言語 ActionScript 3 JavaScript Lua C#/Boo/JavaScript

HTML/CSS/JavaScript

ネイティブコードにコンパイル

● (iOSはコンパイル、その他はJIT)

▲ (User codeはコンパイルされない)

● ● ×

ネイティブコードとのブリッジ

× (2011年中予定)

● × ● ●

ネイティブUIパーツの利用

× (独自UI framework)

● ▲ (2011年中改良予定)

▲ (UIKit等を重ねる)

▲ (3rd Party Lib経由)

15


クロスプラットフォームアプリ開発ソリューション

Adobe AIR

16


Adobe AIRとは

クロスプラットフォームを実現するアプリケーション実行環境 (ランタイム) と開発キット (SDK)

17

PCWin/Mac/Linux

Smartphone & TabletiOS/Android/BlackBerry Tablet OS

Smart TVSamsung etc.,


AIRだと「ワンソース・マルチユース」の実際はこんな感じ

18

共有ソースコード

デスクトップOS特有機能のコード

モバイルOS特有機能のコード

Smart TV OS特有機能のコード

PC用のUI Tablet用のUI Smart TV用のUISmartphone

用のUI


AIRのいいところ：企画・デザインを迅速にマルチスクリーン展開

19

企画やデザインが生まれるのは

ココデザイナー

C++デベロッパー

デザイナーと連携しやすい

Adobe & 3rd Party開発環境

ActionScriptデベロッパー

Objective-Cデベロッパー

C#/Javaデベロッパー


AIRのいいところ：開発効率が強まるAdobe Flex Framework

20

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

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

最新バージョンはFlex 4.5

MXMLとActionScript 3で開発

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

スマートフォン対応「Flex Mobile」

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 Frameworkにおける開発手法

21

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

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

MXML(UI定義)

ActionScript 3(動作・振る舞い)


モバイル向けUIフレームワーク

Flex Mobile

現在のAdobe AIR

AIRでできるモバイルアプリと今後のロードマップ

22

カメラアプリ

Webサービスクライアント

2Dアクション

ゲーム

パズル等カジュアル

ゲーム

LOB (業務)アプリ

GPU対応グラフィックスと

HDビデオ"Stage Video"

HDビデオプレーヤー

リッチな電子雑誌

オーディオビデオ

プレーヤー

GPU対応3D API

"Molehill"

高速2Dアクション

ゲーム

高速3Dアクション

ゲーム

定型的なユーザーインターフェイス表現力の高いグラフィックス


モバイル向けフレームワーク：Flex Mobile (Flash Builder 4.5に同梱)

23

Adobe Flash Builder 4.5 (IDE)

プレビュー画面

Link: http://www.adobe.com/jp/products/flash-builder.html

http://www.adobe.com/jp/products/flash-builder.html�


Flex MobileでLOBアプリ開発 (Android & iPhone & iPad)

24Link: http://coenraets.org/blog/2011/03/flex-on-the-ipad/

http://coenraets.org/blog/2011/03/flex-on-the-ipad/�


ネイティブと遜色のないスピード (iPhone & iPad)

25Link: http://www.riagora.com/2011/03/preview-of-flex-on-ios/

http://www.riagora.com/2011/03/preview-of-flex-on-ios/�


実際のところAdobe AIRによるコスト削減効果は？

制作会社Woven Interactiveの場合 40 fpsのアクションゲーム (Android＋iOS) コードの違いはスクリーンサイズの違いを吸収するための最適化部

分のみ。数分の作業ネイティブ開発に比べ45%のコストカット

メンテやサポートを考慮したらトータル50%〜60%の削減

26Link: http://www.flash-3d.net/2011/03/air-2-6-game-development/

http://www.flash-3d.net/2011/03/air-2-6-game-development/�


さらに進化しつづけるAdobe AIR (2011年下半期以降に予定)

OpenGL ES2/DirectX対応の3D API "Molehill" Zombie Tycoon：PSPのゲームをそ

のままFlashに移植。同時表示50万ポリゴンで快適に動作

FacebookやMixを含むPC & Tablet & Smartphone & Smart TVでコンソールレベルの高機能2D/3Dゲームを提供可能

GPU対応、1080p HDでコマ落ちなしの高性能ビデオ "Stage Video"

27Link: Zombie Tycoon Video http://www.youtube.com/watch?v=LrArtYuEkEI Demo http://molehill.zombietycoon.com/

http://www.youtube.com/watch?v=LrArtYuEkEI�

http://molehill.zombietycoon.com/�


開発技術選択のスイートスポット

を見極める

28


モバイル開発のスイートスポットはネイティブとHTMLのあいだに

29

ネイティブ開発

(全機能！)

ネイティブ連携、カメラ対応、ローカル

データ保存など

高度な3D、高速で複雑なアニメーション、タイポグラフィ、P2P通信、

DRM保護されたビデオなど(ブラウザ内)

角丸・グラデーション、ビットマップ・ベクター描画、シンプルなアニメーション・エフェクト・

トランジション、保護が不要なビデオなど(ブラウザ内)

リッ

チさ

& 機

能

開発の容易さ

Web

アプ

リ

※互換性がとれる機能に限定した場合

※iOSだけアレなので減点


TAM (最大市場規模)に効率的にリーチするための

最適解は？

30


インターネット接続OS利用ワールドワイドシェア

40.30%

27.41%

14.33%

7.07%

2.20% 1.09% 0.73%

Windows XPWindows 7Windows VistaOS XiOSLinuxAndroidSymbianRIMOthers

31Source: Wikipedia (March 2011) http://en.wikipedia.org/wiki/Usage_share_of_operating_systems

スマホのシェアはインターネット全体においてまだごく少数

PCも含めた最大リーチを実現できるソリューションとは？

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


Adobeからのオススメ

PC (シェア約90%)：Adobe AIRiOS (2.20%)：Adobe AIR

Android (0.73%)：Adobe AIRWindows Phone 7：いつかAdobe AIRが載りますように♡

32


まとめ

クロスプラットフォーム性はビジネス成功のカギ

イマドキのクロスプラットフォームソリューションはパフォーマンスも

ネイティブに引けをとらない

ビジネス要件によってネイティブとHTMLの狭間のスイートスポットは

変わってくる

PCという巨大マーケットはとうぶん無視できない

33


補足資料

34


Flash/Adobe AIR対応デバイス一覧http://www.adobe.com/flashplatform/certified_devices

35

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


[日本で入手可能なiOSデバイス] Adobe AIR対応

36

iPadiPhone/iPod Touch

As of April 2011


[日本で入手可能なAndroidデバイス] Flash Player & Adobe AIR対応

37

GALAXY S

htc Desire

SIRIUSα IS06REGZA IS04IS03

Xperia arcMEDIAS Optimus Pad

IS05

GALAPAGOS

LYNX 3D GALAXY Tab

htc Desire HD Dell Streak

htc Evo WiMAX motorola XOOM

As of April 2011


クロスプラットフォーム開発ソリューション

Adobe AIRhttp://www.adobe.com/jp/products/air/ (製品概要)http://www.adobe.com/jp/products/air/tools/ (開発ツール)http://www.adobe.com/jp/products/air/sdk/ (無償SDKダウンロード)

Titaniumhttp://www.appcelerator.com/http://code.google.com/p/titanium-mobile-doc-ja/ (日本語ドキュメント)

Coronahttp://www.anscamobile.com/corona/https://groups.google.com/group/coronaja?hl=ja (日本コロナの会)

Unityhttp://unity3d.com/http://unity3d.com/japan/ (日本語情報)

PhoneGaphttp://www.phonegap.com/http://www.adobe.com/jp/products/dreamweaver.html (Dw CS5.5同梱)

38

http://www.adobe.com/jp/products/air/�

http://www.adobe.com/jp/products/air/tools/�

http://www.adobe.com/jp/products/air/sdk/�

http://www.appcelerator.com/�

http://code.google.com/p/titanium-mobile-doc-ja/�

http://www.anscamobile.com/corona/�

https://groups.google.com/group/coronaja?hl=ja�

http://unity3d.com/�

http://unity3d.com/japan/�

http://www.phonegap.com/�

http://www.adobe.com/jp/products/dreamweaver.html�


Flex & AIR関連資料

39

「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/

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/�

クロスプラットフォーム戦略の優位性

Technology