Internet Explorerのサポートポリシーの変更

まずは意外に知られていないIEのサポートポリシーからお話しましょう。
この原稿を執筆している2015年9月1日時点では「そのIEが動作するOSのライフサイクルに準拠する」これがIEのサポートの基本的な考え方です。
例えば、IE8はWindows VistaとWindows 7で動作しますが、Vistaで動作するIE8はVistaのサポートが終了する2017年4月に、7で動作するIE8は7のサポートが終了する2020年1月にサポートが終了します。

昨年の8月にこのサポートポリシーが「2016年1月12日以降は各OSの最新版のIEのみをサポートする」ことに変更されることが発表されました。
つまり、Windows 7 SP1では、最新版のIEであるIE11のみをサポートすることになります。
詳細は「Internet Explorer サポートポリシー変更の重要なお知らせ」をご覧ください。
今回、サポートポリシーの変更に踏み切ったのには3つの理由があります。

1.セキュリティ対策

インターネットを通じたセキュリティの脅威に対抗するために、マイクロソフトではIEの潜在的な脆弱性を日々、修正しています。しかし、提供当時の環境を前提として開発された古いバージョンのIEでは、定期的な更新プログラムの適用だけでは対応が難しいケースが現れるようになってきました。
NSS Labs によれば、悪意のあるソフトウェアに対する保護件数は、IE8では69%でしたが、IE11では99%以上になっています。Webブラジング環境を最新のIEにすることで、より安全かつ便利にインターネットをご利用いただけます。

2.開発や検証の負担軽減

現在のサポートポリシーでは、Windows 7ではIE8/9/10/11の4つのバージョンのIEをサポートしています。言い換えれば、WebサイトやWebサービスの提供者が動作環境としてWindows 7をご選択いただく場合は、これらのIEを前提としたWebの設計、開発をしなければなりません。また、提供開始後もこれらのIEでの動作検証が必要になります。
動作するIEを最新のIEのみに絞ることで、Webを提供する側の開発や検証に必要なリソースの負担が軽減されます。

3.最新技術への対応

Webの技術は日々、進化を遂げています。新たなAPIや要素が提案され、改良と検証を重ねて、やがて標準化団体の草案、勧告と進めば、開発者は早くその新しい技術を試してみたい、提供者は自社のサービス、サイトに早く取り込みたいと考えるでしょう。
HTML5 Experts.jpの読者のみなさんならこの気持ち、分かっていただけると信じています。

Microsoft Edgeリリースへ

IEのサポートポリシー変更の理由は、そのまま、マイクロソフトがMicrosoft Edgeという全く新しいWebブラウザを開発するに至った理由につながります。

IEのレンダリングエンジン「Trident」を搭載した最初のIEは、Netscape Communicator 4.01 日本語版の提供が始まった1997年に公開されたIE4でした。ほどなくして、HTML 4.0が勧告となり、2年後にはこの後、長く続くHTML 4.01がW3Cから勧告。
それから20年近くが経過した今、HTMLはHTML5が主流となり、さらにはWHATWGが進めるHTML Living Standardのように常に最新のHTML仕様をアップデートする流れが生まれたのは存じの通りです。

一方、HTML5では数多くのAPIが実装されたため、JavaScriptの重要度が飛躍的に高まりました。デバイスに目を転じてみても、IE4当時には存在していなかったスマートフォンやタブレットという新しいデバイスでWebを見る、Webを使う人はもはや珍しくありません。

従業員が個人的に所有しているスマートフォンを職場に持ち込み、それを業務に使用することを意味するBYOD –Bring Your Own Deviceが日本の企業社会で一般的になれば、社内Webシステムを抜本的に見直す必要性も出てくるでしょう。

ちなみにマイクロソフトではBYODが認められているので、私自身も個人的に所有しているiPhone 6をExchange Serverに接続して、メールやカレンダーを同期させています。
このような技術革新や市場の変化、日々アップデートされるWeb標準仕様、セキュリティの脅威に対応すべく、Tridentも更新を繰り返してきました。しかし、根本的に対応するためには、新しいWebブラウザが必要になると決断し、Microsoft Edgeの開発に踏み切りました。

Microsoft Edgeというブラウザ

Microsoft Edgeが最も大切にしているコンセプトは相互運用性、英語でいうところのInteroperabilityです。Google ChromeやApple Safari、Mozilla Firefoxとも相互に運用できるブラウザであること、一つのマークアップでPCはもちろん、スマートフォンやタブレットでも同じように描画され、動作すること、Microsoft Edgeはこの相互運用性を保つことを前提に開発されています。

その思想は、IEBlogの「Living on the edge – our next step in helping the web just work」でこのように示されています。

In cases where these changes necessarily differ from standards, we’re following through with standards bodies and other browsers to update specs and implementations to reflect the interoperable behavior.　－Web 標準から外れる変更に迫られたとき、我々はWeb標準の仕様、他のブラウザの更新内容、相互に運用する挙動に合わせる。

