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.
for Developer、
Microsoft Edge とInternet Explorer で
新しくサポートされるAPI
日本マイクロソフト株式会社
デベロッパーエバンジェリズム統括本部
物江 修
アジェンダ
•Windows 10 の Web ブラウザー
•新しくサポートされる HTML5 関連 API
•開発基盤としての Microsoft Edge
Windows 10 の Web ブラウザー
Windows 10 の Web ブラウザー
~ 2 つの Web ブラウザーが搭載 ~
Windows 10
Internet Explorer 11
Edge
2 つのブラウザーの方向性
~新機能のサポートと後方互換性の確保~
• 既定の Web ブラウザー
• Universal Windows Platform の基盤
• 絶え間ないアップデート
• 後方互換目的
• ゆるやかなアップデート
新しくサポートされるAPI
機能実装状況 1/2
~実装状況を示すそれぞれのページが用意~
dev.modern.ie/platform/
status/
status.modern.ie
機能実装状況 2/2
~ステータスがフィルタ可能~
• Not Currently Planned
‐ 現状予定なし
• Deprecated
‐ サポートしない
• Under Consideration
‐ 検討中
• Preview Re...
Experimental features の有効化
~ Preview 版 Edge に用意されている機能を使用可能に~
アドレスバーに以下を入力
about:flags
Edge からの localhost への接続許可
~ループバックの有効化が必要~
• Edge は既定で localhost アドレスに接続できない
• コマンドプロンプトにてコマンドを実行
CheckNetIsolation Loopbac...
開発者から見た
Microsoft Edge の新機能
Microsoft Edge の新機能
JS
DOM グラフィックス JavaScript
セキュリティネットワークメディア
DOM (Document Object Model) 関連
DOM
• ARIA ランドマーク
• Game パッド API
• 合成イベント
• XPath API (DOM Level 3)
ARIA ランドマーク
~アクセシビリティにおけるナビゲーションの目印~
//ランドマークを打ち込んでセマンティクスを高める
<body>
<header role="banner">
...
</header>
<nav role="navi...
Game Pad API
~ゲームパッドでの操作を可能にする機能 ~
//ゲームパッドの ID を取り出す
function controlLoop() {
var gamepads = navigator.getGamepads();
var...
合成イベント(DOM Event Constructors )
~ DOM イベントを作成して発行する ~
//イベントを合成してディスパッチ
var clicker = new MouseEvent('click', {
'bubbles':...
XPath API のサポート
~XPath による XML 文書へのアクセス ~
//class が "even" の要素だけ取り出す
getSpans(‘even‘);
function getSpans(ctype){
var resul...
グラフィックスとレイアウト
• CSS 条件付き規則
• CSS グラデーション ミッドポイント
• フィルター効果
• Flexbox の更新
• Media Queries Level4
• Preserve-3D
• SVG の更新
CSS Filter
~フィルター効果を DOM に適用~
#glassPic {
filter:blur(5px);
}
#glassPic {
filter:sepia(100%);
}
効果 関数 値
モノクロ grayscale 0~1...
CSS Preserve-3D
~ 要素が 3D 空間に配置 ~
.blue {
transform: rotateY(45deg);
background-color: #0087FF;
transform-style: preserve-3...
<img srcset>
~解像度の異なる複数の画像をソースとして指定~
//ピクセル密度により画像のソースを変更
<img src="image/msEdge.jpg"
srcset=“image/msEdge.jpg,
image/msEd...
JavaScript
• ES6 : Class, Promise, Object Literal 拡張, WeakSet,
組み込み関数: (Math, Number, Object, String),
Template String, Sp...
クラス
~継承やメソッドのオーバーライドなども可能~
//基底クラス
class Human {
constructor(name) {
this.name = name;
}
danger() {
console.log('逃げる');
}
...
テンプレート文字列
~ 文字列に式を含めることが可能 ~
//渡された引数の合計を求める関数
var firstName =‘太郎’;
var lastName = ‘木村’;
//文字列はバッククォート(`)で括ること
console.log...
Spread 演算子
~ 任意の数の引数を配列として取得 ~
//渡された引数の合計を求める関数
function sum (...nums) {
return nums.reduce((a, b) => a + b);
}
//sum 関数の...
アロー関数
~function キーワードの短縮表記~
//関数の定義
var calc = function(x){return x * 2};
↓
var calc = x=>{return x * 2};
もしくは
var calc = ...
シンボル
~ プロパティ名に指定可能な一意な値を生成 ~
//シンボルを使用してプロパティの設定と読み出し
var obj = {};
var sym1 = Symbol('foo'), sym2 = Symbol('foo');
Consol...
ASM.js
~ JavaScript を事前コンパイルして高速に動作させる~
//文字列の長さを返す
function strlen(ptr) {
'use asm';
ptr = ptr|0;
var curr = 0;
curr = pt...
メディア
• Media Capture and Stream
• Web Audio API
• WAV,Dolby オーディオ
• HTTP Live Streaming (HLS) ,
Media Source Extensions (M...
Media Capture and Stream
~ カメラやマイクにアクセスする機能~
//Web Cam を起動して映像を表示
navigator.getUserMedia({video: true}, function (stream){...
Web Audio API
~ 音声を処理・合成するための機能 ~
//オーディオファイルの再生
var audioCtx = new AudioContext();
audioCtx.decodeAudioData(xhr.response,...
ネットワーク
• HTTP/2
• meta リファラ
• TLD サポート
• XHR キャッシュ
セキュリティ
• Web 暗号化 API の更新
• HTTP Strict Transport Security(HSTS)
• Content Security Policy (CSP) 1.0
開発基盤としての
Microsoft Edge
ミドルウェアとしての Microsoft Edge
~ HTML+JavaScript 以外の開発 ~
• ActiveX
• VBScript
• Browser Helper Objects (BHO)
• Vector Markup La...
開発基盤としての Edge エンジン
~ EdgeHTML.dll はさまざまなところで使用される ~
New default Windows 10 browser
ご提案、フィードバッグを
募集しています。
Internet Explorer Platform Suggestion Box!
IE development discussions from MSDN forums
Internet Expl...
まとめ
Windows 10
ES6
相互運用性
参考 1/3
https://status.modern.ie/
http://dev.modern.ie/platform/status/
Internet Explorer のロードマップ
Edge のロードマップ
参考 2/3
https://msdn.microsoft.com/ja-
jp/library/dn904191(v=vs.85).aspx
Windows 10 版 Project Spartan 開発者向けガイド
(Technical P...
参考 3/3
monoe’s blog
bit.ly/monoe_blog
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
Upcoming SlideShare
Loading in …5
×

for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI

11,107 views

Published on

<htmlday>Build Insider のセッションで使用したスライドを公開させていただきました。

Published in: Technology
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important)  https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI

  1. 1. for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI 日本マイクロソフト株式会社 デベロッパーエバンジェリズム統括本部 物江 修
  2. 2. アジェンダ •Windows 10 の Web ブラウザー •新しくサポートされる HTML5 関連 API •開発基盤としての Microsoft Edge
  3. 3. Windows 10 の Web ブラウザー
  4. 4. Windows 10 の Web ブラウザー ~ 2 つの Web ブラウザーが搭載 ~ Windows 10 Internet Explorer 11 Edge
  5. 5. 2 つのブラウザーの方向性 ~新機能のサポートと後方互換性の確保~ • 既定の Web ブラウザー • Universal Windows Platform の基盤 • 絶え間ないアップデート • 後方互換目的 • ゆるやかなアップデート
  6. 6. 新しくサポートされるAPI
  7. 7. 機能実装状況 1/2 ~実装状況を示すそれぞれのページが用意~ dev.modern.ie/platform/ status/ status.modern.ie
  8. 8. 機能実装状況 2/2 ~ステータスがフィルタ可能~ • Not Currently Planned ‐ 現状予定なし • Deprecated ‐ サポートしない • Under Consideration ‐ 検討中 • Preview Release ‐ プレビュー版に実装済 • In Development ‐ 開発中
  9. 9. Experimental features の有効化 ~ Preview 版 Edge に用意されている機能を使用可能に~ アドレスバーに以下を入力 about:flags
  10. 10. Edge からの localhost への接続許可 ~ループバックの有効化が必要~ • Edge は既定で localhost アドレスに接続できない • コマンドプロンプトにてコマンドを実行 CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy
  11. 11. 開発者から見た Microsoft Edge の新機能
  12. 12. Microsoft Edge の新機能 JS DOM グラフィックス JavaScript セキュリティネットワークメディア
  13. 13. DOM (Document Object Model) 関連 DOM • ARIA ランドマーク • Game パッド API • 合成イベント • XPath API (DOM Level 3)
  14. 14. ARIA ランドマーク ~アクセシビリティにおけるナビゲーションの目印~ //ランドマークを打ち込んでセマンティクスを高める <body> <header role="banner"> ... </header> <nav role="navigation"> ... <form role="search"> ... </form> </nav> WAI-ARIA WAI (Web Accessibility Initiative) ARIA(Accessible Rich Internet Applications)
  15. 15. 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 対応の ゲームパッドが必要
  16. 16. 合成イベント(DOM Event Constructors ) ~ DOM イベントを作成して発行する ~ //イベントを合成してディスパッチ var clicker = new MouseEvent('click', { 'bubbles': true, 'cancelable': true, 'view': window, 'detail': 0, 'screenX': 0, 'screenY': 0, 'clientX': 0, 'clientY': 0, 'ctrlKey': false, 'altKey': false, 'shiftKey': false, 'metaKey': false, 'button': 0, 'relatedTarget': null }); //click イベントが発生する document.getElementById('chkbox').dispatchEvent(clicker);
  17. 17. XPath API のサポート ~XPath による XML 文書へのアクセス ~ //class が "even" の要素だけ取り出す getSpans(‘even‘); function getSpans(ctype){ var result = document.evaluate('//span[@class="‘ + ctype + '"]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); while(nextObj = result.iterateNext()){ console.log(nextObj.textContent); } } <!- HTML --> <p><span class="odd">1</span>, <span class="even">2</span>, <span class="odd">3</span>, <span class="even">4</span>, <span class="odd">5</span>, <span class="even">6</span>< p>
  18. 18. グラフィックスとレイアウト • CSS 条件付き規則 • CSS グラデーション ミッドポイント • フィルター効果 • Flexbox の更新 • Media Queries Level4 • Preserve-3D • SVG の更新
  19. 19. CSS Filter ~フィルター効果を DOM に適用~ #glassPic { filter:blur(5px); } #glassPic { filter:sepia(100%); } 効果 関数 値 モノクロ grayscale 0~100% セピア sepia 0~100% 彩度 saturate 0~100+% 色相回転 hue-rotate 0~360deg 反転 invert 0~100% 透明度 opacity 0~100% 明るさ brightness 0~100+% コントラスト contrast 0~100+% ぼかし blur 0~10px 影 drop-shadow box-shadowに準ず カスタム url filter エレメント設定
  20. 20. CSS Preserve-3D ~ 要素が 3D 空間に配置 ~ .blue { transform: rotateY(45deg); background-color: #0087FF; transform-style: preserve-3d; } .blue { transform: rotateY(45deg); background-color: #0087FF; transform-style: flat; }
  21. 21. <img srcset> ~解像度の異なる複数の画像をソースとして指定~ //ピクセル密度により画像のソースを変更 <img src="image/msEdge.jpg" srcset=“image/msEdge.jpg, image/msEdge_x2.jpg 2x, image/msEdge_x4.jpg 4x" />
  22. 22. JavaScript • ES6 : Class, Promise, Object Literal 拡張, WeakSet, 組み込み関数: (Math, Number, Object, String), Template String, Spread 演算子 • アロー関数 • シンボル • プロキシ • Iterators • ASM.js JS
  23. 23. クラス ~継承やメソッドのオーバーライドなども可能~ //基底クラス class Human { constructor(name) { this.name = name; } danger() { console.log('逃げる'); } } //継承クラス class SuperHero extends Human { constructor(name, ability) { super(name); this.ability = ability; } danger() { console.log('闘う'); } };
  24. 24. テンプレート文字列 ~ 文字列に式を含めることが可能 ~ //渡された引数の合計を求める関数 var firstName =‘太郎’; var lastName = ‘木村’; //文字列はバッククォート(`)で括ること console.log(`こんばんは${lastName + firstName} です`);
  25. 25. Spread 演算子 ~ 任意の数の引数を配列として取得 ~ //渡された引数の合計を求める関数 function sum (...nums) { return nums.reduce((a, b) => a + b); } //sum 関数の呼び出し console.log(sum(1,2,3,4,5));
  26. 26. アロー関数 ~function キーワードの短縮表記~ //関数の定義 var calc = function(x){return x * 2}; ↓ var calc = x=>{return x * 2}; もしくは var calc = x=>x * 2; //即時実行関数 (()=>alert( "Hello World;"))();
  27. 27. シンボル ~ プロパティ名に指定可能な一意な値を生成 ~ //シンボルを使用してプロパティの設定と読み出し var obj = {}; var sym1 = Symbol('foo'), sym2 = Symbol('foo'); Console.log(sym1 === sym2); //false obj[sym1] = ‘Served Data’; var objectSymbols = Object.getOwnPropertySymbols(obj); //シンボルを列挙 var length = objectSymbols.length; for (var i = 0; i < length; i++) { if (objectSymbols[i] === sym1) { console.log(obj[objectSymbols[i]]); //’Served Data’ }; }
  28. 28. 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; }
  29. 29. メディア • Media Capture and Stream • Web Audio API • WAV,Dolby オーディオ • HTTP Live Streaming (HLS) , Media Source Extensions (MSE)
  30. 30. 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);
  31. 31. 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); });
  32. 32. ネットワーク • HTTP/2 • meta リファラ • TLD サポート • XHR キャッシュ
  33. 33. セキュリティ • Web 暗号化 API の更新 • HTTP Strict Transport Security(HSTS) • Content Security Policy (CSP) 1.0
  34. 34. 開発基盤としての Microsoft Edge
  35. 35. ミドルウェアとしての Microsoft Edge ~ HTML+JavaScript 以外の開発 ~ • ActiveX • VBScript • Browser Helper Objects (BHO) • Vector Markup Language (VML) • DirectX Filters and Transitions • Flash • Acrobat(pdf) • JavaScript ベースの 新しい拡張モデル(予定) • Chrome、Firefox の プラグイン (予定) 廃止 有効
  36. 36. 開発基盤としての Edge エンジン ~ EdgeHTML.dll はさまざまなところで使用される ~ New default Windows 10 browser
  37. 37. ご提案、フィードバッグを 募集しています。 Internet Explorer Platform Suggestion Box! IE development discussions from MSDN forums Internet Explorer Beta Feedback
  38. 38. まとめ Windows 10 ES6 相互運用性
  39. 39. 参考 1/3 https://status.modern.ie/ http://dev.modern.ie/platform/status/ Internet Explorer のロードマップ Edge のロードマップ
  40. 40. 参考 2/3 https://msdn.microsoft.com/ja- jp/library/dn904191(v=vs.85).aspx Windows 10 版 Project Spartan 開発者向けガイド (Technical Preview) http://dev.modern.ie/platform/faq/ FAQ (Edge)
  41. 41. 参考 3/3 monoe’s blog bit.ly/monoe_blog

×