flashテクノロジーの今後とあなたの人生とのかかわりについて

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

Flashテクノロジーの今後とあなたの人生とのかかわりについて太田禎一 | アドビシステムズ株式会社デジタルメディアビジネス開発部

第3回テックヒルズ | 2012.08.29

Photo: JD Hancock http://www.flickr.com/photos/jdhancock/

http://www.flickr.com/photos/jdhancock/


おまえダレ？

デジタルメディア・ゲーム関連のビジネス開発を担当しています

放送・出版・デジタルメディアを中心に、いろいろなお客様に最新Adobeテクノロジーや、そのよさをお伝えする仕事

イベント・カンファレンスでお話したりも、ときどきします

2


きょうお話したいこと

① Flashテクノロジーが果たす役割は確実にシフトしている

② Flashテクノロジーへの投資は今後5~10年にわたって有効

③ Flash資産・ワークフローを HTML5に繋げることが成功のカギ

3


おれら情強がポストPC時代とか未来予言してやんよ♡

4


Flashは死んだ (ドヤっ)

5


実際のとこどうなのかね？

6


Flashを含むWebページ比率の遷移

7 Source: http://trends.builtwith.com/javascript/SWFObject

http://trends.builtwith.com/javascript/SWFObject


着実に減ってますね！

8


その通り。 Flashの役割がシフトして

「適材適所」が進んでいる証拠。

9


表示エフェクト・スライドショー

アニメーション・

モーションGFX

RIA (業務アプリケー

ション)

ゲーム・高度なインタラクティブコンテンツ

プレミアムオンライン

ビデオ

「アンプラグド」vs. Flash適材適所の図 (2012年8月現在)

10

http://www.pentax.jp/japan/products/k-01/

http://www.enfantsterrible.com/

http://dev.sencha.com/deploy/ext-4.0.0/examples/desktop/desktop.html

http://www.cuttherope.ie/

http://vimeo.com/18667898


参考：HTML5 Video/Audioタグを含むWebページ比率の遷移

11 Source: http://trends.builtwith.com/docinfo/HTML-5-Video-Audio-Tags

http://trends.builtwith.com/docinfo/HTML-5-Video-Audio-Tags


（まぁ、あれでFlash死んでんなら HTML5ビデオ始まってもいないってか？）

12


…気を取り直してざっくりマーケットのデータを

おさらいしてみよう

13


バージョン別PCブラウザインターネットアクセスシェア推移 (国内)

14 Source: http://gs.statcounter.com/#browser_version_partially_combined-JP-monthly-200812-201208

直近で IE9: 35.77% IE8: 16.92%

Chrome: 18.82% Firefox 5+: 15.18%

http://gs.statcounter.com/


モバイル vs. デスクトップインターネットアクセス推移 (国内)

15 Source: http://gs.statcounter.com/#mobile_vs_desktop-JP-monthly-200812-201208

直近で Desktop: 92.05%

Mobile: 7.95%



スマートフォンOSインターネットアクセスシェア推移 (国内)

16 Source: http://gs.statcounter.com/#mobile_os-JP-monthly-200812-201208

直近で iOS: 48.58%

Android: 48.89%



スマートフォン利用シェアは国内モバイルの25% (2012/06現在)

17 Source: http://www.comscore.com/jpn/Press_Events/Press_Releases/2012/8/Japan_Smartphone_Surge

http://www.comscore.com/jpn/Press_Events/Press_Releases/2012/8/Japan_Smartphone_Surge


2016年にはスマートフォン国内人口普及率が70%以上に (予測)

18 Source: http://www.seedplanning.co.jp/press/2012/2012072601.html

http://www.seedplanning.co.jp/press/2012/2012072601.html


Flash Lite 1.1+搭載：フィーチャーフォンの99.8% (2012/03現在)

19 Source: http://web-tan.forum.impressrd.jp/e/2012/04/17/12546

http://web-tan.forum.impressrd.jp/e/2012/04/17/12546


Flash Playerの普及率

20

Millward Brown調べ1 (2011.06)

Flash Player 10+

98.9% (Japan)

※PCのみ

RIASTATS調べ2 (2012.05)

