Download as PDF, PPTX
![資料 : 条件付きコメント
<!--[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 はドキュメントモードの変更では動作しません。
非推奨](https://image.slidesharecdn.com/aboutwindows10borwserprint-151225010443/85/Edge-IE-Web-30-320.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 以外のバージョン番号を返す
非推奨](https://image.slidesharecdn.com/aboutwindows10borwserprint-151225010443/85/Edge-IE-Web-33-320.jpg)
Uploaded byOsamu Monoe
Edge と IE、来年からの Web 制作
Windows 10 に搭載される 2 つの Web ブラウザーと、レガシーIEのサポート終了後の来年からの Web 制作で不必要になる作業を説明します。
More Related Content
![XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう](https://cdn.slidesharecdn.com/ss_thumbnails/xpagesday2014xpages-141118230721-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Edge と IE、来年からの Web 制作
![[MW02] 進化する Edge! ~Windows 10 Creators Update 版の新機能から既存機能まで一挙紹介~](https://cdn.slidesharecdn.com/ss_thumbnails/mw02-170616020912-thumbnail.jpg?width=640&height=640&fit=bounds)
Edge と IE、来年からの Web 制作
- 1. 日本マイクロソフト株式会社 デベロッパーエバンジェリズム統括本部 物江 修 (@osamum_MS) Edgeと IE、 来年からの Web 制作
- 2. アジェンダ •Window 10 のWeb ブラウザー •Internet Explorer •Edge •これからの開発について
- 3. Windows 10 のWeb ブラウザー ～ 2 つの Web ブラウザーが搭載 ～ Windows 10 Internet Explorer Edge
- 4. Windows 10 のInternet Explorer • Windows 8.1、7 と同じもの • 旧バージョンとの互換性目的 • マイナーアップデートはされる
- 5. Microsoft Edge ～新規に開発された Webブラウザー～ Edge • 他の Web ブラウザーとの相互運用性 • Web 標準 • Windows 10 のエクスペリエンス • 既定の Web ブラウザー
- 6. TheMobileWeb Web 標準準拠と他ブラウザ互換 ～Edge の目指すところ～ 220k+ UniqueLoC Removed 6 document modes 300+ APIs removed 300k+ Unique LoC Added 49 New Major Features 4200+ Interop Fix
- 7. 旧「IE 対応」と Edgeのジレンマ ～旧 IE 向けのコンテンツは正しく動作しない～ If(userAgent==“MSIE”)||(userAgent==?) 旧 Internet Explorer か 未知のブラウザー向け コンテンツ
- 8. 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
- 9. 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 え、なんすか?
- 10. User-Agent 文字列 Mozilla/5.0 (WindowsNT 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
- 11. EdgeとInternet Explorer(1/2) ～ 異なるレンダリングエンジン～ EdgeHTML.dllMSHTML.dll 相互運用性 既定のブラウザ モダン Web サイト向け 集中を妨げない画面、注 釈、Cortana 統合のような ユニークなユーザー体験 互換性 主にイントラネットか エンタープライズモード サイト IE11 IE10 IE9 IE8 IE7 IE5.5 ★ Edge
- 12. Microsoft Edge 拡張機能 ～旧バージョンの Internet Explorer との互換性はない ～ • ActiveX • VBScript • Browser Helper Objects (BHO) • Vector Markup Language (VML) • DirectX Filters and Transitions • Flash • Acrobat(pdf) • JavaScript ベースの 新しい拡張モデル(予定) • Chrome、Firefox の プラグイン (予定) 廃止 有効
- 13. EdgeとInternet Explorer ～ 異なる互換性への方向性～ クロスブラウザ旧 IE 互換 • ドキュメントモード • エンタープライズ モード • ActiveX 旧 IE への互換機能は サポートされない マイナーアップ デート 頻繁な アップデート 進化 既存資産の 保守と活用
- 14. 相互運用性への意気込み In cases wherethese 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 ) より抜粋
- 15. Edge の Windows10 エクスペリエンス ペン/マーカー クリップ Cortana 統合 注釈 リーディングリスト (オフライン) 共有
- 16.
- 17. Edge : PlatformStatus ～新しい機能実装状況が公開～
- 18.
- 19.
- 20. http://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/ 動作するOSのライフサイクルに準拠 各OSの最新版のIEのみ IE7 IE8IE9 IE10 IE11 OSサポート 終了期間 Windows Vista 2017年4月 Windows 7 2020年1月 W 8.1 2023年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
- 21. 2016 年 1月 12 日 サポート
- 22.
- 23. Windows 10 のWeb ブラウザー ～ 搭載されている Web ブラウザーの使い分け ～ 既存 Web システム インターネットや 新規 Web システム Web標準/相互運用性 IEにロックインされてしまう 後方互換性
- 24. Edge を基準とする理由 ～相互運用性の高さとシェアの見込み～ • 相互運用性 •Webkit 準拠の動作 • モバイルブラウザー • 今後のシェアの見込み • 12か月間の無償アップグレード (Windows 7, 8, 8.1 ユーザー) • 現実かつ実用的な機能実装と 製品サポート
- 25. Edge 対応とは? ～Edge で描画、動作が想定通りに行われること～ さらに相互運用性を高めるため以下の点を考慮 1.ドキュメントモードの指定を行わない 2. 新しい JS ライブラリ/フレームワークを使用する 3. ブラウザープラグインを使用しない 4. CSS ベンダープレフィックスを使用しない 5. ブラウザーの検出を使用しない
- 26.
- 27.
- 28. モダン ブラウザーと レガシー ブラウザの機能互換技術 ～HTML5 のサポートの有無～ • ポリフィル • レガシー ブラウザーの独自仕様を利用して モダンブラウザーの機能を実装する技術 Modernizr html5shiv ⇩ HTML5★BOILERPLATE HTML5 Respond.js Hands.js 不必要
- 29. 「IE ハック」による対応 ～旧バージョンのIEを判断～ •Internet Explorer •IE5IE9 •IE9 Internet Explorer •IE10 •CSS 非推奨
- 30. 資料 : 条件付きコメント <!--[ifIE 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 はドキュメントモードの変更では動作しません。 非推奨
- 31. 資料 : 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 */ } 非推奨
- 32. レンダリングモードの指定 ～旧バージョンのIEの描画ルールで表示 ～ <!DOCTYPE HTMLPUBLIC "-//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) モード指定 不必要
- 33. 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 以外のバージョン番号を返す 非推奨
- 34.
- 35. 機能検出方法(1/2) ～JavaScript による関数の検証～ var canvas= document.getElementById('myCanvas'); if (canvas.getContext) { //Canvas の処理 } else { //Canvas がサポートされていない場合の処理 } 例) HTML5 Canvas がサポートされているかを調べる
- 36. 機能検出方法(2/2) ～Modernizr を使用した検証～ if (Modernizr.canvas=== true) { //Canvas の処理 } else { //Canvas がサポートされていない場合の処理 } Modernizr の参照 <script src="./modernizr-*.*.js"></script> 例) Canvas が使用できるかを調べる
- 37. ベンダープレフィックス ～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 非推奨
- 38. 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 属性
- 39. JavaScript フレームワークについて(1/2) ～本当に必要？～ // RetrieveDOM 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 element document.querySelector(‘#featuredProduct’).classList.add(‘featured’); jQuery 標準的なJavaScript
- 40. JavaScript フレームワークについて(2/2) ～メンテナンス～ JS Ver 1.5.2 JS Ver1.6.4 Old Update Compatibility
- 41. ご提案、フィードバッグを 募集しています。 Internet Explorer PlatformSuggestion Box! IE development discussions from MSDN forums Internet Explorer Beta Feedback
- 42. さ既存資産との互換 最新の Web標準 後方互換と 最新機能サポートの両立 まとめ Windows 10
- 43. 参考 1/3 http://bit.ly/msedge_devguide Windows 10版 Project Spartan 開発者向けガイド http://bit.ly/msedge_faq FAQ (Edge) http://dev.modern.ie/platform/status/ Edge のロードマップ
- 44. 参考 2/3 http://bit.ly/about_msedge Edge とIE:まるっと理解する、Windows 10 に搭 載される Web ブラウザーについて http://bit.ly/Howto_Edge_Content どう作る? Microsoft Edge に対応した 相互運用性の高いWeb コンテンツとは
- 45.
- 46. 本書に記載した情報は、本書各項目に関する発行日現在の Microsoft の見解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報に対していかなる責務を負うものではなく、提示された情報の信憑性については保証できません。 本資料に記載されている価格はいずれも、別段の表記がない限り、参考価格となります。貴社の最終的な購入価格は、貴社のLSP企業様により決定されます。本書は情報提供のみを目的としています。 Microsoft は、明示的または暗示的を問わず、本書にいかなる保証も与えるものではありません。 すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書面による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿入を行うことは、どのような形式または手段（電子的、機械的、複写、レコーディング、その他）、および目的であっても禁 じられています。これらは著作権保護された権利を制限するものではありません。 Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書面によるライセンス契約が明確に供給される場合を除いて、本書の提供はこれらの 特許、商標、著作権、またはその他の知的財産へのライセンスを与え るものではありません。 © 2015 Microsoft Corporation. All rights reserved.