Your SlideShare is downloading. ×
Internet Explorer 11 概要
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Internet Explorer 11 概要

1,456
views

Published on

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,456
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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は、サポートされません。
  • 5. IEのシェア Worldwide Japan http://gs.statcounter.com/#browser-ww-monthly-201208-201309
  • 6. IE11の主な新機能
  • 7. http://technet.microsoft.com/ja-jp/ie/dn269977 http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx
  • 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
  • 31. IE11の互換性に関する変更点 互換性設定
  • 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] を見るようにする
  • 33. 互換性の調査 modern.ie  複数ブラウザでのチェック   静的コードスキャン   BrowserStack GitHubにソースがある 仮想マシンのダウンロード
  • 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. 表示と向き
  • 42. 表示と向き デバイスの向きイベント  DeviceOrientation イベントの実装 http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html
  • 43. 表示と向き 全画面 API ブラウザ境界を超えて全画面表示 document.getElementById("myImage").msRequestFullscreen(); http://msdn.microsoft.com/ja-jp/library/ie/dn265028(v=vs.85).aspx
  • 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. パフォーマンスの改善
  • 46. パフォーマンスの改善  グラフィックスの改善  ネットワークの改善  レイアウト/スタイルの改善
  • 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 )でも動作する!
  • 53. IE11の新しいメニュー DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション IE10のメニュー
  • 54. IE11の新しいメニュー DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション リクエスト レスポンス HTML描画 スクリプト 実行 表示
  • 55. Web Runtime Architecture
  • 56. 生まれ変わった UI  HTML 5時代の新しい要件に対応 以前は… HTML5時代 ようこそ あなたは 000010 人目のお客様です Sorry, this page is Japanese only. HTML HTML5 about 散文詩 工事中<m(__)m> 上から下に流れるレイアウト CSS3 複雑に絡み合うレイアウト
  • 57. 生まれ変わった UI  HTML 5時代の新しい要件に対応
  • 58. DOM Explorer  HTML, CSSを確認・調整  リアルタイムに状況を確認可能に  パンくずでエレメント階層にアクセス可能  ドラッグ&ドロップでエレメントの移動が可能  インテリセンスで入力が容易に
  • 59. DOM Explorer  ツールバーをドラッグ&ドロップで下に移 動してみた
  • 60. コンソール  対話によるコードの実行、情報の取得 どこからでもアクセス可能 オブジェクト階層が展開可能 インテリセンスが利用可能 複数行に切り替え可能 どのツールからでもコンソールにアクセス可能に。 コンソール デバッグ APIにいくつかのメソッドが追加 http://msdn.microsoft.com/ja-JP/library/ie/hh772173(v=vs.85) インテリセンス function clickCookie(){ document.getElementById("bigCookie").click(); } setInterval(clickCookie, 1);
  • 61. デバッガー ミニファイされたコードの整形 ウォッチ ブレイクポイント コールスタック ブレークポイント ブレークポイントの反映にリフレッシュは不要に タブ表示により複数のスクリプトの管理が容易に ブレークポイントの位置がスクロールバーに表示されるように
  • 62. ネットワーク ページ表示までの時間 Fiddlerがなくても困らない 通信の詳細(要求、応答のヘッダー、本文) 通信の詳細時間(要求、待機、応答) リクエスト タイミング情報が改善 圧縮情報キャプチャの改善
  • 63. UI の応答  UIの応答性を計測  フレームレート、CPU利用率をグラフィカルに表示 アプリ ライフサイクルとユー ザーマークの表示 performance.mark(markName); CPU使用率とその内訳 視覚スループット(FPS) タイムラインの詳細 タイムライン詳細の内訳 「HTMLの解析」の裏で動いている 処理をグラフ化
  • 64. UI の応答  Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI  [デバッグ] – [パフォーマンスと診断] *1 2013年10月の Microsoft Store の価格です。
  • 65. プロファイラー function の処理時間と回数を調査  機能=function  回数=呼び出し回数  包括時間(ミリ秒)= 子 function を含む時間  排他時間(ミリ秒)= 子 function を含まない 呼び出しツリーはfunctionが階層で表示される Web ワーカーで実行されたfunctionのトラッキング
  • 66. メモリ 変数やHTMLエレメントのメモリ使用量を調査 差分の詳細を確認 スナップショット を作成 メモリ、オブジェクトの増減を抽出 デタッチされたDOMノードの識別 メモリの増加ポイントを識別 オブジェクトが使用しているメモリを計測
  • 67. エミュレーション 複数の画面タイプにおけるレスポンシブ デザインのテスト モバイル サイトにおける位置識別機能のテスト
  • 68. パフォーマンス・ダッシュボード 状況をリアルタイムに確認可能
  • 69. まとめ DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション