【レポート】HTML5✕Internet Explorer 〜IEを使ってどこまでモダンなWebへ突き進めるのか？〜に参加してきた

山田直樹

2013.08.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

そんな訳で、2013年8月1日、東京は品川にある日本マイクロソフト株式会社にてHTML5✕Internet Explorer 〜IEを使ってどこまでモダンなWebへ突き進めるのか？〜という勉強会が開催されたので、潜入してきました。

技術革新が遅れてやってくるエンタープライズシステム界隈も、ようやくHTML5時代に突入しようとしています、、が！開発者は未だにInternet Explorerで多くの悩みを抱えているのではないでしょうか？

(中略)

業務システムを良くするためには、IEのハックが必要なのです！

(中略)

このイベントでは、IEの持つポテンシャルを極限まで使いきって、周りのエンジニアの度肝を抜かせるようなIEハッカーになれるよう、MicrosoftMVPやMicrosoftエバンジェリストといった専門家を集め、ロードマップ・機能性・互換性問題・移行といったテーマについて、技術観点から解説してもらいたいと思います。

http://atnd.org/events/40529

主催は html5j えんぷら部というコミュニティ。国内最大規模の HTML コミュニティである html5j のサブグループです。エンタープライズ分野に特化した技術や情報を発信していくことを活動の主軸としており、なかなか他では見られなさそうな濃い内容のセッションが繰り広げられました。

なぜ、エンプラはInternetExplorerばかり使わなきゃいけないのか？もうウンザリと言いたいところだけど、実はIEって…

川田寛: @kawada_hiroshi1 | html5jえんぷら部部長

エンタープライズ系 Web システムといえば、大半が IE を動作対象に作られたものでしょう。会場内で「みなさんの作ってる Web アプリの推奨ブラウザは？」というアンケートを取ったところ、IE6 まで対象に含めているという方が結構な人数いました。Chrome という声は殆ど無かったです。コンシューマ向けと違い、エンタープライズ系システムは利用者が最初から明確になっているため、たいていは動作対象のブラウザを限定してしまうことが殆どです。

そもそも IE が流行った背景。WindowsXP は最も売れた Microsoft の OS です。同時にそこに標準ブラウザとして搭載されていた IE6 は瞬く間にシェアと伸ばし、市場を完全に独占しました。つまり IE6 が Web システムの標準プラットフォームとなった訳です。当然ながら僕たち作り手も標準プラットフォームに合わせたシステム開発をします。加えてサポート期間も他と比較して長いとなるとなおさらです。今と昔とでは状況が全く違っていたというわけです。

そんなエンタープライズ界隈で一番人気（？）のIE。2014年7月には Windows XP のサポートが終了することから、XP の標準ブラウザである IE6 の行く末が非常に注目されている昨今です。「Microsoft が公式にサポートを打ち切るんだから、もう IE6 は意識しなくて良いよねー」と話が上手いこと転がれば良いですが、顧客（※ユーザー）にとって既存システムは紛れもなく資産です。そうそう僕たちが期待するように物事はキレイに流れてくれません。Windows NT を導入してそこで無理やり動作させるとか、公式サポートが切れてもどこかのサードパーティに何らかのサポートをしてもらうといった力技を検討している企業だっているわけです。

その一方で IE は Windows のバージョンアップと共にどんどん進化していきます。つまり IE のバージョンの断片化が進んでいるというのが、いま目の前に置かれている状況なわけです。

やらなくては行けないこと、習得しなくてはいけないことは、無理やり切り捨てることだけではなく、IE を上手くハックするということなのです。

おわり

オープニングトークということで、セッションのボリュームはごく控えめで、以降のセッションに繋げるための位置づけという感じでした。

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

小山田晃浩: @yomotsu | 株式会社ピクセルグリッド

[slideshare id=24886427&doc=slide-130802234500-phpapp01]

新しいバージョンの IE と古いバージョンの IE が混在しているのが現状。一般的に公開されている Web サイトの場合だと、新しいバージョンでは動くけど古いバージョンでは動かないというのが大半です。コレとは逆に新しい方では動かないというのは、エンタープライズ向けといった外界から閉じられた環境で動作するシステムというのが主だったりします。

新しいバージョンで動かない理由というのは、主に以下の4つの原因が考えられます。

Quirks Mode（※互換モード）で実装している
IEの独自拡張を使っている
プラグインに頼っている
よくわからないけど動作保証出来ない

Quirks Mode について

仮に以下の様なスタイルシートがあったとします。

div {
    width: 300px;
    padding: 100px;
    border: 3px solid #000;
    background: #EEEEEE;
}

