日本マイクロソフト株式会社デベロッパーエバンジェリズム統括本部

物江 修 (@osamum_MS)

Edge と IE、来年からの Web 制作

アジェンダ

•Window 10 の Web ブラウザー

•Internet Explorer

•Edge

•これからの開発について

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

Windows 10

Internet Explorer

Edge

Windows 10 の Internet Explorer

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

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

Edge

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

Th

e M

ob

ile W

eb

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

220k+Unique LoC Removed

6 document modes

300+ APIs removed

300k+Unique LoC Added

49 New Major Features

4200+ Interop Fix

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

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

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

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

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

え、なんすか?

User-Agent 文字列

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

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

EdgeHTML.dll MSHTML.dll

相互運用性

既定のブラウザ

モダン Web サイト向け

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

互換性

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

IE11 IE10 IE9 IE8 IE7 IE5.5

★

Edge

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

• ActiveX

• VBScript

• Browser Helper Objects (BHO)

• Vector Markup Language (VML)

• DirectX Filters and Transitions

• Flash

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

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

廃止 有効

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

クロスブラウザ 旧 IE 互換

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

モード• ActiveX

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

マイナーアップデート

頻繁なアップデート

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

相互運用性への意気込み

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 ) より抜粋

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

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

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

共有

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

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

Experimental features の有効化～先行実装された機能を使用可能に～

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

about:flags

これからの開発について

http://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/

動作するOSのライフサイクルに準拠 各OSの最新版のIEのみ

IE7 IE8 IE9 IE10 IE11OSサポート終了期間

Windows Vista 2017年4月

Windows 7 2020年1月

W

8.12023年1月

Windows Vista SP2 IE9

Windows 7 SP1 IE11

Windows 8.1 Update IE11

Windows Server 2008 SP2 IE9

Windows Server 2008 R2 SP1 IE11

Windows Server 2012 IE10

Windows Server 2012 R2 IE11

2016 年 1 月 12 日

サポート

IEサポートポリシー変更の背景

開発・検証の軽減

動作を確認するブラウザを少なく

セキュリティ対策

脆弱性の発見からネットワーク犯罪に迅速に対応する

最新技術への対応

Web標準への準拠新しいAPIの利用

Windows 10 の Web ブラウザー～ 搭載されている Web ブラウザーの使い分け ～

既存 Web システムインターネットや新規 Web システム

Web標準/相互運用性

IEにロックインされてしまう

後方互換性

Edge を基準とする理由～相互運用性の高さとシェアの見込み～

• 相互運用性• Webkit 準拠の動作• モバイルブラウザー

• 今後のシェアの見込み• 12か月間の無償アップグレード

(Windows 7, 8, 8.1 ユーザー)

• 現実かつ実用的な機能実装と製品サポート

Edge 対応とは?～Edge で描画、動作が想定通りに行われること～

さらに相互運用性を高めるため以下の点を考慮

1. ドキュメントモードの指定を行わない2. 新しい JS ライブラリ/フレームワークを使用する3. ブラウザープラグインを使用しない4. CSS ベンダープレフィックスを使用しない5. ブラウザーの検出を使用しない

Edge 対応チェックツール

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

GitHub からソースを入手してローカルでホスト可能

相互運用性を高めるための実装

モダン ブラウザーとレガシー ブラウザの機能互換技術

～ HTML5 のサポートの有無～•ポリフィル

• レガシー ブラウザーの独自仕様を利用してモダンブラウザーの機能を実装する技術

Modernizr

html5shiv⇩

HTML5★BOILERPLATE

HTML5

Respond.js

Hands.js

不必要

「IE ハック」による対応～旧バージョンのIEを判断～

• Internet Explorer • IE5 IE9 • IE9 Internet Explorer • IE10

•CSS

非推奨

資料 : 条件付きコメント<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7-style.css" />

<![endif]-->

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8-style.css" />

<![endif]-->

/*@cc_on@if(@_jscript_version == 9)

msg.innerText = "あなたはIE9を使っています";@elif (@_jscript_version == 5.8)

msg.innerText = "あなたはIE8を使っています";@end

@*/(※1) Internet Explorer 10 からサポートされません。(※2)@cc_on はドキュメントモードの変更では動作しません。

非推奨

資料 : CSS ハック

body {color: red; /* all browsers, of course */color: green¥9; /* IE8 and below */*color: yellow; /* IE7 and below */_color: orange; /* IE6 */

}body:not(:target) {

color: black¥9; /* IE9 */}

非推奨

レンダリングモードの指定～旧バージョンのIEの描画ルールで表示 ～

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!meta http-equiv ="X-UA-Compatible"content="IE=EmulateIE7">