Flash Player 10+

88.06% (Japan)

※スマホ・タブレット含む

Source: 1http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html 2http://riastats.com/

http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html

http://riastats.com/


マーケットのデータは現在

① デスクトップPC ② スマートフォン

③ フィーチャーフォンすべてが重要だということを示している。

Flashが使えるPCとフィーチャーフォンは

今後数年にわたり重要なマーケットであり続ける。

21


じゃぁ「数年後」のその先は？明らかにFlashの将来

先細りでしょ。

22


このまま何もしないでいたらそうなると

Adobeも思っている。

23


Adobeが考える今後5~10年にわたるFlashテクノロジーの将来

24 Source: http://www.adobe.com/jp/devnet/flashplayer/whitepapers/roadmap.html

http://www.adobe.com/jp/devnet/flashplayer/whitepapers/roadmap.html


AAAゲーム

最高品質の3Dゲーム/ 軽快な2Dゲーム etc.,

GPUを最大限に活用

プレミアムビデオ

TV番組/映画/スポーツ/ 音楽/ライブ放送 etc.,

堅牢なコンテンツ保護

Flashの将来：「Adobeが」フォーカスする2つの分野

25 Photos: JD Hancock http://www.flickr.com/people/jdhancock/

http://www.flickr.com/people/jdhancock/


合い言葉は「Webブラウザのゲームコンソール化」

26


ゲームプラットフォームの規模 (2012年)

27

0.4

4 4 4.82

0.679 0.66 0.964 1.94

9.95

12.5

15

5.5

0

5

10

15

インストールベース (億) *ゲームコンソールは累積販売台数

Source: Asymco http://www.asymco.com/ VGCharts http://www.vgchartz.com/ Wikipedia http://wikipedia.org/

http://www.asymco.com/

http://www.vgchartz.com/

http://wikipedia.org/


GPU対応の高速描画エンジン「Stage 3D」と対応フレームワーク

28 Link: http://www.nissan-stagejuk3d.com/ https://apps.facebook.com/angrybirds/

The Starling Framework http://gamua.com/starling/

Away3D http://away3d.com/

http://www.nissan-stagejuk3d.com/

https://apps.facebook.com/angrybirds/

https://apps.facebook.com/angrybirds/

http://gamua.com/starling/

http://away3d.com/


高機能プロファイラ「Project Monocle」(開発中)

29 Video: http://vimeo.com/46917940

http://vimeo.com/46917940


ActionScript “Next” (開発中)

30

次、来るってよ


フォーカス分野があるってことは「やらない」分野もあるって

ことでしょ？

31


そのとおり。具体的に以下の分野に Adobeは新規投資をしない：

① スマホアプリ以外のモバイルFlash開発

② Flash Lite対応 (Device Central含む) ③ ActionScript 2以前の言語

④ GPU対応しない従来のDisplay Listレンダリング

32


で、まぁ細かいこと抜きに結局 Flashモバイル撤退だよねメシウマ♫

33


あのねぇ撤退はモバイルブラウザプラグインだけ。

モバイルにおいて、Flashテクノロジーは

スマートフォンアプリ開発技術 (Adobe AIR) として進化し続ける。パフォーマンスもばっちり！

34


MONPLA SMASH (アプリ) = Flash Pro → Adobe AIR + Native Extension

35


Flashでモバイルアプリ開発、なるほどね。

でもでもでもスマホブラウザ向けのコンテンツ開発するならもう全力で

HTML5対応しないとですね！

36


“HTML5”の世界に飛び出すぜいくぜオラァァァ！

37 Photo: US Army Africa http://www.flickr.com/people/usarmyafrica/

http://www.flickr.com/people/usarmyafrica/


パラシュート？ごめんいま準備中だわ (by ブラウザベンダー各位)

38 Photo: Marine Corps Archives & Special Collections www.flickr.com/people/usmcarchives/

http://www.flickr.com/people/usmcarchives/


あ、ゴメンこっちもいま準備中だわ (by Adobe)

39 Photo: Marine Corps Archives & Special Collections www.flickr.com/people/usmcarchives/

http://www.flickr.com/people/usmcarchives/


問題は…

