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

1. マイクロソフトと HTML5
～ 最新状況と今後の動向 ～
日本マイクロソフト株式会社
エバンジェリスト
奥主 洋（おくぬし ひろし）
http://blogs.technet.com/hirookun
http://blogs.msdn.com/hirookun
名刺交換大歓迎！

2. 自己紹介：奥主はこんな人間です。
個人プロファイル
東京生まれ、S43 年生まれ 2007年からTech･Edの
英語得意 コンテンツ選別を担当
海外ドラマ好き インフラだけから始めて2010年
ゲーム好き は全体統括を担当。
お寿司が好き 昨年の Lv300 以上宣言を提唱。
技術バックグラウンド１ 技術バックグラウンド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. 今日のセッションに入る前に （余談）
日付 セッション 担当
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. 私の所属チームの担当領域
エバンジェリストは複数を担当

5. マイクロソフトと HTML5
～ 最新状況と今後の動向 ～
日本マイクロソフト株式会社
エバンジェリスト
奥主 洋（おくぬし ひろし）
http://blogs.technet.com/hirookun
http://blogs.msdn.com/hirookun

7. Lev
ID Title ID Title Level
el
HTM01 50 Performance Tricks to Make Your HTML5 Web Sites Faster 300 CMP02 Design, Content, Code: Start-to-Finish 200
HTM02 Data in an HTML5 World 200
CMP06 HTML5 Canvas Mastery 200
HTM03 Deep Dive Into HTML5 <canvas> 300
CMP01 HTML5/CSS3 Boot Camp 200
HTM04 Filling the HTML5 Gaps with Polyfills and Shims 200
Going Mobile with Your Site on Internet Explorer 9 and EXT19 Microformats and Semantic Markup 200
HTM05 300
Windows Phone 7
HTM06 JavaScript: The Language 200 EXT14 Is that a Sherpa on Your Shoulder? 200
HTM07 Reactive Extensions for JavaScript(RxJS) 300
RES02 Interactive Panel: JavaScript 300
HTM08 The Devil Went Down to HTTP: Debugging with Fiddler 300
FRM01 Designing Great Experiences for SharePoint 2010 200
HTM09 The View of the World Depends on the Glasses I Wear 300
HTM10 Hot from the Labs: HTML5 WebSockets 200 EXT07 Designer and Developer: A Case for the Hybrid 300
HTM11 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> and
HTM12 300
<audio> Today
EXT20 CSS3 Takes on the World 200
Adding the Awesomesauce Flavor with Internet Explorer 9
HTM13 300
Pinned Sites
MED08 MMP Player Framework: Past, Present, Future 200
HTM14 HTML5 for Silverlight Developers 300
HTM15 Modernizing Your Website: SVG Meets HTML5 300
HTM16 Script#: Compiling C# to JavaScript using Visual Studio 300
HTM17 The Future of HTML5 200
HTM18 Hacking with the F12 Developer Tools 200

8. イベント自身がインフラの傾向が強かった。でも．．．
ID Session
WCL319 Introduction to Internet Explorer 9 for IT Pros
WPH305 Internet Explorer 9 on Windows Phone
DEV343 Application Development with HTML5
DEV334 HTML5 and CSS3 Techniques You Can Use Today
DEV348 Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9
DEV347 Using JavaScript to Build HTML5 Applications
http://channel9.msdn.com/Events/TechEd/NorthAmerica/
2011?sort=sequential&direction=desc&term=HTML5

9. そして今は．．．
 Silverlight 5 待ち
 Internet Explorer 9 日本語版出荷済み
 Internet Explorer 10 PP2 出荷済み
 Silverlight Developer Center のリニューアル
 IE Developer Center の日本語化加速
 IE9 開発者ガイド → 翻訳済み
 IE10 開発者ガイド → 英語 当然翻訳計画中
 IE ブログは順次翻訳中  物江

10. Save the Date: Sept 13-16, 2011
Anaheim, California
http://www.buildwindows.com/

11. 今日は期待外れになる確率 99.9% (*^_^*)
皆さんの期待する多くの質問の答えは
BUILD 後です。ごめんなさい。。。
また呼んでください。明らかにします。

12. HTML5 / Internet Explorer の
今とマイクロソフトの取り組み

13. これまでの 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

14. ブラウザーの役割
 PC 稼働時間の 57% がブラウザーに使われる
 ブラウザーはもうプラットフォームとしての位置づけ
 Web への期待がさらに高まり、Web で出来ることは日々
増えてきているが、使うための環境が追いついていない現状
 ブラウザーに求められること
 サイトならではのエクスペリエンスを提供する
 ユーザーとユーザーの個人情報を守る
 同一のマークアップを実現する
 ネイティブアプリケーションと同等の機能・性能・操作性
 数々の選択肢（デバイス・テクノロジー）に対応する
1

15. 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 or
SVG 1.1 object,
inline in HTML5
Selectors, Namespaces,
Colors, Values, Forums and New, more open feedback
CSS 3 Backgrounds and Borders, Community program; HTML5 Labs
Fonts, Media Queries, 2D
Transforms
DOM
Core, Events, Style, and Range,
WebIDL
Standards W3C participation
ECMAScript
262 Faster JavaScript
Graphics JPEG-XR, TIFF, ICC Colors,
and Fonts WOFF Fonts Open Testing Cooperative W3C test suites
Web
Performance Navigation Timing
Privacy Tracking Protection
15

16. JavaScript 処理性能が大幅に向上
SunSpider JavaScript Benchmark Test 0.9.1
(ms)
4000
3500
3000
2500
2000
1500
約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

17. 新しい JavaScript エンジン “Chakra”
 Document Object Model (DOM) の最適化
Internet VB Script Internet VB Script
Explorer 8 Explorer 9
DOM DOM
COM
COM
JScript 5.8
JavaScript
(Chakra)
DOM
DOM
DOM ES5
1

18. HTML5 ワーキング グループ
HTML
WebApps
CSS
SVG
webPerformance
EcmaScript
Geo-
Location
hybi
100 以上の仕様を検討

19. HTML5 のマップ
W3C ECMA
Geolocation
ECMA Script
HTML CSS Web Apps SVG
262
First Public Working Candidate
Working Draft Last Call Recommendation
Draft Recommendation
19

20. HTML5 の最新状況
5/25（水）についに
最終草案（Last Call）へ
First Public Working Candidate
Working Draft Last Call Recommendation
Draft Recommendation
20

21. http://blogs.msdn.com/b/ie/archive/2011/06/28/css-2-1-complete-
unblocking-faster-web-standards-progress.aspx
21

22. マイクロソフトのアプローチ
22

23. Web を前に進めていく
 進捗 vs 活動
 Platform Preview のリリースサイクル 進捗
23

24. HTML5 をネイティブに実装した IE9
 Foursquare Playground
 Kayac SVG Girl
 Bon Jovi Director’s Cut
 Namco PAC-MAN
Try these and more at:
beautyoftheweb.com

25. HTML5 Labs
 実験中あるいはまだ安定して
いない仕様のプロトタイプ
 実際に製品に取り込む前に
アドオンとして追加検証可能
Visit the site at:
html5labs.com
25

26. Windows Phone 7.5
PC のブラウザー環境がそのままに
 海外で出荷済みの
Windows Phone 7 （IE7）
 “Mango” からブラウザー
が IE9 ベースに
 HTML5 を利用することで
電話も Same Markup
 CSS3 を併用することで柔
軟なアプリ UI 設計

27. IE10 は ARM プロセッサーでもテスト中

28. 春日井、物江、奥主が
今 取り組んでいること、
皆さんにもオススメすること

29. Windows 7 + IE9 にサイトを対応する
http://www.buildmypinnedsites.com

30. UIのカスタマイズ
http://msdn.microsoft.com/ja-jp/library/gg589505(v=VS.85).aspx
ユーザの利点 “ピン留め” していないIE
• 視覚的、直感的にサイトを判別でき
る
提供者にとっての利点 “ピン留め“ したgooブログ
ファビコン
• ブランディング http://blog.goo.ne.jp/
• 目立たせることができる
ナビゲーションボタンの色をカスタマ
イズ
30

31. “ピン留め”
Windows 7と連動するInternet Explorer 9の新機能
ファビコン＋ブランドカラー
動的なジャンプリス
ト
静的なジャンプリス
ト
サムネイルコントロー
ル
ファビコン ユーザーへの通知
31

32. IE9 標準モード対応
• IE9
• IE9互換表示
• Quirks
• IE7標準
• IE8標準
• IE9標準
参照：Testing sites with Browser Mode vs. Doc Mode
http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx

33. HTML5 対応ももちろん提案
どんなコンテンツに利用できるのか？メリットがあるのか？
① Canvas
② Video, Audio
③ SVG
④ Geolocation
⑤ Input, Ruby

34. “ピン留め” とは
http://windows.microsoft.com/ja-JP/internet-explorer/products/ie-9/features/pinned-sites
タスクバーからWebサイトを起動できる機能
87%がタスクバーからアプリを起動している
62%がタスクバーに規定以外のアプリを登録している
アプリケーションと同じようにジャンプリストに対応し
ているので、アクセスさせたいタスクに誘導できる
“ピン留め”対応による効果 タスクバー
の使用率は
PVが11%アップ とても高
直帰率が14%改善 い!!
滞在時間が49%アップ
ピン留めからアクセスしたユーザは15％多いページを見ている
ソーシャルなリクエストが3倍に
http://windowsteamblog.com/ie/b/ie/archive/2011/02/17/economics-of-the-web-ie9-users-that-pin-huffington-post-spend-49-more-time-
on-site.aspx
34

35. “ピン留め”の米国での効果
 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

36. IE9の製品サイトからの誘導
http://windows.microsoft.com/ja-JP/internet-explorer/products/ie/home
 このレクタングルバ
ナーから誘導させてい
ただきます
 掲載期限については御
相談下さい
 実績：xx PV/7月
36

37. IE9アドオンギャラリーへの掲載
http://ieaddons.com/jp/
 このエリアから
誘導させていた
だきます
 掲載期限、場所
については御相
談下さい
 実績：xx PV/7月
37

38. リファレンス
 Beauty Of The Web
http://www.beautyoftheweb.jp/
 Internet Explorer Test Drive
http://ie.microsoft.com/testdrive/
 Internet Explorer 製品ページ
http://www.microsoft.com/japan/windows/prod
ucts/winfamily/ie/function/default.mspx
 Internet Explorer 日本語製品版の入手先
http://windows.microsoft.com/en-US/internet-
explorer/downloads/ie-9/worldwide-languages
38

39. © 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.