Build Insider OFFLINE 第3回 ― Microsoft Edge スペシャル

提供: IT勉強会・セミナーまとめWiki
移動: 案内検索
開催日 2015/6/13
開催情報
タグ Microsoft Edge
登壇者 春日井良隆さん, 物江修さん, 尾崎義尚さん
セッション資料
  • Bad Request
  • セッション動画
    ブログなど


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

    日本マイクロソフトの春日井良隆さんのセッションでした。

    IEのサポートライフサイクルの変更

    • OSのサポートライフサイクルに準拠→各OSの最新版のIEのみ
    • 変更理由
      • セキュリティ対策
        • 対応すべきブラウザを減らして迅速にセキュリティホールに対応する
      • 開発、検証の軽減
      • 最新技術への対応 

    Webフォント

    • OSに依存しないデザインをユーザーに届けられる
    • OSのフォントより描画が遅いのではないかと懸念する人がいるが、体感ではほとんど差がないレベルの速度

    WebRTC

    OpenTok | WebRTC Platform for Video, Voice and Messaging from TokBox

    • ブラウザでチャットができる
    • IEではプラグインが必要
      • MSとしてはそのような状況をなくしたい→Edgeの登場

    後方互換性

    • Webサイト提供側はmetaタグX-UA-Compatibleでドキュメントモードを指定できる
    • エンタープライズモード
      • IE11上でIE8をエミュレーションする仕組み
      • グループポリシーでどのサイトを対象とするかを指定できる

    Evergreen

    • 常に最新の状態のものを提供する

    相互運用性

    • IE6時代のような独自実装はやらない

    Pointer Events

    • カーソル、指、ペンの入力
    • W3Cに提供し、標準化した
    • Chromeに実装されることになった

    Asm.js

    • Edgeに搭載される

    ECMA Script6

    • Edgeでの対応を進める

    Windows10のブラウザ

    • IE、Edge両方が全エディションに搭載される
    • ブラウザの使い分け
      • IE:後方互換性
      • Edge:相互運用性、モダンなWebサイト
      • Windows 10のデフォルトのブラウザはEdge

    リソース

    Developer Resources : MSEdge Dev

    • 各種デモ
      • Web3D(フライトシミュレータ)
      • DORBYオーディオ
    • Webカメラでスクリーンキャプチャ
    • Platform Status
      • APIの実装状況がわかる
    • Site Scan
      • 適切なマークアップになっているか検証できる
    • Browser Screenshot
      • リモートで多様な環境でのレンダリングのスクリーンショットがとれる

    Edgeの機能

    • Webサイトにメモ書きして共有可能
    • リーディングビュー(コンテンツを読むことに特化したレンダリング)
    • FirefoxとChromeのExtensionを使える
    • ActiveXはサポートされない
      • Silverlightは動作しない
    • FlashとPDFの機能はEdgeに内包される

    その他の情報

    • Docs ホーム - Docs
      • スライドシェアのようなドキュメントを公開するサイト(Beta)


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

    日本マイクロソフトの物江修さんのセッションでした。

    ブラウザの機能実装確認サイト

    Experimetal feautresの有効化

    • アドレスバーに以下を入力 about:flags

    Edgeは既定ではlocalhostにアクセスできない

    • コマンドプロンプトでコマンドを入力する必要がある

    新機能

    ARIAランドマーク

    • アクセシビリティの向上

    Game Pad API

    • Xinput対応のゲームパッドが必要
    • ループを回し続けないと入力を検出できないので注意
    • デモのあるページ

    合成イベント

    • イベントを作成して発行する
      • 1操作で複数のDOMイベントを発生させたい時に使える

    XPath APIのサポート

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

    • CSS条件付き規則
    • CSSFilter
      • セピア、モノクロなどを適用可能に
    • CSS Preserved-3D
      • 子要素を3D空間で扱えるようになる
    • img srcset
      • ピクセル密度(DPI)により画像のソースを変更

    JavaScript

    • ECMAScript6
      • class定義、継承
    • テンプレート文字列
      • 文字列中にJavaScriptの変数を埋め込める(文字列をシングルクォートではなくバッククォートで囲む必要がある)
    • Spread演算子
      • 任意の数の引数を配列として取得
    • アロー関数
      • 匿名関数を簡便に書ける
    • シンボル
    • ASM.js
      • JavaScriptを事前コンパイルして高速に動作させる
        • 'use asm'

    メディア

    • Media Capture and Stream
      • カメラやマイクにアクセスする機能
    • Web Audio API
      • 音声を処理・合成する(エフェクトをかける)機能

    ネットワーク

    • HTTP2
      • SPDYは削除された
    • metaリファラ
    • TLDサポート
    • XHRキャッシュ
      • CORSが有効なXMLHttpRequest操作によってダウンロードされたリソースを、直接ダウンロードされた場合と同じようにキャッシュする

    開発基盤としてのMicrosoft Edge


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

    Microsoft MVPの尾崎義尚さんのセッションでした。

    DOM Explorer

    • LESS、SASSをサポート

    デバッガー

    • 整形出力
    • マイコードのみをデバッグする
    • TypeScrit、CoffeeScriptのデバッグが可能(ソースマップを使用)
    • 参照しているソースを検索
    • 定義に移動
    • トレースポイント
      • 処理を止めずにコンソールに出力
    • 将来実装予定
      • 実行状態を保持

    ネットワーク

    • 要約と詳細タブに分かれていたものが1つになった

    パフォーマンス

    • 「UIの応答」と「プロファイラー」が統合された

    オープンソースのツール

    • IE Diagnostics Adapter
    Microsoft/IEDiagnosticsAdapter · GitHub
    Chromeの開発者ツールを使って、IEで表示したページのデバッグができる