Skip to content

Instantly share code, notes, and snippets.

@matori
Last active September 10, 2015 13:35
Show Gist options
  • Save matori/f4ce8a129afec0acdde8 to your computer and use it in GitHub Desktop.
Save matori/f4ce8a129afec0acdde8 to your computer and use it in GitHub Desktop.
2015-06-13 「Build Insider OFFLINE 第3回 ― Microsoft Edge スペシャル」のメモ

マイクロソフトの Web ブラウザの今までとこれから ~くるよ!Microsoft Edge !!~

春日井 良隆(日本マイクロソフト株式会社 デベロッパー エバンジェリズム統括本部 エバンジェリスト)

Windows 10 には Internet Explorer と新しい Web ブラウザ「Microsoft Edge」が搭載されることが明らかになっています。本セッションでは、Microsoft Edge を発表するに至った市場の動向、既存の Web サイトや Web システムとの互換性を踏まえながら、マイクロソフトが考える今後の Web ブラウザについてお伝えします。

セッションメモ

今まで

  • Legacy Web
  • IE 8 まで

これから

  • Modern Web
  • IE 9 から
  • 次世代 Web 標準への対応
  • Chakra はスクラッチで作った
  • Edge にも引き継ぐ
  • 過去のバージョン、他のブラウザーとの相互運用性
  • IE は IE 11 が最後
  • よほどの圧力がない限りは 12 は出ない(圧力がないわけではない)

IE サポートポリシーの変更(2016年1月から)

  • 「動作する OS のライフサイクルに準拠」だった
  • 「各 OS の最新の IE のみに対応」に変更される
  • 2015年冬にはスマートフォンからのインターネット利用が PC を超える可能性
  • インターネット利用のデバイスのベンダーはシェアを分け合っている
  • スマートフォン登場から顕著(その前は MS がほとんど)
  • BYOD - Bring Your Own Device
  • 個人所有デバイスを社内で利用する
  • 「iPhone 6 とアップルウォッチ買って使ってます」

背景

セキュリティ対策
  • 脆弱性の発見からネットワーク犯罪に迅速に対応する
開発・検証の軽減
  • 開発者の負担を減らしたい
最新技術への対応
  • Web 標準への準拠
  • 新しい API の利用
  • なるべく早く新しい技術を使いたいというニーズへの対応
  • TypeSquare を使ったウェブフォントの例
  • DeLonghi で使ってるウェブフォントの例
  • WebRTC の例
  • TokBox を使った例
  • 「MS も Google も Apple も好きです」
  • IE だとプラグイン入れろと言われる
  • MS としては、こういう状況をなくしたい

後方互換性

  • Trident に互換性モードが搭載されてのは IE 6
  • Strict モードと Quirks モード
  • IE 8: Quirks, IE 7 互換モード, 標準モード
  • IE 11 には8つの互換性機能がある
  • F12 ツールのドキュメントモードで変更できる
  • Web 制作者は X-UA-Compatible メタタグで指定できる
  • IE 11 エンタープライズモード
  • IE 11 上で IE 8 をエミュレートする仕組み
  • グループポリシーまたはレジストリで管理
  • Enterprise Mode Site List Manager による XML 作成の説明
  • ドキュメントモードのフローチャートが公開されている

Edge ではどうなるの

  • Evergreen 常にフレッシュ
  • 相互運用性
  • Web 標準の使用、他のブラウザーの更新内容、相互に運用する挙動にあわせる
  • そういう理由もあってユーザーエージェントは全部入り
  • Pointer Events の話
  • asm.js と Chakra の話
  • ECMAScript 6 の話
  • ES 6 対応頑張っている
  • Windows 10 はもうすぐ出る
  • Win 10 には Edge と IE 11 が全てのエディションに搭載されている(モバイルは未定)
  • mshtml.dll / edgehtml.dll の両方
  • 22万行削除して30万行追加したやつの話
  • IE はイントラなどでの使用を想定
  • Edge は通常利用向け
  • Windows 10 の初期デフォルトブラウザーは MS Edge
  • 当初は Edge に Trident を積む予定だったが、結局分離された
  • Edge Dev の紹介
  • Edge が対応した API のデモとか
  • Edge Dev ツール紹介

マイクロソフトのサービス

