2015/07/30 の TechBuzz での登壇で使用した資料です。

1. Microsoft Edgeで
サポートされる
新しい API について
日本マイクロソフト株式会社
デベロッパーエバンジェリズム統括本部
物江 修 (@osamum_MS)

2. Windows 10 の Web ブラウザー
～ 2 つの Web ブラウザーが搭載 ～
Windows 10
Internet Explorer
Edge

3. Windows 10 の Internet Explorer
• Windows 7、8.1 と同じもの
• 旧バージョンとの互換性目的
• マイナーアップデートはされる

4. Microsoft Edge
～新規に開発された Web ブラウザー～
Edge
• 他の Web ブラウザーとの相互運用性
• Web 標準
• Windows 10 のエクスペリエンス
• 既定の Web ブラウザー

5. MICROSOFT CONFIDENTIAL
TheMobileWeb
Web 標準準拠と他ブラウザ互換
～Edge の目指すところ～

6. A break from the past,
220k+
Unique LoC 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. EdgeとInternet Explorer
～ 異なるレンダリングエンジン～
EdgeHTML.dll MSHTML.dll
相互運用性
既定のブラウザ
モダン Web サイト向け
集中を妨げない画面、注
釈、Cortana 統合のような
ユニークなユーザー体験
互換性
主にイントラネットか
エンタープライズモード サイト
IE11 IE10 IE9 IE8 IE7 IE5.5
★
Edge

11. Microsoft Edge 拡張機能
～ 旧バージョンの Internet Explorer との互換性はない ～
• ActiveX
• VBScript
• Browser Helper Objects (BHO)
• Vector Markup Language (VML)
• DirectX Filters and Transitions
• Flash
• Acrobat(pdf)
• JavaScript ベースの
新しい拡張モデル(予定)
• Chrome、Firefox の
プラグイン (予定)
廃止 有効

12. Web サイトの Edge 対応
• ドキュメントモードを使用しない
• 新しい JS ライブラリ/フレームワークを使用する
• ブラウザープラグインを使用しない
• CSS ベンダープレフィックスを使用しない
• ブラウザーの検出を使用しない
• 条件付きコメント
http://dev.modern.ie/tools/

13. EdgeとInternet Explorer
～ 異なる互換性への方向性～
クロスブラウザ 旧 IE 互換
• ドキュメントモード
• エンタープライズ
モード
• ActiveX
旧 IE への互換機能は
サポートされない
マイナーアップ
デート
頻繁な
アップデート
進化 既存資産の
保守と活用

14. 相互運用性への意気込み
In cases where these 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 の Windows 10
エクスペリエンス
ペン/マーカー クリップ Cortana 統合
注釈 リーディングリスト
(オフライン)
共有

16. あたらしくサポートされる機能

17. Edge : Platform Status
～新しい機能実装状況が公開～

18. Experimental features の有効化
～先行実装された機能を使用可能に～
アドレスバーに以下を入力
about:flags

19. 開発者から見た
Microsoft Edge の新機能

20. Microsoft Edge の新機能
JS
DOM グラフィックス JavaScript
セキュリティネットワークメディア
Windows 10 版 Microsoft Edge
開発者向けガイド
http://bit.ly/msedge_devguide

21. Game Pad API
～ゲームパッドでの操作を可能にする機能 ～
//ゲームパッドの ID を取り出す
function controlLoop() {
var gamepads = navigator.getGamepads();
var length = gamepads.length;
for (var i = 0; i < length; i++) {
var pad = gamepads[i];
if (pad) {console.log(pad.id);}
}
window.requestAnimationFrame(controlLoop);
}
window.requestAnimationFrame(controlLoop); //ループ処理
XInput 対応の
ゲームパッドが必要

22. Media Capture and Stream
～ カメラやマイクにアクセスする機能～
//Web Cam を起動して映像を表示
navigator.getUserMedia({video: true}, function (stream){
if (typeof (video.srcObject) !== 'undefined'){
video.srcObject = stream;
} else {
video.src = URL.createObjectURL(stream);
}
}, onFailSoHard);

23. Web Audio API
～ 音声を処理・合成するための機能 ～
//オーディオファイルの再生
var audioCtx = new AudioContext();
audioCtx.decodeAudioData(xhr.response,
function (buffer) {
var source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(audioCtx.destination);
source.start(0);
});

24. ASM.js
～ JavaScript を事前コンパイルして高速に動作させる～
//文字列の長さを返す
function strlen(ptr) {
'use asm';
ptr = ptr|0;
var curr = 0;
curr = ptr;
while (MEM8[curr]|0 != 0) {
curr = (curr + 1)|0;
}
return (curr − ptr)|0;
}

25. ご提案、フィードバッグを
募集しています。
Internet Explorer Platform Suggestion Box!
IE development discussions from MSDN forums
Internet Explorer Beta Feedback

26. さ既存資産との互換 最新の Web 標準
後方互換と
最新機能サポートの両立
まとめ
Windows 10

27. 参考 1/3
http://dev.modern.ie/
platform/status/
Edge のロードマップ

28. 参考 2/3
http://bit.ly/msedge_devguide
Windows 10 版 Project Spartan 開発者向けガイド
http://dev.modern.ie/platform/faq/
FAQ (Edge)

29. 参考 3/3
monoe’s blog
bit.ly/monoe_blog