R社勉強会 | 2012.06.11      Adobe Creative SuiteではじまるHTML5の民主化      太田禎一 | アドビ システムズ 株式会社 デジタルメディア ビジネス開発部© 2012 Adobe Systems...
おまえダレ?      デジタルメディア・ゲーム関連のビジネス開発を担当しています      放送・出版・デジタルメディアを中心に、いろいろなお客様に最新       Adobeテクノロジーや、そのよさをお伝えする仕事      イベント...
「HTML5」どうやってつくる?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
「HTML5時代」以前のWeb開発                                                                               高度なことは                    ...
「HTML5時代」のWeb開発                                                                              ブラウザ内蔵の機能                    ...
1日でマスターできるHTML5まとめ!                                                                              CSS3って                   ...
Bad News…                                                                              「HTML5」って                          ...
Good News!                                                                              だいじょうぶ。                           ...
具体的には?                                         ☞ Adobe & HTML© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe...
AdobeはHTML5 & Flashでデジタルメディアをトータルにカバー  HTML   ブラン                                                インタラク                   デ...
というわけで、いますぐ使える                                                   Adobeの「HTML5」対応ツールを                                      ...
typekit                                                                              (Webフォント)© 2012 Adobe Systems Incorpo...
typekit© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   13Link: https://typekit.com/
typekit利用例:The New Yorker© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   14Link: http://www....
typekitの代替ソリューション (ごく一部)  CSS3 @font-face                                                                                 ...
typekit民主化ポイント                                                きちんと権利クリアされた高品質な                                            ...
PhoneGap                                                    (HTML5ハイブリッドアプリ開発)© 2012 Adobe Systems Incorporated. All Right...
Apache Cordova/PhoneGap                                                                               Apache Cordova      ...
WikipediaアプリはPhoneGap製© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   19Link: http://blog.wi...
PhoneGapによるアプリのクロスプラットフォーム対応       HTML (& Dreamweaver) & PhoneGap                                              ソリューション  ...
iOS/AndroidにおけるPhoneGapアプリの構造                                                                                             ...
PhoneGapのデバイス機能アクセス© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   22Source: http://en.wikip...
PhoneGapの代替ソリューション (ごく一部)  AppCloud (Brightcove)                                                            Sencha Touch 2...
PhoneGap民主化ポイント                                     HTML/CSS/JSだけでモバイルアプリ開発。                                         膨大なJS...
Dreamweaver CS6                                                             (HTML5/CSS3コーディング)© 2012 Adobe Systems Incorpo...
Dreamweaver CS6      デザイナー向けWebサイト・アプリ開発ツール            jQuery等のコードヒント            作業環境内で動作確認 (ライブビュー=WebKit)           ...
Dreamweaverの代替ツール (ごく一部)    Aptana                                                                         TextMate    htt...
Dreamweaver民主化ポイント                                                   つねに結果 (ライブビュー) を確認                                   ...
Fireworks CS6                                                                              (CSS3デザイン)© 2012 Adobe Systems ...
CSSプロパティ抽出© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   30
Fireworksの代替ツール (ごく一部)           CSS3 Button Generator                                                   CSS3 Generator   ...
Fireworks民主化ポイント                                                                    CSSを直接書かなくても                          ...
Adobe Muse                                                                 (HTML5 Webページ制作)© 2012 Adobe Systems Incorporat...
Adobe Muse      HTML5ページ作成ツール            DTPデザインのメタファー            コーディング不要 (Dreamweaverでさえも苦手な人向け)© 2012 Adobe Systems ...
Muse民主化ポイント                                                            HTML/CSSの知識がゼロでも                                   ...
Adobe Edge                                                               (CSS3アニメーション制作)© 2012 Adobe Systems Incorporated....
Adobe Edge© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   37
WebページへのEdgeアニメーション組み込み                                                                                   Edgeランタイム       ...
モバイルアプリへのEdgeアニメーション組み込み例                                                                                  Edgeなら位置・      ...
Webだけでなく電子書籍にも対応するEdge© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   40
Adobe Edge Runtime API = JavaScript連携が容易                                                                                  ...
Edgeの代替ツール      Tumult Hype (DOMアニメ)                                                             Sencha Animator (DOMアニメ) ...
Edge民主化ポイント                                                       HTML/CSS/JSの知識がゼロでも                                     ...
Flash Professional                                               (HTML5 Canvasアニメーション制作)© 2012 Adobe Systems Incorporated....
Flash Professional CS6:アニメーションのマルチアウトプット  [スプライトシートを作成] コマンド                                HTML5 CanvasベースのJSアニメーション     ...
Flash Pro民主化ポイント                                         従来のアニメーション制作ワークフロー                           そのままにHTMLアニメーションを作成で...
Adobe Shadow                                               (マルチスクリーンHTML動作テスト)© 2012 Adobe Systems Incorporated. All Right...
リモート                                                                                   インスペクション                           ...
Shadow民主化ポイント                                               開発機と (何台もの) 実機を行ったり                                     来たりしない...
Adobeの総合力  HTML   ブラン                                                インタラク               デジタル          カジュアル   プレミアム   ハイエ...
Adobeの総合力=Adobe Creative Suite 6 + Adobe Creative Cloud                                                                   ...
「HTML5」どう使う?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
顧客「うちのサイトFlash使わないでFlashぽくやってよ。」       Web屋「はぁ。」       顧客「ほらアイパッドで見られるようにさ。」       Web屋「それHTML5なら楽勝っすよ!」       顧客「もちろんIEでも...
Flash Playerの普及率             Millward Brown調べ1 (2011.06)                                       RIASTATS調べ2 (2012.05)      ...
「HTML5」の定義                                                                                             にょろ〜ん!             ...
まとめ:アンプラグド vs. Flash勢力図 (2012年5月現在)                                                      アニメー                             ...
乱暴に言うと、アンプラグドは2種類                                                                                       にょろにょろ〜ん!         ...
乱暴に言うと、使い分けはかんたん                                                                                 HTML5                    ...
直近のブラウザバージョン別インターネット利用シェア (WW)                                                                                        IE6/...
直近のブラウザバージョン別インターネット利用シェア (WW)                                                                                            ...
直近のブラウザバージョン別インターネット利用シェア (国内)                                                                                            ...
ブラウザバージョン別インターネット利用シェア推移 (国内)                                    この推移を見てると                                     IE8が5%以下に  ...
ポイント                                                                          一般ユーザー向けの                                   ...
企業内におけるIE6/7/8ユーザーむちゃむちゃ多い                                           社内でもっとも多く利用されているブラウザ                                 ...
でもインターネットアクセスの                                                    主流はいまやスマホ・タブレット                                         ...
スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   66Source: htt...
年間出荷台数シェア≠インストールベース                                                                                   大事なのは               ...
インストールベースのシェア≒インターネットアクセス比率© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   68
スマホ・タブレット vs. PCのインターネット利用シェア (国内)                                                                              人口1.2億人に対す...
スマホ・タブレット vs. PCのインターネット利用シェア (韓国)                                                                              人口0.49億人に対...
スマホ・タブレット vs. PCのインターネット利用シェア (インド)                                                                              人口12億人に対す...
ポイント                                                       国内のインターネットアクセス                                                 ...
じゃぁ手っ取り早く                                                               どうすればいいか教えれ?© 2012 Adobe Systems Incorporated. All...
高度にインタラクティブなサイト (ゲーム要素など)  デバイス                                                スマホ・タブレッ                         PC IE6/7/8...
シンプルなアニメーションやスライドショー  デバイス                                                スマホ・タブレッ                         PC IE6/7/8     ...
ポイント                                                                IE6/7/8対応が必須な場合                                       ...
まとめ© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
「HTML5」は                                                                              使い所を熟慮し、                            ...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in...5
×