Edge の機能

  • Web ノート
  • ウェブページにペイントしたりコメント入れて、共有できる
  • スクリーンショット撮影できる
  • サイト開発のレビュー時などに便利
  • リーディングビュー
  • セキュア
  • 新しい拡張機能モデル
  • Edge ではサポートされない機能(Trident にはあったやつ)
  • Flash / PDF は Edge の機能の一部になった(オフにもできる)
  • ActiveX はないぞ!
  • 春日井さんは Edge のロゴかっこよくないと思っているらしい

Windows 10 からの今までとこれから

  • IE 11 まで
  • Modern = Edge

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

物江 修(日本マイクロソフト株式会社 デベロッパー エバンジェリズム統括本部 Webエバンジェリスト)

Windows 10 に搭載される新しい Web ブラウザーMicrosoft Edge と Internet Explorer について、新しくサポートされる HTML5 関連の API を開発者視点で紹介します。

セッションメモ

  • Edge は絶え間なくアップデートされる
  • Windows 10 の IE 11 は機能が追加されている
  • Edge には about:flags がある
  • Edge は既定で localhost アドレスに接続できない
  • コマンド実行しないといけない

新機能について

DOM

  • ARIA ランドマーク
  • Game Pad API
  • XInput に対応しているものゲームパッドが動く
  • ゲームパッドは操作した段階で検出される
  • requestAnimationFrame でやるといい
  • 合成イベント (DOM Event Constructors)
  • Xpath API
Game pad API
  • MSDN にサンプルへのリンクがある(Github に置いてある)
  • 操作しないと取得できないのが分かる
  • WebGL + Game Pad API で作られたゲームのデモ

グラフィックスとレイアウト

  • @supports
  • CSS グラデーションミッドポイント
  • フィルター
  • Flexbox アップデート
    • min-height: auto
  • Media Queries Level 4
  • transform-style: preserve-3d
  • SVG アップデート
  • srcset
  • SVG foreignObject 要素にフィルターかけて iframe でページを読み込むデモ

JavaScript

  • ES6
  • クラス
  • テンプレート文字列
  • Spread 演算子
  • アロー関数
  • シンボル
  • ASM.js
    • Unity とか UNREAL で使われているので、これらのコードを吐き出して直接ブラウザーで実行できる

メディア

  • Media Capture and Stream
  • Web Audio API
  • WAV, Dolby Audio
  • HTTP Live Streaming (HLS),
    Media Source Extensions (MSE)
Media Capture and Stream
  • Edge は Firefox / Chrome とちょっと動作が違う
  • 独自実装ではなく、Edge は W3C の仕様に合わせているとのこと

ネットワーク

  • HTTP/2
  • meta リファラー
    • SSL サイトからのリファラーとか
  • TLD サポート
  • XHR キャッシュ

セキュリティー

  • Web 暗号化 API の更新
  • HTTP Strict Transport Security (HSTS)
  • Content Security Policy (CST) 1.0

開発基盤としての MicroSoft Edge

ミドルウェアとしての MS Edge

廃止
  • ActiveX
  • VBScript
  • BHO
  • VML
  • DirectX Filters and Transitions

開発基盤としての Edge エンジン

  • EdgeHTML.dll はさまざまなところで使用される
  • MS Edge, Web apps
  • Windwos 7, 8 の Edge はたぶん出ない(仕組み的に)
  • Edge Dev の FAQ に色々載ってるから見てね
  • 新機能はフィードバックの機能投票で投票してね

まとめ

  • Windows 10 は Edge で
  • IE 11 はあまり更新されないだろう

Windows 10 時代の Web 開発者デバッグ手法

尾崎 義尚(Microsoft MVP for Internet Explorer、株式会社ネクストスケープ)

Microsoft EdgeのF12開発者ツールを使ったパフォーマンス検証手法やデバッグ手法だけでなく、オープンに舵を切ったマイクロソフトが提供するデバッグツールや、開発者ツールの今後についてもご紹介します。

セッションメモ

  • build 10130 時点のもの
  • IE 11 の開発者ツールはもう更新されない
  • F12 は他のブラウザーの開発ツールと80%は同じ機能
  • Edge F12 は Just my code, Track change 機能がある
  • localhost へのアクセスはコマンドから(将来的には about:flags から)
  • Less, Sass, TypeScript, CoffeeSCript デバッグ(sourcemap サポート)
  • デバッガーのトレースポイント
  • 「ブレイクしないブレイクポイント」
  • Time Travel Debugging (future)
    • 例外が発生したときに発生前の状態まで戻る
  • ネットワークはデフォルトで有効
  • メモリツールでスナップショット
  • Vorlon.js

時間なくてすごい駆け足で済まされた……。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment