39
Windows 10 の あたらしい Web ブラウザー について 日本マイクロソフト株式会社 デベロッパーエバンジェリズム統括本部 物江 修 (@osamum_MS)

Windows 10 の あたらしい Web ブラウザー について

Embed Size (px)

Citation preview

Page 1: Windows 10 の あたらしい Web ブラウザー について

Windows 10 の あたらしいWeb ブラウザー について

日本マイクロソフト株式会社

デベロッパーエバンジェリズム統括本部

物江 修 (@osamum_MS)

Page 2: Windows 10 の あたらしい Web ブラウザー について

アジェンダ

•Window 10 の Web ブラウザー

•Internet Explorer

•Edge

Page 3: Windows 10 の あたらしい Web ブラウザー について

Windows 10 の Web ブラウザー~ 2 つの Web ブラウザーが搭載 ~

Windows 10

Internet Explorer 11

Edge

Page 4: Windows 10 の あたらしい Web ブラウザー について

Windows 10 の Internet Explorer

• 旧バージョンとの互換性目的• Windows 7、8.1 と同じもの• マイナーアップデートはされる

Page 5: Windows 10 の あたらしい Web ブラウザー について

Microsoft Edge~新規に開発された Web ブラウザー~

Edge

• 他の Web ブラウザーとの相互運用性• Web 標準• Windows 10 のエクスペリエンス• 既定の Web ブラウザー

Page 6: Windows 10 の あたらしい Web ブラウザー について

MICROSOFT CONFIDENTIAL

Th

e M

ob

ile W

eb

Web 標準準拠と他ブラウザ互換~Spartan の目指すところ~

Page 7: Windows 10 の あたらしい Web ブラウザー について

A break from the past,

220k+Unique LoC Removed

6 document modes

300+ APIs removed

300k+Unique LoC Added

49 New Major Features

4200+ Interop Fix

Page 8: Windows 10 の あたらしい Web ブラウザー について

旧「IE 対応」と Edge のジレンマ~旧 IE 向けのコンテンツは正しく動作しない~

If(userAgent==“MSIE”)||(userAgent==?)

旧 Internet Explorer か未知のブラウザー向けコンテンツ

Page 9: Windows 10 の あたらしい Web ブラウザー について

旧「IE 対応」と Edge のジレンマ~旧 IE 向けのコンテンツは正しく動作しない~

If(userAgent==“MSIE”)||(userAgent==?)

旧 Internet Explorer か未知のブラウザー向けコンテンツ

Page 10: Windows 10 の あたらしい Web ブラウザー について

Edge モードの userAgent~旧 IE 用コンテンツの弊害回避~

Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebkit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0

Page 11: Windows 10 の あたらしい Web ブラウザー について

Edge モードの userAgent~旧 IE 用コンテンツの弊害回避~

Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebkit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0

え、なんすか?

Page 12: Windows 10 の あたらしい Web ブラウザー について

EdgeとInternet Explorer(1/2)~ 異なるレンダリングエンジン~

EdgeHTML.dll MSHTML.dll

相互運用性

既定のブラウザ

モダン Web サイト向け

集中を妨げない画面、注釈、Cortana 統合のようなユニークなユーザー体験

互換性

主にイントラネットかエンタープライズモード サイト

IE11 IE10 IE9 IE8 IE7 IE5.5

Edge

Page 13: Windows 10 の あたらしい Web ブラウザー について

Trident

1995

3 41 2 5.5 65 7 84.x 9

2015

9 10 11

Page 14: Windows 10 の あたらしい Web ブラウザー について

Trident

Quirks Strict

!DOCTYPE

1995

3 41 2 5.5 65 7 84.x 9

2015

9 10 11

HTML4, ES3, CSS2

Page 15: Windows 10 の あたらしい Web ブラウザー について

Trident

!DOCTYPE

1995

3 41 2 5.5 65 7 84.x 9

2015

9 10 11

Quirks Strict

1995

HTML4, ES3, CSS2

Page 16: Windows 10 の あたらしい Web ブラウザー について

Trident

IE5Quirks

IE7Compatibility

View

IE8Standards

Mode

x-ua-compatible

!DOCTYPE

1995

3 41 2 5.5 65 7 84.x 9

2015

9 10 11

CSS2.1HTML4, ES3, CSS2

Page 17: Windows 10 の あたらしい Web ブラウザー について

3

Trident

IE5Quirks

IE7Compatibility

View

IE8Standards

Mode

IE9Standards

Mode

x-ua-compatible

!DOCTYPE

1995

41 2 5.5 65 7 84.x 9

2015

9 10 11

CSS2.1 HTML5, SVG, ES5HTML4, ES3, CSS2

Page 18: Windows 10 の あたらしい Web ブラウザー について

Trident

IE5Quirks

IE7Compatibility

View

IE8Standards

Mode

IE9Standards

Mode

QMEQuirks Mode

Emulation

IE10Standards

Mode

x-ua-compatible

!DOCTYPE

1995

3 41 2 5.5 65 7 84.x 9

2015

9 10 11

CSS2.1 HTML5, SVG, ES5, CSS3HTML4, ES3, CSS2

Page 19: Windows 10 の あたらしい Web ブラウザー について

1995

3 41 2 5.5 65 7 84.x

Trident

IE5Quirks

IE7Compat View

IE8Standards

Mode

9

IE9Standards

Mode

IE10Standards

Mode

QMEQuirks Mode

Emulation

2015

9 10 11

x-ua-compatible

!DOCTYPE

IE11Standards

Mode

EMIEEnterprise

Mode

Legacy WebCSS2.1

Modern WebHTML5, SVG, ES5, CSS3HTML4, ES3, CSS2

Page 20: Windows 10 の あたらしい Web ブラウザー について

FirefoxGecko

Evergreen

Page 21: Windows 10 の あたらしい Web ブラウザー について

ChromeBlink

Evergreen

Page 22: Windows 10 の あたらしい Web ブラウザー について

Evergreen

Microsoft EdgeHTML

Project Spartan(Edge)

Page 23: Windows 10 の あたらしい Web ブラウザー について

Microsoft Edge 拡張機能~ 旧バージョンの Internet Explorer との互換性はない ~

• ActiveX

• VBScript

• Browser Helper Objects (BHO)

• Vector Markup Language (VML)

• DirectX Filters and Transitions

• Flash

• Acrobat(pdf)• JavaScript ベースの新しい拡張モデル(予定)

• Chrome、Firefox のプラグイン (予定)

廃止 有効

Page 24: Windows 10 の あたらしい Web ブラウザー について

Web サイトの Edge 対応

•ドキュメントモードを使用しない•新しい JS ライブラリ/フレームワークを使用する•ブラウザープラグインを使用しない• CSS ベンダープレフィックスを使用しない•ブラウザーの検出を使用しない• 条件付きコメント

http://dev.modern.ie/tools/

Page 25: Windows 10 の あたらしい Web ブラウザー について

EdgeとInternet Explorer~ 異なる互換性への方向性~

クロスブラウザ 旧 IE 互換

• ドキュメントモード• エンタープライズ

モード• ActiveX

旧 IE への互換機能はサポートされない

マイナーアップデート

頻繁なアップデート

進化 既存資産の保守と活用

Page 26: Windows 10 の あたらしい Web ブラウザー について

相互運用性への意気込み

In cases where these changes necessarily differ

from standards, we’re following through with

standards bodies and other browsers to update

specs and implementations to reflect the

interoperable behavior.

IEBlog – “Living on the Edge – our next step in helping the web just work” (November 12, 2014 ) より抜粋

Page 27: Windows 10 の あたらしい Web ブラウザー について

Edge の Windows 10 エクスペリエンス

ペン/マーカー クリップ Cortana 統合

注釈 リーディングリスト(オフライン)

共有

Page 28: Windows 10 の あたらしい Web ブラウザー について

Windows 10 Technical Preview のWeb ブラウザーを試用するには?

Windows 10 Technical Preview RemoteIE

• ISO ファイルでの提供• Windows Insider Program への登録• build 10049 以降で提供

• リモートデスクトップ接続• インストール不用• Mac,iOS,Android からも使用可能(※)ただし描画エンジンのみ

Page 29: Windows 10 の あたらしい Web ブラウザー について

あたらしくサポートされる機能

Page 30: Windows 10 の あたらしい Web ブラウザー について

IE11 : status.modern.ie~新しい機能実装状況が公開~

Preview Releaseプレビューに含まれる

In Development開発中(次期アップデートなどに含まれる可能性がある)

Page 31: Windows 10 の あたらしい Web ブラウザー について

Edge : Platform Status~新しい機能実装状況が公開~

Page 32: Windows 10 の あたらしい Web ブラウザー について

Experimental features の有効化~ Preview 版 Edge に用意されている機能を使用可能に~

アドレスバーに以下を入力

about:flags

Page 33: Windows 10 の あたらしい Web ブラウザー について

Edge からの localhost への接続許可~ループバックの有効化が必要~

• Edge は既定で localhost アドレスに接続できない• コマンドプロンプトにてコマンドを実行

CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy

Page 34: Windows 10 の あたらしい Web ブラウザー について

ご提案、フィードバッグを募集しています。

Internet Explorer Platform Suggestion Box!

IE development discussions from MSDN forums

Internet Explorer Beta Feedback

Page 35: Windows 10 の あたらしい Web ブラウザー について

さ既存資産との互換 最新の Web 標準

後方互換と最新機能サポートの両立

まとめ

Windows 10

Page 36: Windows 10 の あたらしい Web ブラウザー について

参考 1/3

https://status.modern.ie/

http://dev.modern.ie/platform/status/

Internet Explorer のロードマップ

Edge のロードマップ

Page 37: Windows 10 の あたらしい Web ブラウザー について

参考 2/3

https://msdn.microsoft.com/ja-jp/library/dn904191(v=vs.85).aspx

Windows 10 版 Project Spartan 開発者向けガイド(Technical Preview)

http://dev.modern.ie/platform/faq/

FAQ (Edge)

Page 38: Windows 10 の あたらしい Web ブラウザー について

参考 3/3

monoe’s blogbit.ly/monoe_blog

Page 39: Windows 10 の あたらしい Web ブラウザー について