Microsoft Edgeのレンダリングエンジン「Edge」では、Tridentをベースとして、まず、ドキュメントモードやIE固有の機能を300以上削除しました。ソースコードに換算すると22万行のコードを削ったそうです。次に49の新機能や新しいAPIサポートを追加し、WebKitやBlink、Geckoとの相互運用性を目指して4,200以上の修正を行いました。

相互運用性はマイクロソフトのみで実現することはできません。W3CやECMA internationalのような標準化団体やほかのブラウザベンダーと協力体制は不可欠です。
例えばマイクロソフトが開発し、W3Cに提案、2015年2月にW3C勧告となったPointer Events APIはFirefox、Operaに続いて、Chromeが実装することが発表されています。
また、Mozillaが開発したJavaScriptのサブセット「Asm.js」はEdgeのJavaScriptエンジンである「Chakra」に載ることが明らかになっています。相互運用性を実現しようとする姿勢はMicrosoft Edgeのユーザーエージェントからも見て取ることができます。

Windows 10 32bit Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10162

Windows 10 64bit Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10162

最新のWeb技術への対応も積極的に進めています。Dolby AudioやGamepad API、HLSといったマルチメディア系のAPIからHTTP/2やHSTSなどのネットワーク系、CSSもRegionsやExclusionsなどがMicrosoft Edgeでサポートされました。

先頃、最終仕様となったECMAScript 2015（第6版）への対応状況も「JavaScript moves forward in Microsoft Edge with ECMAScript 6 and beyond」の中で明らかになりました。Microsoft EdgeやIEでの要素やAPIの対応状況はMicrosoft Edge | Dev (beta)の「Platform Statusをご覧ください。

このようなWebブラウザとしてのしっかりした土台の上にPCはもちろん、タブレットやスマートフォンでのユーザーエクスペリエンスを考慮してデザインされたシンプルなUIが実装されています。
お気に入り、リーディングリスト、履歴、ダウンロードを一元管理できる「ハブ」やユニバーサル Windows プラットフォーム アプリケーションとの「共有」などに、効率と応答性を重視したその新しいUIが感じられるはずです。
機能面でもペンやタッチ入力の操作性を活かしたノート機能が搭載されました。これらの新機能についてはMicrosoft Edge Webサイトで詳しくご確認いただけます。

Internet Explorerというブラウザ

相互運用性とともにマイクロソフトが大切にしているのが、Compatibility －後方互換性です。
過去に開発された旧いIEを前提に設計されたWebシステムとの後方互換性のために、Internet Explorerは引き続き提供されます。

後方互換性の重要な機能は、IEのバージョン毎のレンダリングルールを切り替える仕組み「ドキュメントモード」とIE11をIE8としてエミュレートする「エンタープライズモード」の2つです。これらの機能の使い方を含めたIE11への移行については弊社のエバンジェリストで、もう一人のエキスパートである物江が詳しく解説していますので、物江のブログ「準備は OK? サポート終了までに知っておきたい古い Internet Explorer 向けに作成された Web コンテンツの最新 Internet Explorer へのマイグレーション方法」をご覧ください。

また、旧バージョンのIEで動作しているWebシステムへのIE11の影響に関する調査を、数多くのコンサルティングやシステム インテグレーションを手がける野村総合研究所様に「」として公開いただいています。

Windows 10にはMicrosoft EdgeとInternet Explorer 11の2つのブラウザが搭載されます。それぞれのレンダリングエンジンは、IE11がTrident 、Microsoft EdgeがEdge と異なりますので、異なる2つのブラウザが搭載されているとお考え下さい。
Microsoft Edgeに実装されていないIEの機能はMicrosoft Edge Dev Blogの「A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent…」にまとめられています。

この中でもっとも気になるのはActiveXの非対応だと思います。EdgeレンダリングエンジンにはAdobe Flash PlayerとPDFレンダリングは内蔵されていますが、Microsoft Silverlightを含む、ブラウザ用のプラグインは動作しません。ActiveX非対応に踏み切った理由は相互運用性に欠けるためです。

1996年にWindowsのCOM/OLEをWebページに埋め込むために提供されたバイナリの拡張モデルであるActive XはWindows以外のOSでは動作しません。ActiveXを利用しているコンテンツやサービスを今後もWebで提供される場合はWeb標準技術を、Windows OSに限定で提供される場合はWindowsのアプリケーションへの移行をご検討ください。

Windows 10ではEdgeが規定のプログラムとして設定されていますが、他社のブラウザを含め、既定のブラウザを変更することは可能です。
また、提供者側からも互換性リストへの登録やグループポリシーの設定によって、使用するWebブラウザをIEに指定することが可能です。
マイクロソフトでは、コンシューマ向けの一般的なWebサイトのブラウジングにはMicrosoft Edgeを、IEとの後方互換性が必要な業務WebシステムではIEを利用いただくことをご提案しています。

まとめ

ある調査によると、Windows 8.xが起動している時間の53%、iPadでは42％を、ユーザーはWebブラウジングに費やしているそうです。実際に普段のみなさんのデバイスの使い方を思い浮かべていただければ、この数字に違和感はないでしょう。

