Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Internet Explorer 11
尾崎 義尚
2013/11/09
自己紹介


尾崎 義尚 – ネクストスケープ



Microsoft MVP for Internet Explorer & userAgents.ie



お酒は飲まないのですが、尿酸値が高め(7.9)



黄斑変性の疑いは今...
自己紹介


特集:Web制作者&開発者のためのIE10概説
尾崎 義尚 – ネクストスケープ





Microsoft MVP for Internet Explorer & userAgents.ie

Coding Guid...
Internet Explorer 11
8月27日 RTM
9月9日 MSDN、TechNet 加入者向けに公開

10月18日 一般向けリリース
11月08日 Windows 7 版リリース


Windows 8のリリース (2012年...
IEのシェア
Worldwide

Japan

http://gs.statcounter.com/#browser-ww-monthly-201208-201309
IE11の主な新機能
http://technet.microsoft.com/ja-jp/ie/dn269977

http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx
赤字:IE7非対応機能

IE11 の新機能


互換性



レイアウト



タッチ



デバイスの向きのイベント



境界線の画像



ドラッグ アンド ドロップ タッチ サポート



全画面 API



ネット...
Windows 7 ではサポートされない機能


電話番号の自動検出



リンクの強調表示



デバイスの向きのイベント



Media Source Extensions



ドラッグ アンド ドロップ タッチ サポート

...
Windows 統合
Perfect for touch


ドラッグ&ドロップ



hoverとアクティブ リンク ハイライト

http://ie.microsoft.com/testdrive/Graphics/MagneticPoetry/Defaul...
Click to Call


電話番号を自動的にリンクに



Skype などの電話アプリでコール可能
Click to Call
ピン留めされたサイト (<meta>)

<meta>タグでの指定方法
<meta name="application-name" content=" Contoso" />
<meta name="msapplication-TileColo...
ピン留めされたサイト (XMLファイル)
XML ブラウザ構成ファイルでの指定方法
<meta name="msapplication-config" content="IEconfig.xml" />
<?xml version="1.0" ...
ピン留めされたサイト
通知の送信

JavaScript で通知
document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false);
function Star...
ピン留めされたサイト
デバイス間の同期
同期機能

Windows 8のIE10

Windows 8.1のIE11

履歴および入力された URL

○

○

お気に入り/ブックマーク

○

○

タブ

×

○

ユーザーが構成する設定/基
本設定

ホー...
デバイス間の同期
ビデオの拡張
ビデオの拡張


最新のメディア仕様をサポート


Media Source Extension(MSE)




Encrypted Media Extensions(EME)




リッチスタイルのTTMLキャプション

We...
ビデオの拡張
動的 TextTrack オブジェクト


Simple Delivery Profile (SDP) – US/TTML



リッチ スタイル キャプション (フォント、フォントスタイル、サイズ、色、透明度、背景)


...
ビデオの拡張
Media Source Extensions (MSE)


アダプティブ ストリーミングのサポート



バッファリングの待ち時間なしで再生可能





ネットワークの状況等に応じたビデオの画質(ビットレート)の切...
ビデオの拡張
Encrypted Media Extensions(EME)


プラグインなしで DRM で保護されたコンテンツが再生可能



PlayReady DRMのサポート

Encrypted Media Extensions...
ビデオの拡張
Web Crypto


セキュリティとユーザー認証



暗号化、復号化



ハッシュの生成



署名の生成と検証

http://ie.microsoft.com/testdrive/HTML5/Crypto/De...
ビデオの拡張
省電力


Windows 8.1は、シームレスにリフレッシュ レートを変更可能


24FPSのビデオを全画面表示している時は、60Hz→48Hzに



ビデオの特徴に合わせてタイマーのタイミングを変更



XHRH...
IE11の互換性
IE11の互換性に関する変更点
Don’t call me IE.


ユーザー・エージェント文字列

Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like...
IE11の互換性に関する変更点
Don’t call me IE.


IE10までは…



<!DOCTYPE>によってエンジンを切り替えていた


判別の複雑化



古い機能が使われ続けてしまう



IEだけ新機能が実装され...
IE11の互換性に関する変更点
Don’t call me IE.

http://msdn.microsoft.com/ja-jp/library/ie/dn384049(v=vs.85).aspx
IE11の互換性に関する変更点
互換性設定
開発者がやるべきこと

IE11に対応する

Modernizrを使って機能を調べる
http://www.buildinsider.net/web/modernizr/01

または
互換設定を記述する

<meta>タグで互換設定を記述する...
互換性の調査
modern.ie


複数ブラウザでのチェック




静的コードスキャン




BrowserStack

GitHubにソースがある

仮想マシンのダウンロード
EPM と AppContainer


拡張保護モード (EPM:Enhanced Protected Mode)



AppContainer


Windows 8で導入されたセキュリティ保護機能



新しい UI の IE ...
Canvas
Canvas
機能強化


drawImage



stroke (パターンを含む)



strokeRect



strokeText



fill (パターンを含む)



fillText (パターンを含む)



...
パフォーマンスの改善
Canvas 2D Context APIの改善


ctx.msImageSmoothingEnabled = true



ctx.setLineDash([5,10]);

msImageSmoothingEn...
WebGL
WebGL


GPU描画を可能にするJavaScript API



2D <canvas> よりもわかりやすく、パフォーマンスがよい



Three.jsの主要な機能をサポート

GlacierWorks
http://explo...
Internet Explorer 11 WebGL Architecture
表示と向き
表示と向き
デバイスの向きイベント


DeviceOrientation イベントの実装

http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientatio...
表示と向き
全画面 API
ブラウザ境界を超えて全画面表示
document.getElementById("myImage").msRequestFullscreen();

http://msdn.microsoft.com/ja-jp/l...
表示と向き
画面の向き API
デバイスの向きを API から取得
向きを取得
portrait-primary

landscape-primary

portrait-secondary

landscape-secondary
http:...
パフォーマンスの改善
パフォーマンスの改善


グラフィックスの改善



ネットワークの改善



レイアウト/スタイルの改善
パフォーマンスの改善
グラフィックスの改善


JPEG画像がWebにしめる割合


Webからダウンロードされるデータの61%が画像



画像のうち47%がJPEG



ハードウェア アクセラレーションによる高速化



読み込...
ネットワークの改善
Prefetch・Prerender ・SPDY


<link rel=“prefetch” href=“Image.jpg”>


1ホストあたり10リソースまで



<link rel=“prerender” ...
JavaScript
JavaScript


ブロック スコープ変数





コンテナー オブジェクト






Set オブジェクト
Map オブジェクト
WeakMap オブジェクト

国際化 API







let
cons...
F12開発者ツール
生まれ変わった UI

Surface RT( ARM )でも動作する!
IE11の新しいメニュー
DOM Explorer
コンソール
デバッガー
ネットワーク

UI の応答
プロファイラー
メモリ
エミュレーション

IE10のメニュー
IE11の新しいメニュー
DOM Explorer
コンソール
デバッガー
ネットワーク

UI の応答
プロファイラー
メモリ
エミュレーション
リクエスト

レスポンス

HTML描画

スクリプト
実行

表示
Web Runtime Architecture
生まれ変わった UI


HTML 5時代の新しい要件に対応
以前は…

HTML5時代
ようこそ

あなたは 000010 人目のお客様です
Sorry, this page is Japanese only.

HTML

HTML5

...
生まれ変わった UI


HTML 5時代の新しい要件に対応
DOM Explorer



HTML, CSSを確認・調整



リアルタイムに状況を確認可能に



パンくずでエレメント階層にアクセス可能



ドラッグ&ドロップでエレメントの移動が可能



