HTML5×Internet Explorer ～IEを使ってどこまでモダンなWebへ突き進めるのか？～

HTML5 IE

業務システムエンジニアのためのHTML5勉強会#03 HTML5×Internet Explorer ～IEを使ってどこまでモダンなWebへ突き進めるのか？～に行ってきました。

最初のセッションは互換性のための実用的な対策、次はMSの人も感心していたくらい超マニアックな内容、最後はMSの人によるIE11の最新情報と、とにかく濃かったですｗ

CodeIQさんからどらやき頂きました。

f:id:yuji0316:20130801190309j:plain

いいね！を10,000件集めると会社で言ってしまったそうです。あと少しなので、いいね！しましょうｗ

新しいIEとJavaScriptで動かす最近のWebアプリケーション

ピクセルグリッド 小山田さん(@yomotsu)

新しいIEでこれまでのものが動かないときどうするか。

いろんなサイトで未対応となっている原因として

  • Quirks Mode(後方互換モード)で実装している
  • IE独自拡張を使っている
  • プラグインを使っている
  • 保証できないから未対応にしている

Quirks Modeで実装している

Standard ModeとQuirks ModeでCSSの解釈が異なるためデザインが崩れる。
DOCTYPEでどちらを使うか選べる。
これから使うものはStandard Modeにしておいた方がいい。

IE独自拡張を使っている

昔はブラウザでできないからプラグインがいろいろと存在していたが、今は標準技術になっているのでそれを使う。

  • ActiveXObject -> JavaScript
  • VBScript -> JavaScript
  • DataBinding -> Data属性
  • VMS -> SVG

プラグインを使っている

古いIEのモードで動くように設定する。
方法はいろいろあるが、metaタグで指定するのが簡単。
古いIEをほぼ再現できる。

これからのWebシステム構築

IE7はJavaScriptの動作がすごい遅かったが、今はかなり早くなっている。
ほぼ標準技術だけで、プラグインに頼らなくてもアプリケーションが作れる。

IT管理者と新しいIE

シー・ピー・エス 村地さん(@hebikuzure)
(以前 htmlday のHTML朝活会でご一緒させて頂きました。)

IEのアイコンはどんどんシンプルになっているが、実はIEのUIはどんどんシンプルになっていて、中のコンテンツが目立つようになっているから。

IEのEOL予定

  • IE6 ： 2014/04/08
  • IE7 ： 2017/04/11
  • IE8,9 ： 2020/01/14
  • IE10,11 ： 2023/01/10

IE7は4年後だが、もしも今4年後のシステムを作っているのであればサポート外にすることも考えられる。

各バージョンのリリース間隔

  • 6->7 : 4 year 10 month
  • 7->8 : 2 year 8 month
  • 8->9 : 1 year 9 month
  • 9->10 : 1 year 7 month
  • 10->11 : ?(about 1 year)
  • 11->12 : ?(shorter than 1 year??)

リリースがどんどん早くなっている。
IEのサポートサイクル(10年)の見直しもあるかも。。。

Windows/IE のバージョン統一がしにくくなる？
バージョン間の動作違いが拡大しないか。
ユーザー教育・ユーザーサポートコストが増大しないか。

n-1ポリシー ： 最新版と1つ前までしかサポートしません。
Office365は n-2 サポートなので、Office2007はまだ使われているがサポート外。

どう対策するのか

短期的

■互換モードを活用する。

エミュレートされるもの

  • レンダリング
  • JavaScript
  • DOMの構造
  • CSS
  • User Agent String(互換モードであることはわかる)

互換モード表示方法

  • イントラネットゾーンのサイトは既定で互換モード表示
    社内システムはこのおかげで動いていることもある。
  • ユーザーが互換表示ボタンをクリック(アドレスバーの中にある。IE11では無くなった)
  • サーバーレスポンスで互換表示を指定(HTTPヘッダ)
    • X-UA-Compatible ヘッダー
    • 指定できる値
      • EmulatelEx(7, 8, 9, 10) (ex. IE=EmulateIE7)
      • 数字のみ (ex. IE=7)
      • edge (そのブラウザで表示できる最新バージョンで表示)
  • ページの meta タグで互換表示を指定
    サーバーレスポンスと同じ指定ができる
  • Microsoftが提供する互換表示リスト(CVリスト)で表示

互換モードでも動かないものもある。
Wiindows8のスタート画面のIEには互換モードが無い。

■互換性検証を活用する。

  • 既存ページの問題点を検証する
  • 新しいIEと非互換部分の改善方法を確認する
  • 改善作業スケジュール化する
  • Microsoftが提供している Compat Inspector を使うと簡単

Compat InspectorはJavaScriptで、ページの先頭で読み込む。
互換性スコアがページ内に表示される。
スコアをクリックすると詳細を確認できる。

HTMLを直接書き換えてもいいが、本番の画面を確認するならFiddlerを使ってレスポンスに挿入するといい。
参考：http://www.slideshare.net/hebikuzure/cod2012-room-t1

中長期的

■ロックインを避ける

  • ベンダーロックイン
    • 標準化されていない技術は避ける
    • User Agent/Browser Versionを固定したコードを作らない
    • HackではなくFeature Detection
    • 些細な違いを気にしない
  • バージョンロックイン

■Webの本質に立ち返る

  • クライアントでのインストール
  • サーバーだけで改修が完結する
  • ネットワークに繋がればすぐ利用できる

本来はWebアプリケーションはこういうものだったはずだが、特定バージョンしか動かないとかはおかしい。
柔軟な対応やスピーディーな開発がWeb

後方互換はいつまで維持されるのか

IE11で互換表示ボタンが無くなったのは、MSからの以下のメッセージではないか。

  • 互換表示で時間を買う
  • 互換表示で対応完了ではない
  • 標準準拠に対応させるための時間稼ぎ
  • MSはバージョンアップについて次のステップに進む

だから、IEは業務システムで使われている。いままでもこれからも

マイクロソフト 内河さん

IE11の概要

  • IE11は早い
    TestDriveで検索してPenguinMarkでChromeと比べると全然違う。
    PenguinMark：http://ie.microsoft.com/testdrive/Performance/PenguinMark/
  • タブレット操作を意識したデザイン変更
  • タブの切り替えが早い
  • 家のPCで途中まで見ていたサイトをタブレットからも見られる
  • 標準機能への準拠
  • タブを並べて見比べたりもできる
  • 電話番号を自動認識し、クリックするとSkypeで電話できる

Web標準の取り組みと modern.IE

HTML5、CSS3、SVG、ES6
仕様通りに書けばほとんど動作する。

modern.IE

http://modern.ie/

  • 検証ウィザード
  • 検証のための仮想環境
  • ベストプラクティス

サイト検証だけではなく、改善方法の提案もしてくれる。
クロスブラウザーテストが3ヶ月無料で利用でき、様々なブラウザでどのように表示されるのかを確認できる。

後方互換性

IEの業務システムでの利用率

  • 既定のブラウザー
  • インストール台数

共に最大。
そのため、使い続けて頂くには互換性は重要。

充実したサポート体制。
他のブラウザでは、問題が起きても文句を言う先が無い。

ブラウザ更新の必要性

  • コンテンツが進化しているので、ブラウザーも進化が必要
  • 業務システムでもアップデートを意識
  • セキュリティの面でも必要