コンシューマ向けのデバイスとしてPC、スマートフォン、タブレットが混在する今、ネイティブアプリと同じか、場合によってはそれ以上にWeb上のコンテンツ、アプリ、サービスが利用されています。Webを見るデバイスも今後さらにスマートフォンやタブレットの存在感がさらに増していくでしょう。先に記したように企業においても同様の動きが起こる可能性は十分にあります。

ベンダーロックインと呼ばれる、ある特定のベンダーの、特定の技術に依存した製品やサービス、システムは終わりを迎えようとしています。現在、マイクロソフトが進めるオープンソース化、クロスプラットフォームはまさにこれらを踏まえた戦略で、だからこそ、Microsoft Edgeでは相互運用性をなによりも大切にしています。

「Edge」という名称には”Living on the Edge” －常にWebの先頭を走り続ける、そんな想いが込められています。Legacy WebからModern Webへ。Internet ExplorerからMicrosoft Edgeへ。これからのマイクロソフトのWeb戦略にご注目ください。なお、Microsoft Edgeのプレビュー版はWindows Insider Programにご登録いただくとご入手いただけるようになります。

PowerPoint/Word/Excel文書やPDFなどのドキュメントをオンラインで公開、共有できるマイクロソフトの新しいサービス「Docs.com」に説明資料としてPDFを公開しています。

私事ですが、2015年9月1日より、エバンジェリストからWindowsのプロダクトマネージャーへと肩書きが変わりました。Windowsのマーケティング担当として、今後もInternet Explorer、そして、Microsoft Edgeに関わっていきますので、引き続きどうぞよろしくお願いします。もちろん、この記事はMicrosoft Edgeから投稿しました

こんにちは、川田です。今日からHTML5 Experts.jpでは「エンタープライズ開発特集」を始めます。第一弾の今回は、HTML5とエンタープライズITについてのオーバービューを語ります。サーバサイドのお話はわりとよく見ますが、フロントエンドにフォーカスしているというのは珍しいようにも思えますね。

IT自体が幅広い分野のビジネスや製品に変わりつつある昨今、「エンタープライズITの話をするぞ！」と言うと、いろんな方面の人からこう問われます。

「そもそも、エンタープライズって何？」

エンタープライズ、正式には「エンタープライズシステム」になりますが、直訳すれば「企業向けシステム」。一言で言うなら「企業のビジネスを支えるための仕組み」を意味します。企業の業務の効率化を進めたり、経営戦略や問題解決を進めるためのワークプロセス(仕事の進め方)と道具(アプリやインフラ)のことです。

エンタープライズのエンジニアの仕事は、技術的な観点から、経営を良くする方法を提案したり、業務の進め方を設計したり、そのために必要な道具(アプリやインフラ)も調達したり、なければ自分たちで開発したり。サーバからクライアントまで、必要なら机の配置の一つまでデザインする(ネットワークも！)。ぶっちゃけ、ITじゃない方が合理的なら、IT化しないなんてのも提案する。スーパーのレジだって「効率化とかどうでもいいから最安値で作って」と言われたら、ソロバンを薦めてしまうという。それが私たちの仕事です。「SCM」とか「CRM」というキーワードで検索すると、そのニュアンスが伝わるかもしれません。

さて、ここで定義したエンタープライズ（システム）において常に関心が高いテーマとしては、「1.システムの運用」「2.業務の効率化」「3.アーキテクチャ」が挙げられると思います。これらの観点から、「HTML5」という技術要素が、これから先の企業のITをどのように良くしていけるのかをみてみましょう。

1. 「システムの運用」はどう変わるのか？

古今東西、エンタープライズは、システムをできる限りいじらずに、長く運用させることがビジネスとして成立する市場です。欧米においても、古いものは企業と政府に最後まで残り続ける傾向にあるというのが、共通の認識になっています。日本ではInternet Explorer（以下、IE）が高い影響力を持っており、多くの企業がIEの特定のバージョンをサポート期間ギリギリまで使い倒すという方法に走りがちです。しかし、今それが変わることを求められています。

マイクロソフトのサポートは基本は最低10年というルールですが、IEにおいてはもはやそのルールは全く通用しません。昨年、Windows8.1発売時にWindows 8版IE10のサポート期間が短縮化され、そして今年の7月にはとうとう、2016年1月12日以降、最新のバージョン以外はサポート対象外とするというアナウンスを行いました。これは、Google Chromeと同じアップデートのポリシーで、システムはこれからIEの最新バージョンがリリースされる都度、IEのバージョンを上げ続けることが求められています。現時点では、約1.5年周期ぐらいになりそうです。

マイクロソフトは、エンタープライズもコンシューマーも、どちらであってもIEが常に最新のバージョンで運用されるよう改善を進めてきています。その成果として、現在の最新のIEはHTML5に準拠し、高い相互運用性を確保しました。これはつまり、バージョン間の動作の違いが非常に小さいということを意味します。彼らとしては、ブラウザの「バージョンアップ」が、従来の「サービスパック適用」や「セキュリティアップデート」程度のものとして扱われればという狙いがあるようです。

