for developer、microsoft edge とinternet explorer で新しくサポートされるapi
TRANSCRIPT
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 Release‐ プレビュー版に実装済
• In Development‐ 開発中
Experimental features の有効化～ Preview 版 Edge に用意されている機能を使用可能に～
アドレスバーに以下を入力
about:flags
Edge からの localhost への接続許可～ループバックの有効化が必要～
• Edge は既定で localhost アドレスに接続できない• コマンドプロンプトにてコマンドを実行
CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy
開発者から見た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="navigation">...<form role="search">...
</form></nav>
WAI-ARIAWAI (Web Accessibility Initiative)
ARIA(Accessible Rich Internet Applications)
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 対応のゲームパッドが必要
合成イベント(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);
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>
グラフィックスとレイアウト• CSS 条件付き規則
• CSS グラデーション ミッドポイント
• フィルター効果
• Flexbox の更新
• Media Queries Level4
• Preserve-3D
• SVG の更新
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 エレメント設定
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;
}
<img srcset>～解像度の異なる複数の画像をソースとして指定～
//ピクセル密度により画像のソースを変更<img src="image/msEdge.jpg"
srcset=“image/msEdge.jpg, image/msEdge_x2.jpg 2x, image/msEdge_x4.jpg 4x" />
JavaScript• ES6 : Class, Promise, Object Literal 拡張, WeakSet,
組み込み関数: (Math, Number, Object, String),
Template String, Spread 演算子
• アロー関数
• シンボル
• プロキシ
• Iterators
• ASM.js
JS
クラス～継承やメソッドのオーバーライドなども可能～
//基底クラス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('闘う');}
};
テンプレート文字列～ 文字列に式を含めることが可能 ～
//渡された引数の合計を求める関数var firstName =‘太郎’;var lastName = ‘木村’;
//文字列はバッククォート(`)で括ることconsole.log(`こんばんは${lastName + firstName} です`);
Spread 演算子～ 任意の数の引数を配列として取得 ～
//渡された引数の合計を求める関数function sum (...nums) {
return nums.reduce((a, b) => a + b);}
//sum 関数の呼び出しconsole.log(sum(1,2,3,4,5));
アロー関数～function キーワードの短縮表記～
//関数の定義var calc = function(x){return x * 2};
↓var calc = x=>{return x * 2};
もしくはvar calc = x=>x * 2;
//即時実行関数(()=>alert( "Hello World;"))();
シンボル～ プロパティ名に指定可能な一意な値を生成 ～
//シンボルを使用してプロパティの設定と読み出しvar obj = {};var sym1 = Symbol('foo'), sym2 = Symbol('foo');Console.log(sym1 === sym2); //falseobj[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’
};}
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;
}
メディア
• Media Capture and Stream
• Web Audio API
• WAV,Dolby オーディオ
• HTTP Live Streaming (HLS) ,
Media Source Extensions (MSE)
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);
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);
});
ネットワーク
• 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 Language (VML)
• DirectX Filters and Transitions
• Flash
• Acrobat(pdf)• JavaScript ベースの新しい拡張モデル(予定)
• Chrome、Firefox のプラグイン (予定)
廃止 有効
開発基盤としての Edge エンジン～ EdgeHTML.dll はさまざまなところで使用される ～
New default Windows 10 browser
ご提案、フィードバッグを募集しています。
Internet Explorer Platform Suggestion Box!
IE development discussions from MSDN forums
Internet Explorer Beta Feedback
まとめ
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 Preview)
http://dev.modern.ie/platform/faq/
FAQ (Edge)
参考 3/3
monoe’s blogbit.ly/monoe_blog