IE には Standards Mode と Quirks Mode と、それぞれ CSS の解釈が異なるモードが備わっており、右図のように全く違ったレイアウトでレンダリングされます。他のモダンブラウザ含む現行の IE は Standard Mode がデフォルトとなっていますが、IE6 といったレガシーブラウザは Quirks Mode と同等の出力が成されていました。widthの値に左右のpadding値を含めてしまうわけです。

Standards Mode と Quirks Mode のどちらでレンダリングされるかは HTML ファイル内の DOCTYPE 宣言で判断されます。ここを書き換えるだけでそれまで Quirks Mode でレンダリングされていたものが現行の IE では Standards Mode でレンダリングされる訳ですが、過去の遺産をいきなり新しく作り変えることは何かと困難なため、そこは上手く割りきって過去のモノは過去として対処し、これから新規で作るものに対しては、DOCTYPE 宣言をしっかり記述して Standards Mode で作れば良いという訳です。

IE 独自拡張

これまでに IE は他のブラウザには無い様々な機能を独自に開発してブラウザに実装して来ました。そもそも当時は Web 標準の技術そのものが貧弱でリッチ・インタラクティブとは程遠いユーザー体験しかなかったため、Microsoft が良かれと思ってこういった独自拡張を行なってきたという背景がありました。

しかし Web 標準の技術も月日を重ねるごとに次々と機能が実装され、現在では独自拡張に頼らなくても同等のユーザー体験を実現することが出来るようになっています。そのため、これから新しく作るモノに対しては HTML5 といった Web 標準の技術で実装することで、現行の IE だけでなくその他のモダンブラウザにも対応することが出来る訳です。

Quiks Mode と IE 独自拡張の延命

IE はバージョン毎に異なるレンダリングエンジンが存在するわけですが、一つのバージョンにつき一つのレンダリングエンジンというわけではなく、過去のものを含めた複数バージョンを備えています。つまり古い Web サイトを新しい Web ブラウザに対応させるには、この古いレンダリングエンジンを指定してあげれば良いということになります。

具体的な指定方法はいくつかありますが、最も手っ取り早いのは以下のように HTML ファイルにmetaタグ指定してあげることです。下記の例は IE7 のレンダリングエンジンで出力するように指定しています。

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <title>...<title>
</head>

これで HTML と CSS のレンダリング指定は OK なわけですが、JScript のエンジンは現行のものが適用されるという点で注意が必要とのことです。そのためJavaScript が新しい現行の IE でも問題なく動くかどうかは、以下の様な関数を使ってチェックし処理を分けるような対応が求められます。

// ブラウザのユーザーエージェントを取得
navigator.userAgent;

// 現在のレンダリングエンジンモードを取得
document.compatMode;

// ドキュメントモードを取得
document.documentMode    // ex) CSS1Compat

// 使用中のスクリプト エンジンのメジャー バージョン番号を取得
ScriptEngineMajorVersion()

JavaScript のエンジンは常に最新のものが適用されますが、ロジックの解釈やパース、関数においては古いバージョンのそれが適用されるようです。

これからのWebシステムをどう作るか

モダンな Web システムというとHTML5CSS3JavaScriptの組み合わせな訳ですが、ここで一番ウェイトの大きいのは JavaScript です。このグラフを見れば分かるように JavaScript の実行速度はここ数年で格段に向上しており、Microsoft の SkyDrive というサービスでは Office アプリがブラウザ上で実現出来るまでになってきています。他にも BingMap など、ほぼ標準技術だけで Web アプリケーションが実現できる時代になっているわけです。

そのような大規模サービスや仕様変更に強いサービスを作るにあたって気をつけるのは、この図のように Web サーバーはJSON形式のデータを出力することに特化し、ブラウザがそれを受け取って JavaScript を使って画面を構築するという構成にするということです。これによって単一の構成で複数のブラウザやデバイスといった環境に柔軟に対応することが出来るわけです。

JavaScript も様々なフレームワークが登場していますが、jQuery × BACKBONE.jsの組み合わせが合理的なのではないでしょうか。

IT管理者とIE10新しいIE

村地彰 : @hebikuzure | ブラウザー勉強会

[slideshare id=24839672&doc=ieanditpro20130801-130801090440-phpapp02]

言うまでもなく IE は年々進化の一途をたどっています。そこで気になるのが、古いバージョンの IE は一体いつまで使えるんだろうかというところでしょう。ざっとこちらのスライドの通り。IE6 はサポート終了まで1年を切っています。流石にもう無視してよいでしょう。IE7 は2017年4月とまだ3年以上あるので、どうにも微妙なところな訳ですが、ここで注目したいのはそのバージョンの IE もその時リリースされた OS に標準で実装されていたモノであり、サポート期間がリリースからおよそ10年間ときめられているところです。

