RIAコンソーシアム [B]セミ | 2012.02.20
      HTML5は本当にFlashの代替になり得るのか?
      〜Webテクノロジー進化論
      太田禎一 | アドビ システムズ 株式会社 テクニカルエバンジェリスト



                                                                               ちなみにわし
                                                                              ダーウィンだから
                                                                                よろしく




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Photo: C. G. P. Grey http://www.cgpgrey.com/
おまえダレ?




      テクニカルエバンジェリストです。正式な肩書きなのですごめんなさい
      放送・出版・デジタルメディアを中心に、いろいろなお客様に最新
       Adobeテクノロジーや、そのよさをお伝えする仕事
      直接お伺いしたり、イベント・カンファレンスでお話したり




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   2
はじめに…




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     3
大事なことなので何度でも言います




                                                                              普及率なめんな。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      4
Flash Playerの普及率




             Millward Brown調べ1 (2011.06)                                       RIASTATS調べ2 (2012.02)

                               Flash Player 10+                                      Flash Player 10+
                        98.9% (Japan)                                           86.37% (Japan)
                                        ※PCのみ                                 ※スマホ・タブレット含む

                                                               5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Source:    1http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html 2http://riastats.com/
ダーウィン&ウォレスの自然選択説




  自然選択説(しぜんせんたくせつ、英: natural selection)とは、進化を説
  明するうえでの根幹をなす理論。厳しい自然環境が、生物に無目的に起き
  る変異(突然変異)を選別し、進化に方向性を与えるという説。1859年に
  チャールズ・ダーウィンとアルフレッド・ウォレスによってはじめて体系
  化された。自然淘汰説(しぜんとうたせつ)ともいう。


© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   6
Link: http://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E9%81%B8%E6%8A%9E%E8%AA%AC
ダーウィンフィンチ




  1970年 - 80年代に観察された自然選択の例。長い乾期によってダーウィン
  フィンチが主食にしていた木の実が少なくなると、堅い実を食べるのに適
  した大きな嘴を持った個体が選択的に生き残った。その後、大雨で食料が
  増えると、大きな嘴を持つ個体は(体の維持などの点で)不利となり、全
  体の平均的な体格は縮小する傾向を示した。単純に体格や嘴の平均値が変
  化するだけではなく、性選択の影響も同時に受け、複数の小グループに収
  斂する様子も観察されている。

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   7
Link: http://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E9%81%B8%E6%8A%9E%E8%AA%AC
選択圧




  自然環境は急激に変化することはまれであるため、特定の方向に選択を偏
  らせることがある。例えば砂漠では砂色の体が保護色となる 、発汗が抑え
  られわずかな水分を有効利用する、あるいは夜行性となるなどが生存に有
  利に働く。このように実際に生存率に差をもたらす自然環境の力を選択圧
  と言う。生息する環境が異なれば、生物は異なる選択圧を受ける。生物は
  常に様々な選択圧に晒されており、また一つの性質に対して複数の選択圧
  が働くのが普通である。

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   8
Link: http://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E9%81%B8%E6%8A%9E%E8%AA%AC
なんでダーウィン?




                                                                         Webテクノロジーが
                                                                      生息する環境に注目し
                                     そこにどのような選択圧が存在するのかを
                                         理解すると、今後なにが生き残るのかが
                                                               見えてくるはず、きっと。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   9
Webテクノロジーの選択圧とは?




                                                                         1. 普及率=リーチ!
                                                                               2. 機能・性能
                                                                              3. ユニークな価値




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.       10
「Webテクノロジー進化論」




                                                        以下の選択圧に適応したWebテクノロジーはその環境
                                                        で生き残り、進化をつづける
                                                        1. 少しでも広くリーチできるテクノロジーが生き残る
                                                        (機能の優劣は決定打ではない)
                                                        2. もしも同程度のリーチなら機能・性能が高いテクノ
                                                        ロジーが生き残る
                                                        3. ただし、他では得られないユニークな価値を提供で
                                                        きるテクノロジーはニッチとして、あるいは住処を変
                                                        えて長く生き残る




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   11
たとえばオンラインビデオ




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   12
たとえば「マルチメディア」




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   13
で、今日のお題「HTML5は本当にFlashの代替になり得るのか?」




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   14
HTMLテクノロジーのザックリとした進化とその現状




                                                                                     PC
                                                                                    ブラウザ




                                                                                   スマートフォン
                                                                                    ブラウザ




                                                                                   スマートフォン
                                                                                     アプリ



© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   15
Flashテクノロジーのザックリとした進化とその現状




                                                               最初からiOS出禁な
                                                              Flash Playerは充分な       PC
                                                              リーチを達成できず
                                                              選択圧に屈して終了。
                                                                                    ブラウザ
                                                              ごめんなさい普及率
                                                                 なめてましたw



                                                                                   スマートフォン
                                                                                    ブラウザ




                                                                                   スマートフォン
                                                                                     アプリ



© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   16
Flashやばいじゃん!




                              PCブラウザでも
                              Flashはぜ〜んぶ
                           HTML5に置き換えられて
                               絶滅するね!




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   17
次にくるのは
                                                                        PCブラウザにおける
                                                                 HTML5の隆盛にともなう
                                                                       Flashの終焉ですね?
                                                                              ktkrワクテカ!




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      18
…まずはじめにちょっと整理が必要




                                                          「HTML5」って便利なコトバ
                                                なんだけど、それが指し示すものは
                                                                  人や文脈によって違う。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   19
「HTML5」の定義




                                                                                        にょろ〜ん!




                                                                        HTML5=Flash不要
                                                                  という意味だと仮定して
                                                                          もっとわかりやすく
                                                    「アンプラグド」と呼んでみる。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   20
アンプラグドを構成するもの


                                                                              ブラウザ内蔵の機能
                                                                              のみですべてを実現

                                                         Audio/Video                               グラフィック

                                                          HTML5 Video                                 SVG
                                                          HTML5 Audio                              HTML5 Canvas
                                                             H.264                                   WebGL
                                                                               アプリケーション
                                                            WebM                                    Web Fonts
                                                            Theora
                                                                                 Web Storage
                                                                                 Web Sockets
                                                                                     File API
                                                        アニメーション                Offline Web Apps        UI

                                                  DOM+JavaScript                                  HTML5 Forms
                                                DOM+CSS3 Transforms                               Drag and Drop
                                                   HTML5 Canvas                                   Touch Events




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     21
アンプラグドを構成するもの


                                                                              ブラウザ内蔵の機能
                                                                              のみですべてを実現

                                                         Audio/Video                                グラフィック
                                                                              HTML5だけじゃなくて
                                                          HTML5 Video           いろんな技術の                SVG
                                                          HTML5 Audio                               HTML5 Canvas
                                                                                 組み合わせ♡
                                                             H.264                                    WebGL
                                                                                アプリケーション
                                                            WebM                                     Web Fonts
                                                            Theora
                                                                                  Web Storage
                                                                                  Web Sockets
                                                                                      File API
                                                        アニメーション                 Offline Web Apps        UI

                                                  DOM+JavaScript                                   HTML5 Forms
                                                DOM+CSS3 Transforms                                Drag and Drop
                                                   HTML5 Canvas                                    Touch Events




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     22
これらがバラバラにブラウザ実装されているのがいま (&未来永劫)




                                                                                   各々普及率が
                                                                                    異なる




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   23
Link: http://html5readiness.com/
とりあえずノリで実装しちゃわれてる機能も♡




                                                                              CSS3 Vendor Prefixes



                                                                                   -moz-
                                                                                -webkit-
                                                                                    -ms-
                                                                                     -o-


© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.            24
caniuse.com




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   25
Link: http://caniuse.com/
html5please.us




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   26
Link: http://html5please.us/
ちなみに…




                                                          HTML5の実装状況を知るには
                                                                               caniuse.com
                                                                              html5please.us
                                                  この2つを絶対押さえておくべき。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.        27
はいはい、アンプラグドが
                                                いろんなものの集合体だってことは
                                                                          わかった。そんで?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   28
…もういっこ整理




                                                                              もうひとつ、
                                                      「Flash」ってひとことで言って
                                                          もPCブラウザではさまざまな
                                                                      用途で使われている。


                                               用途=Webテクノロジーが棲む環境
                                            ととらえ、ザックリ区分してみよう。



© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     29
PCブラウザにおけるFlashの用途。ザックリと




                                                      アニメー                              ゲーム・高
            表示エフェ                                                             RIA (業務
                                                      ション・                              度なインタ   オンライン
            クト・スラ                                                             アプリケー
                                                   モーション                                ラクティブ    ビデオ
            イドショー                                                             ション)
                                                            GFX                         コンテンツ




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      30
他にもあるだろうけど…
                                                                      まぁ、ザックリ理解。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   31
アンプラグド vs. Flash検証



                                                                       5つの環境それぞれで
                                                                  Webの選択圧をふまえ、
                                                     アンプラグドとFlashのどちらが
                                                           生存に適しているのかを検証
                                                                      してみるっていうのが
                                                                      このプレゼンの主旨。


                                                                      じゃぁいってみよう。


© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   32
アンプラグド vs. Flash:表示エフェクト

                                                  アンプラグド実現方法
                                                   DOM+JavaScript (jQueryなど)
                                                  リーチ
                                                   機能を抑えればほぼ100%
                                                  機能
                                                   JavaScriptによるDOMアニメーションで、従来Flashに
                                                   頼っていた単純な画像の移動や切り替え効果はすべて実
                                                   現できる。旧バージョンのIEで適切に表示されない画像
     表示エフェ                                         (透過PNG)・CSS効果も一部あるがその場合でもコン
     クト・スラ
                                                   テンツはなんとか表示される (graceful degradation)
     イドショー
                                                   し、Polyfillsが使える場面もある




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   33
Link: http://www.pentax.jp/japan/products/k-01/
PNG alpha transparency普及率:93.3%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   34
Link: http://caniuse.com/png-alpha
CSS3 Opacity普及率:70.93%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   35
Link: http://caniuse.com/css-opacity
HTML5エフェクトライブラリ (ごく一部)




                                                                              jQuery & Plugins




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.          36
Link: http://djdesignerlab.com/2011/09/02/20-fresh-jquery-animation-plugin-and-tutorials/
アンプラグド vs. Flash:アニメーション

                                                  アンプラグド実現方法
                                                   JavaScript (jQueryなど) 、SVG、およびCSS3アニメー
                                                   ション (Adobe Edgeなど)
                                                  リーチ
                                                   SVGや、CSS3 transformsをはじめとする高度なアニメー
                                                   ションに必須な機能がIE6/7/8で使えない
                                                  機能
      アニメー                                         SVGならびにCSS3プロパティとエフェクトのすべてが使
      ション・                                         えれば、Flash 8レベルのアニメーションはだいたい実現
     モーション                                         可能。コマアニメにはスプライトシートを使う
       GFX




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   37
Link: http://www.enfantsterrible.com/
CSS3 Transforms普及率:68.49%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   38
Link: http://caniuse.com/transforms2d
SVG普及率:69.09%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   39
Link: http://caniuse.com/svg
HTML5アニメーションライブラリ (ごく一部)




                                                                              jQuery & Plugins




                                                                Easel.js                         Raphael.js




                                                         Processing.js                            Paper.js


© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.         40
アンプラグド vs. Flash:RIA

                                                  アンプラグド実現方法
                                                   JavaScriptライブラリ (jQuery/Backbone.jsなど)、HTML5
                                                   RIAフレームワーク (Ext JS/SproutCore/Dojo/YUIなど)
                                                  リーチ
                                                   canvas/CSS3/File API等に依存するためIE6/7/8非対応で
                                                   あったり、対応していてもPolyfillsに頼る局面では動作速
                                                   度が実用的でないHTML5 RIAフレームワークが多い
                                                  機能
     RIA (業務                                       データグリッドやフォーム等基本的な機能は揃っている
     アプリケー
      ション)                                         が、Flexと同レベルの機能セット・動作一貫性・(IDE/デ
                                                   バッグ環境を含めた) 開発生産性は実現できていない




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   41
Link: http://dev.sencha.com/deploy/ext-4.0.0/examples/desktop/desktop.html
HTML5 form普及率:2.92%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   42
Link: http://caniuse.com/forms
File API普及率:24.93%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   43
Link: http://caniuse.com/fileapi
Offline web applications普及率:57.98%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   44
Link: http://caniuse.com/offline-apps
Web Sockets普及率:41.86%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   45
Link: http://caniuse.com/websockets
JavaScriptライブラリ&HTML5 RIAフレームワーク (ごく一部)




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   46
Flex to Sencha
                                                                                          ちなみに
                                                                                     Adobeの元エバン
                                                                                   ジェリストTedがFlex
                                                                                    ユーザーにオススメ
                                                                                     してるのは Sencha
                                                                                   (Ext JS/Sencha Touch)




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   47
Link: http://www.sencha.com/blog/flex-to-sencha-the-opportunity/
アンプラグド vs. Flash:ゲームなど

                                                  アンプラグド実現方法
                                                   HTML5ゲームライブラリ (DOMベース:enchant.jsなど、
                                                   canvasベース:IMPACT/Easel.jsなど)
                                                  リーチ
                                                   HTML5ゲームライブラリはIE6/7/8非対応
                                                  機能
                                                   Flash 2Dでできること (カジュアルゲームレベル) は
     ゲーム・高
                                                   HTML5ゲームライブラリでほぼすべて再現可能 (サウン
     度なインタ                                         ドとビデオを除く)。WebGL (ハードウェア対応3D) はIE
     ラクティブ                                         非対応
     コンテンツ




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   48
Link: http://www.cuttherope.ie/
Canvas普及率:68.99%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   49
Link: http://caniuse.com/canvas
WebGL普及率:46.82%* (マシンのハードウェア環境とドライバに依存)




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   50
Link: http://caniuse.com/webgl
Audio API普及率:0%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   51
Link: http://caniuse.com/audio-api
HTML5ゲームライブラリ (ごく一部)




                                                         enchant.js                   IMPACT




                                                             Easel.js              Cocos2d-javascript




                                                       Processing.js                   Raphael.js

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   52
Flashの優位性は、なにより実績が物語る




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   53
Source: http://www.onemorelevel.com/html-5-vs-flash-games/
Facebook版Angry Birds




                                                                                    スマホアプリ版累計
                                                                                   ダウンロード数は5億。

                                                                                   Facebook対応とアプリ内
                                                                                    課金で新たな(巨大な)
                                                                                     収益源を得ることに。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   54