Windows XPのSP2は、元々Vistaになる予定の全く別ものなOSと言われていたのですが、それが運用の中でうまく適用できたというのであれば、これはほんの些細な問題なのかもしれません。運用の進め方さえうまく定着すれば、業務システムのクライアント部分は、OSやミドル、ハードウェアのライフサイクルから開放され、セキュリティ・信頼性・パフォーマンスが最適化された状態で、長期に渡り利用することが可能となります。これはエンタープライズITにとって、HTML5がもたらす大きな価値の一つと言えるでしょう。

最新のIEへの移行、HTML5化を進めるには、以下の機能・ツールが有用です。欧米ではユーザー企業だけで音頭を取って進めていけるため、そのモチベーションは非常にシンプルです。しかし、日本はSIerがシステム開発の中心にいるため、調整にはかなり苦戦するかもしれません。2016年1月までと非常に期間は短いのですが、ユーザー企業・SIerの両方が一丸となりこの取り組みを進め、ユーザー企業のシステム費用の最適化と成長に貢献できればよいですね。

• modern.IE：IEのマルチバージョンテストや、問題点を検出するツール。無償のものが多い。何千台も端末がある場合、段階的に最新バージョンのIEへ移行を進めていくにあたり、このツールが有用になる。
• Enterprise Mode：IE11以上で、暫定的にIE7/8の動作をエミュレートさせる機能。最新のIEに移行した後も、古いIE特化のアプリを動かすことができる。
• Compat Inspector：IE8以下の依存性の高い作り込みを検出するツール。Enterprise Modeも長くはサポートされる保証がないため、最新のIEへ移行した後、このツールを活用して改修を進め、Enterprise Modeをなくしていくことが求められる。

2. 「業務の効率化」はどう変わるのか？

近年、デスクトップPC以外のコンピュータのポテンシャルが注目を集めています。ノートPCにタブレット、スマートフォンにウェアラブルと、デスクトップPCにはない機能、ワークフローのモデルを持ったコンピューターを活用することで、従来の業務をより効率的に変えていこうという考え方が、欧米で広がりをみせています。最近のアンケート結果を見ていると、日本でもモバイルの業務活用に抵抗感がなくなりつつあるようですので、恐らくこれから広がっていくことでしょう。

例えば、ホワイトカラーの場合、マネージャーの決裁をリアルタイム化させるという用途が有名です。スマートフォンに決裁イベントの発生を通知させ、内容を表示し、タッチで完了させるというワークフローを実現させるというものです。部下にも使えるものだと、スケジューラとの連携です。これからミーティングが始まるということを、移動時間も含めて計算し、事前に通知するという仕組みです。このような、様々な種類のデバイスを連動させた業務の設計方法を「モビリティ」と呼びます。

モビリティは、単純にWebアプリをタブレットやスマートフォンで見えるようにするだけでは意味がありません。コンピューターが持つ特性に合わせて、設計することが求められます。例えば、先ほどの決裁のシステムにおいて、「通知」という機能がなかったらどうなるでしょうか？タッチ操作に最適化されていなかったらどうなるでしょうか？

使いにくくて、結局デスクトップ型やノートPC型のコンピュータを使うようになるのがオチです。UXへの理解がないことには、導入がうまくいかないのがモビリティなので、モバイルの活用とUXは、多くの場合セットとして扱われているはずです。業務系のUXは、Webのサービスのようにリピーターを増やすためのものではなく、毎日使う道具を効率化させることに意味があり、このあたりの評価軸の違いにも注目すべきでしょう。

また、スマートフォンやタブレットといった道具側にも工夫が必要です。企業向けとして利用する場合、セキュリティの考え方、開発効率にも意識しなくてはいけません。セキュリティについては「MEAP(Mobile Enterprise Application Platform)」が、「IBM Worklight」「SAP Mobile Platform」「Oracle ADF Mobile」などなど、数えきれない程の製品によって、実用化もコモディティ化も進んでいます。一方で開発効率については、HTML5によるハイブリッドアプリケーション開発が注目を集め、これを実装するための「Apache Cordova」がMEAP製品の間でも独占的シェアを得ています。HTML5自体、そもそもモバイルから注目を集め出したわけで、そこまで想像に難くないはずです。

3. 「アーキテクチャ」はどう変わるのか？

最後に、統合化を目指したアーキテクチャについてです。ここでのアーキテクチャとは、個別のシステムにおけるものではなく、全体最適化の観点におけるアーキテクチャです。一つの業務をこなすのに、いくつものログインを繰り返す煩わしさ、複数のシステムに同じ情報を投入しなくてはいけない状況など、連携できていない状況の改善という意味です。

以下3つのポイントが、これからのアーキテクチャを決定付けているように思えます。

• 業務ロジックがAPIを持ち始めている：出足はやや遅れましたが、私の感覚として日本の企業でもパッケージの活用が進んでいるように見えます。パッケージ製品は、SAP NetWeaverやSalesforce APIsといったAPIを持つのがもはや当たり前で、標準としてはODataが広がっています。インフラもAWSのAPIがデファクト標準化しつつあり、認証基盤ですらもSAMLやOAuth(OpenID Connect)のような標準のAPIへとシフトしています。OneAPIやBONDIみたいなモバイル向けアプリ開発の世界観も気になるところです。スクラッチ開発においても、ライブラリ/フレームワークも豊富になり、REST(like)を中心としてAPIの実装コストも落ちていくことでしょう。
• APIを活用する製品が増えている：IBM CognosやOracle BIなどのBIツールや、Apache Camelのようなルーティングエンジン、Backbone.jsやAngularJSといったJavaScriptフレームワークでさえもREST(like)に対応するのが当たり前という状況です。サーバでAPIを繋げるApigeeや、クライアントでAPIを繋げるIFTTTなんかも面白い傾向です。例えスクラッチ開発であっても、アプリは標準的なAPIで繋げた方が、長期的に見てできる事の幅が広がっている時代に突入しています。
• 開発ツールがモバイルファースト化している：モバイルはネットワーク環境が不安定であることが前提であり、サーバサイドとは疎結合にしてクライアントで処理をすることが求められています。こうした中、マイクロソフトの「Mobile-first, Cloud-first Development」、IBMの「Mobile First」と、各製品ベンダの開発ツールがどんどんモバイルファースト前提に変わっています。個人的には、Oracle BI Mobileみたいな、完成された製品でさえもモバイル前提なことに、未来を感じさせられます。

このような状況を鑑みると、世の中のアプリケーションはC/Sモデルへと回帰しているように見えます。クライアントは多くの場合、やはりHTML5のエコシステムの恩恵を受けたくなるはずです。本メディアでも過去に取り上げたような、佐川夫美雄氏の考えるWebベースのリッチアプリケーション開発もその一つと言えます。現在はまだ、APIの集約はBIツールなどを活用してサーバサイドで行うのが一般的なようですが、これから先は、徐々にクライアント側へと移っていくことも想像に難くないはずです。

「あの企業みたいに、こういう経営情報を可視化したい！」「こういうコスト削減を目指したい！」となった時に、「世の中の道具が全く何も使えない！」なんてことにならないためにも、少しずつでよいので世の中の流れに乗っていけるといいですね。素直に新しいベンダ製品を活用していたら、勝手にこんな作りになるわけですが、いかんせんOSSによるコスト最適化、マルチベンダ化、大量のレガシー資産などの要因が邪魔して、そうも簡単にいかないというのが厄介なところでしょう。

さてさて、今回「UX」に「MEAP/ハイブリッドアプリ開発」に「業界標準フォーマット」に「ツール/フレームワーク」と、フロントエンドに関わるいろんなキーワードが出てきましたが、これらをより深堀りしたものが、本メディアにて「エンタープライズ特集」として取り上げられます。企業のビジネスを技術面から良くする、ヒントを与えてくれるに違いありません。

どうぞ、お楽しみに！

IEの2つのオフィシャルサイト

IEのユーザ向けのWebサイト

こちらのWebサイトではIEを使う人=ユーザーを対象に新機能や使い方、サポート情報をお届けしています。ブラウザでタッチが楽しめるContre JourやWindows 95にプリインされていたゲームをWebGLでリメイクしたHoverなど、IE11を体感できるコンテンツにもここからアクセスできます。ちなみにIE11は日本語版を含め全36言語で提供しており、さらに言語パックで59言語に対応しています。

IEデベロッパーセンター

こちらはIEの「開発者向け」のWebサイトです。MSDNデベロッパーセンターと呼ばれています。MSDNとは、Microsoft Developers Networkの略称で、IEを含め、Windowsや.NET、Azureなど、マイクロソフトのすべての開発者向けの情報は、このMSDNに集約されています。

IEデベロッパーセンターでは、IEの開発に関するあらゆる情報が網羅されています。たとえば、「開発者向けガイド」では、IE11、IE10、Xbox版IEのHTML5やCSS3、JavaScript、DOMといった仕様、互換性、F12 開発者ツールといったカテゴリ別に技術解説をしています。「互換性クックブック」では、旧バージョンからの変更点を中心に解説。IE11の互換性の変更点を確認したいときにはこのクックブックがお勧めです。旧バージョンのIEの技術仕様については「情報インデックス」から辿ることができます。

Windows 8では、モダンUIと呼ぶタッチ操作に最適化された新しいUIとデスクトップと呼ぶマウス&キーボードの操作を前提に設計された、これまでのWindowsのUIを踏襲する2つのUIを切り替えられるようになっています。IEもそれぞれに最適化されたUIを備えていますが、機能上の相違点があります（レンダリングエンジンは共通なので、HTMLやCSS、JavaScriptの挙動は全く同じです）。共通点や相違点については「IEの2つの閲覧エクスペリエンスを理解する」で詳しく解説されています。

左がデスクトップIE、右がモダンIE。モダン版は全画面表示がデフォルト

その他、このIEデベロッパーセンターからは、ユーザ向けのWebサイトからアクセスできるプロモーションコンテンツの技術的な解説や標準仕様の検証結果をレポートするTesting Center、IE9から搭載された「ピン留め」の機能や実装方法、APIのリファレンスといった技術情報にもアクセスできます。

IEに関連する重要な4つのサイト

modern.IE

IEデベロッパーセンターのトップページからも直接飛べるこのサイトは、制作したWebページのWeb標準技術への対応や旧バージョンのIEとの互換性の問題点を自動的に検出してくれるサービスです。DOCTYPE宣言やjQueryのようなライブラリーのバージョン、CSSのベンダープリフィックスの付け忘れなどを指摘してくれます。

modern.IEのソースコードはGitHubで公開されているので、自社のシステムに組み込んでお使いいただく事もできるようになっています。さらにこのmodern.IEからは、Mac OS X、Linux、Windows 用の仮想マシンがダウンロードできるので、Mac OS XでWindows 7+IE10の検証環境を構築すると行ったことが可能になります。

modern.IEの詳細は同僚の物江が解説していますので、ご興味のある方は「OSの種別を問わず、無償でできる！modern.IE「4つ+1つ」のWebページ検証方法」をご覧ください。

仮想マシンのダウンロード

Internet Explorer Test Drive

HTML5と呼ばれる技術で実際にどのような表現が可能なのか？どのような機能を実装できるのか？マイクロソフトでは、それを実感頂くために様々なサンプルコンテンツをご提供しています。ブラウザのパフォーマンスを比較できるベンチマーク用のコンテンツも豊富に用意されてます。

HTML5 LABS

このHTML5 LABSは2012年の春に設立された「Microsoft Open Technologies」が運営しているサイトで、マイクロソフトが検証している最新のHTML5の仕様に関する見解やプロトタイプを公開しています。過去にはWebSocketsやIndexedDB、現在はWebRTCに力を入れています。

マイクロソフトが提案し、W3Cにワーキンググループが作られたPointer Events（タッチ、ペン、マウスをPointerとして抽象化し、Eventを定義する仕様）もここからWebKit向けのプロトタイプがダウンロードできるようになっています。

Internet Explorer 10 のアクセシビリティ

マイクロソフトのアクセシビリティチームが運営するアクセシビリティ サイトでは、WindowsやOffice、IEなどのアクセシビリティについてご紹介しています。

ブログとSNS

「IEBlog 日本語」はマイクロソフト本社のIE開発チームが発信しているブログで、英語で投稿されてから数週間で、日本語を含めた7言語に翻訳される仕組みになっています。最新の開発状況箱のブログをご覧ください。

「Internet Explorer ブログ (日本語版)」は、HTML5Experts.jpメンバーであり、日本マイクロソフトでIEのデベロッパーマーケティングを担当する春日井と物江が主に書いているブログです。日本のイベント情報は、このブログとこの後ご紹介するSNSでご案内しています。

「Japan IE Support Team Blog」は、日本のIEサポートチームが書いているブログです。ユーザや開発者のみなさまからサポートチームに寄せられる質問を中心に取り上げています。

マイクロソフト本社と日本マイクロソフトが運営しているTwitterとFacebookは次の通りです。各国のIEチームも独自のSNSを持っていますので、興味のある方は検索してみて下さい。マイクロソフト・シンガポールは、マイクロソフト・台湾が生んだSilverlightの公式キャラ藍澤 光（あいざわ ひかる）の従兄弟という設定で、藍澤 祈（あいざわ いのり）というIEのキャラクターをFacebookページで展開しています。

• Facebookページ　https://www.facebook.com/internetexplorer
• Twitterアカウント（ユーザ向け）　https://twitter.com/IE
• Twitterアカウント（開発者向け）　https://twitter.com/IEDevChat
• Twitterアカウント（日本マイクロソフト）　https://twitter.com/IE_Japan

最後に、html5jえんぷら部・部長の川田寛さんが、ものすごい勢いでご自身のブログ「ふろしき.js – 実用的なWeb技術を発信」で、IE11の、とくに業務システムでのIEについて情報発信をされています。SI目線でとても詳しく丁寧に解説されていますので、エンタープライズに関わる方にはお勧めです。

また、IE10とIE11で使えるHTML5仕様をざっと掴みたい場合は、HTML5Experts.jpエキスパートでもある羽田野太巳さんが書かれている「Internet Explorerで使えるHTML5の新機能」がお勧めです。

Windows 8のアップデート版である新しいOS Windows 8.1の配布が10月18日から開始されます。

この配布はWindows 8用のアプリ ストアであるWindowsストアを介してダウンロード提供され、Windows 8ユーザーであれば、誰しもが無償でアップグレードすることができます。

Windows 8.1には InternetExplorer(以降、IE) の最新バージョンであるInternetExplorer 11(以降、IE11)が搭載されています。(※1)(※2)

IE11は、よりWeb標準に準拠するとともに、SPDY、MPEG-DASH、WebGLなどの最新の機能もサポートしてします。また開発者ツールも大幅な機能追加がされており、より細かな調査とデバッグができるようになっています。

今回の記事では、このIE11に搭載されているF12開発者ツールの新機能について紹介します。

(※1) 正式リリースまで、IE11を使用するには、Windows 8.1 Preview をインストールする必要があります。
　 (※2)Windows 7用にもIE11が提供されます。現在は開発者の検証用としてDeveloper Preview版が公開されています。

F12開発者ツールとは?

IE11のF12開発者ツールの新機能について紹介する前に、F12開発者ツールについて簡単に紹介しておきましょう。

F12開発者ツールはInternetExplorerに付属の開発者ツールです。FirefoxのFirebugやChromeデベロッパーツールのようなもの、と言えばわかりやすいでしょう。

IE8からのすべてのIEに搭載されており、名前にあるとおりキーボードの[F12]キーを押下することで使用することができます。

以下に参考として IE9(※)のF12開発者ツールの使い方について書いた記事のリンクを掲載しますので、IE11以前のIEをお使いの方、これまでのF12開発者ツールの機能を確認したい方はぜひご覧ください。

使ってみよう! [F12]IE9開発者ツール
• HTMLとJavaScript のデバッグ編
• さまざまな情報の表示
• HTTP キャプチャ機能
• 検証機能

IE11 F12 開発者ツールの新機能

IE11のF12開発者ツールでは、新たな機能が追加されるとともにUIのデザインも大きく変更されています。

メニューとタブがなくなり、左側のツールバーのアイコンをクリックして機能を選択するようになっています。

(IE11 の F12 開発者ツールの画面)

(新しいF12開発者ツールのメニューアイコン)

ツールバーの各メニューアイコンに割り当てられた機能の内訳は以下のとおりです。

1. DOM エクスプローラー
2. コンソール
3. JavaScript のデバッグ
4. ネットワーク
5. UI の応答
6. プロファイラー
7. メモリ
8. エミュレーション

ここからはツールバーの各アイコンの内容ごとに、新しく追加された特徴的な機能について紹介していきます。

DOM 要素の検査

調査したいDOM要素の選択が、ページの表示画面から直接行えるようになりました。

この機能を使用するには、Webページが表示されている状態で、調査対象となる箇所でマウスの右ボタンをクリックし、表示されるコンテキストメニューから[要素の検査]を選択します。

(コンテキストメニューに表示される [要素の検査])

F12 開発者ツールが起動し、ツール内のDOMエクスプローラーで目的の要素が選択されて表示されるとともに、ページの表示画面でも、該当する要素(エレメント)の箇所が、選択をあらわすマスクがかかった状態で表示されます。

(要素が選択されたところ)

もちろん、従来どおりDOMエクスプローラーの[要素の選択]ボタンをクリックし、表示されているページをクリックするという方法でも指定可能です。

( [要素の選択] ボタン)

DOMエクスプローラーでは、読み込まれているドキュメントの要素やスタイルの操作が行えますが、IE11のF12開発者ツールでは、要素を操作するための機能がさらに追加されたのに加え、ドラッグ&ドロップによる要素の入れ替えや、属性入力の際の入力補助機能がサポートされています。

(要素を操作するためのメニュー)

(入力補助機能)

また現在選択されている要素のDOM階層は、パン屑メニューで表示され、クリックで選択を切り替えられるようになっています。

(選択するDOM階層を切り替えるためのパン屑メニュー)

コンソールの表示

JavaScriptを記述してテストするためのコンソールは、画面左のツールバーアイコンからだけでなく、各画面右上部にあるコンソールの表示アイコンからも呼び出すことができるようになりました。

 (コンソールの表示アイコン)

これにより、例えば、DOMエクスプローラーでページの要素を確認しながらJavaScriptを記述して試すということができるようになりました。

また、JavaScriptの入力支援機能がサポートされ、コードを効率よく記述することができるようになりました。

(JavaScript の入力支援機能)

JavaScriptのデバッグ

デバッガーでは、ブレークポイントのほかに、トレースポイントが設定できるようになりました。

(エディタ画面でのコンテキストメニュー)

トレースポイントとは

トレースポイントは、ブレークポイントとは違い、コードの実行が設定箇所に達しても実行が中断されることはなく(または中断された後に)、デバッガで指定したトレースポイント メッセージを取得することができます。この機能を使用することで、変数やオブジェクトの状態を追いかける(トレース)することができます。

(トレースメッセージの設定画面)

トレースメッセージを設定するには、トレースポイント設定時に表示されるダイアログボックスを使用するか、トレースポイント上でマウスの右ボタンをクリックして表示されるコンテキスメニューの [トレースメッセージ]メニューを選択して行います。

条件つきブレークポイント

ブレークポイントでは、条件付きブレークポイントが指定できるようになりました。この機能を使用すると、デバッグ中のプログラムの中断条件を指定することができます。

(ブレークポイントの条件設定画面)

ブレークポイントの条件を指定するには、ブレークポイントの上でマウスの右ボタンをクリックし、表示されたコンテキストメニューより [条件]メニューを選択して行います。

その他、デバッガーでは例外動作の変更や、Webワーカー使用の際のデバッガの振舞などを指定できるようになっています。

ネットワーク

ネットワークの機能を使用するとHTTPのキャプチャ、リクエストのアクション開始からレスポンスが返りコンテンツがロードされるまでの各タイミングの時間など、ネットワーク関連の情報を細かく分析することができます。

([ネットワーク]画面)

これらの機能は、従来のバージョンのものと大きく変わるところはありませんが、ブラウザーキャッシュの消去や、Cookie のクリア 機能が追加されています。

UI の応答

UI の応答 機能を使用すると、ページのロード、あるいは操作時の CPU 使用率とその内訳、視覚スループットや、イベントに関する細かな情報がグラフィカルに表示されます。

([UIの応答]画面)

UI応答の機能を使用してUI応答のプロファイリングを行うには、画面上部にある[プロファイリング セッションの開始]ボタンをクリックし、キーボードの [F5]キーを押下するなどしてページを再読み込みするか、分析対象のUI操作を行います。

([UIの応答]ツールバー)

ページの読み込み、あるいは操作が完了したら、[プロファイリング セッションの開始]ボタンの右隣りの[プロファイリング セッションの終了]ボタンをクリックし、プロファイリングを終了します。この機能はインタラクティブに動作するブラウザ アプリケーションのパフォーマンス分析などに効果を発揮します。

プロファイラー

プロファイラー機能を使用すると、コンテンツが読み込まれて描画されるまでに使用された各機能の呼び出し回数や経過時間、JSファイルの場合はそのURL、メソッドの行番号などが記録されます。

([プロファイル]画面)

処理に要した時間や呼び出し回数を見ることで、描画処理(正確には読み込みが完了されるまでの処理)のボトルネックを調査することができます。

ただし、ここで測られるのは Web ブラウザ内の処理時間のみなので、実際にページ読み込みのチューニングを行う際には、ネットワーク機能を使用して通信上のボトルネックがないかも合わせて調査を行う必要があります。

プロファイラー の機能を使用してプロファイリングを行うには、画面上部にある プロファイリングの開始ボタンをクリックし、キーボードの [F5] キーを押下するなどしてページを再読み込みし、読み込みが完了したらプロファイリングの終了ボタンをクリックします。

([プロファイラー]ツールボタン)

プロファイリングは複数回の結果を保持できる上、プロファイリングされたデータをファイルにエクスポートすることができます。

また、表示を 呼び出しツリーに切り替えることができます。

([プロファイラー]呼び出しツリー表示)

メモリのプロファイリング

メモリ 機能を使用すると、任意の時間でメモリ使用状況のスナップショットを取り、使用状況を観察し調査することができます。

([メモリ]画面)

各スナップショットには、ページを構成する各オブジェクトのメモリの使用状況が記録されます。

(スナップショットの内容表示画面)

メモリ機能を使用して使用メモリのプロファイリングを行うには、画面上部にあるプロファイリングセッションの開始ボタンをクリックし、メモリの使用状況について分析を行いたい操作、処理を行い、完了したら[ヒープ スナップショットを作成します]ボタンをクリックします。

([メモリ]ツールバー)

[ヒープ スナップショットを作成します[ボタンを満足のいく回数クリックし、満足のいく個数のスナップショットが取得できたら [プロファイリング セッションの終了]ボタンをクリックしプロファイリングを終了します。

この機能を使用すると、オブジェクトのメモリ使用量はもちろんのこと、複数のスナップショットを比較することでオブジェクトが正しく削除されたか、あるいは、オブジェクトが正しくメモリを解放したなどを調査することができます。

エミュレーション

エミュレーションを使用すると、ユーザーエージェントを他のWebブラウザ用のものに変えたり、ディスプレイの解像度や向きを変えたテストを行えます。

([エミュレーション]画面)

たとえば以下の図は、解像度 1280×720 の解像度でディスプレイの向きを縦に指定したものです。

(エミュレーション機能を実行したところ)

まとめ

今回の記事ではInternet Explorer 11に搭載されるF12開発者ツールに追加された特徴的な新機能について簡単に紹介しました。

F12に開発者ツールには、今回紹介した機能以外にも、Web コンテンツのデバッグに役立つ非常に多くの機能が搭載されていますので、IE をお使いの方はぜひキーボードの[F12]キーを押してみてください。

なお、Surface RTに代表されるARM ベースのWindows RT機の IEにもF12開発者ツールは搭載されていますので、こちらをお持ちの方も手軽なWebコンテンツのデバッグツールしてぜひご活用ください。

Windows 8.1に搭載されるIE11 F12開発者ツールについてのより詳しい情報につきましては、現状はまだ英語ですが、以下のドキュメントが公開されておりますので、ご覧ください。

Using the F12 developer tools
http://msdn.microsoft.com/library/ie/bg182326(v=vs.85)