Download - Edge と IE、来年からの Web 制作
![Page 1: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/1.jpg)
日本マイクロソフト株式会社デベロッパーエバンジェリズム統括本部
物江 修 (@osamum_MS)
Edge と IE、来年からの Web 制作
![Page 2: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/2.jpg)
アジェンダ
•Window 10 の Web ブラウザー
•Internet Explorer
•Edge
•これからの開発について
![Page 3: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/3.jpg)
Windows 10 の Web ブラウザー~ 2 つの Web ブラウザーが搭載 ~
Windows 10
Internet Explorer
Edge
![Page 4: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/4.jpg)
Windows 10 の Internet Explorer
• Windows 8.1、7 と同じもの• 旧バージョンとの互換性目的• マイナーアップデートはされる
![Page 5: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/5.jpg)
Microsoft Edge~新規に開発された Web ブラウザー~
Edge
• 他の Web ブラウザーとの相互運用性• Web 標準• Windows 10 のエクスペリエンス• 既定の Web ブラウザー
![Page 6: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/6.jpg)
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
![Page 7: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/7.jpg)
旧「IE 対応」と Edge のジレンマ~旧 IE 向けのコンテンツは正しく動作しない~
If(userAgent==“MSIE”)||(userAgent==?)
旧 Internet Explorer か未知のブラウザー向けコンテンツ
![Page 8: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/8.jpg)
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 9: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/9.jpg)
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 10: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/10.jpg)
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
![Page 11: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/11.jpg)
EdgeとInternet Explorer(1/2)~ 異なるレンダリングエンジン~
EdgeHTML.dll MSHTML.dll
相互運用性
既定のブラウザ
モダン Web サイト向け
集中を妨げない画面、注釈、Cortana 統合のようなユニークなユーザー体験
互換性
主にイントラネットかエンタープライズモード サイト
IE11 IE10 IE9 IE8 IE7 IE5.5
★
Edge
![Page 12: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/12.jpg)
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 13: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/13.jpg)
EdgeとInternet Explorer~ 異なる互換性への方向性~
クロスブラウザ 旧 IE 互換
• ドキュメントモード• エンタープライズ
モード• ActiveX
旧 IE への互換機能はサポートされない
マイナーアップデート
頻繁なアップデート
進化 既存資産の保守と活用
![Page 14: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/14.jpg)
相互運用性への意気込み
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 15: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/15.jpg)
Edge の Windows 10 エクスペリエンス
ペン/マーカー クリップ Cortana 統合
注釈 リーディングリスト(オフライン)
共有
![Page 16: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/16.jpg)
あたらしくサポートされる機能
![Page 17: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/17.jpg)
Edge : Platform Status~新しい機能実装状況が公開~
![Page 18: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/18.jpg)
Experimental features の有効化~先行実装された機能を使用可能に~
アドレスバーに以下を入力
about:flags
![Page 19: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/19.jpg)
これからの開発について
![Page 20: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/20.jpg)
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
![Page 21: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/21.jpg)
2016 年 1 月 12 日
サポート
![Page 22: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/22.jpg)
IEサポートポリシー変更の背景
開発・検証の軽減
動作を確認するブラウザを少なく
セキュリティ対策
脆弱性の発見からネットワーク犯罪に迅速に対応する
最新技術への対応
Web標準への準拠新しいAPIの利用
![Page 23: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/23.jpg)
Windows 10 の Web ブラウザー~ 搭載されている Web ブラウザーの使い分け ~
既存 Web システムインターネットや新規 Web システム
Web標準/相互運用性
IEにロックインされてしまう
後方互換性
![Page 24: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/24.jpg)
Edge を基準とする理由~相互運用性の高さとシェアの見込み~
• 相互運用性• Webkit 準拠の動作• モバイルブラウザー
• 今後のシェアの見込み• 12か月間の無償アップグレード
(Windows 7, 8, 8.1 ユーザー)
• 現実かつ実用的な機能実装と製品サポート
![Page 25: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/25.jpg)
Edge 対応とは?~Edge で描画、動作が想定通りに行われること~
さらに相互運用性を高めるため以下の点を考慮
1. ドキュメントモードの指定を行わない2. 新しい JS ライブラリ/フレームワークを使用する3. ブラウザープラグインを使用しない4. CSS ベンダープレフィックスを使用しない5. ブラウザーの検出を使用しない
![Page 26: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/26.jpg)
Edge 対応チェックツール
http://dev.modern.ie/tools/staticscan
GitHub からソースを入手してローカルでホスト可能
![Page 27: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/27.jpg)
相互運用性を高めるための実装
![Page 28: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/28.jpg)
モダン ブラウザーとレガシー ブラウザの機能互換技術
~ HTML5 のサポートの有無~•ポリフィル
• レガシー ブラウザーの独自仕様を利用してモダンブラウザーの機能を実装する技術
Modernizr
html5shiv⇩
HTML5★BOILERPLATE
HTML5
Respond.js
Hands.js
不必要
![Page 29: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/29.jpg)
「IE ハック」による対応~旧バージョンのIEを判断~
• Internet Explorer • IE5 IE9 • IE9 Internet Explorer • IE10
•CSS
非推奨
![Page 30: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/30.jpg)
資料 : 条件付きコメント<!--[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 はドキュメントモードの変更では動作しません。
非推奨
![Page 31: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/31.jpg)
資料 : 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 */}
非推奨
![Page 32: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/32.jpg)
レンダリングモードの指定~旧バージョンの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) モード指定
不必要
![Page 33: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/33.jpg)
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 以外のバージョン番号を返す
非推奨
![Page 34: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/34.jpg)
ブラウザーではなく機能検出を推奨する理由
~今の時代にそぐわない~
•頻繁な検出コードの追加•新ブラウザのリリース•アップデート
•判断の不確実さ
•user-agent の偽装に対応できない
ブラウザー検出の欠点
![Page 35: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/35.jpg)
機能検出方法(1/2)~JavaScript による関数の検証~
var canvas = document.getElementById('myCanvas');if (canvas.getContext) {
//Canvas の処理
} else {//Canvas がサポートされていない場合の処理
}
例) HTML5 Canvas がサポートされているかを調べる
![Page 36: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/36.jpg)
機能検出方法(2/2)~Modernizr を使用した検証~
if (Modernizr.canvas === true) {//Canvas の処理
} else {//Canvas がサポートされていない場合の処理
}
Modernizr の参照
<script src="./modernizr-*.*.js"></script>
例) Canvas が使用できるかを調べる
![Page 37: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/37.jpg)
ベンダープレフィックス~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
非推奨
![Page 38: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/38.jpg)
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 属性
![Page 39: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/39.jpg)
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
![Page 40: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/40.jpg)
JavaScript フレームワークについて(2/2)~メンテナンス~
JS
Ver 1.5.2
JS
Ver 1.6.4
Old
Update
Compatibility
![Page 41: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/41.jpg)
ご提案、フィードバッグを募集しています。
Internet Explorer Platform Suggestion Box!
IE development discussions from MSDN forums
Internet Explorer Beta Feedback
![Page 42: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/42.jpg)
さ既存資産との互換 最新の Web 標準
後方互換と最新機能サポートの両立
まとめ
Windows 10
![Page 43: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/43.jpg)
参考 1/3
http://bit.ly/msedge_devguideWindows 10 版 Project Spartan 開発者向けガイド
http://bit.ly/msedge_faqFAQ (Edge)
http://dev.modern.ie/platform/status/Edge のロードマップ
![Page 44: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/44.jpg)
参考 2/3
http://bit.ly/about_msedge
Edge と IE:まるっと理解する、Windows 10 に搭載される Web ブラウザーについて
http://bit.ly/Howto_Edge_Content
どう作る? Microsoft Edge に対応した相互運用性の高いWeb コンテンツとは
![Page 45: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/45.jpg)
参考 3/3
monoe’s blogbit.ly/monoe_blog
![Page 46: Edge と IE、来年からの Web 制作](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58f249f01a28ab52748b45d5/html5/thumbnails/46.jpg)
本書に記載した情報は、本書各項目に関する発行日現在の Microsoft の見解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報に対していかなる責務を負うものではなく、 提示された情報の信憑性については保証できません。本資料に記載されている価格はいずれも、別段の表記がない限り、参考価格となります。貴社の最終的な購入価格は、貴社のLSP企業様により決定されます。本書は情報提供のみを目的としています。 Microsoft は、明示的または暗示的を問わず、本書にいかなる保証も与えるものではありません。すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書面による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿入を行うことは、どのような形式または手段(電子的、機械的、複写、レコーディング、その他)、および目的であっても禁じられています。これらは著作権保護された権利を制限するものではありません。
Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書面によるライセンス契約が明確に供給される場合を除いて、本書の提供はこれらの 特許、商標、著作権、またはその他の知的財産へのライセンスを与えるものではありません。
© 2015 Microsoft Corporation. All rights reserved.