インテリセンスで入力が容易に
DOM Explorer


ツールバーをドラッグ&ドロップで下に移
動してみた
コンソール


対話によるコードの実行、情報の取得

どこからでもアクセス可能

オブジェクト階層が展開可能

インテリセンスが利用可能
複数行に切り替え可能

どのツールからでもコンソールにアクセス可能に。
コンソール デバッグ APIにい...
デバッガー

ミニファイされたコードの整形

ウォッチ

ブレイクポイント
コールスタック
ブレークポイント

ブレークポイントの反映にリフレッシュは不要に
タブ表示により複数のスクリプトの管理が容易に
ブレークポイントの位置がスクロールバーに...
ネットワーク
ページ表示までの時間

Fiddlerがなくても困らない
通信の詳細(要求、応答のヘッダー、本文)

通信の詳細時間(要求、待機、応答)

リクエスト タイミング情報が改善
圧縮情報キャプチャの改善
UI の応答


UIの応答性を計測



フレームレート、CPU利用率をグラフィカルに表示

アプリ ライフサイクルとユー
ザーマークの表示
performance.mark(markName);

CPU使用率とその内訳

視覚スループ...
UI の応答


Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI



[デバッグ] – [パフォーマンスと診断]

*1 2013年10月の Microsoft Store の価格です。
プロファイラー
function の処理時間と回数を調査


機能=function


回数=呼び出し回数



包括時間(ミリ秒)= 子 function を含む時間



排他時間(ミリ秒)= 子 function を含まない

...
メモリ
変数やHTMLエレメントのメモリ使用量を調査
差分の詳細を確認

スナップショット
を作成
メモリ、オブジェクトの増減を抽出

デタッチされたDOMノードの識別
メモリの増加ポイントを識別
オブジェクトが使用しているメモリを計測
エミュレーション

複数の画面タイプにおけるレスポンシブ デザインのテスト
モバイル サイトにおける位置識別機能のテスト
パフォーマンス・ダッシュボード

状況をリアルタイムに確認可能
まとめ
DOM Explorer
コンソール
デバッガー
ネットワーク
UI の応答
プロファイラー
メモリ

エミュレーション
Upcoming SlideShare
Loading in …5
×

Internet Explorer 11 概要

2,586 views

Published on

Published in: Technology
  • Be the first to comment

