for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
•
17 likes•13,001 views
<htmlday>Build Insider のセッションで使用したスライドを公開させていただきました。
![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 対応の
ゲームパッドが必要](https://image.slidesharecdn.com/newbrowserapi-150613102452-lva1-app6892/85/for-Developer-Microsoft-Edge-Internet-Explorer-API-15-320.jpg)
![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>](https://image.slidesharecdn.com/newbrowserapi-150613102452-lva1-app6892/85/for-Developer-Microsoft-Edge-Internet-Explorer-API-17-320.jpg)
![シンボル
～ プロパティ名に指定可能な一意な値を生成 ～
//シンボルを使用してプロパティの設定と読み出し
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’
};
}](https://image.slidesharecdn.com/newbrowserapi-150613102452-lva1-app6892/85/for-Developer-Microsoft-Edge-Internet-Explorer-API-27-320.jpg)
![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;
}](https://image.slidesharecdn.com/newbrowserapi-150613102452-lva1-app6892/85/for-Developer-Microsoft-Edge-Internet-Explorer-API-28-320.jpg)
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
- 1. for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI 日本マイクロソフト株式会社 デベロッパーエバンジェリズム統括本部 物江 修
- 2. アジェンダ •Windows 10 の Web ブラウザー •新しくサポートされる HTML5 関連 API •開発基盤としての Microsoft Edge
- 3. Windows 10 の Web ブラウザー
- 4. Windows 10 の Web ブラウザー ～ 2 つの Web ブラウザーが搭載 ～ Windows 10 Internet Explorer 11 Edge
- 5. 2 つのブラウザーの方向性 ～新機能のサポートと後方互換性の確保～ • 既定の Web ブラウザー • Universal Windows Platform の基盤 • 絶え間ないアップデート • 後方互換目的 • ゆるやかなアップデート
- 8. 機能実装状況 2/2 ～ステータスがフィルタ可能～ • Not Currently Planned ‐ 現状予定なし • Deprecated ‐ サポートしない • Under Consideration ‐ 検討中 • Preview Release ‐ プレビュー版に実装済 • In Development ‐ 開発中
- 9. Experimental features の有効化 ～ Preview 版 Edge に用意されている機能を使用可能に～ アドレスバーに以下を入力 about:flags
- 10. Edge からの localhost への接続許可 ～ループバックの有効化が必要～ • Edge は既定で localhost アドレスに接続できない • コマンドプロンプトにてコマンドを実行 CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy
- 12. Microsoft Edge の新機能 JS DOM グラフィックス JavaScript セキュリティネットワークメディア
- 13. DOM (Document Object Model) 関連 DOM • ARIA ランドマーク • Game パッド API • 合成イベント • XPath API (DOM Level 3)
- 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. 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. 合成イベント(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. 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. グラフィックスとレイアウト • CSS 条件付き規則 • CSS グラデーション ミッドポイント • フィルター効果 • Flexbox の更新 • Media Queries Level4 • Preserve-3D • SVG の更新
- 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. 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. <img srcset> ～解像度の異なる複数の画像をソースとして指定～ //ピクセル密度により画像のソースを変更 <img src="image/msEdge.jpg" srcset=“image/msEdge.jpg, image/msEdge_x2.jpg 2x, image/msEdge_x4.jpg 4x" />
- 22. JavaScript • ES6 : Class, Promise, Object Literal 拡張, WeakSet, 組み込み関数: (Math, Number, Object, String), Template String, Spread 演算子 • アロー関数 • シンボル • プロキシ • Iterators • ASM.js JS
- 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. テンプレート文字列 ～ 文字列に式を含めることが可能 ～ //渡された引数の合計を求める関数 var firstName =‘太郎’; var lastName = ‘木村’; //文字列はバッククォート(`)で括ること console.log(`こんばんは${lastName + firstName} です`);
- 25. Spread 演算子 ～ 任意の数の引数を配列として取得 ～ //渡された引数の合計を求める関数 function sum (...nums) { return nums.reduce((a, b) => a + b); } //sum 関数の呼び出し console.log(sum(1,2,3,4,5));
- 26. アロー関数 ～function キーワードの短縮表記～ //関数の定義 var calc = function(x){return x * 2}; ↓ var calc = x=>{return x * 2}; もしくは var calc = x=>x * 2; //即時実行関数 (()=>alert( "Hello World;"))();
- 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. 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. メディア • Media Capture and Stream • Web Audio API • WAV,Dolby オーディオ • HTTP Live Streaming (HLS) , Media Source Extensions (MSE)
- 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. 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. ネットワーク • HTTP/2 • meta リファラ • TLD サポート • XHR キャッシュ
- 33. セキュリティ • Web 暗号化 API の更新 • HTTP Strict Transport Security(HSTS) • Content Security Policy (CSP) 1.0
- 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. 開発基盤としての Edge エンジン ～ EdgeHTML.dll はさまざまなところで使用される ～ New default Windows 10 browser
- 37. ご提案、フィードバッグを 募集しています。 Internet Explorer Platform Suggestion Box! IE development discussions from MSDN forums Internet Explorer Beta Feedback
- 39. 参考 1/3 https://status.modern.ie/ http://dev.modern.ie/platform/status/ Internet Explorer のロードマップ Edge のロードマップ
- 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)