Link: https://apps.facebook.com/angrybirds/
アンプラグド vs. Flash:ビデオ

                                                  アンプラグド実現方法
                                                   HTML5 video要素
                                                  リーチ
                                                   67.75% (H.264=42.65% WebM=46.86%)
                                                   ※Flashへのフォールバックが必須
                                                  機能
                                                   ストリーミング (Live/VoD) 不可能 (ただしHTTP range
                                                   requestあり)、コンテンツ保護不可能、フルスクリーン
     オンライン                                         は一部ブラウザでのみ対応
      ビデオ




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   55
Link: http://vimeo.com/18667898
HTML5 video普及率:67.75%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   56
Link: http://caniuse.com/video
H.264普及率:42.65%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   57
Link: http://caniuse.com/mpeg4
WebM普及率:46.86%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   58
Link: http://caniuse.com/webm
HTML5ビデオプレーヤー&フレームワーク (ごく一部)




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   59
まとめ:アンプラグド vs. Flash勢力図 (2012年2月現在)




                                                      アニメー                              ゲーム・高
            表示エフェ                                                             RIA (業務
                                                      ション・                              度なインタ   オンライン
            クト・スラ                                                             アプリケー
                                                   モーション                                ラクティブ    ビデオ
            イドショー                                                             ション)
                                                            GFX                         コンテンツ




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      60
ポイント




                                                              Webテクノロジーの選択圧
                                                               (普及率&機能) が、一部の
                                                         環境でFlashがアンプラグドに
                                                           道を譲る結果につながった。


                        具体的には (厳密にHTML5ではない) jQueryによる
                                            表示エフェクトとかスライドショー。



© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   61
なので
                                    レストランの
                                  メニューがFlashとか
                                   もうマジやめてね




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   62
ポイント




                                           いっぽう、高機能なHTML5に依存した
                                                     IE6/7/8非対応なアンプラグドは
                                        その時点でリーチがFlashより低くなり、
                                                       選択圧が不利に作用している。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   63
…だったら無理してHTML5とかじゃなくて
                                                           PCはぜんぶFlashでよくね?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   64
実際問題Flash利用してるWebページ
                                                           大幅に減ったりしてないし…




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   65
WebページにおけるFlashの利用率推移 (HTTP Archive)

  60%


  50%


  40%

                                                                                                        Top 100
  30%
                                                                                                        Top 1000
                                                                                                        All
  20%


  10%


    0%
                        2011.01.20                            2011.05.16      2011.09.15   2012.01.15

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   66
Source: http://httparchive.org/trends.php
まとめ



                                                               河川・海洋では水棲動物、
                                                                          陸上では陸生動物が
                                                                  それぞれ繁栄している。


                                         これは棲む場所によって異なる選択圧が
                                                                              適用されるから。


                                                                      じゃなかったら世界中
                                                       カエル (両生類) だらけでしょ?

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      67
でも結局さ、IE6/7/8対応
                                              しなきゃHTML5使えるわけでしょ?
                                                                          いいじゃんそれで♡




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   68
はい、おっしゃるとおり
                                                                     IE6/7/8ガン無視すれば
                                                            HTML5使いたい放題です。


                                                               マジするどいそのとおり!




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   69
直近のブラウザバージョン別インターネット利用シェア (国内)




                                                                                                             26.23%
                                                                                                19.92%
                                                                                       16.45%
                                                                              9.93%
                                                 4.2%
                                                3.87%                                              IE6/7/8
                                              2.97%                                                32.76%
                                             2.33%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.       70
Source: http://gs.statcounter.com/#browser_version-JP-monthly-201201-201202-bar
ポイント




                                                            3割のユーザーを問答無用で
                                                                              切り捨てるリスク
                                            を上回るなんらかのメリットがあれば
                                                         HTML5によるFlash置き換えは
                                                               いますぐ始めてオッケー。
                                                                              RIAでもなんでも。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.       71
いや、リスクとか脅しかよw
                                                           ゆっても時間の問題でしょ?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   72
そうね、IE6/7/8絶滅まで
                                                           どれぐらいの時間がかかるか
                                                                              考えてみよう。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     73
ブラウザの世代交代スピード




                                                                                                IEの世代交代
                                                                                                  遅すぎ!




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   74
Source: http://arstechnica.com/web/news/2011/08/july-browser-stats-windows-xp-loses-its-majority-share-of-web-users.ars
ブラウザバージョン別インターネット利用シェア推移 (国内)

                               この推移を見てると
                                IE8が5%以下に
                               なるのにあと2年近く
                                  かかりそう



                                                                                     IE8
                                                                                   26.23%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   75
Source: http://gs.statcounter.com/#browser_version-JP-monthly-200812-201202
Good News!



                                                                                   XP以下はIE9以上に
                                                                                     アップデート
                                                                                   できないけどね…




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   76
Source: http://www.itmedia.co.jp/news/articles/1112/16/news030.html
ポイント




                                                                          一般ユーザー向けの
                                                                    PC Webサイトで本当に
                                           IE6/7/8を捨てられるようになるまでは
                                                                       あと2年の辛抱かも。


                                                    いっぽう企業内に目を向けると…




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   77
企業内におけるIE6/7/8ユーザーむちゃむちゃ多い


                                           社内でもっとも多く利用されているブラウザ
                                              Webページ閲覧可能企業ベース(n=153)


                                        4.6%                                                                   IE9.x
                                                                        9.8% 5.9%                 ちなみにFlashが
                        0.7%                                                                                   IE8.x
                                                                                                 閲覧できない企業は
                                                                                                     1割        IE7.x
               2.6%
                                                                                         24.2%                 IE6.x以前
                                                                                                               Firefox
                                                                                                               Safari
                                                        38.6%                        13.7%                     Netscape
                                                                                                               Opera
                                                                                                               Chrome


© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.         78
Source: Web広告研究会による第4回企業内Web閲覧環境調査 https://www.wab.ne.jp/wab_sites/contents/1449
ポイント




                                                              企業からのIE6/7/8駆逐には
                                                    もうちょっと時間がかかりそう…




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   79
あきらめないで!




                                                           でもじつは情シスがきちんと
                                               取り組めば、一社ずつHTML5対応の
                                            モダンブラウザにきっと統一できる!


                                                    一般向けサイトよりコントロール
                                 しやすいはずなのでそこは頑張りましょう!




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   80
じゃあIE6/7/8がこの世から
                                                                          すっきりしゃっきり
                                                              退場したらFlashもご退場?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   81