Windows XP がリリースされたのは2001年ですが、ユーザー数があまりに多いという理由から2014年まで延長されたのは周知の通りかと思います。

そして IE の新しいバージョンがどれくらいの周期でリリースされているのかを纏めたのがこのスライド。どんどんその周期は短くなっているわけです。以前には考えられなかった事態です。ということは、現状の約10年というサポートライフサイクルに見直しが入る可能性も否定出来ないわけです。もしそうなったら大変です。それだけ IE バージョンの断片化が進み、あっちでは動くのにこっちでは動かないといった事案が頻発し、更にはバージョンが上がるたびにユーザー教育といったコストが発生して予算を圧迫するのではないかなど、企業の IT 管理者は不安要素で頭がパンク寸前になってしまうわけです。手遅れにならないうちに対策を立てる必要があります。

短期的対策1 | 互換モードを活用

コレに関しては、一つ前の小山田さんのセッションに類似する内容があったため、ここでの詳細なレポートは割愛します。

とはいえ、互換モードがいくら強力な機能とはいえ、決して万能というわけではありません。それでも動かないものはあるし、正しく表示されないものだってあります。そしてなによりも、Windows8 スタート画面にある IE には互換モードが存在しません。

短期的対策2 | 互換性検証を活用

Web における互換性の問題点と改善方法をハッキリ認識しておくことがとても大切です。セッション内でオススメされていたのがCompat Inspectorというツールでした。このスクリプトを Web ページ内ソースの先頭で読み込むと、互換性スコアが画面に表示されるようになります。

赤	レイアウト崩れ、操作不可といった致命的な問題
黄	致命的ではないが潜在する問題
青	互換性は無いが、これといった問題がない

とはいえ、既に稼働してしまっている Web サービスのソースにコレを直接埋め込むのは少々無茶があるため、その際は Fiddler というツールを使ってレスポンスに動的に挿入するのが良いとのことです。

Cod2012 Room T-1 | Slideshare

中長期的対策1 | ロックインを避ける

IE だけ動作保証、Chrome だけ動作保証といったある特定ベンダーのブラウザのみを動作環境と仮定することをベンダーロックイン、そして特定のバージョンのみを動作環境と仮定してそれ以外の保証をしないことをバージョンロックインといいます。単なるその場しのぎに過ぎないので、この先のメンテナンスや機能追加を考えるのなら決してするべきではありません。それはすなわち Web の本質に立ち返るということです。

Web の本質に立ち返る

Web アプリの本質は、開発や展開をネイティブアプリと比較してスピーディに実現できるところにあります。それはすなわち業務内容や業務環境の変化に迅速対応できることであり、業務の効率化につながることに他なりません。それがレガシーなブラウザといったものに縛られてしまうのは本末転倒ではないでしょうか。具体的な対策として、

Web Standards への準拠: Web 標準の技術が向上しているのだから、それを積極的に採用して独自拡張機能は避ける
UserAgent / BrowserVersion を固定したコードを作らない: 処理を分岐する際の判定条件としてこれらを用いるのは NG。クライアント側で改ざんが可能なため信ぴょう性に欠けるし、新バージョンが出てくる度に改修するハメになる
Hack でがなく Feature Detection: ブラウザのバージョンで判定するのではなく、対象となる機能を持っているかどうかで判定すること
些細な違いを気にしない: 全てのブラウザで寸分違わず同一の見た目を実現することにこだわってはいけない。ボタンという機能が満たせているのであれば外見が角丸状か否かなど問題ではないはず

そもそも IE の互換モードについてですが、これがいつまで継続されるかどうかについても疑問を持つべきです。なにしろ IE11 には互換表示というボタンが無いのですから。じきに IE6 と 7 のサポートは終了するわけですが、その後 IE6 / 7 への後方互換というのは維持されるのでしょうか…。

つまるところ、互換モードというのは一時的な対策に過ぎず、それによって対応が完了するというソリューションではありません。あくまでその場しのぎのモノであって、この間に Web 標準への対応を行うべきだということを示唆されているわけです。

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

内河恵 | 日本マイクロソフト株式会社

IE11 の概要

2013年8月現在、ベータ版として公開されている IE11 の様々な特徴を紹介して頂きました。セッションのスライドがSurface上で行われたためか、UI もタブレット版となっていました。

機能もタブレットに特化したものが見受けられ、その一例としてお気に入りサイトを Modern UI のホーム画面にピン留めすることが出来るようになっています。これらサイトからの最新情報をRSSで取得することが出来るので、ピン留めされたタイルにその結果を動的に反映させることができる特徴があります。