Internet Explorer 11 概要

  1. 1. Internet Explorer 11 尾崎 義尚 2013/11/09
  2. 2. 自己紹介  尾崎 義尚 – ネクストスケープ  Microsoft MVP for Internet Explorer & userAgents.ie  お酒は飲まないのですが、尿酸値が高め(7.9)  黄斑変性の疑いは今朝晴れました。  犬 と 猫2匹 を飼っています。 猫A 猫C プリンセス・D・ イザベラ
  3. 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. 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. 5. IEのシェア Worldwide Japan http://gs.statcounter.com/#browser-ww-monthly-201208-201309
  6. 6. IE11の主な新機能
  7. 7. http://technet.microsoft.com/ja-jp/ie/dn269977 http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx
  8. 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. 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. 10. Windows 統合
  11. 11. Perfect for touch  ドラッグ&ドロップ  hoverとアクティブ リンク ハイライト http://ie.microsoft.com/testdrive/Graphics/MagneticPoetry/Default.html
  12. 12. Click to Call  電話番号を自動的にリンクに  Skype などの電話アプリでコール可能
  13. 13. Click to Call
  14. 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. 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. 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. 17. ピン留めされたサイト
  18. 18. デバイス間の同期 同期機能 Windows 8のIE10 Windows 8.1のIE11 履歴および入力された URL ○ ○ お気に入り/ブックマーク ○ ○ タブ × ○ ユーザーが構成する設定/基 本設定 ホーム ページのみ○ ○ パスワード ○ ○ http://msdn.microsoft.com/ja-jp/library/ie/dn265048(v=vs.85).aspx#syncing
  19. 19. デバイス間の同期
  20. 20. ビデオの拡張
  21. 21. ビデオの拡張  最新のメディア仕様をサポート  Media Source Extension(MSE)   Encrypted Media Extensions(EME)   リッチスタイルのTTMLキャプション Web Crypto   コンテンツ保護(DRM) Simple Delivery Profile-US(SDP-US)   アダプティブ ストリーミング セキュリティ認証に利用できる暗号化機能 FullScreen APIのサポート
  22. 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. 23. ビデオの拡張 Media Source Extensions (MSE)  アダプティブ ストリーミングのサポート   バッファリングの待ち時間なしで再生可能   ネットワークの状況等に応じたビデオの画質(ビットレート)の切り替え <video>のソースにファイルを指定するのではなく、JavaScriptでデータを読み込んで追加 MPEG-DASHのサポート Media Source Extensions http://www.w3.org/TR/media-source/
  24. 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. 25. ビデオの拡張 Web Crypto  セキュリティとユーザー認証  暗号化、復号化  ハッシュの生成  署名の生成と検証 http://ie.microsoft.com/testdrive/HTML5/Crypto/Default.html Web Cryptography API http://www.w3.org/TR/WebCryptoAPI/
  26. 26. ビデオの拡張 省電力  Windows 8.1は、シームレスにリフレッシュ レートを変更可能  24FPSのビデオを全画面表示している時は、60Hz→48Hzに  ビデオの特徴に合わせてタイマーのタイミングを変更  XHRHttpRequests はディスクにキャッシュすることなくメモリ上に転送可能
  27. 27. IE11の互換性
  28. 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. 29. IE11の互換性に関する変更点 Don’t call me IE.  IE10までは…  <!DOCTYPE>によってエンジンを切り替えていた  判別の複雑化  古い機能が使われ続けてしまう  IEだけ新機能が実装されないことがある  ほかのブラウザはそんなことしていない  高速化したのに最新エンジンが使われないので、早く動作しない 長年の負債をリセット!
  30. 30. IE11の互換性に関する変更点 Don’t call me IE. http://msdn.microsoft.com/ja-jp/library/ie/dn384049(v=vs.85).aspx
  31. 31. IE11の互換性に関する変更点 互換性設定
  32. 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. 33. 互換性の調査 modern.ie  複数ブラウザでのチェック   静的コードスキャン   BrowserStack GitHubにソースがある 仮想マシンのダウンロード
  34. 34. EPM と AppContainer  拡張保護モード (EPM:Enhanced Protected Mode)  AppContainer  Windows 8で導入されたセキュリティ保護機能  新しい UI の IE だけでなく、デスクトップ版にも適用された  動かなくなるブラウザー拡張多数
  35. 35. Canvas
  36. 36. Canvas 機能強化  drawImage  stroke (パターンを含む)  strokeRect  strokeText  fill (パターンを含む)  fillText (パターンを含む)  fillRect http://msdn.microsoft.com/ja-jp/library/ie/dn265037(v=vs.85).aspx
  37. 37. パフォーマンスの改善 Canvas 2D Context APIの改善  ctx.msImageSmoothingEnabled = true  ctx.setLineDash([5,10]); msImageSmoothingEnabled=true msImageSmoothingEnabled=false
  38. 38. WebGL
  39. 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. 40. Internet Explorer 11 WebGL Architecture
  41. 41. 表示と向き
  42. 42. 表示と向き デバイスの向きイベント  DeviceOrientation イベントの実装 http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html
  43. 43. 表示と向き 全画面 API ブラウザ境界を超えて全画面表示 document.getElementById("myImage").msRequestFullscreen(); http://msdn.microsoft.com/ja-jp/library/ie/dn265028(v=vs.85).aspx
  44. 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. 45. パフォーマンスの改善
  46. 46. パフォーマンスの改善  グラフィックスの改善  ネットワークの改善  レイアウト/スタイルの改善
  47. 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. 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. 49. JavaScript
  50. 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. 51. F12開発者ツール
  52. 52. 生まれ変わった UI Surface RT( ARM )でも動作する!
  53. 53. IE11の新しいメニュー DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション IE10のメニュー
  54. 54. IE11の新しいメニュー DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション リクエスト レスポンス HTML描画 スクリプト 実行 表示
  55. 55. Web Runtime Architecture
  56. 56. 生まれ変わった UI  HTML 5時代の新しい要件に対応 以前は… HTML5時代 ようこそ あなたは 000010 人目のお客様です Sorry, this page is Japanese only. HTML HTML5 about 散文詩 工事中<m(__)m> 上から下に流れるレイアウト CSS3 複雑に絡み合うレイアウト
  57. 57. 生まれ変わった UI  HTML 5時代の新しい要件に対応
  58. 58. DOM Explorer  HTML, CSSを確認・調整  リアルタイムに状況を確認可能に  パンくずでエレメント階層にアクセス可能  ドラッグ&ドロップでエレメントの移動が可能  インテリセンスで入力が容易に
  59. 59. DOM Explorer  ツールバーをドラッグ&ドロップで下に移 動してみた
  60. 60. コンソール  対話によるコードの実行、情報の取得 どこからでもアクセス可能 オブジェクト階層が展開可能 インテリセンスが利用可能 複数行に切り替え可能 どのツールからでもコンソールにアクセス可能に。 コンソール デバッグ APIにいくつかのメソッドが追加 http://msdn.microsoft.com/ja-JP/library/ie/hh772173(v=vs.85) インテリセンス function clickCookie(){ document.getElementById("bigCookie").click(); } setInterval(clickCookie, 1);
  61. 61. デバッガー ミニファイされたコードの整形 ウォッチ ブレイクポイント コールスタック ブレークポイント ブレークポイントの反映にリフレッシュは不要に タブ表示により複数のスクリプトの管理が容易に ブレークポイントの位置がスクロールバーに表示されるように
  62. 62. ネットワーク ページ表示までの時間 Fiddlerがなくても困らない 通信の詳細(要求、応答のヘッダー、本文) 通信の詳細時間(要求、待機、応答) リクエスト タイミング情報が改善 圧縮情報キャプチャの改善
  63. 63. UI の応答  UIの応答性を計測  フレームレート、CPU利用率をグラフィカルに表示 アプリ ライフサイクルとユー ザーマークの表示 performance.mark(markName); CPU使用率とその内訳 視覚スループット(FPS) タイムラインの詳細 タイムライン詳細の内訳 「HTMLの解析」の裏で動いている 処理をグラフ化
  64. 64. UI の応答  Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI  [デバッグ] – [パフォーマンスと診断] *1 2013年10月の Microsoft Store の価格です。
  65. 65. プロファイラー function の処理時間と回数を調査  機能=function  回数=呼び出し回数  包括時間(ミリ秒)= 子 function を含む時間  排他時間(ミリ秒)= 子 function を含まない 呼び出しツリーはfunctionが階層で表示される Web ワーカーで実行されたfunctionのトラッキング
  66. 66. メモリ 変数やHTMLエレメントのメモリ使用量を調査 差分の詳細を確認 スナップショット を作成 メモリ、オブジェクトの増減を抽出 デタッチされたDOMノードの識別 メモリの増加ポイントを識別 オブジェクトが使用しているメモリを計測
  67. 67. エミュレーション 複数の画面タイプにおけるレスポンシブ デザインのテスト モバイル サイトにおける位置識別機能のテスト
  68. 68. パフォーマンス・ダッシュボード 状況をリアルタイムに確認可能
  69. 69. まとめ DOM Explorer コンソール デバッガー ネットワーク UI の応答 プロファイラー メモリ エミュレーション

×