あのさぁ…人の話ちゃんと聞いてる?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   82
「Webテクノロジー進化論」ふたたび




                                                        以下の選択圧に適応したWebテクノロジーはその環境
                                                        で生き残り、進化をつづける
                                                        1. 少しでも広くリーチできるテクノロジーが生き残る
                                                        (機能の優劣は決定打ではない)
                                                        2. もしも同程度のリーチなら機能・性能が高いテクノ
                                                        ロジーが生き残る
                                                        3. ただし、他では得られないユニークな価値を提供で
                                                        きるテクノロジーはニッチとして、あるいは住処を変
                                                        えて長く生き残る




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   83
Flashが今後ユニークな価値を提供できる分野




                                                                              ゲーム・高
                                               RIA (業務ア
                                                                              度なインタ   オンライン
                                                   プリケー
                                                                              ラクティブ    ビデオ
                                                    ション)
                                                                              コンテンツ




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     84
RIA (業務アプリケーション) におけるFlashのユニークな価値

                                                  大規模開発に適したOOP言語AS3と単一ランタイム
                                                   RIAが複雑になるにつれてJSの言語としてのスケール性
                                                   やブラウザAPIの互換性が問題になってくる
                                                  堅牢なUIコンポーネント・アプリケーションフレーム
                                                   ワークとプログラマーのタレントプール
                                                   FlexフレームワークはApacheに居を移し進化を継続
                                                  UIデザインのスキニング
                                                   HTML5でFlexと同等のスキニングは実現できていない
     RIA (業務                                      バイナリ通信およびP2P
     アプリケー                                         WebSocketでブラウザ同士のP2Pはできない
      ション)
                                                  Alchemy (高速なC/C++コードの利用)
                                                   HTML5には存在しない機能 (NaCl/Emscriptenが辛うじ
                                                   て?)
                                                  ブラウザに依存しない一斉自動更新 (新機能追加など)
                                                   HTML5と違い、全ユーザーを一斉にアップデート可能

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   85
Link: http://biz.adobe-ria.jp/application/7
AdobeのFlexに対するスタンスとApache Flex




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   86
Link: http://www.adobe.com/devnet/flex/whitepapers/roadmap.html Apache Flex http://incubator.apache.org/flex/
Flashの将来に向けてAdobeがフォーカスしていく分野




                                                                  ゲーム              プレミアムビデオ




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   87
ゲームにおけるFlashのユニークな価値

                                                  13.3億の既存インストールベース (PCユーザー)
                                                   PCブラウザの巨大マーケット+モバイルアプリ
                                                  Flashデザイナー・プログラマーのタレントプール
                                                   結局は人
                                                  高性能なオーディオコントロール
                                                   Audio APIの規格統一・普及までは時間がかかる
                                                  バラつきなく高速なアニメーション表示
                                                   ブラウザによるバラつきがHTML5より少ない
                                                  Stage 3D
           ゲーム
                                                   WebGLの規格統一・普及まではかなり時間がかかる
                                                  Alchemy (高速なC/C++コードの利用)
                                                   HTML5には存在しない機能 (NaCl/Emscriptenが辛うじ
                                                   て?)
                                                  ブラウザに依存しない一斉自動更新 (新機能追加など)
                                                   HTML5と違い、全ユーザーを一斉にアップデート可能

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   88
Link: https://apps.facebook.com/angrybirds/
【参考】Mobile Performance Tests: HTML5 vs. AIR

                                                                              FPS for 350 sprites
 60%
                                                                              54%                         Flash (Adobe AIR)
                                                                                                          はモバイルアプリ
 50%                                                                                                      になってもHTML5
                               44%                                                  43%                   より安定して高速

 40%                                                                                                36%
                                             31%
 30%                                                                                                                 Adobe AIR
                                                                                                                     Canvas 2D
 20%

 10%
                                                                                                          3%
     0%
                               iPhone 4S                                        iPad 2               XOOM

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.              89
Source: http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air
プレミアムビデオにおけるFlashの強み

                                                  単一のコーデック (H.264) 実装
                                                   ブラウザベンダーがコーデックで合意することはない
                                                  単一のビデオストリーミング実装
                                                   MPEG-DASH等のストリーミング規格統一・普及までは
                                                   時間がかかる
                                                  単一のDRM実装
                                                   W3CでDRMの統一は不可能
                                                  Stage Video
                                                   GPUで高速化されたビデオ表示
     プレミアム
      ビデオ                                         P2P
                                                   W3CでP2Pの規格統一・普及までかなり時間がかかる
                                                  Webカメラ入力対応
                                                   getUserMediaの規格統一・普及までかなり時間がかかる
                                                  ブラウザに依存しない一斉自動更新 (新機能追加など)
                                                   HTML5と違い、全ユーザーを一斉にアップデート可能

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   90
Link: http://www.hulu.com/
getUserMedia/Stream API:0.02%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   91
Link: http://caniuse.com/#search=getuse
でもね、PCオワテルの!
                                                       未来はスマホ・タブレットなの
                                                                         PC無くなるんだぜ?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   92
そうかなぁ…
                                                基本的な数字から見ていきましょう




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     93
スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   94
Source: http://www.asahi.com/digital/cnet/CNT201202060023.html
年間出荷台数シェア≠インストールベース




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   95
世帯が保有する主な情報通信機器の保有率 (普及率) 2010年末

                   93.2%
       85.8%                                                            83.4%




                                                                                                46.9% 47.6%
                                  43.0%                                                 43.8%

                                                                                                              26.8%
                                                                                                                      23.3%
                                                                                14.9%                                         17.0%
                                               9.7% 7.2%
                                                                                                                                      3.5%
                                                                                                                                             0.4%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.              96
Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
世帯が保有する主な情報通信機器の保有率 (普及率) 推移




                                                                                     パソコン
                                                                                     ちょっと
                                                                                     減ってる




                                                                                   今回の調査で
                                                                                    初登場




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   97
Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
スマホ・タブレット vs. PCのインターネット利用シェア (世界)




                                                                                   8.52%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   98
Source: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201202
スマホ・タブレット vs. PCのインターネット利用シェア (米国)




                                                                                   8.64%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   99
Source: http://gs.statcounter.com/#mobile_vs_desktop-US-monthly-200812-201202
スマホ・タブレット vs. PCのインターネット利用シェア (国内)




                                                                                    6.21%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   100
Source: http://gs.statcounter.com/#mobile_vs_desktop-JP-monthly-200812-201202
スマホ・タブレット vs. PCのインターネット利用シェア (韓国)




                                                                                    うち9割
                                                                                    Android


                                                                                              23.37%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   101
Source: http://gs.statcounter.com/#mobile_vs_desktop-KR-monthly-200812-201202
スマホ・タブレット vs. PCのインターネット利用シェア (インド)




                                                                                          41.12%


                                                                                    うち6割
                                                                                    Symbian



© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   102
Source: http://gs.statcounter.com/#mobile_vs_desktop-IN-monthly-200812-201202
ほらね。何年後か
                                                                      スマホ・タブレットが
                                                      す〜んごく普及したらPCからの
                                                アクセスは激減するでしょきっと?


                                                                              インドみたいに?




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      103
いや…インドみたいには
                                                    なりたくてもなれないと思うぞ。



                                                                              人口12億人に対する
                                                                                  普及率

                                                                               携帯電話 80%
                                                                               パソコン 3%




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.       104
Source: http://www.thehindubusinessline.com/industry-and-economy/info-tech/article2415307.ece
マルチスクリーンを使い分ける生活者




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   105
Link: “The Habits of Online Newspaper Readers”, WSJ (2010.11.15) http://on.wsj.com/xcwPYN
米国では生活者のインターネット利用
                                               パターンとしてPC含めた複数端末の
                                                               取っ替え引っ替えがすでに
                                                                  あたり前になっている。


                                                                              実は国内も…




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     106
機器別インターネットの利用人口 (2009年末)

 インターネット利用総人口:9,408万人                                                                                                 PCから
 (人口普及率78.0%)                                                                                                         計8,514万人
                                                                                                                      (90.5%)
   携帯端末・PHS、
   携帯情報端末から
   計8,010万人
   (85.1%)                                                                                                   PCのみ
                                                                                                            1,292万人
                                                                              PC・モバイル併用                     (13.7%)
                                                                                 6,492万人
                                                                                 (69.0%)
                            モバイルのみ
                             885万人
                             (9.4%)
                                                                                         627万人          103万人
                                                                                          (6.7%)         (1.1%)

                                                                                  6万人
                                                                                                   2万人
                                                                                  (0.1%)                       ゲーム機・TV等か
                                                                                                   (0.0%)
                                                                                                               ら
                                                                                                               計739万人 (7.9%)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.        107
Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
機器別インターネットの利用人口 (2010年末)

 インターネット利用総人口:9,462万人                                                                                                 PCから
 (人口普及率78.2%)                                                                                                         計8,706万人
                                                                                                                      (92.0%)
   携帯端末・PHS、
   携帯情報端末から
   計7,878万人
   (83.3%)                                                                                                   PCのみ
                                                                                                            1,509万人
                                                                              PC・モバイル併用                     (15.9%)
                                                                                 6,495万人
                                                                                 (68.6%)
                            モバイルのみ                                                                               この数字、ほぼ
                             744万人                                                                                 横ばい
                             (7.9%)
                                                                                         630万人          73万人
                                                                                          (6.7%)        (0.8%)

                                                                                  9万人
                                                                                                   3万人
                                                                                  (0.1%)                         ゲーム機・TV等か
                                                                                                   (0.0%)
                                                                                                                 ら
                                                                                                                 計715万人 (7.6%)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.        108
Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
国内でも、PCとモバイルはいまも
                                                       ガチ併用されているし、それが
                                            今後おおきく変わるとは考えにくい。


                                    PCがどっかに消え去るわけではないので。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   109
