Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,737 views

Published on

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

Published in: Technology
  • Dating for everyone is here: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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.

×