Embed Size (px)
Citation preview
Internet Explorer 11尾崎 義尚
2013/11/09
自己紹介
尾崎 義尚 – ネクストスケープ
Microsoft MVP for Internet Explorer & userAgents.ie
お酒は飲まないのですが、尿酸値が高め（7.9)
黄斑変性の疑いは今朝晴れました。
犬 と 猫2匹 を飼っています。
猫A
猫C
プリンセス・D・イザベラ
自己紹介
尾崎 義尚 – ネクストスケープ
Microsoft MVP for Internet Explorer & userAgents.ie
特集：Web制作者＆開発者のためのIE10概説
http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html
Coding Guidelines for CSharp 3.0, 4.0 and 5.0
http://csharpguidelines.codeplex.com/releases/view/98254
Modernizrを使ってブラウザーの機能を調べるには
http://www.buildinsider.net/web/modernizr/01
Web制作者が知っておくべき、Internet Explorer 11（プレビュー版）の新機能および変更点
http://www.buildinsider.net/web/ie11preview/01
Windows 8.1 徹底解剖 第4回 「Internet Explorer 11」「F12 開発者ツール」
http://www.forest.impress.co.jp/docs/special/20130829_613068.html
Web制作者は注意！ Internet Explorer 11で変更された「互換性」
http://www.buildinsider.net/web/ie11attention/01
Internet Explorer 11
対応 OS ： Windows 7、Windows 8.1
Windows 8は、サポートされません。
8月27日 RTM
9月9日 MSDN、TechNet 加入者向けに公開
10月18日 一般向けリリース
11月08日 Windows 7 版リリース
Windows 8のリリース (2012年10月26日) から1年弱
IEのシェア
http://gs.statcounter.com/#browser-ww-monthly-201208-201309
Worldwide Japan
IE11の主な新機能
http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspxhttp://technet.microsoft.com/ja-jp/ie/dn269977
IE11 の新機能 互換性
デバイスの向きのイベント
全画面 API
画面の向きの API
入力方式エディター API
F12 開発者ツール
Canvas の機能強化
高 DPI のサポート
WebGL
JavaScript機能追加
レイアウト
境界線の画像
ネットワーキングとナビゲーション
戻るナビゲーションのキャッシュ
ネットワークの優先順位付け
プリレンダリングとプリフェッチのサポート
Do Not Track (DNT) 例外
デスクトップ IE の拡張保護モード (EPM)
Web 暗号化 API
http://msdn.microsoft.com/ja-jp/library/ie/bg182636(v=vs.85).aspx
タッチ
ドラッグ アンド ドロップ タッチ サポート
ホバー タッチ サポート
各入力のスクロールとズーム
ビデオ
動的 TextTrack オブジェクト
Simple Delivery Profile (SDP) キャプション
XHR キャッシュ コントロールのストリーミング
電話番号の形式の認識
ピン留めされたサイトの機能強化
赤字：IE7非対応機能
Windows 7 ではサポートされない機能
電話番号の自動検出
デバイスの向きのイベント
ドラッグ アンド ドロップ タッチ サポート
効果の一括処理とストロークの向上
Encrypted Media Extensions
拡張保護モード (EPM)
F12 開発者ツールの UI の応答性
高 DPI のサポート
ホバー タッチ サポート
リンクの強調表示
Media Source Extensions
ピン留めされたサイトの機能強化
画面の向きの API
タッチ入力やその他の入力によるスクロールとズーム
さまざまなデバイスにわたる同期
TCP 接続共有 (SPDY)
http://msdn.microsoft.com/ja-jp/library/ie/dn394063(v=vs.85).aspx
Windows 統合
Perfect for touch
ドラッグ＆ドロップ
hoverとアクティブ リンク ハイライト
http://ie.microsoft.com/testdrive/Graphics/MagneticPoetry/Default.html
Click to Call
電話番号を自動的にリンクに
Skype などの電話アプリでコール可能
Click to Call
ピン留めされたサイト （<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" />
<meta>タグでの指定方法
http://msdn.microsoft.com/ja-jp/library/ie/bg183312(v=vs.85).aspx
ピン留めされたサイト （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>
<meta name="msapplication-config" content="IEconfig.xml" />
XML ブラウザ構成ファイルでの指定方法
ピン留めされたサイト通知の送信
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);
}
JavaScript で通知
ピン留めされたサイト
デバイス間の同期
同期機能 Windows 8のIE10 Windows 8.1のIE11
履歴および入力された URL ○ ○
お気に入り/ブックマーク ○ ○
タブ × ○
ユーザーが構成する設定/基本設定
ホーム ページのみ○ ○
パスワード ○ ○
http://msdn.microsoft.com/ja-jp/library/ie/dn265048(v=vs.85).aspx#syncing
デバイス間の同期
ビデオの拡張
ビデオの拡張
最新のメディア仕様をサポート
Media Source Extension（MSE)
アダプティブ ストリーミング
Encrypted Media Extensions(EME)
コンテンツ保護（DRM）
Simple Delivery Profile-US(SDP-US)
リッチスタイルのTTMLキャプション
Web Crypto
セキュリティ認証に利用できる暗号化機能
FullScreen APIのサポート
ビデオの拡張動的 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/
ビデオの拡張Media Source Extensions (MSE)
アダプティブ ストリーミングのサポート
ネットワークの状況等に応じたビデオの画質（ビットレート）の切り替え
バッファリングの待ち時間なしで再生可能
<video>のソースにファイルを指定するのではなく、JavaScriptでデータを読み込んで追加
MPEG-DASHのサポート
Media Source Extensionshttp://www.w3.org/TR/media-source/
ビデオの拡張Encrypted Media Extensions(EME)
プラグインなしで DRM で保護されたコンテンツが再生可能
PlayReady DRMのサポート
Encrypted Media Extensionshttps://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media-fpwd.html
ビデオの拡張Web Crypto
セキュリティとユーザー認証
暗号化、復号化
ハッシュの生成
署名の生成と検証
Web Cryptography APIhttp://www.w3.org/TR/WebCryptoAPI/
http://ie.microsoft.com/testdrive/HTML5/Crypto/Default.html
ビデオの拡張省電力
Windows 8.1は、シームレスにリフレッシュ レートを変更可能
24FPSのビデオを全画面表示している時は、60Hz→48Hzに
ビデオの特徴に合わせてタイマーのタイミングを変更
XHRHttpRequests はディスクにキャッシュすることなくメモリ上に転送可能
IE11の互換性
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)
メソッド IE10まで IE11
navigator.appName Microsoft Internet Explorer Netscape
navigator.product undefined Gecko
ドキュメント・モード
JavaScriptの結果
選択可能になりました！
以前は…
以前は…
以前は…
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に対応する
互換設定を記述する
<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
Modernizrを使って機能を調べるhttp://www.buildinsider.net/web/modernizr/01
または
UAの判定を[Trident] か [rv:11.0] を見るようにする
互換性の調査modern.ie
複数ブラウザでのチェック
BrowserStack
静的コードスキャン
GitHubにソースがある
仮想マシンのダウンロード
EPM と AppContainer
拡張保護モード (EPM：Enhanced Protected Mode)
AppContainer
Windows 8で導入されたセキュリティ保護機能
新しい UI の IE だけでなく、デスクトップ版にも適用された
動かなくなるブラウザー拡張多数
Canvas
Canvas機能強化
drawImage
stroke (パターンを含む)
strokeRect
strokeText
fill (パターンを含む)
fillText (パターンを含む)
fillRect
http://msdn.microsoft.com/ja-jp/library/ie/dn265037(v=vs.85).aspx
パフォーマンスの改善Canvas 2D Context APIの改善
ctx.msImageSmoothingEnabled = true
ctx.setLineDash([5,10]);
msImageSmoothingEnabled=falsemsImageSmoothingEnabled=true
WebGL
WebGL
GPU描画を可能にするJavaScript API
2D <canvas> よりもわかりやすく、パフォーマンスがよい
Three.jsの主要な機能をサポート
GlacierWorkshttp://explore.glacierworks.org/en/#everest/exploreHoverhttp://www.hover.ie/#http://msdn.microsoft.com/ja-jp/library/ie/bg182648(v=vs.85).aspx
Internet Explorer 11 WebGL Architecture
表示と向き
表示と向きデバイスの向きイベント
DeviceOrientation イベントの実装
http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html
表示と向き全画面 API
ブラウザ境界を超えて全画面表示
http://msdn.microsoft.com/ja-jp/library/ie/dn265028(v=vs.85).aspx
document.getElementById("myImage").msRequestFullscreen();
表示と向き画面の向き API
デバイスの向きを API から取得
http://msdn.microsoft.com/ja-jp/library/ie/dn433241(v=vs.85).aspx
portrait-primary
landscape-primary
portrait-secondary
landscape-secondary
function orientationChangeHandler(evt) {var orientation = evt.target.msOrientation;
}
screen.msLockOrientation("portrait-primary", "portrait-secondary");
向きをロック
向きを取得
パフォーマンスの改善
パフォーマンスの改善
グラフィックスの改善
ネットワークの改善
レイアウト/スタイルの改善
パフォーマンスの改善グラフィックスの改善
JPEG画像がWebにしめる割合
Webからダウンロードされるデータの61%が画像
画像のうち47％がJPEG
ハードウェア アクセラレーションによる高速化
読み込みが最大45%高速化
最大40%省メモリ化
Using Hardware to Decode and Load JPG Images up to 45% faster in Internet Explorer 11http://blogs.msdn.com/b/ie/archive/2013/09/12/using-hardware-to-decode-and-load-jpg-images-up-to-45-faster-in-internet-explorer-11.aspx
ネットワークの改善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
JavaScript
JavaScript ブロック スコープ変数
let
const
コンテナー オブジェクト
Set オブジェクト
Map オブジェクト
WeakMap オブジェクト
国際化 API
Intl.DateTimeFormat -- 日時
Intl.NumberFormat -- 数値
Intl.Collator -- 文字列
__proto__ プロパティ
http://msdn.microsoft.com/ja-jp/library/ie/dn342892(v=vs.85).aspx
F12開発者ツール
生まれ変わった UI
Surface RT（ARM ）でも動作する！
IE11の新しいメニュー
DOM Explorer
コンソール
デバッガー
ネットワーク
UI の応答
プロファイラー
メモリ
エミュレーション
IE10のメニュー
IE11の新しいメニュー
DOM Explorer
コンソール
デバッガー
ネットワーク
UI の応答
プロファイラー
メモリ
エミュレーション
リクエスト レスポンス HTML描画スクリプト
実行表示
Web Runtime Architecture
生まれ変わった UI
HTML 5時代の新しい要件に対応
HTML
ようこそあなたは 000010 人目のお客様です
Sorry, this page is Japanese only.
about
散文詩 工事中<m(__)m>
HTML5
CSS3
以前は… HTML5時代
上から下に流れるレイアウト 複雑に絡み合うレイアウト
生まれ変わった UI
HTML 5時代の新しい要件に対応
DOM Explorer
HTML, CSSを確認・調整
リアルタイムに状況を確認可能に
パンくずでエレメント階層にアクセス可能
ドラッグ＆ドロップでエレメントの移動が可能
インテリセンスで入力が容易に
DOM Explorer
ツールバーをドラッグ＆ドロップで下に移動してみた
コンソール
対話によるコードの実行、情報の取得
どのツールからでもコンソールにアクセス可能に。コンソールデバッグAPIにいくつかのメソッドが追加http://msdn.microsoft.com/ja-JP/library/ie/hh772173(v=vs.85)インテリセンス
どこからでもアクセス可能
インテリセンスが利用可能
オブジェクト階層が展開可能
複数行に切り替え可能
function clickCookie(){document.getElementById("bigCookie").click();
}setInterval(clickCookie, 1);
デバッガー
ブレークポイントの反映にリフレッシュは不要にタブ表示により複数のスクリプトの管理が容易にブレークポイントの位置がスクロールバーに表示されるように
ウォッチ
ブレイクポイントブレイクポイント
コールスタックブレークポイント
ミニファイされたコードの整形
ネットワークページ表示までの時間 通信の詳細（要求、応答のヘッダー、本文）
通信の詳細時間（要求、待機、応答）
Fiddlerがなくても困らない
リクエストタイミング情報が改善圧縮情報キャプチャの改善
UI の応答
UIの応答性を計測
フレームレート、CPU利用率をグラフィカルに表示
CPU使用率とその内訳
アプリライフサイクルとユーザーマークの表示performance.mark(markName);
視覚スループット（FPS）
タイムライン詳細の内訳「HTMLの解析」の裏で動いている処理をグラフ化
タイムラインの詳細
UI の応答
Visual Studio 2013 Ultimate(¥1,669,500)*1 と同じ UI
[デバッグ] – [パフォーマンスと診断]
*1 2013年10月の Microsoft Store の価格です。
プロファイラーfunction の処理時間と回数を調査
機能＝function
回数＝呼び出し回数
包括時間（ミリ秒）＝ 子 function を含む時間
排他時間（ミリ秒）＝ 子 function を含まない
呼び出しツリーはfunctionが階層で表示される
Web ワーカーで実行されたfunctionのトラッキング
メモリ変数やHTMLエレメントのメモリ使用量を調査
メモリ、オブジェクトの増減を抽出
スナップショットを作成
差分の詳細を確認
デタッチされたDOMノードの識別メモリの増加ポイントを識別オブジェクトが使用しているメモリを計測
エミュレーション
複数の画面タイプにおけるレスポンシブデザインのテストモバイルサイトにおける位置識別機能のテスト
パフォーマンス・ダッシュボード
状況をリアルタイムに確認可能
まとめ
DOM Explorer
コンソール
デバッガー
ネットワーク
UI の応答
プロファイラー
メモリ
エミュレーション
