Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (12)
Ähnlich wie Internet Explorer 11 概要
Ähnlich wie Internet Explorer 11 概要 (20)
Mehr von Yoshihisa Ozaki
Mehr von Yoshihisa Ozaki (12)
Kürzlich hochgeladen
Kürzlich hochgeladen (12)
Internet Explorer 11 概要
- 1. Internet Explorer 11 尾崎 義尚 2013/11/09
- 2. 自己紹介 尾崎 義尚 – ネクストスケープ Microsoft MVP for Internet Explorer & userAgents.ie お酒は飲まないのですが、尿酸値が高め（7.9) 黄斑変性の疑いは今朝晴れました。 犬 と 猫2匹 を飼っています。 猫A 猫C プリンセス・D・ イザベラ
- 3. 自己紹介 特集：Web制作者＆開発者のためのIE10概説 尾崎 義尚 – ネクストスケープ Microsoft MVP for Internet Explorer & userAgents.ie Coding Guidelines for CSharp 3.0, 4.0 and 5.0 http://www.buildinsider.net/web/ie11preview/01 Windows 8.1 徹底解剖 第4回 「Internet Explorer 11」「F12 開発者ツール」 http://www.buildinsider.net/web/modernizr/01 Web制作者が知っておくべき、Internet Explorer 11（プレビュー版）の新機能および変更点 http://csharpguidelines.codeplex.com/releases/view/98254 Modernizrを使ってブラウザーの機能を調べるには http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html http://www.forest.impress.co.jp/docs/special/20130829_613068.html Web制作者は注意！ Internet Explorer 11で変更された「互換性」 http://www.buildinsider.net/web/ie11attention/01
- 4. Internet Explorer 11 8月27日 RTM 9月9日 MSDN、TechNet 加入者向けに公開 10月18日 一般向けリリース 11月08日 Windows 7 版リリース Windows 8のリリース (2012年10月26日) から1年弱 対応 OS ： Windows 7、Windows 8.1 Windows 8は、サポートされません。
- 6. IE11の主な新機能
- 8. 赤字：IE7非対応機能 IE11 の新機能 互換性 レイアウト タッチ デバイスの向きのイベント 境界線の画像 ドラッグ アンド ドロップ タッチ サポート 全画面 API ネットワーキングとナビゲーション ホバー タッチ サポート 画面の向きの API 戻るナビゲーションのキャッシュ 各入力のスクロールとズーム 入力方式エディター API ネットワークの優先順位付け ビデオ F12 開発者ツール プリレンダリングとプリフェッチのサポート 動的 TextTrack オブジェクト Canvas の機能強化 Do Not Track (DNT) 例外 Simple Delivery Profile (SDP) キャプション 高 DPI のサポート デスクトップ IE の拡張保護モード (EPM) XHR キャッシュ コントロールのストリーミング WebGL Web 暗号化 API 電話番号の形式の認識 JavaScript機能追加 ピン留めされたサイトの機能強化 http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx
- 9. Windows 7 ではサポートされない機能 電話番号の自動検出 リンクの強調表示 デバイスの向きのイベント Media Source Extensions ドラッグ アンド ドロップ タッチ サポート ピン留めされたサイトの機能強化 効果の一括処理とストロークの向上 画面の向きの API Encrypted Media Extensions 拡張保護モード (EPM) タッチ入力やその他の入力によるスクロー ルとズーム さまざまなデバイスにわたる同期 TCP 接続共有 (SPDY) F12 開発者ツールの UI の応答性 高 DPI のサポート ホバー タッチ サポート http://msdn.microsoft.com/ja-jp/library/ie/dn394063(v=vs.85).aspx
- 10. Windows 統合
- 11. Perfect for touch ドラッグ＆ドロップ hoverとアクティブ リンク ハイライト http://ie.microsoft.com/testdrive/Graphics/MagneticPoetry/Default.html
- 12. Click to Call 電話番号を自動的にリンクに Skype などの電話アプリでコール可能
- 13. Click to Call
- 14. ピン留めされたサイト （<meta>） <meta>タグでの指定方法 <meta name="application-name" content=" Contoso" /> <meta name="msapplication-TileColor" content=" #009900" /> <meta name="msapplication-square70x70logo" content="smalltile.png" /> <meta name="msapplication-square150x150logo" content="mediumtile.png" /> <meta name="msapplication-wide310x150logo" content="widetile.png" /> <meta name="msapplication-square310x310logo" content="largetile.png" /> <meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml; polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" /> http://msdn.microsoft.com/ja-jp/library/ie/bg183312(v=vs.85).aspx
- 15. ピン留めされたサイト （XMLファイル） XML ブラウザ構成ファイルでの指定方法 <meta name="msapplication-config" content="IEconfig.xml" /> <?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="smalltile.png"/> <square150x150logo src="mediumtile.png"/> <wide310x150logo src="widetile.png"/> <square310x310logo src="largetile.png"/> <TileColor>#009900</TileColor> </tile> <notification> <polling-uri src="notifications/contoso1.xml"/> <polling-uri2 src="notifications/contoso2.xml"/> <polling-uri3 src="notifications/contoso3.xml"/> <frequency>30</frequency> <cycle>1</cycle> </notification> </msapplication> </browserconfig>
- 16. ピン留めされたサイト 通知の送信 JavaScript で通知 document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false); function StartPeriodicUpdateBatch() { var arrURI = [“notifications/contoso1.xml”, “notifications/contoso2.xml”, “notifications/contoso3.xml”]; window.external.msEnableTileNotificationQueue(true); window.external.msStartPeriodicTileUpdateBatch(arrURI); }
- 17. ピン留めされたサイト
- 18. デバイス間の同期 同期機能 Windows 8のIE10 Windows 8.1のIE11 履歴および入力された URL ○ ○ お気に入り/ブックマーク ○ ○ タブ × ○ ユーザーが構成する設定/基 本設定 ホーム ページのみ○ ○ パスワード ○ ○ http://msdn.microsoft.com/ja-jp/library/ie/dn265048(v=vs.85).aspx#syncing
- 19. デバイス間の同期
- 20. ビデオの拡張
- 21. ビデオの拡張 最新のメディア仕様をサポート Media Source Extension（MSE) Encrypted Media Extensions(EME) リッチスタイルのTTMLキャプション Web Crypto コンテンツ保護（DRM） Simple Delivery Profile-US(SDP-US) アダプティブ ストリーミング セキュリティ認証に利用できる暗号化機能 FullScreen APIのサポート
- 22. ビデオの拡張 動的 TextTrack オブジェクト Simple Delivery Profile (SDP) – US/TTML リッチ スタイル キャプション (フォント、フォントスタイル、サイズ、色、透明度、背景) 動的なキャプションが可能 TTML または WebTT を動的にダウンロード 2014年1月から米国で施行される FCC 要件に対応 <script type="text/javascript"> var video = document.getElementById("video1"); var newTextTrack = video.addTextTrack("captions", "sample"); newTextTrack.mode = newTextTrack.SHOWING; startTime = 5; endTime = 10; message = “Dynamic Text"; newTextTrack.addCue(new TextTrackCue(startTime, endTime, message)); newTextTrack.removeCue(newTextTrack.activeCues[0]); </script> TTML Simple Delivery Profile for Closed Captions (US) http://www.w3.org/TR/ttml10-sdp-us/
- 23. ビデオの拡張 Media Source Extensions (MSE) アダプティブ ストリーミングのサポート バッファリングの待ち時間なしで再生可能 ネットワークの状況等に応じたビデオの画質（ビットレート）の切り替え <video>のソースにファイルを指定するのではなく、JavaScriptでデータを読み込んで追加 MPEG-DASHのサポート Media Source Extensions http://www.w3.org/TR/media-source/
- 24. ビデオの拡張 Encrypted Media Extensions(EME) プラグインなしで DRM で保護されたコンテンツが再生可能 PlayReady DRMのサポート Encrypted Media Extensions https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media-fpwd.html
- 25. ビデオの拡張 Web Crypto セキュリティとユーザー認証 暗号化、復号化 ハッシュの生成 署名の生成と検証 http://ie.microsoft.com/testdrive/HTML5/Crypto/Default.html Web Cryptography API http://www.w3.org/TR/WebCryptoAPI/
- 26. ビデオの拡張 省電力 Windows 8.1は、シームレスにリフレッシュ レートを変更可能 24FPSのビデオを全画面表示している時は、60Hz→48Hzに ビデオの特徴に合わせてタイマーのタイミングを変更 XHRHttpRequests はディスクにキャッシュすることなくメモリ上に転送可能
- 27. IE11の互換性
- 28. IE11の互換性に関する変更点 Don’t call me IE. ユーザー・エージェント文字列 Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; InfoPath.3; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729) 以前は… JavaScriptの結果 メソッド IE10まで IE11 navigator.appName Microsoft Internet Explorer Netscape navigator.product undefined Gecko ドキュメント・モード 選択可能になり ました！ 以前は… 以前は…
- 29. IE11の互換性に関する変更点 Don’t call me IE. IE10までは… <!DOCTYPE>によってエンジンを切り替えていた 判別の複雑化 古い機能が使われ続けてしまう IEだけ新機能が実装されないことがある ほかのブラウザはそんなことしていない 高速化したのに最新エンジンが使われないので、早く動作しない 長年の負債をリセット！
- 30. IE11の互換性に関する変更点 Don’t call me IE. http://msdn.microsoft.com/ja-jp/library/ie/dn384049(v=vs.85).aspx
- 32. 開発者がやるべきこと IE11に対応する Modernizrを使って機能を調べる http://www.buildinsider.net/web/modernizr/01 または 互換設定を記述する <meta>タグで互換設定を記述する <meta http-equiv="x-ua-compatible" content="IE=7" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" > http://www.buildinsider.net/web/ie11attention/01 UAの判定を[Trident] か [rv:11.0] を見るようにする
- 34. EPM と AppContainer 拡張保護モード (EPM：Enhanced Protected Mode) AppContainer Windows 8で導入されたセキュリティ保護機能 新しい UI の IE だけでなく、デスクトップ版にも適用された 動かなくなるブラウザー拡張多数
- 35. Canvas
- 36. Canvas 機能強化 drawImage stroke (パターンを含む) strokeRect strokeText fill (パターンを含む) fillText (パターンを含む) fillRect http://msdn.microsoft.com/ja-jp/library/ie/dn265037(v=vs.85).aspx
- 37. パフォーマンスの改善 Canvas 2D Context APIの改善 ctx.msImageSmoothingEnabled = true ctx.setLineDash([5,10]); msImageSmoothingEnabled=true msImageSmoothingEnabled=false
- 38. WebGL
- 39. WebGL GPU描画を可能にするJavaScript API 2D <canvas> よりもわかりやすく、パフォーマンスがよい Three.jsの主要な機能をサポート GlacierWorks http://explore.glacierworks.org/en/#everest/explore Hover http://www.hover.ie/# http://msdn.microsoft.com/ja-jp/library/ie/bg182648(v=vs.85).aspx
- 40. Internet Explorer 11 WebGL Architecture
- 41. 表示と向き
- 44. 表示と向き 画面の向き API デバイスの向きを API から取得 向きを取得 portrait-primary landscape-primary portrait-secondary landscape-secondary http://msdn.microsoft.com/ja-jp/library/ie/dn433241(v=vs.85).aspx function orientationChangeHandler(evt) { var orientation = evt.target.msOrientation; } 向きをロック screen.msLockOrientation("portrait-primary", "portrait-secondary");
- 45. パフォーマンスの改善
- 47. パフォーマンスの改善 グラフィックスの改善 JPEG画像がWebにしめる割合 Webからダウンロードされるデータの61%が画像 画像のうち47％がJPEG ハードウェア アクセラレーションによる高速化 読み込みが最大45%高速化 最大40%省メモリ化 Using Hardware to Decode and Load JPG Images up to 45% faster in Internet Explorer 11 http://blogs.msdn.com/b/ie/archive/2013/09/12/using-hardware-to-decode-and-load-jpg-images-up-to-45faster-in-internet-explorer-11.aspx
- 48. ネットワークの改善 Prefetch・Prerender ・SPDY <link rel=“prefetch” href=“Image.jpg”> 1ホストあたり10リソースまで <link rel=“prerender” href=“http://example.com/NextPage.html”> <img src=“example.jpg” lazyload=“1”> HTTP 2.0 / SPDY プリレンダリングとプリフェッチのサポート http://msdn.microsoft.com/ja-jp/library/ie/dn265039(v=vs.85).aspx ネットワークの優先順位付け http://msdn.microsoft.com/ja-jp/library/ie/dn265036(v=vs.85).aspx
- 49. JavaScript
- 50. JavaScript ブロック スコープ変数 コンテナー オブジェクト Set オブジェクト Map オブジェクト WeakMap オブジェクト 国際化 API let const Intl.DateTimeFormat -- 日時 Intl.NumberFormat -- 数値 Intl.Collator -- 文字列 __proto__ プロパティ http://msdn.microsoft.com/ja-jp/library/ie/dn342892(v=vs.85).aspx
- 51. F12開発者ツール
- 52. 生まれ変わった UI Surface RT（ ARM ）でも動作する！
- 56. 生まれ変わった UI HTML 5時代の新しい要件に対応 以前は… HTML5時代 ようこそ あなたは 000010 人目のお客様です Sorry, this page is Japanese only. HTML HTML5 about 散文詩 工事中<m(__)m> 上から下に流れるレイアウト CSS3 複雑に絡み合うレイアウト
- 60. コンソール 対話によるコードの実行、情報の取得 どこからでもアクセス可能 オブジェクト階層が展開可能 インテリセンスが利用可能 複数行に切り替え可能 どのツールからでもコンソールにアクセス可能に。 コンソール デバッグ APIにいくつかのメソッドが追加 http://msdn.microsoft.com/ja-JP/library/ie/hh772173(v=vs.85) インテリセンス function clickCookie(){ document.getElementById("bigCookie").click(); } setInterval(clickCookie, 1);
- 64. UI の応答 Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI [デバッグ] – [パフォーマンスと診断] *1 2013年10月の Microsoft Store の価格です。
- 65. プロファイラー function の処理時間と回数を調査 機能＝function 回数＝呼び出し回数 包括時間（ミリ秒）＝ 子 function を含む時間 排他時間（ミリ秒）＝ 子 function を含まない 呼び出しツリーはfunctionが階層で表示される Web ワーカーで実行されたfunctionのトラッキング