PCのWebは今後も重要であり続け、
                              そこでFlashは (必要とされる場所で) 生き残り
                                                                              進化し続ける。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     110
そろそろまとめましょうか。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   111
結論




                               HTML5は本当にFlashの代替になり得るのか?
                                      答えは半分YES、IE6/7/8を無視すれば。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   112
もいっこ結論




                                                      Flashはその役割を終えたのか?
                                答えは半分YES、広いWeb世界の一部では。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   113
大事なことなのでもういちど言います




                                                    …というわけで普及率なめんな。




© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   114
さいごに…




                                                                 HTML5の未来を考えたり
                                                                     Flashの今後を憂いたり
                                           する前にいますぐIE6/7/8をどうやって
                                                              なくすかを考えたほうが(ry




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

HTML5は本当にFlashの代替になり得るのか?~Webテクノロジー進化論

  • 1.
    RIAコンソーシアム [B]セミ |2012.02.20 HTML5は本当にFlashの代替になり得るのか? 〜Webテクノロジー進化論 太田禎一 | アドビ システムズ 株式会社 テクニカルエバンジェリスト ちなみにわし ダーウィンだから よろしく © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Photo: C. G. P. Grey http://www.cgpgrey.com/
  • 2.
    おまえダレ?  テクニカルエバンジェリストです。正式な肩書きなのですごめんなさい  放送・出版・デジタルメディアを中心に、いろいろなお客様に最新 Adobeテクノロジーや、そのよさをお伝えする仕事  直接お伺いしたり、イベント・カンファレンスでお話したり © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  • 3.
    はじめに… © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 3
  • 4.
    大事なことなので何度でも言います 普及率なめんな。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  • 5.
    Flash Playerの普及率 Millward Brown調べ1 (2011.06) RIASTATS調べ2 (2012.02) Flash Player 10+ Flash Player 10+ 98.9% (Japan) 86.37% (Japan) ※PCのみ ※スマホ・タブレット含む 5 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Source: 1http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html 2http://riastats.com/
  • 6.
    ダーウィン&ウォレスの自然選択説 自然選択説(しぜんせんたくせつ、英:natural selection)とは、進化を説 明するうえでの根幹をなす理論。厳しい自然環境が、生物に無目的に起き る変異(突然変異)を選別し、進化に方向性を与えるという説。1859年に チャールズ・ダーウィンとアルフレッド・ウォレスによってはじめて体系 化された。自然淘汰説(しぜんとうたせつ)ともいう。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 Link: http://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E9%81%B8%E6%8A%9E%E8%AA%AC
  • 7.
    ダーウィンフィンチ 1970年- 80年代に観察された自然選択の例。長い乾期によってダーウィン フィンチが主食にしていた木の実が少なくなると、堅い実を食べるのに適 した大きな嘴を持った個体が選択的に生き残った。その後、大雨で食料が 増えると、大きな嘴を持つ個体は(体の維持などの点で)不利となり、全 体の平均的な体格は縮小する傾向を示した。単純に体格や嘴の平均値が変 化するだけではなく、性選択の影響も同時に受け、複数の小グループに収 斂する様子も観察されている。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7 Link: http://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E9%81%B8%E6%8A%9E%E8%AA%AC
  • 8.
    選択圧 自然環境は急激に変化することはまれであるため、特定の方向に選択を偏 らせることがある。例えば砂漠では砂色の体が保護色となる 、発汗が抑え られわずかな水分を有効利用する、あるいは夜行性となるなどが生存に有 利に働く。このように実際に生存率に差をもたらす自然環境の力を選択圧 と言う。生息する環境が異なれば、生物は異なる選択圧を受ける。生物は 常に様々な選択圧に晒されており、また一つの性質に対して複数の選択圧 が働くのが普通である。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 Link: http://ja.wikipedia.org/wiki/%E8%87%AA%E7%84%B6%E9%81%B8%E6%8A%9E%E8%AA%AC
  • 9.
    なんでダーウィン? Webテクノロジーが 生息する環境に注目し そこにどのような選択圧が存在するのかを 理解すると、今後なにが生き残るのかが 見えてくるはず、きっと。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
  • 10.
    Webテクノロジーの選択圧とは? 1. 普及率=リーチ! 2. 機能・性能 3. ユニークな価値 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
  • 11.
    「Webテクノロジー進化論」 以下の選択圧に適応したWebテクノロジーはその環境 で生き残り、進化をつづける 1. 少しでも広くリーチできるテクノロジーが生き残る (機能の優劣は決定打ではない) 2. もしも同程度のリーチなら機能・性能が高いテクノ ロジーが生き残る 3. ただし、他では得られないユニークな価値を提供で きるテクノロジーはニッチとして、あるいは住処を変 えて長く生き残る © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
  • 12.
    たとえばオンラインビデオ © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 12
  • 13.
    たとえば「マルチメディア」 © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 13
  • 14.
    で、今日のお題「HTML5は本当にFlashの代替になり得るのか?」 © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 15.
    HTMLテクノロジーのザックリとした進化とその現状 PC ブラウザ スマートフォン ブラウザ スマートフォン アプリ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
  • 16.
    Flashテクノロジーのザックリとした進化とその現状 最初からiOS出禁な Flash Playerは充分な PC リーチを達成できず 選択圧に屈して終了。 ブラウザ ごめんなさい普及率 なめてましたw スマートフォン ブラウザ スマートフォン アプリ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  • 17.
    Flashやばいじゃん! PCブラウザでも Flashはぜ〜んぶ HTML5に置き換えられて 絶滅するね! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
  • 18.
    次にくるのは PCブラウザにおける HTML5の隆盛にともなう Flashの終焉ですね? ktkrワクテカ! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  • 19.
    …まずはじめにちょっと整理が必要 「HTML5」って便利なコトバ なんだけど、それが指し示すものは 人や文脈によって違う。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
  • 20.
    「HTML5」の定義 にょろ〜ん! HTML5=Flash不要 という意味だと仮定して もっとわかりやすく 「アンプラグド」と呼んでみる。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  • 21.
    アンプラグドを構成するもの ブラウザ内蔵の機能 のみですべてを実現 Audio/Video グラフィック HTML5 Video SVG HTML5 Audio HTML5 Canvas H.264 WebGL アプリケーション WebM Web Fonts Theora Web Storage Web Sockets File API アニメーション Offline Web Apps UI DOM+JavaScript HTML5 Forms DOM+CSS3 Transforms Drag and Drop HTML5 Canvas Touch Events © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  • 22.
    アンプラグドを構成するもの ブラウザ内蔵の機能 のみですべてを実現 Audio/Video グラフィック HTML5だけじゃなくて HTML5 Video いろんな技術の SVG HTML5 Audio HTML5 Canvas 組み合わせ♡ H.264 WebGL アプリケーション WebM Web Fonts Theora Web Storage Web Sockets File API アニメーション Offline Web Apps UI DOM+JavaScript HTML5 Forms DOM+CSS3 Transforms Drag and Drop HTML5 Canvas Touch Events © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
  • 23.
    これらがバラバラにブラウザ実装されているのがいま (&未来永劫) 各々普及率が 異なる © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 Link: http://html5readiness.com/
  • 24.
    とりあえずノリで実装しちゃわれてる機能も♡ CSS3 Vendor Prefixes -moz- -webkit- -ms- -o- © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  • 25.
    caniuse.com © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 25 Link: http://caniuse.com/
  • 26.
    html5please.us © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 26 Link: http://html5please.us/
  • 27.
    ちなみに… HTML5の実装状況を知るには caniuse.com html5please.us この2つを絶対押さえておくべき。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  • 28.
    はいはい、アンプラグドが いろんなものの集合体だってことは わかった。そんで? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  • 29.
    …もういっこ整理 もうひとつ、 「Flash」ってひとことで言って もPCブラウザではさまざまな 用途で使われている。 用途=Webテクノロジーが棲む環境 ととらえ、ザックリ区分してみよう。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
  • 30.
    PCブラウザにおけるFlashの用途。ザックリと アニメー ゲーム・高 表示エフェ RIA (業務 ション・ 度なインタ オンライン クト・スラ アプリケー モーション ラクティブ ビデオ イドショー ション) GFX コンテンツ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  • 31.
    他にもあるだろうけど… まぁ、ザックリ理解。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 32.
    アンプラグド vs. Flash検証 5つの環境それぞれで Webの選択圧をふまえ、 アンプラグドとFlashのどちらが 生存に適しているのかを検証 してみるっていうのが このプレゼンの主旨。 じゃぁいってみよう。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
  • 33.
    アンプラグド vs. Flash:表示エフェクト  アンプラグド実現方法 DOM+JavaScript (jQueryなど)  リーチ 機能を抑えればほぼ100%  機能 JavaScriptによるDOMアニメーションで、従来Flashに 頼っていた単純な画像の移動や切り替え効果はすべて実 現できる。旧バージョンのIEで適切に表示されない画像 表示エフェ (透過PNG)・CSS効果も一部あるがその場合でもコン クト・スラ テンツはなんとか表示される (graceful degradation) イドショー し、Polyfillsが使える場面もある © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33 Link: http://www.pentax.jp/japan/products/k-01/
  • 34.
    PNG alpha transparency普及率:93.3% ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34 Link: http://caniuse.com/png-alpha
  • 35.
    CSS3 Opacity普及率:70.93% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35 Link: http://caniuse.com/css-opacity
  • 36.
    HTML5エフェクトライブラリ (ごく一部) jQuery & Plugins © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36 Link: http://djdesignerlab.com/2011/09/02/20-fresh-jquery-animation-plugin-and-tutorials/
  • 37.
    アンプラグド vs. Flash:アニメーション  アンプラグド実現方法 JavaScript (jQueryなど) 、SVG、およびCSS3アニメー ション (Adobe Edgeなど)  リーチ SVGや、CSS3 transformsをはじめとする高度なアニメー ションに必須な機能がIE6/7/8で使えない  機能 アニメー SVGならびにCSS3プロパティとエフェクトのすべてが使 ション・ えれば、Flash 8レベルのアニメーションはだいたい実現 モーション 可能。コマアニメにはスプライトシートを使う GFX © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 Link: http://www.enfantsterrible.com/
  • 38.
    CSS3 Transforms普及率:68.49% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38 Link: http://caniuse.com/transforms2d
  • 39.
    SVG普及率:69.09% © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 39 Link: http://caniuse.com/svg
  • 40.
    HTML5アニメーションライブラリ (ごく一部) jQuery & Plugins Easel.js Raphael.js Processing.js Paper.js © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
  • 41.
    アンプラグド vs. Flash:RIA  アンプラグド実現方法 JavaScriptライブラリ (jQuery/Backbone.jsなど)、HTML5 RIAフレームワーク (Ext JS/SproutCore/Dojo/YUIなど)  リーチ canvas/CSS3/File API等に依存するためIE6/7/8非対応で あったり、対応していてもPolyfillsに頼る局面では動作速 度が実用的でないHTML5 RIAフレームワークが多い  機能 RIA (業務 データグリッドやフォーム等基本的な機能は揃っている アプリケー ション) が、Flexと同レベルの機能セット・動作一貫性・(IDE/デ バッグ環境を含めた) 開発生産性は実現できていない © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41 Link: http://dev.sencha.com/deploy/ext-4.0.0/examples/desktop/desktop.html
  • 42.
    HTML5 form普及率:2.92% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42 Link: http://caniuse.com/forms
  • 43.
    File API普及率:24.93% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43 Link: http://caniuse.com/fileapi
  • 44.
    Offline web applications普及率:57.98% ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44 Link: http://caniuse.com/offline-apps
  • 45.
    Web Sockets普及率:41.86% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45 Link: http://caniuse.com/websockets
  • 46.
    JavaScriptライブラリ&HTML5 RIAフレームワーク (ごく一部) ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
  • 47.
    Flex to Sencha ちなみに Adobeの元エバン ジェリストTedがFlex ユーザーにオススメ してるのは Sencha (Ext JS/Sencha Touch) © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47 Link: http://www.sencha.com/blog/flex-to-sencha-the-opportunity/
  • 48.
    アンプラグド vs. Flash:ゲームなど  アンプラグド実現方法 HTML5ゲームライブラリ (DOMベース:enchant.jsなど、 canvasベース:IMPACT/Easel.jsなど)  リーチ HTML5ゲームライブラリはIE6/7/8非対応  機能 Flash 2Dでできること (カジュアルゲームレベル) は ゲーム・高 HTML5ゲームライブラリでほぼすべて再現可能 (サウン 度なインタ ドとビデオを除く)。WebGL (ハードウェア対応3D) はIE ラクティブ 非対応 コンテンツ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48 Link: http://www.cuttherope.ie/
  • 49.
    Canvas普及率:68.99% © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 49 Link: http://caniuse.com/canvas
  • 50.
    WebGL普及率:46.82%* (マシンのハードウェア環境とドライバに依存) © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50 Link: http://caniuse.com/webgl
  • 51.
    Audio API普及率:0% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51 Link: http://caniuse.com/audio-api
  • 52.
    HTML5ゲームライブラリ (ごく一部) enchant.js IMPACT Easel.js Cocos2d-javascript Processing.js Raphael.js © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
  • 53.
    Flashの優位性は、なにより実績が物語る © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 53 Source: http://www.onemorelevel.com/html-5-vs-flash-games/
  • 54.
    Facebook版Angry Birds スマホアプリ版累計 ダウンロード数は5億。 Facebook対応とアプリ内 課金で新たな(巨大な) 収益源を得ることに。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54 Link: https://apps.facebook.com/angrybirds/
  • 55.
    アンプラグド vs. Flash:ビデオ  アンプラグド実現方法 HTML5 video要素  リーチ 67.75% (H.264=42.65% WebM=46.86%) ※Flashへのフォールバックが必須  機能 ストリーミング (Live/VoD) 不可能 (ただしHTTP range requestあり)、コンテンツ保護不可能、フルスクリーン オンライン は一部ブラウザでのみ対応 ビデオ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55 Link: http://vimeo.com/18667898
  • 56.
    HTML5 video普及率:67.75% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56 Link: http://caniuse.com/video
  • 57.
    H.264普及率:42.65% © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 57 Link: http://caniuse.com/mpeg4
  • 58.
    WebM普及率:46.86% © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 58 Link: http://caniuse.com/webm
  • 59.
    HTML5ビデオプレーヤー&フレームワーク (ごく一部) © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59
  • 60.
    まとめ:アンプラグド vs. Flash勢力図(2012年2月現在) アニメー ゲーム・高 表示エフェ RIA (業務 ション・ 度なインタ オンライン クト・スラ アプリケー モーション ラクティブ ビデオ イドショー ション) GFX コンテンツ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60
  • 61.
    ポイント Webテクノロジーの選択圧 (普及率&機能) が、一部の 環境でFlashがアンプラグドに 道を譲る結果につながった。 具体的には (厳密にHTML5ではない) jQueryによる 表示エフェクトとかスライドショー。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 61
  • 62.
    なので レストランの メニューがFlashとか もうマジやめてね © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 62
  • 63.
    ポイント いっぽう、高機能なHTML5に依存した IE6/7/8非対応なアンプラグドは その時点でリーチがFlashより低くなり、 選択圧が不利に作用している。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 63
  • 64.
    …だったら無理してHTML5とかじゃなくて PCはぜんぶFlashでよくね? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64
  • 65.
    実際問題Flash利用してるWebページ 大幅に減ったりしてないし… © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
  • 66.
    WebページにおけるFlashの利用率推移 (HTTP Archive) 60% 50% 40% Top 100 30% Top 1000 All 20% 10% 0% 2011.01.20 2011.05.16 2011.09.15 2012.01.15 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66 Source: http://httparchive.org/trends.php
  • 67.
    まとめ 河川・海洋では水棲動物、 陸上では陸生動物が それぞれ繁栄している。 これは棲む場所によって異なる選択圧が 適用されるから。 じゃなかったら世界中 カエル (両生類) だらけでしょ? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
  • 68.
    でも結局さ、IE6/7/8対応 しなきゃHTML5使えるわけでしょ? いいじゃんそれで♡ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
  • 69.
    はい、おっしゃるとおり IE6/7/8ガン無視すれば HTML5使いたい放題です。 マジするどいそのとおり! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69
  • 70.
    直近のブラウザバージョン別インターネット利用シェア (国内) 26.23% 19.92% 16.45% 9.93% 4.2% 3.87% IE6/7/8 2.97% 32.76% 2.33% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70 Source: http://gs.statcounter.com/#browser_version-JP-monthly-201201-201202-bar
  • 71.
    ポイント 3割のユーザーを問答無用で 切り捨てるリスク を上回るなんらかのメリットがあれば HTML5によるFlash置き換えは いますぐ始めてオッケー。 RIAでもなんでも。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 71
  • 72.
    いや、リスクとか脅しかよw ゆっても時間の問題でしょ? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 72
  • 73.
    そうね、IE6/7/8絶滅まで どれぐらいの時間がかかるか 考えてみよう。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 73
  • 74.
    ブラウザの世代交代スピード IEの世代交代 遅すぎ! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 74 Source: http://arstechnica.com/web/news/2011/08/july-browser-stats-windows-xp-loses-its-majority-share-of-web-users.ars
  • 75.
    ブラウザバージョン別インターネット利用シェア推移 (国内) この推移を見てると IE8が5%以下に なるのにあと2年近く かかりそう IE8 26.23% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 75 Source: http://gs.statcounter.com/#browser_version-JP-monthly-200812-201202
  • 76.
    Good News! XP以下はIE9以上に アップデート できないけどね… © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76 Source: http://www.itmedia.co.jp/news/articles/1112/16/news030.html
  • 77.
    ポイント 一般ユーザー向けの PC Webサイトで本当に IE6/7/8を捨てられるようになるまでは あと2年の辛抱かも。 いっぽう企業内に目を向けると… © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 77
  • 78.
    企業内におけるIE6/7/8ユーザーむちゃむちゃ多い 社内でもっとも多く利用されているブラウザ Webページ閲覧可能企業ベース(n=153) 4.6% IE9.x 9.8% 5.9% ちなみにFlashが 0.7% IE8.x 閲覧できない企業は 1割 IE7.x 2.6% 24.2% IE6.x以前 Firefox Safari 38.6% 13.7% Netscape Opera Chrome © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78 Source: Web広告研究会による第4回企業内Web閲覧環境調査 https://www.wab.ne.jp/wab_sites/contents/1449
  • 79.
    ポイント 企業からのIE6/7/8駆逐には もうちょっと時間がかかりそう… © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 79
  • 80.
    あきらめないで! でもじつは情シスがきちんと 取り組めば、一社ずつHTML5対応の モダンブラウザにきっと統一できる! 一般向けサイトよりコントロール しやすいはずなのでそこは頑張りましょう! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 80
  • 81.
    じゃあIE6/7/8がこの世から すっきりしゃっきり 退場したらFlashもご退場? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 81
  • 82.
    あのさぁ…人の話ちゃんと聞いてる? © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 82
  • 83.
    「Webテクノロジー進化論」ふたたび 以下の選択圧に適応したWebテクノロジーはその環境 で生き残り、進化をつづける 1. 少しでも広くリーチできるテクノロジーが生き残る (機能の優劣は決定打ではない) 2. もしも同程度のリーチなら機能・性能が高いテクノ ロジーが生き残る 3. ただし、他では得られないユニークな価値を提供で きるテクノロジーはニッチとして、あるいは住処を変 えて長く生き残る © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 83
  • 84.
    Flashが今後ユニークな価値を提供できる分野 ゲーム・高 RIA (業務ア 度なインタ オンライン プリケー ラクティブ ビデオ ション) コンテンツ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 84
  • 85.
    RIA (業務アプリケーション) におけるFlashのユニークな価値  大規模開発に適したOOP言語AS3と単一ランタイム RIAが複雑になるにつれてJSの言語としてのスケール性 やブラウザAPIの互換性が問題になってくる  堅牢なUIコンポーネント・アプリケーションフレーム ワークとプログラマーのタレントプール FlexフレームワークはApacheに居を移し進化を継続  UIデザインのスキニング HTML5でFlexと同等のスキニングは実現できていない RIA (業務  バイナリ通信およびP2P アプリケー WebSocketでブラウザ同士のP2Pはできない ション)  Alchemy (高速なC/C++コードの利用) HTML5には存在しない機能 (NaCl/Emscriptenが辛うじ て?)  ブラウザに依存しない一斉自動更新 (新機能追加など) HTML5と違い、全ユーザーを一斉にアップデート可能 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 85 Link: http://biz.adobe-ria.jp/application/7
  • 86.
    AdobeのFlexに対するスタンスとApache Flex © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 86 Link: http://www.adobe.com/devnet/flex/whitepapers/roadmap.html Apache Flex http://incubator.apache.org/flex/
  • 87.
    Flashの将来に向けてAdobeがフォーカスしていく分野 ゲーム プレミアムビデオ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 87
  • 88.
    ゲームにおけるFlashのユニークな価値  13.3億の既存インストールベース (PCユーザー) PCブラウザの巨大マーケット+モバイルアプリ  Flashデザイナー・プログラマーのタレントプール 結局は人  高性能なオーディオコントロール Audio APIの規格統一・普及までは時間がかかる  バラつきなく高速なアニメーション表示 ブラウザによるバラつきがHTML5より少ない  Stage 3D ゲーム WebGLの規格統一・普及まではかなり時間がかかる  Alchemy (高速なC/C++コードの利用) HTML5には存在しない機能 (NaCl/Emscriptenが辛うじ て?)  ブラウザに依存しない一斉自動更新 (新機能追加など) HTML5と違い、全ユーザーを一斉にアップデート可能 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 88 Link: https://apps.facebook.com/angrybirds/
  • 89.
    【参考】Mobile Performance Tests:HTML5 vs. AIR FPS for 350 sprites 60% 54% Flash (Adobe AIR) はモバイルアプリ 50% になってもHTML5 44% 43% より安定して高速 40% 36% 31% 30% Adobe AIR Canvas 2D 20% 10% 3% 0% iPhone 4S iPad 2 XOOM © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 89 Source: http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air
  • 90.
    プレミアムビデオにおけるFlashの強み  単一のコーデック (H.264) 実装 ブラウザベンダーがコーデックで合意することはない  単一のビデオストリーミング実装 MPEG-DASH等のストリーミング規格統一・普及までは 時間がかかる  単一のDRM実装 W3CでDRMの統一は不可能  Stage Video GPUで高速化されたビデオ表示 プレミアム ビデオ  P2P W3CでP2Pの規格統一・普及までかなり時間がかかる  Webカメラ入力対応 getUserMediaの規格統一・普及までかなり時間がかかる  ブラウザに依存しない一斉自動更新 (新機能追加など) HTML5と違い、全ユーザーを一斉にアップデート可能 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 90 Link: http://www.hulu.com/
  • 91.
    getUserMedia/Stream API:0.02% © 2011Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 91 Link: http://caniuse.com/#search=getuse
  • 92.
    でもね、PCオワテルの! 未来はスマホ・タブレットなの PC無くなるんだぜ? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 92
  • 93.
    そうかなぁ… 基本的な数字から見ていきましょう © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 93
  • 94.
    スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 94 Source: http://www.asahi.com/digital/cnet/CNT201202060023.html
  • 95.
    年間出荷台数シェア≠インストールベース © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 95
  • 96.
    世帯が保有する主な情報通信機器の保有率 (普及率) 2010年末 93.2% 85.8% 83.4% 46.9% 47.6% 43.0% 43.8% 26.8% 23.3% 14.9% 17.0% 9.7% 7.2% 3.5% 0.4% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 96 Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
  • 97.
    世帯が保有する主な情報通信機器の保有率 (普及率) 推移 パソコン ちょっと 減ってる 今回の調査で 初登場 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 97 Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
  • 98.
    スマホ・タブレット vs. PCのインターネット利用シェア(世界) 8.52% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 98 Source: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201202
  • 99.
    スマホ・タブレット vs. PCのインターネット利用シェア(米国) 8.64% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 99 Source: http://gs.statcounter.com/#mobile_vs_desktop-US-monthly-200812-201202
  • 100.
    スマホ・タブレット vs. PCのインターネット利用シェア(国内) 6.21% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 100 Source: http://gs.statcounter.com/#mobile_vs_desktop-JP-monthly-200812-201202
  • 101.
    スマホ・タブレット vs. PCのインターネット利用シェア(韓国) うち9割 Android 23.37% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 101 Source: http://gs.statcounter.com/#mobile_vs_desktop-KR-monthly-200812-201202
  • 102.
    スマホ・タブレット vs. PCのインターネット利用シェア(インド) 41.12% うち6割 Symbian © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 102 Source: http://gs.statcounter.com/#mobile_vs_desktop-IN-monthly-200812-201202
  • 103.
    ほらね。何年後か スマホ・タブレットが す〜んごく普及したらPCからの アクセスは激減するでしょきっと? インドみたいに? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 103
  • 104.
    いや…インドみたいには なりたくてもなれないと思うぞ。 人口12億人に対する 普及率 携帯電話 80% パソコン 3% © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 104 Source: http://www.thehindubusinessline.com/industry-and-economy/info-tech/article2415307.ece
  • 105.
    マルチスクリーンを使い分ける生活者 © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 105 Link: “The Habits of Online Newspaper Readers”, WSJ (2010.11.15) http://on.wsj.com/xcwPYN
  • 106.
    米国では生活者のインターネット利用 パターンとしてPC含めた複数端末の 取っ替え引っ替えがすでに あたり前になっている。 実は国内も… © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 106
  • 107.
    機器別インターネットの利用人口 (2009年末) インターネット利用総人口:9,408万人 PCから (人口普及率78.0%) 計8,514万人 (90.5%) 携帯端末・PHS、 携帯情報端末から 計8,010万人 (85.1%) PCのみ 1,292万人 PC・モバイル併用 (13.7%) 6,492万人 (69.0%) モバイルのみ 885万人 (9.4%) 627万人 103万人 (6.7%) (1.1%) 6万人 2万人 (0.1%) ゲーム機・TV等か (0.0%) ら 計739万人 (7.9%) © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 107 Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
  • 108.
    機器別インターネットの利用人口 (2010年末) インターネット利用総人口:9,462万人 PCから (人口普及率78.2%) 計8,706万人 (92.0%) 携帯端末・PHS、 携帯情報端末から 計7,878万人 (83.3%) PCのみ 1,509万人 PC・モバイル併用 (15.9%) 6,495万人 (68.6%) モバイルのみ この数字、ほぼ 744万人 横ばい (7.9%) 630万人 73万人 (6.7%) (0.8%) 9万人 3万人 (0.1%) ゲーム機・TV等か (0.0%) ら 計715万人 (7.6%) © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 108 Source: 平成23年通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
  • 109.
    国内でも、PCとモバイルはいまも ガチ併用されているし、それが 今後おおきく変わるとは考えにくい。 PCがどっかに消え去るわけではないので。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 109
  • 110.
    PCのWebは今後も重要であり続け、 そこでFlashは (必要とされる場所で) 生き残り 進化し続ける。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 110
  • 111.
    そろそろまとめましょうか。 © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential. 111
  • 112.
    結論 HTML5は本当にFlashの代替になり得るのか? 答えは半分YES、IE6/7/8を無視すれば。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 112
  • 113.
    もいっこ結論 Flashはその役割を終えたのか? 答えは半分YES、広いWeb世界の一部では。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 113
  • 114.
    大事なことなのでもういちど言います …というわけで普及率なめんな。 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 114
  • 115.
    さいごに… HTML5の未来を考えたり Flashの今後を憂いたり する前にいますぐIE6/7/8をどうやって なくすかを考えたほうが(ry © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 115
  • 116.
    © 2011 AdobeSystems Incorporated. All Rights Reserved. Adobe Confidential.