ドキュメントモード

互換 (Quirks) モード指定

不必要

JavaScript によるブラウザー検出～ user-agent を使用した検出～

var ver = -1;var ua = navigator.userAgent; var re = new RegExp(‘MSIE ([0-9]{1,}[¥.0-9]{0,})‘);

if (re.exec(ua) != null) {ver = parseFloat( RegExp.$1 );

}

例) Internet Explorer の場合は-1 以外のバージョン番号を返す

非推奨

ブラウザーではなく機能検出を推奨する理由

～今の時代にそぐわない～

•頻繁な検出コードの追加•新ブラウザのリリース•アップデート

•判断の不確実さ

•user-agent の偽装に対応できない

ブラウザー検出の欠点

機能検出方法(1/2)～JavaScript による関数の検証～

var canvas = document.getElementById('myCanvas');if (canvas.getContext) {

//Canvas の処理

} else {//Canvas がサポートされていない場合の処理

}

例) HTML5 Canvas がサポートされているかを調べる

機能検出方法(2/2)～Modernizr を使用した検証～

if (Modernizr.canvas === true) {//Canvas の処理

} else {//Canvas がサポートされていない場合の処理

}

Modernizr の参照

<script src="./modernizr-*.*.js"></script>

例) Canvas が使用できるかを調べる

ベンダープレフィックス～W3C勧告候補以前のブラウザごとの先行実装指定～

.shadow { -moz-box-shadow:rgb(128, 128, 128) 5px 5px;

}

ベンダープレフィックス ブラウザー

-webkit- Google Chrome,Apple Safari,(Opera)

-moz- Mozilla Firefox

-ms- Microsoft Internet Explorer

-O- Opera

非推奨

ActiveX の代替～Web 標準技術での実装～

activeX

マルチメディア再生video,audio タグ

ファイルアクセスFile Access API

グラフィックCanvas,SVG,WebGL

カメラ,マイクMedia Capture API

通信XHR,WebSockets,ORTC

位置情報Geo location API

音声合成Web Audio API

ゲームコントローラーGame Pad API

リッチテキストcontenteditable 属性

JavaScript フレームワークについて(1/2)～本当に必要？～

// Retrieve DOM element with id ‘featuredProduct‘var product = $(‘#featuredProduct‘);// Retrieve all image child elements for the var productImages = $(‘#featuredProduct‘).find(‘img‘)// Add a class to the given element$(‘#featuredProduct‘).addClass(‘featured’);

// Retrieve DOM element with id ‘featuredProduct‘var product = document.getElementById(‘featuredProduct‘);// Retrieve all image child elements for the var productImages = document.querySelectorAll(‘#featuredProduct img‘);// Add a class to the given elementdocument.querySelector(‘#featuredProduct’).classList.add(‘featured’);

jQuery

標準的なJavaScript

JavaScript フレームワークについて(2/2)～メンテナンス～

JS

Ver 1.5.2

JS

Ver 1.6.4

Old

Update

Compatibility

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

Internet Explorer Platform Suggestion Box!

IE development discussions from MSDN forums

Internet Explorer Beta Feedback

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

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

まとめ

Windows 10

参考 1/3

http://bit.ly/msedge_devguideWindows 10 版 Project Spartan 開発者向けガイド

http://bit.ly/msedge_faqFAQ (Edge)

http://dev.modern.ie/platform/status/Edge のロードマップ

参考 2/3

http://bit.ly/about_msedge

Edge と IE:まるっと理解する、Windows 10 に搭載される Web ブラウザーについて

http://bit.ly/Howto_Edge_Content

どう作る? Microsoft Edge に対応した相互運用性の高いWeb コンテンツとは

参考 3/3

monoe’s blogbit.ly/monoe_blog

本書に記載した情報は、本書各項目に関する発行日現在の Microsoft の見解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報に対していかなる責務を負うものではなく、 提示された情報の信憑性については保証できません。本資料に記載されている価格はいずれも、別段の表記がない限り、参考価格となります。貴社の最終的な購入価格は、貴社のLSP企業様により決定されます。本書は情報提供のみを目的としています。 Microsoft は、明示的または暗示的を問わず、本書にいかなる保証も与えるものではありません。すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書面による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿入を行うことは、どのような形式または手段（電子的、機械的、複写、レコーディング、その他）、および目的であっても禁じられています。これらは著作権保護された権利を制限するものではありません。

Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書面によるライセンス契約が明確に供給される場合を除いて、本書の提供はこれらの 特許、商標、著作権、またはその他の知的財産へのライセンスを与えるものではありません。

© 2015 Microsoft Corporation. All rights reserved.