Skip to content

Instantly share code, notes, and snippets.

@svjunic

svjunic/ms_edge.md

Last active October 23, 2015 08:27
Show Gist options
  • Save svjunic/3ffcba87187b257a5518 to your computer and use it in GitHub Desktop.
Save svjunic/3ffcba87187b257a5518 to your computer and use it in GitHub Desktop.
Download ZIP
マイクロソフトの新ブラウザ「Microsoft Edge」セミナー　メモ
Raw
ms_edge.md

Edgeじゃなくてもxxなら対応してなかった？という細かいツッコミは言わない 要約してる箇所多め。 Edge売り込みなので、若干都合のいい説明している箇所或いは将来的によくなると説明しているがあるように思うため、客観的な視点は必要。

マイクロソフトの新ブラウザ「Microsoft Edge」セミナー

Microsoft Edge 概要

Modern Webを提供するMicrosoft Edge

IE6〜IE11は、独自実装が多くChromeなどの他のモダンブラウザと動作が違うことが多かった。 Edgeは、他のモダンブラウザと同じ動作をすることを目指して、開発された。

ライフサイクル

IEサポートポリシーが変更されたため、ライフサイクルが変わる。 2016年1月12日より、各OS対応する最新版IE以外の古いIEのサポートが終了する。 以下は2016年1月12日以降でもサポートされるバージョン。

OS IEバージョン
Windows Vista IE9
windows 7 IE11
Windwos 8.1 IE11

従来のIEとEdgeの違い

WebFontやSVGなどの最新技術の使用が現実的になる。

レンダリングエンジンが違う

IEはTrident（MSHTML）だったが、EdgeからはEdge（EdgeHTML）になっている。

Edgeのいいところ

EdgeはChromeと同じように短期間にアップデートをかけていく形を採用するため、常に最新バージョンがインストールされるようになる。 後方互換性を考えなくていい、Evergreenバンザイ。 また、Web標準に準拠するように作られているので、Edgeで表示できればChromeやSafariなどのブラウザでも同等の表示になる。 （Windows10上の）様々なデバイスにも対応している。

Edgeのサポート範囲

独自タグや独自APIがごっそり削除されている。 代わりに、Webkitなどと同等のWeb標準が組み込まれている。

アドレスバーにabout:flagsを入力し、試験的に実装されている機能を使うことが可能

Microsoft Edgeでサポートされなくなる機能

  • ActiveX
  • attachEvent / removeEvent
  • Browser Helper Objects
  • currentStyle
  • Document Mode
  • Conditional Comments
  • VML
  • IE8 layout quirks
  • VBScript
  • DirectX Filters and Transitions

など

尚、FlashとPDFレンダリングはEdgeに組み込まれる形で、今後も使える。 EdgeのFlashのバージョンアップは、Windows Updateで展開される。

他のActiveX（拡張機能）はHTML5で実装ができるため、サポートされなくなった。

Microsoft Edge 技術概要

基準ブラウザーとMicrosoft Edge

Windows10を基準にする場合はEdgeを基準にしましょう

Edge基準にする理由

IEを基準にすると、今後のアップデートが適応されないなどの弊害が起きる。 他のモダンブラウザとの相互運用性が無くなる。 Windows10が無償アップデート期間であり、Windows10は標準がEdgeなので、今後もシェアが伸びることを予想している。

Edge対応

要約すると、「Edgeは独自実装を削除し、Web標準をほぼ準拠しているので、Edge対応すればChromeやSafari、Firefoxでも問題なく表示できるはず！なので、Edgeで開発してね！」ということでした。

Edge対応チェックツール

http://dev.modern.ie/tools/staticscsan/ githubからソースを入手してローカルでホストすることも可能。（https://github.com/MicrosoftEdge/static-code-scan）

相互運用性の高いWebページの制作

基準となるWebブラウザを選定して対応することになる

  • Acid3 に合格
  • ブラウザバージョンの範囲決定
  • サポートするデバイスを決定

（うちでは当たり前の話なのでスルーでおｋ）

コンテンツの機能実装

Edgeの実装状況がわかるサイト

どのページも有名どころなので改めて説明しない。

レガシーブラウザとの互換

プログレッシブエンハンスメントは余計なソース、対応が必要になるので、グレイスフルデグラレーションでの対応を行いましょう。 レスポンシブに対応するときもそちらのほうがうまくいく。

検証と対応の順番

Edge対応すれば、各モダンブラウザ・他のデバイスへの対応ができる。 そのあとでレガシーブラウザのチェックをすれば完璧ではないか。

レガシーブラウザとの機能互換

（言い過ぎ、或いは若干古い対応のような気がするのでスルーしても良い。）

機能互換技術
IEハックによる対応

非推奨。IE10からサポートしていない、余分なソースになる。 ※Conditional Commentsとか、条件付きコメントとか言われるものの話

CSSハック

非推奨。バグでたまたま表示されている状態なので、危険・かつ余分なソースが増えることになるため。

レンダリングモードの指定

不必要

↓こういうの

<meta http-equiv="X-UA-Compatible" content="IE=edge">

互換モードの指定も不要

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
で十分
Javascriptによるブラウザ検出

UAによるブラウザ判定・実装の判定は非推奨。 判定するなら、機能検出による処理分岐を推奨。 ブラウザがアップデートされ、新たに対応された時にUA判定だと対応できない時があるというのが一番大きい要員。 他に、UA偽装などがある。 modernizr（https://modernizr.com/）を使う対応でもよい。（余分なソースとは・・・。）

CSSのベンダープリフィックス

非推奨。余分なソースが増えるため。 （とはいえ、付けないと行けない場面があるよね・・・謎の発言）

開発作業の効率化

言い過ぎ、或いは若干古い対応のような気がするのでスルーしても良い。

記述量の削減

ライブラリやフレームワークを使って開発のコストを下げよう。 具体的には、htmlはデザインテンプレート、JSはライブラリ、フレームワーク、テンプレートエンジン、CSSはBootstarpなどを使いましょう！ （おそらくシステムインテグレータへのアドバイスで、Web屋に対しての発言ではない）

記述の効率化

htmlはmarkdown,haml、jsはcoffeescript,typescript、cssやscssやlessを使いましょう！ （おそらくシステムインテグレータへのアドバイスで、Web屋に対しての発言ではない）

プロジェクトの作成

パッケージマネージャ（npm,bower）、タスクランナー（Grunt，Broccoli、Gulp）、統合開発ツール（Yeoman）などを使いましょう。 VisualStudio 2015でサポートしています。（だから言ったのかな・・・）

開発ツールについて

VisualStudio 2015

フロントエンド向けで、開発環境が用意されていないプロジェクトには良さそう。 imgタグを右クリックでbase64に変換したり、coffeescriptをコンパイルしたりできる。

（無料のVisualStudio Codeは機能が少ない版で別物）

Windows 10 ブラウザー管理　EdgeとIEのいいとこ取りのススメ

内容が濃くなかったので要約。 Edgeにすると、社内システムの高速化ができる可能性があるとか、そういったお話。 他、規定ブラウザの変更方法などの案内などでした。

グループポリシーを変更することで、Edgeで閲覧時にIE11対応のサイトを表示する際に、IE11を別ウィンドウで立ち上げることが可能。 Enterprise Mode Site Listというものを使用して個別でも可能。 Silverlightを使ったシステムなどを使用する際は指定してくださいとのこと。

他、Windows10エンタープライズモードの変更点などのお知らせでした。

Edgeではオートメーションが使用できないことには注意が必要というはなしもあった。

Windows8.1などへの展開は全く考えていない。

所感

MS曰く、標準ブラウザと言われているブラウザは知識がない人が使い続ける可能性があるため、必ず検証してほしいとのこと。 でもその後、IE11とEdge両方テストが必要という発言があった。 テストの手間は増えそう。（というか、そろそろEdge検証も必ず検証に含めないといけないように思う。）

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