Dotnetlab 20110827


Published on

2011年8月27日 .NETラボさんの勉強会で使用したスライドです。個人情報などを含んでいるため、本番で使用したものとは異なりますが、ご容赦ください。

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dotnetlab 20110827

  1. 1. マイクロソフトと HTML5~ 最新状況と今後の動向 ~日本マイクロソフト株式会社エバンジェリスト奥主 洋(おくぬし ひろし) 名刺交換大歓迎!
  2. 2. 自己紹介:奥主はこんな人間です。 個人プロファイル 東京生まれ、S43 年生まれ 2007年からTech・Edの 英語得意 コンテンツ選別を担当 海外ドラマ好き インフラだけから始めて2010年 ゲーム好き は全体統括を担当。 お寿司が好き 昨年の Lv300 以上宣言を提唱。技術バックグラウンド1 技術バックグラウンド2家に Apple II+ があった 1999年7月に Microsoft Japan に入社その後は PC-9801 系 サポートおよびコンサル顧客支援元々 S/38, AS/400 技術者 MAPIの開発支援、Win95の運用支援・・・Excel5, Access2.0 で VBA つまりはなんでもあり。OS/2 Lan Server Windows 2000登場後、ASP+COM支援Windows 3.1 + LanMan 大手損害保険系のシステム支援が長いCcMail、MSMail 2005年1月にエバンジェリストに。WinNT は 3.5 から インフラ系エバンジェリストながら過去のWin95~ MSテクノロジー多し 素養に応じて IISをずっと担当、正式にExchange4.0 2011年7月から開発系に転身。…
  3. 3. 今日のセッションに入る前に (余談)日付 セッション 担当2009/6/20 「Silverlight 3でアプリケーション開発を始めよう ~新機能とExpression Blend 3による開発~」 大西2009/6/20 「開発×業務×生活の可能性を広げるプラットフォーム Windows 7 紹介」 長沢2009/7/18 「アラウンドOpenXML ~一体何がOpenなのか?~」 小高(元MS)2009/9/19 「アラウンドシリーズPart2:アラウンドADO.NET Entity Framework」 小高(元MS)2009/10/17 「Expression Blend 3ではじめるSilverlight 3アプリケーション開発」 大西2009/11/21 「ついにサービス提供開始!! Windows Azure Platform 概要とテクノロジ」 井上(大)2009/12/19 「Silverlightを用いた業務アプリケーション開発入門」 小高(元MS)2010/1/23 「TRIなBI~SQL Server 2008 R2のAnalysisとReportingの強化」 安納2010/2/27 「IIS7 による簡単 Web 共有ホスティング」 物江2010/4/24 「これからのアプリケーションの鍵を握る技術とコンセプト - ユーザーエクスペリエンス-」 長坂2010/6/26 「サーバーサイド開発『"クラウド" 時代の次世代サーバーサイド開発』」 井上(大)2010/7/24 「開発者のための Internet Explorer 9 概要 - Platform Preview 3 –」 長坂2010/9/25 「Entity Framework開発のTips集」 小高(元MS)2010/10/23 「ASP.NET MVC と jQuery で実践する標準志向 Web 開発」 井上(章)2010/12/25 「ついに公開! Windows Phone 7 知っておくべき開発の心得」 田中2011/2/26 「そうだったのか! 最新データアクセスを学べるお時間」 井上(大)2011/5/28 「Silverlight 4 WCF RIA Servicesソリューションサンプル Ver.2とMVVM化へのアプローチ」 鈴木(章)2011/6/25 「Windows Phone アプリケーション開発概要」 高橋2011/8/27 「マイクロソフトとHTML5 ~最新状況と今後の動向~」 奥主
  4. 4. 私の所属チームの担当領域エバンジェリストは複数を担当
  5. 5. マイクロソフトと HTML5~ 最新状況と今後の動向 ~日本マイクロソフト株式会社エバンジェリスト奥主 洋(おくぬし ひろし)
  6. 6. Lev ID Title ID Title Level elHTM01 50 Performance Tricks to Make Your HTML5 Web Sites Faster 300 CMP02 Design, Content, Code: Start-to-Finish 200HTM02 Data in an HTML5 World 200 CMP06 HTML5 Canvas Mastery 200HTM03 Deep Dive Into HTML5 <canvas> 300 CMP01 HTML5/CSS3 Boot Camp 200HTM04 Filling the HTML5 Gaps with Polyfills and Shims 200 Going Mobile with Your Site on Internet Explorer 9 and EXT19 Microformats and Semantic Markup 200HTM05 300 Windows Phone 7HTM06 JavaScript: The Language 200 EXT14 Is that a Sherpa on Your Shoulder? 200HTM07 Reactive Extensions for JavaScript(RxJS) 300 RES02 Interactive Panel: JavaScript 300HTM08 The Devil Went Down to HTTP: Debugging with Fiddler 300 FRM01 Designing Great Experiences for SharePoint 2010 200HTM09 The View of the World Depends on the Glasses I Wear 300HTM10 Hot from the Labs: HTML5 WebSockets 200 EXT07 Designer and Developer: A Case for the Hybrid 300HTM11 IE 10 Platform Preview 1: The Future of Adaptive Web Design 300 EXT04 Riding the Geolocation Wave 300 5 Things You Need To Know To Start Using <video> andHTM12 300 <audio> Today EXT20 CSS3 Takes on the World 200 Adding the Awesomesauce Flavor with Internet Explorer 9HTM13 300 Pinned Sites MED08 MMP Player Framework: Past, Present, Future 200HTM14 HTML5 for Silverlight Developers 300HTM15 Modernizing Your Website: SVG Meets HTML5 300HTM16 Script#: Compiling C# to JavaScript using Visual Studio 300HTM17 The Future of HTML5 200HTM18 Hacking with the F12 Developer Tools 200
  7. 7. イベント自身がインフラの傾向が強かった。でも...ID SessionWCL319 Introduction to Internet Explorer 9 for IT ProsWPH305 Internet Explorer 9 on Windows PhoneDEV343 Application Development with HTML5DEV334 HTML5 and CSS3 Techniques You Can Use TodayDEV348 Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9DEV347 Using JavaScript to Build HTML5 Applications 2011?sort=sequential&direction=desc&term=HTML5
  8. 8. そして今は... Silverlight 5 待ち Internet Explorer 9 日本語版出荷済み Internet Explorer 10 PP2 出荷済み Silverlight Developer Center のリニューアル IE Developer Center の日本語化加速 IE9 開発者ガイド → 翻訳済み IE10 開発者ガイド → 英語 当然翻訳計画中 IE ブログは順次翻訳中  物江
  9. 9. Save the Date: Sept 13-16, 2011Anaheim, California
  10. 10. 今日は期待外れになる確率 99.9% (*^_^*)皆さんの期待する多くの質問の答えはBUILD 後です。ごめんなさい。。。また呼んでください。明らかにします。
  11. 11. HTML5 / Internet Explorer の今とマイクロソフトの取り組み
  12. 12. これまでの Internet Explorer の歩み Internet Explorer Windows Windows Windows 製品名 6.0 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 2011/3/15 製品発売日 2001/12/31 2006/10/18 2009/6/17 *日本語版提供開始日は 2011/04/26 0:00 経過年数 10年弱 5年弱 2年強 最新メインストリーム OSに準ずる OSに準ずる OSに準ずる OSに準ずる 延長サポート (XP以前, XP) (XP, Vista) (XP, Vista, 7) (Vista, 7) (クライアント) 表示速度 ハードウェア アクセラレータ 代表的な CSS1 をフルサポート タブ 検索候補表示 ピン留めサイト 機能 (※) マウスホイール対応 CSS2.1対応強化 アクセラレータ アドオン パフォーマンス Webスライス アドバイザー※代表的なものだけを掲載しています。 1
  13. 13. ブラウザーの役割 PC 稼働時間の 57% がブラウザーに使われる  ブラウザーはもうプラットフォームとしての位置づけ  Web への期待がさらに高まり、Web で出来ることは日々 増えてきているが、使うための環境が追いついていない現状 ブラウザーに求められること  サイトならではのエクスペリエンスを提供する  ユーザーとユーザーの個人情報を守る  同一のマークアップを実現する  ネイティブアプリケーションと同等の機能・性能・操作性  数々の選択肢(デバイス・テクノロジー)に対応する 1
  14. 14. MIX10 以降の IE9 実装 Standards Community Inline SVG, Parsing Rules, XHTML,HTML5 Selection APIs, Canvas, Audio Updated approximately & Video, Semantic tags, Preview Builds Geolocation every 8 weeks As document, as image orSVG 1.1 object, inline in HTML5 Selectors, Namespaces, Colors, Values, Forums and New, more open feedbackCSS 3 Backgrounds and Borders, Community program; HTML5 Labs Fonts, Media Queries, 2D TransformsDOM Core, Events, Style, and Range, WebIDL Standards W3C participationECMAScript262 Faster JavaScriptGraphics JPEG-XR, TIFF, ICC Colors,and Fonts WOFF Fonts Open Testing Cooperative W3C test suitesWebPerformance Navigation TimingPrivacy Tracking Protection 15
  15. 15. JavaScript 処理性能が大幅に向上 SunSpider JavaScript Benchmark Test 0.9.1 (ms)400035003000250020001500 約18倍の高速化1000 500 0 IE8 Firefox IE9 Beta Safari 5.0.3 Firefox 4.0 Chrome 10 Chrome 11 Opera 11 IE9 Final 3.6.13 Beta 12 Dev テスト環境: Dell Optiplex, Intel Core 2 Duo プロセッサー 3.0GHz, 4GB RAM, Intel Integrated Video, Windows 7 1
  16. 16. 新しい JavaScript エンジン “Chakra” Document Object Model (DOM) の最適化 Internet VB Script Internet VB ScriptExplorer 8 Explorer 9 DOM DOM COM COM JScript 5.8 JavaScript (Chakra) DOM DOM DOM ES5 1
  17. 17. HTML5 ワーキング グループ HTML WebApps CSS SVG webPerformance EcmaScript Geo-Location hybi 100 以上の仕様を検討
  18. 18. HTML5 のマップ W3C ECMA Geolocation ECMA ScriptHTML CSS Web Apps SVG 262 First Public Working Candidate Working Draft Last Call Recommendation Draft Recommendation 19
  19. 19. HTML5 の最新状況 5/25(水)についに 最終草案(Last Call)へ First Public Working Candidate Working Draft Last Call Recommendation Draft Recommendation 20
  20. 20. 21
  21. 21. マイクロソフトのアプローチ 22
  22. 22. Web を前に進めていく 進捗 vs 活動 Platform Preview のリリースサイクル 進捗 23
  23. 23. HTML5 をネイティブに実装した IE9 Foursquare Playground Kayac SVG Girl Bon Jovi Director’s Cut Namco PAC-MANTry these and more
  24. 24. HTML5 Labs 実験中あるいはまだ安定して いない仕様のプロトタイプ 実際に製品に取り込む前に アドオンとして追加検証可能Visit the site 25
  25. 25. Windows Phone 7.5PC のブラウザー環境がそのままに  海外で出荷済みの Windows Phone 7 (IE7)  “Mango” からブラウザー が IE9 ベースに  HTML5 を利用することで 電話も Same Markup  CSS3 を併用することで柔 軟なアプリ UI 設計
  26. 26. IE10 は ARM プロセッサーでもテスト中
  27. 27. 春日井、物江、奥主が今 取り組んでいること、皆さんにもオススメすること
  28. 28. Windows 7 + IE9 にサイトを対応する
  29. 29. UIのカスタマイズ ユーザの利点 “ピン留め” していないIE • 視覚的、直感的にサイトを判別でき る 提供者にとっての利点 “ピン留め“ したgooブログ ファビコン • ブランディング • 目立たせることができる ナビゲーションボタンの色をカスタマ イズ30
  30. 30. “ピン留め”Windows 7と連動するInternet Explorer 9の新機能 ファビコン+ブランドカラー 動的なジャンプリス ト 静的なジャンプリス ト サムネイルコントロー ル ファビコン ユーザーへの通知31
  31. 31. IE9 標準モード対応 • IE9 • IE9互換表示 • Quirks • IE7標準 • IE8標準 • IE9標準参照:Testing sites with Browser Mode vs. Doc Mode
  32. 32. HTML5 対応ももちろん提案どんなコンテンツに利用できるのか?メリットがあるのか? ① Canvas ② Video, Audio ③ SVG ④ Geolocation ⑤ Input, Ruby
  33. 33. “ピン留め” とは タスクバーからWebサイトを起動できる機能 87%がタスクバーからアプリを起動している 62%がタスクバーに規定以外のアプリを登録している アプリケーションと同じようにジャンプリストに対応し ているので、アクセスさせたいタスクに誘導できる “ピン留め”対応による効果 タスクバー の使用率は PVが11%アップ とても高 直帰率が14%改善 い!! 滞在時間が49%アップ ピン留めからアクセスしたユーザは15%多いページを見ている ソーシャルなリクエストが3倍に on-site.aspx 34
  34. 34. “ピン留め”の米国での効果  DocStoc (ビジネス)  ページビュー:230%、滞在時間:40%、ドキュメントの検索頻度:650%  Gilt (ショッピング)  訪問数:39%、カートへの商品の追加:160%、購入完了率:45%  The Killers (音楽)  ページビュー:65%、滞在時間:103%  hi5 (ソーシャルゲーム)  ソーシャルの行動反応(いいね!ボタンのクリック、ゲーム、シェア): 200%  Business Insider (ニュース)  ページビュー:57%、滞在時間: 95%  Flixster (メディア)  ページビュー:34%、滞在時間:57%  Huffington Post (ニュース)  滞在時間:49%35
  35. 35. IE9の製品サイトからの誘導  このレクタングルバ ナーから誘導させてい ただきます  掲載期限については御 相談下さい  実績:xx PV/7月36
  36. 36. IE9アドオンギャラリーへの掲載  このエリアから 誘導させていた だきます  掲載期限、場所 については御相 談下さい  実績:xx PV/7月37
  37. 37. リファレンス Beauty Of The Web Internet Explorer Test Drive Internet Explorer 製品ページ ucts/winfamily/ie/function/default.mspx Internet Explorer 日本語製品版の入手先 explorer/downloads/ie-9/worldwide-languages 38
  38. 38. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.