有効タブ数は100と上限がありますが、非表示になっているタブにはリソースが割り当てられないため、沢山並べていてもパフォーマンスへの影響は無いということです。このように IE11 はパフォーマンスへの配慮に非常に注力されており、セッションではそのベンチマーク結果を紹介していたのがヒジョーに興味深かったです。それがこの Penguin Mark　というテストツール。主に CSS3 や JavaScript の処理速度を計測するモノですが、IE11 とChrome とで実行した際の結果がこのようになっていました（※左半分が IE11 で、右半分が Chrome ）。スゲーや IE！(´・∀・｀)
このツールは単なるWebサービスとして一般公開されているので、誰でもどの端末からでもアクセスすることが出来ます。

その他にも以下のような新機能が実装されています。

Web GL のサポート
検索ワードの学習機能（※検索エンジンのサジェストとは別に過去の検索履歴からの候補も同時に表示される）
電話番号の文字列を自動認識し、タップすると Skype が起動する
新規ウィンドウを立ち上げると両方のウィンドウを横並びにした状態で表示される（※地味だけど個人的には結構うれしい機能）

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

IE9 開発の頃より Microsoft は Web 標準への取り組みを積極的に行うようになりました。具体的には W3C や ECMA といった団体と共同で企画策定をするといったところです。これまでに合計で 8614 のテストケースを作成・提出しています。

modern.IE

いわゆる Web サイトの検証ウィザードというヤツで、検証のための仮想環境や検証に引っかかった箇所の改善方法を簡易的に提示するといったベストプラクティスが機能として提供されています。

modern.IE

Microsoft はこれまでに世界主要 5000 サイトを modern.IE で検証しており、その結果として以下の様な統計が算出されました。

標準モードで描画される	90%
フレームワークやライブラリが古い	40％
ベンダープレフィクスが正しく適用されていない	20%
レスポンシブデザインを活用している	14%
ブラウザのバージョン判定をしている	57%

IE が業務システムで受け入れられている理由

IE の業務システムでの利用率は、規定ブラウザ及びインストール台数共に最大です。なぜ IE はここまで業務システムで受け入れらているのでしょうか。コレに対し Microsoft は充実したサポート体制にあるとの見解を示しました。Microsoft はコンシューマ向けにはメール、電話、フォーラムといった問い合わせ窓口を用意しています。エンタープライズ向けには有償ですがコンサルティングというサービスを展開しています。確かにこれだけのサポートを実施しているベンダーは他には無いかもしれません。英語だけならまだしも多言語対応出来ているというのだから、エンタープライズにとっては魅力的でしょう。

ブラウザを更新する必要性

一昔前と違い、今はPCだけでなくモバイル端末を含めたマルチデバイスな世の中になっています。 HTML5 をはじめとしたWeb標準技術の進化に伴い、いまの Web はクロスデバイス・クロスプラットフォームを想定した作りにしなくてはなりません。これはエンタープライズシステムにおいても同様で、むしろ業務の効率化のためには社内外どこからでもシステムにアクセス出来るようにすることが重要なわけです。PCからは見れるけど外からモバイル端末でアクセスすると動作しないようではイケてません。つまり業務システムにおいても常にブラウザのアップデートを意識するべきという訳です。

バグ報告

IE は何らかの理由で強制終了した際、その時の状況を Microsoft に報告するためのダイアログが表示されますが、以下のサイトにアクセスすることで IE のエンジニアチームに直越バグ報告をすることが出来ます。

http://connect.microsoft.com/ie

勉強会を終えて

個人的な感想ですが、エンタープライズシステムとIEという顧客の事情を背景にしたテーマの勉強会だっただけに、プロジェクト・リーダーといった層や大企業のシステム管理部にお勤めの方々などのほうが収穫の多い内容だった気がします。僕たち IT 技術者は日頃から Web ブラウザをはじめ Web に関する様々な技術に触れていますから、標準化がもたらすメリットとレガシー環境が引き起こす深刻な問題というのを嫌というほど分かっています。確かにセッションの多くがテクノロジーに特化した内容だったため、聞く人によっては小難しくて理解にしにくいという箇所もあったと思います。ですがいくら IT 技術者が「レガシー環境は色々とデメリットが多いんだよ。最新環境の方が結果的に良いソリューションに直結するよ」と訴えても、聞く人が同じIT技術者ばかりでは、世のエンタープライズシステムをモダンなスタイルに押し上げるのが難しいのではと思うところがありました。

懇親会で何人かとお話する機会がありましたが、「営業職の方やシステム管理者向けの勉強会ってなかなか無いし、あったとしてもあまり来てくれないんだよねー」という話が出てきたので、色々と思うところがあった訳です。

そんな訳で、このいい加減なレポートが一人でも多くの方の目に留まっていただけたら、僕としては御の字なわけでして、えぇ。