Adobe Creative SuiteではじまるHTML5の民主化

4,969

Published on

2012/6/1に沖縄で開催された「Creators Night vol.5 Adobe次世代セミナー」およびR社社内勉強会でつかった資料です。HTML5ツールとその使いどころのあたりを。

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,969
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Adobe Creative SuiteではじまるHTML5の民主化

  1. 1. R社勉強会 | 2012.06.11 Adobe Creative SuiteではじまるHTML5の民主化 太田禎一 | アドビ システムズ 株式会社 デジタルメディア ビジネス開発部© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. おまえダレ?  デジタルメディア・ゲーム関連のビジネス開発を担当しています  放送・出版・デジタルメディアを中心に、いろいろなお客様に最新 Adobeテクノロジーや、そのよさをお伝えする仕事  イベント・カンファレンスでお話したりも、ときどきします© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  3. 3. 「HTML5」どうやってつくる?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  4. 4. 「HTML5時代」以前のWeb開発 高度なことは プラグインで Audio/Video どこでも同じように グラフィック 表示され、動作する♡ アプリケーション Web Storage Web Sockets File API Offline Web Apps アニメーション UI© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  5. 5. 「HTML5時代」のWeb開発 ブラウザ内蔵の機能 のみですべてを実現 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© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
  6. 6. 1日でマスターできるHTML5まとめ! CSS3って HTML5?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6Link: http://matome.naver.jp/odai/2130703450443574201
  7. 7. Bad News… 「HTML5」って バラバラな技術が混在している だけでなく、ツールも 未成熟?だと!?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
  8. 8. Good News! だいじょうぶ。 「HTML5」の民主化はじまってます。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
  9. 9. 具体的には? ☞ Adobe & HTML© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9Link: http://html.adobe.com/
  10. 10. AdobeはHTML5 & Flashでデジタルメディアをトータルにカバー HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム&エフェクト &リッチ広告 テンツ現在 HTML Flash/Adobe AIR数年後 HTML Flash/Adobe AIR サーバー & サービス ツール フレーム ワーク 映像配信 Web JavaScript モバイル フォント ライブラリ アプリ HTML5 Flash Playerプラグイン (Web標準&ブラウザ) &AIRアプリ© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
  11. 11. というわけで、いますぐ使える Adobeの「HTML5」対応ツールを いくつかご紹介します。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
  12. 12. typekit (Webフォント)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  13. 13. typekit© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13Link: https://typekit.com/
  14. 14. typekit利用例:The New Yorker© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14Link: http://www.newyorker.com/
  15. 15. typekitの代替ソリューション (ごく一部) CSS3 @font-face こっち側は 日本語フォント対応 (自分でがんばる方式) (typekitは現在未対応) http://www.w3.org/TR/css3-webfonts/ デコもじ (有償) http://decomoji.jp/ Google Web Fonts (無償) http://www.google.com/webfonts/ フォントプラス (有償) http://webfont.fontplus.jp/ Fonts.com (有償) http://webfonts.fonts.com/ タイプスクウェア (有償) http://typesquare.com/ FontDeck (有償) アマナイメージズWEBフォント (有償) http://fontdeck.com/ http://amanaimages.com/font/web/© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
  16. 16. typekit民主化ポイント きちんと権利クリアされた高品質な フォントを安心して使える。 使い方はコードをコピペして埋め込むだけ。 フォント形式 (EOTとか) を意識せず 旧いブラウザ (IE) にも対応できる。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  17. 17. PhoneGap (HTML5ハイブリッドアプリ開発)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
  18. 18. Apache Cordova/PhoneGap Apache Cordova =オープンソースPJ PhoneGap =Adobeのディストリ ビューション© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18Link: http://incubator.apache.org/cordova/ http://phonegap.com/
  19. 19. WikipediaアプリはPhoneGap製© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19Link: http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/
  20. 20. PhoneGapによるアプリのクロスプラットフォーム対応 HTML (& Dreamweaver) & PhoneGap ソリューション  Web技術 (HTML/CSS/JavaScript) だけでクロスプ ラットフォームアプリケーションを開発  アドレス帳やカメラ等のネイティブ機能への直接 コールも可能  クラウド側でマルチプラットフォーム対応コンパ イルが可能な”PhoneGap Build”も ファイル形式 対応プラットフォーム© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20Link: http://www.phonegap.com/
  21. 21. iOS/AndroidにおけるPhoneGapアプリの構造 ■ ネイティブ ■ Web標準 ネイティブなアプリケーションラッパー ■ ミドルウェア (PhoneGap) 内蔵ブラウザ (WebKit) HTML/JSは JavaScriptから HTML/CSS システム側の デバイスAPI WebKitが にアクセス可能 実行 JavaScript iOS/Android (OS) iPhone/iPad/Android (デバイス機能)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  22. 22. PhoneGapのデバイス機能アクセス© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22Source: http://en.wikipedia.org/wiki/PhoneGap
  23. 23. PhoneGapの代替ソリューション (ごく一部) AppCloud (Brightcove) Sencha Touch 2 http://www.brightcove.com/ja/%E3%82% http://www.sencha.com/products/touch/ B3%E3%83%B3%E3%83%86%E3%83%B 3%E3%83%84%E3%82%A2%E3%83%97 %E3%83%AA%E3%83%97%E3%83%A9 %E3%83%83%E3%83%88%E3%83%95% E3%82%A9%E3%83%BC%E3%83%A0 Appspresso Rhodes http://appspresso.com/ http://www.rhomobile.com/© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
  24. 24. PhoneGap民主化ポイント HTML/CSS/JSだけでモバイルアプリ開発。 膨大なJSライブラリがそのまま使える。 PhoneGap BuildならマルチPF対応が容易。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  25. 25. Dreamweaver CS6 (HTML5/CSS3コーディング)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
  26. 26. Dreamweaver CS6  デザイナー向けWebサイト・アプリ開発ツール  jQuery等のコードヒント  作業環境内で動作確認 (ライブビュー=WebKit)  可変グリッドレイアウト対応 入ってます!© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
  27. 27. Dreamweaverの代替ツール (ごく一部) Aptana TextMate http://aptana.com/ http://macromates.com/ WebStorm Visual Studio http://www.jetbrains.com/webstorm/ http://www.microsoft.com/japan/m sdn/vstudio/© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  28. 28. Dreamweaver民主化ポイント つねに結果 (ライブビュー) を確認 しながら作業でき、HTML/CSS/jQuery うろ覚えでもコードを補完してくれる。 アダプティブデザインWebサイトも モバイルWebアプリもこれひとつで完結。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  29. 29. Fireworks CS6 (CSS3デザイン)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
  30. 30. CSSプロパティ抽出© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  31. 31. Fireworksの代替ツール (ごく一部) CSS3 Button Generator CSS3 Generator http://css3button.net/ http://www.css3.me/© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  32. 32. Fireworks民主化ポイント CSSを直接書かなくても 思い通りの形状やグラデーションが 作成できる。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
  33. 33. Adobe Muse (HTML5 Webページ制作)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
  34. 34. Adobe Muse  HTML5ページ作成ツール  DTPデザインのメタファー  コーディング不要 (Dreamweaverでさえも苦手な人向け)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34Link: http://muse.adobe.com/
  35. 35. Muse民主化ポイント HTML/CSSの知識がゼロでも DTPツールのノリでWebページ制作。 スライドショーもドラッグ&ドロップ だけで追加できちゃう。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
  36. 36. Adobe Edge (CSS3アニメーション制作)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
  37. 37. Adobe Edge© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
  38. 38. WebページへのEdgeアニメーション組み込み Edgeランタイム スクリプトの参照 実際に表示される div領域© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
  39. 39. モバイルアプリへのEdgeアニメーション組み込み例 Edgeなら位置・ サイズ・色・形状のアニ メーションをコードを書かずに 簡単に実現できます。 タイミングの微調整をし、Web やアプリとして複数プラット フォームに配布するのも、他の ゲーム開発ワークフローに 比べてほんの僅かな時間 しかかかりません。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39Link: Adobe Success Story http://www.adobe.com/cfusion/showcase/index.cfm?event=casestudydetail&casestudyid=1694931
  40. 40. Webだけでなく電子書籍にも対応するEdge© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
  41. 41. Adobe Edge Runtime API = JavaScript連携が容易 jQueryのセレクタを利用 Adobe独自のアニメーション エンジン (CSS3+JavaScript)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41Link: http://www.adobe.com/devnet-apps/edge/api/current/EdgeAPI.0.1.6.html
  42. 42. Edgeの代替ツール Tumult Hype (DOMアニメ) Sencha Animator (DOMアニメ) http://tumultco.com/hype/ http://extjs.co.jp/products/animator/ Radi (HTML5 Canvas) http://radiapp.com/© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
  43. 43. Edge民主化ポイント HTML/CSS/JSの知識がゼロでも FlashのようなHTMLアニメーション と簡単なインタラクションを容易に作成できる。 しかも別ツールを使わずにファイルサイズを最小化。 IE8等非対応環境のための代替画像設定もカンタン。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
  44. 44. Flash Professional (HTML5 Canvasアニメーション制作)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
  45. 45. Flash Professional CS6:アニメーションのマルチアウトプット [スプライトシートを作成] コマンド HTML5 CanvasベースのJSアニメーション フレームワーク”easelJS” (CreateJSの一部)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45Link: http://createjs.com/#!/EaselJS
  46. 46. Flash Pro民主化ポイント 従来のアニメーション制作ワークフロー そのままにHTMLアニメーションを作成できる。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
  47. 47. Adobe Shadow (マルチスクリーンHTML動作テスト)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
  48. 48. リモート インスペクション (DOM確認・編集) モバイルデバイスに 直接URLを送信し確認 (Bonjour接続)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48Link: http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/
  49. 49. Shadow民主化ポイント 開発機と (何台もの) 実機を行ったり 来たりしないでもサイトの確認ができる。 しかも実行中のコードを手元で確認 できたりして。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
  50. 50. Adobeの総合力 HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム&エフェクト &リッチ広告 テンツ HTML 今後続々ツール・ ソリューションを サーバー 出していきます。 & サービス これが総合力! ツール フレーム ワーク 映像配信 Web JavaScript モバイル フォント ライブラリ アプリ HTML5 (Web標準&ブラウザ)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  51. 51. Adobeの総合力=Adobe Creative Suite 6 + Adobe Creative Cloud ¥5,000/mo.*  +© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51Link: http://www.adobe.com/jp/products/creativecloud.html *個人版 年間プラン/月 (標準価格)
  52. 52. 「HTML5」どう使う?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  53. 53. 顧客「うちのサイトFlash使わないでFlashぽくやってよ。」 Web屋「はぁ。」 顧客「ほらアイパッドで見られるようにさ。」 Web屋「それHTML5なら楽勝っすよ!」 顧客「もちろんIEでも動くよね。」 Web屋「え。」 顧客「え。」© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
  54. 54. Flash Playerの普及率 Millward Brown調べ1 (2011.06) RIASTATS調べ2 (2012.05) Flash Player 10+ Flash Player 10+ 98.9% (Japan) 88.06% (Japan) ※PCのみ ※スマホ・タブレット含む 54© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Source: 1http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html 2http://riastats.com/
  55. 55. 「HTML5」の定義 にょろ〜ん! 世の中における期待値 (アイパッドで動くとか)を踏まえ HTML5=脱Flash という意味だと仮定して もっとわかりやすく 「アンプラグド」と呼んでみる。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55
  56. 56. まとめ:アンプラグド vs. Flash勢力図 (2012年5月現在) アニメー ゲーム・高 表示エフェ RIA (業務 ション・ 度なインタ オンライン クト・スラ アプリケー モーション ラクティブ ビデオ イドショー ション) GFX コンテンツ© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56
  57. 57. 乱暴に言うと、アンプラグドは2種類 にょろにょろ〜ん! HTML5 と jQuery© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 57
  58. 58. 乱暴に言うと、使い分けはかんたん HTML5 IE6/7/8切り捨て案件 jQuery IE6/7/8対応案件© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
  59. 59. 直近のブラウザバージョン別インターネット利用シェア (WW) IE6/7/8 38%© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2&qpcustomd=0
  60. 60. 直近のブラウザバージョン別インターネット利用シェア (WW) 31.05% 20.7% 15.36% 15.07% 3.44% 2.8% IE6/7/8 2.73% 19.35% 2.01% 1.41% 1.26%© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60Source: http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201203-201204-bar
  61. 61. 直近のブラウザバージョン別インターネット利用シェア (国内) 25.71% 24.39% 16.93% 15.97% 3.76% 3.68% IE6/7/8 1.67% 29.71% 1.56%© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 61Source: http://gs.statcounter.com/#browser_version_partially_combined-JP-monthly-201203-201204-bar
  62. 62. ブラウザバージョン別インターネット利用シェア推移 (国内) この推移を見てると IE8が5%以下に なるのにあと2年近く かかりそう© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 62Source: http://gs.statcounter.com/#browser_version_partially_combined-JP-daily-20080701-20120528
  63. 63. ポイント 一般ユーザー向けの PC Webサイトで本当に IE6/7/8を捨てられる=「HTML5」だけで すべて済むようになるまでは だいたいあと2年の辛抱。 いっぽう企業内に目を向けると…© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 63
  64. 64. 企業内における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© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64Source: Web広告研究会による第4回企業内Web閲覧環境調査 https://www.wab.ne.jp/wab_sites/contents/1449
  65. 65. でもインターネットアクセスの 主流はいまやスマホ・タブレット でしょ?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
  66. 66. スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66Source: http://www.asahi.com/digital/cnet/CNT201202060023.html
  67. 67. 年間出荷台数シェア≠インストールベース 大事なのは こっち!© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
  68. 68. インストールベースのシェア≒インターネットアクセス比率© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
  69. 69. スマホ・タブレット vs. PCのインターネット利用シェア (国内) 人口1.2億人に対する 普及率1 スマホ 9.7% パソコン 83.4% うち48% 6.41% Android うち48% iOS© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69Source: http://gs.statcounter.com/#mobile_vs_desktop-JP-monthly-200812-201205 1 http://bit.ly/NgPmju
  70. 70. スマホ・タブレット vs. PCのインターネット利用シェア (韓国) 人口0.49億人に対する 普及率 スマホ1 40% パソコン2 80.9% うち87% 19.73% Android うち11% iOS© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70Source: http://gs.statcounter.com/#mobile_vs_desktop-KR-monthly-200812-201205 1 http://reut.rs/Kf328x 2 http://bit.ly/JVEiYe
  71. 71. スマホ・タブレット vs. PCのインターネット利用シェア (インド) 人口12億人に対する 普及率1 携帯電話 80% パソコン 3% うち16% 48.71% Samsung うち60% Nokia© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 71Source: http://gs.statcounter.com/#mobile_vs_desktop-IN-monthly-200812-201205 1 http://bit.ly/KOdbh8
  72. 72. ポイント 国内のインターネットアクセス 主流はまだまだPCであり続ける。 インターネット全体の ユーザー動向と、個々のサイトでの アクセス解析 (GA/SC) 結果を見ながら 効果が高いところに選択的に「HTML5」を導入するべき。 「こっち立てればあっちが立たず」状態はしばらく続く© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 72
  73. 73. じゃぁ手っ取り早く どうすればいいか教えれ?© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 73
  74. 74. 高度にインタラクティブなサイト (ゲーム要素など) デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ ト テクノロジー HTML5 Canvas (EaselJS) やれる度 ○ × ◎ 顧客ハッピー度    デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ ト テクノロジー Flash やれる度 × ◎ ◎ 顧客ハッピー度    デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ ト テクノロジー HTML5 Canvas Flash やれる度 ○ ◎ ◎ 顧客ハッピー度   © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 74
  75. 75. シンプルなアニメーションやスライドショー デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ ト テクノロジー jQuery やれる度 ◎ ◎ ◎ 顧客ハッピー度    デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ ト テクノロジー CSS3 (Adobe Edge) やれる度 ◎ × ◎ 顧客ハッピー度    デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ ト テクノロジー Flash やれる度 × ◎ ◎ 顧客ハッピー度   © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 75
  76. 76. ポイント IE6/7/8対応が必須な場合 思い切ってサイト全体で 「できること」をjQueryレベルに ガマンすることも選択肢のひとつ。 IE6/7/8を切って「HTML5」で作っても スマホ・タブレットで見られないとか 特定ブラウザで見ろ的なサイトは Flash以上に「害悪」。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
  77. 77. まとめ© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  78. 78. 「HTML5」は 使い所を熟慮し、 クライアントと握ったうえで使う。 登場し始めた「HTML5」 民主化ツールを知り、賢く使う。© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78
  79. 79. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×