① PCとモバイルで別世界のHTML5 (WebGLとか) ② HTML5のモバイル実装が不安定 (Canvasとか)

③ Flashレベルで使いやすいHTMLツールが (まだ) ない ④ 決定的なワークフローが存在しない

40


でも行くしかないんだぜぇーっ！

41 Photo: Philip Leara www.flickr.com/people/philleara/

http://www.flickr.com/people/philleara/


さまざまなFlash→HTML5変換の試み

プロジェクト対応方法デメリットメリット

Project Wallaby (Adobe)

FLA→HTML5 (SVG) 互換性低い。開発が止まっているっぽい。

正直あんまり…

FalconJS (Adobe) AS3→JavaScript 未完成正直…

Flash Pro + Toolkit for CreateJS (Adobe)

MovieClip→JS互換スプライトアニメーション (Canvas)

一発まるごと変換じゃない。100%互換でない。AS一切変換しない (じぶんでJS書く)

アニメーションの移植に特化 (JSerなら自由度高い)。Adobeが継続して開発中

Swiffy (Google) SWF→HTML5 (SVG)

100%互換でない。AS3非対応。サイズ制限。ホステッド。クローズドソース

まるごと変換。Flash Lite案件やバナーならOK。互換性そこそこ高い。開発継続中

ExGame (DeNA) SWF→JSランタイムで実行 (Canvas)

100%互換でない。AS3非対応。パートナー限定

まるごと変換。Flash Lite案件ならOK。互換性高い。開発継続中 (後継プロジェクトPex)

Reel (GREE) SWF→JSランタイムで実行 (Canvas)

100%互換でない。AS3非対応。パートナー限定

まるごと変換。Flash Lite案件ならOK。互換性高い。開発継続中

42


「銀の弾丸」なさげ…

43


これから1~2年はさまざまなソリューションのなかから

最適なものをピックアップして使う「自己責任」フェーズといえるかも。

44


それよかFlashとか変換にこだわらないで

始めっからHTML5 + JS でいいんじゃね？

45


それもひとつの知見。ただ、それじゃ解決できない根本的な問題が

あるんだけどあんまり理解してる人いないんだよね…

46


Flashのキモ：世界中の才能あるクリエイターとコミュニティ

47 Photo: Sungsil Hwang http://www.flickr.com/photos/s2iri/

http://www.flickr.com/photos/s2iri/


インタラクティブデザイナー

デジタルクリエイティブの「人の」ながれ

48

C++/Java

Flash & Flash Lite (Timeline & ActionScript)

Director (Shockwave)

HTML5 &

JavaScript

グラフィックデザイナーアニメーター

イラストレーター

ゲームクリエイター

LAMP系開発者

Ajax 開発者

こちら側だけだとグラフィックスや

インタラクションがもともと不得手なので

面白いことはあんまり起きない

有能なクリエイティブプールを

どうやってHTML5に移行するのかが

大きな課題

JavaScriptプログラマ & HTMLマークアッパー


Flashクリエイターがとるべき戦略

Flasherとしてのアドバンテージを保ちながら新しい技術についても学ぶ

49


① モバイルでも60fpsを安定して出すためのAS3フレームワーク「Starling」

② Flash Proで作成したアニメーションをHTML5 (Canvas)とJSで動かす「CreateJS」

③ Flashと似たタイムラインでアニメーションが作成できる「Adobe Edge Animate」

将来にむけ、いまFlasherがFlashのほかに学ぶべきこと

50

The Starling Framework http://gamua.com/starling/

CreateJS http://createjs.com/

Adobe Edge Animate http://edge.adobe.com/

http://gamua.com/starling/

http://createjs.com/

http://edge.adobe.com/


Link: Adobe Creative Cloud製品ページ http://www.adobe.com/jp/products/creativecloud.html

http://www.adobe.com/jp/products/creativecloud.html


結論

立ち止まらなければ、Flasherの未来は明るい。

52


Have a Happy Landing!

53 Photo: Muddy Funkster www.flickr.com/people/memmett/

http://www.flickr.com/people/memmett/

flashテクノロジーの今後とあなたの人生とのかかわりについて

Technology