<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>IE11 &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/ie11/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>Windows 10の2つのWebブラウザ、Microsoft EdgeとInternet Explorer 11</title>
		<link>/ykasugai/16820/</link>
		<pubDate>Fri, 04 Sep 2015 00:00:26 +0000</pubDate>
		<dc:creator><![CDATA[春日井 良隆]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Edge]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[IE11]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[modern.IE]]></category>

		<guid isPermaLink="false">/?p=16820</guid>
		<description><![CDATA[こんにちは。日本マイクロソフトの春日井です。 1995年に公開されたInternet Explorer 1以来、マイクロソフトは20年ぶりとなる新しいWebブラウザ「Microsoft Edge」をWindows 10と...]]></description>
				<content:encoded><![CDATA[<p>こんにちは。日本マイクロソフトの春日井です。<br>
1995年に公開されたInternet Explorer 1以来、マイクロソフトは20年ぶりとなる新しいWebブラウザ「Microsoft Edge」をWindows 10とともにリリースしました。<br>
どうして、マイクロソフトはこの判断に至ったのか、IEはこれからどうなるのか。おそらく多くの方々が抱いているであろうそんな疑問に、中の人としてお答えしたいと思います。</p>

<h2>Internet Explorerのサポートポリシーの変更</h2>

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

<p><a href="https://html5experts.jp/wp-content/uploads/2015/08/iesupportpolicy.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/iesupportpolicy.jpg" alt="IEサポートポリシー変更" width="640" height="360" class="alignnone size-full wp-image-16851" srcset="/wp-content/uploads/2015/08/iesupportpolicy.jpg 640w, /wp-content/uploads/2015/08/iesupportpolicy-300x169.jpg 300w, /wp-content/uploads/2015/08/iesupportpolicy-207x116.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>昨年の8月にこのサポートポリシーが「2016年1月12日以降は各OSの最新版のIEのみをサポートする」ことに変更されることが発表されました。<br>つまり、Windows 7 SP1では、最新版のIEであるIE11のみをサポートすることになります。<br>詳細は「<a href="https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Internet Explorer サポートポリシー変更の重要なお知らせ</a>」をご覧ください。<br>今回、サポートポリシーの変更に踏み切ったのには3つの理由があります。</p>

<h3>1.セキュリティ対策</h3>

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

<h3>2.開発や検証の負担軽減</h3>

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

<h3>3.最新技術への対応</h3>

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

<h2>Microsoft Edgeリリースへ</h2>

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

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

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

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

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

<h2>Microsoft Edgeというブラウザ</h2>

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

<p>その思想は、IEBlogの「<a href="http://blogs.msdn.com/b/ie/archive/2014/11/11/living-on-the-edge-our-next-step-in-interoperability.aspx" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Living on the edge – our next step in helping the web just work</a>」でこのように示されています。</p>

<p>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標準の仕様、他のブラウザの更新内容、相互に運用する挙動に合わせる。</p>

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

<p><a href="https://html5experts.jp/wp-content/uploads/2015/09/edgeinter.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/09/edgeinter.png" alt="Microsoft Edge Interoperability" width="640" height="376" class="alignnone size-full wp-image-16921" srcset="/wp-content/uploads/2015/09/edgeinter.png 640w, /wp-content/uploads/2015/09/edgeinter-300x176.png 300w, /wp-content/uploads/2015/09/edgeinter-207x122.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

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

<p>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</p>

<p>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</p>

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

<p>先頃、最終仕様となったECMAScript 2015（第6版）への対応状況も「<a href="http://blogs.windows.com/msedgedev/2015/05/12/javascript-moves-forward-in-microsoft-edge-with-ecmascript-6-and-beyond/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">JavaScript moves forward in Microsoft Edge with ECMAScript 6 and beyond</a>」の中で明らかになりました。Microsoft EdgeやIEでの要素やAPIの対応状況はMicrosoft Edge | Dev (beta)の「<a href="http://dev.modern.ie/platform/status/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Platform Status</a>をご覧ください。</p>

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

<p><a href="https://html5experts.jp/wp-content/uploads/2015/08/screenshot.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/screenshot.jpg" alt="Microsoft Edgeの新機能" width="640" height="341" class="alignnone size-full wp-image-16852" srcset="/wp-content/uploads/2015/08/screenshot.jpg 640w, /wp-content/uploads/2015/08/screenshot-300x160.jpg 300w, /wp-content/uploads/2015/08/screenshot-207x110.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<h2>Internet Explorerというブラウザ</h2>

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

<p>後方互換性の重要な機能は、IEのバージョン毎のレンダリングルールを切り替える仕組み「ドキュメントモード」とIE11をIE8としてエミュレートする「エンタープライズモード」の2つです。これらの機能の使い方を含めたIE11への移行については弊社のエバンジェリストで、もう一人のエキスパートである物江が詳しく解説していますので、物江のブログ「<a href="http://blogs.msdn.com/b/osamum/archive/2015/02/24/existing-content-migration-for-new-ie.aspx" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">準備は OK? サポート終了までに知っておきたい古い Internet Explorer 向けに作成された Web コンテンツの最新 Internet Explorer へのマイグレーション方法</a>」をご覧ください。</p>

<p>また、旧バージョンのIEで動作しているWebシステムへのIE11の影響に関する調査を、数多くのコンサルティングやシステム インテグレーションを手がける野村総合研究所様に「<a Internet="" Explorer="" 11="" 影響調査報告書&lt;/a="" data-wpel-link="internal">」として公開いただいています。</p>

<p>Internet ExplorerはIE11が最後のメジャーバージョンとなることが明らかになっています。セキュリティ対策などのマイナーアップデートは今後も行われますが、新機能が追加される予定はありません。</p>

<h2>Windows 10のブラウザ</h2>

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

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

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

<p><a href="https://html5experts.jp/wp-content/uploads/2015/08/browseronwindows10.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/browseronwindows10.jpg" alt="Windows 10のブラウザ" width="640" height="360" class="alignnone size-full wp-image-16849" srcset="/wp-content/uploads/2015/08/browseronwindows10.jpg 640w, /wp-content/uploads/2015/08/browseronwindows10-300x169.jpg 300w, /wp-content/uploads/2015/08/browseronwindows10-207x116.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

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

<p><a href="https://html5experts.jp/wp-content/uploads/2015/08/default.gif" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/default.gif" alt="Windows 10 既定のアプリの選択" width="575" height="640" class="alignnone size-full wp-image-16866" /></a></p>

<h2>まとめ</h2>

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

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

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

<p>「Edge」という名称には”Living on the Edge” －常にWebの先頭を走り続ける、そんな想いが込められています。Legacy WebからModern Webへ。Internet ExplorerからMicrosoft Edgeへ。これからのマイクロソフトのWeb戦略にご注目ください。なお、Microsoft Edgeのプレビュー版は<a href="https://insider.windows.com/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Windows Insider Program</a>にご登録いただくとご入手いただけるようになります。</p>

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

<div style="width: 608px;margin-bottom:5px"><a href="https://docs.com/ykasugai/9427/windows10web-microsoft-edgeinternet-explorer-11" title="Windows10のWebブラウザ Microsoft EdgeとInternet Explorer 11" target="_blank" style="font-family: &#039;Segoe UI&#039;" data-wpel-link="external" rel="follow external noopener noreferrer">Windows10のWebブラウザ Microsoft EdgeとInternet Explorer 11</a><span style="font-family: 'Segoe UI Light'">—</span><a href="https://docs.com/ykasugai" target="_blank" style="font-family: &#039;Segoe UI&#039;" data-wpel-link="external" rel="follow external noopener noreferrer">春日井 良隆</a><a style="float: right;font-family: &#039;Segoe UI&#039;" href="https://docs.com/ykasugai/9427/windows10web-microsoft-edgeinternet-explorer-11" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Docs.com</a></div>

<p>私事ですが、2015年9月1日より、エバンジェリストからWindowsのプロダクトマネージャーへと肩書きが変わりました。Windowsのマーケティング担当として、今後もInternet Explorer、そして、Microsoft Edgeに関わっていきますので、引き続きどうぞよろしくお願いします。もちろん、この記事はMicrosoft Edgeから投稿しました <img src="https://s.w.org/images/core/emoji/2.2.1/72x72/1f600.png" alt="😀" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
]]></content:encoded>
			</item>
		<item>
		<title>OSの種別を問わず、無償でできる！modern.IE「4つ+1つ」のWebページ検証方法</title>
		<link>/osamum_ms/4401/</link>
		<pubDate>Tue, 14 Jan 2014 01:00:49 +0000</pubDate>
		<dc:creator><![CDATA[物江 修]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[IE11]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[modern.IE]]></category>
		<category><![CDATA[ブラウザ]]></category>

		<guid isPermaLink="false">/?p=4401</guid>
		<description><![CDATA[2013年11月、Windows 8.1と同時にInternet Explorer 11がリリースされました。 新しくメジャーなWebブラウザーがリリースされると、それまでのWebサイトや、あるいはこれからリリースするW...]]></description>
				<content:encoded><![CDATA[<p>2013年11月、Windows 8.1と同時に<a title="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie" href="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Internet Explorer 11</a>がリリースされました。</p>

<p>新しくメジャーなWebブラウザーがリリースされると、それまでのWebサイトや、あるいはこれからリリースするWebサイトについても検証を行う必要が出てきます。しかしながら、Internet Explorerはその性質上、異なるバージョンを単一のWindows上にインストールすることはできません。</p>

<p><a title="modern.IE" href="http://loc.modern.ie/" target="_blank" rel="modern.IEへのリンク follow external noopener noreferrer" data-wpel-link="external">modern.IE</a>では、この問題に対処するためWindowsとMac、Linuxで動作する検証用の仮想マシン、イメージの提供、Webサイトの解析と各メジャー Webブラウザーでの画面ショットの取得、リモートデスクトップサービスなど、Webページを検証する上での様々な機能を提供します。</p>

<p>今回の記事では、この<a title="modern.IE" href="http://modern.ie/" target="_blank" rel="modern.IEへのリンク follow external noopener noreferrer" data-wpel-link="external">modern.IE</a>について紹介します。</p>

<p align="center"><a href="https://html5experts.jp/wp-content/uploads/2014/01/image.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="398" height="350" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb.png" border="0"></a><br /> (modern.IE のトップ画面)</p>

<h2>modern.IEとは?</h2>

<p>マイクロソフトが提供する Webページを検証するためのWebサイトで、そこで提供される機能は、一部のサードパーティー製のサービスを除き、無償で使用することができます。<br /> modern.IEは、OS&nbsp;の種別を問わず、最新のモダンWebブラウザーから使用することができます。</p>

<h2>modern.IEでできる「4つ+1つ」の検証方法</h2>

<p>modern.IEが提供するWebページを検証するめの機能は以下の4つです。</p>

<ol> <li><a title="Web ページのスキャン" href="#scan" data-wpel-link="internal">Webページのスキャン</a></li> <li><a title="クロスブラウザーの表示テスト" href="#closs" data-wpel-link="internal">クロスブラウザーの表示テスト</a></li> <li><a title="最新のInternet Explorerとの互換性テスト" href="#vtest" data-wpel-link="internal">最新のInternet Explorerとの互換性テスト</a></li> <li><a title="仮想マシンの提供" href="#vmachine" data-wpel-link="internal">仮想マシンの提供</a></li> </ol>

<p>さらには、もう1つ、検証用の仮想環境をリモートデスクトップで提供する<a href="#remote" data-wpel-link="internal">BrowserStack</a>というサードパーティー製のサービスを試用することができます。</p>

<p>ここからは、前述の各機能について、具体的な使用方法を解説していきます。</p>

<h2 id="scan">Webページのスキャン</h2>

<p>指定されたURLのWebページをWeb標準、およびInternet Explorerのバージョン互換の観点からマークアップ、スクリプトをチェックし、問題点を明らかにし修正案を提示します。<br />具体的な使用方法は以下の通りです。</p>

<ol> <li>Web ブラウザーで modern.IE にアクセスします。</li> <li>「一般的なコーディングの問題をスキャンします。こちらにWebページのURLを入力してください。」というキャプションの下に「URL を入力してください」というウォーターマークのあるテキストボックスがあるので、検証の対象となるWebページのURLを入力し、[スキャン]ボタンをクリックします。 <p>

<a href="https://html5experts.jp/wp-content/uploads/2014/01/image1.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="310" height="75" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb1.png" border="0"></a></p> </li> <li>指定されたWebページの検証が行われ、完了するとスキャン結果がレポートされます。 

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image11.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="439" height="497" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image11_thumb.png" border="0"></a></p> </li> <li>各レポートを示す行の右端にある [詳細を表示]ボタンをクリックすると、検出された問題についての詳しい解説、修正案の概要、より詳しい情報へのリンクが表示されます。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image2.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="455" height="262" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb2.png" border="0"></a></p> </li> </ol>

<p>レポートの内容には「検出内容」、[なぜ重要なのか]、[実装方法]について、詳細なドキュメントへのリンクが表示されるので、これらの内容を参考にWebページを修正していきます。</p>

<p>取得されたレポートは、ダウンロード(pdf 形式)はもちろん、電子メール、Facebook、Twitterで共有することができます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image3.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="407" height="131" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb3.png" border="0"></a></p>

<h2 id="closs">クロスブラウザーの表示テスト</h2>

<p>modern.IEでは、検証の対象となるWebページを、異なる複数のOS、異なる複数のWebブラウザーの組み合わせで表示した場合の画面ショットを取得することができます。</p>

<p>なお、これら画面ショットはサーバーサイドで取得されるため、テストを行うクライアント側になにか特別な準備を行う必要はありません。具体的な画面ショットの取得手順は以下のとおりです。</p>

<ol> <li>前述の[<a title="Web ページのスキャン" href="#scan" data-wpel-link="internal">Web ページのスキャン</a>]の手順に従い、検証対象となるWebページをスキャンします。</li> <li>Webページのスキャンが完了し、レポートが表示されたあと、[サイトのブラウザー別、デバイス別のスクリーンショットが撮れます。]タブをクリックし、同タブ内の[Begin scan]をクリックします。 

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image4.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="439" height="214" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb4.png" border="0"></a></p> </li> <li>サーバーサイドでの画面ショット生成プロセスが完了すると、タブ内にスクリーンショットが表示されます。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image5.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="423" height="187" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb5.png" border="0"></a></p> </li> </ol>

<p>取得されたスクリーンショットは、ダウンロードはもちろん、電子メール、Facebook、Twitterで共有することができます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image6.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="177" height="116" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb6.png" border="0"></a></p>

<p>スクリーンショットは、既定では、プリセットされたOSとWebブラウザーの9つの組み合わせの画面ショットのみ取得できます。</p>

<p>さらに多くのスクリーンショットを取得する場合は、後述するサードパーティー製のサービス<a title="BrowserStack" href="#remote" target="_blank" data-wpel-link="internal">BrowserStack</a>を使用します。</p>

<h2>最新のInternet Explorerとの互換性テスト</h2>

<p>以前のバージョンのInternet Explorerでは、Web標準に準拠しない独自の仕様や機能が多数存在していましたが、そういった独自機能の使用は、Web標準に準拠したInternet Explorer 10以降のIEでは、サポートされないか非推奨となっています。</p>

<p>そのため、古いInternet Explorer用に作成されたWebページを最新のInternet Explorerで表示すると正常に描画されなかったり、スクリプトが正常に動作しない可能性があります。</p>

<p>こういった最新のInternet Explorerと、旧いInternet Explorerの機能の差分を抽出するために以前から<a title="Compat Inspector" href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/" target="_blank" rel="Compat Inspectorへのリンク follow external noopener noreferrer" data-wpel-link="external">Compat Inspector</a>というツールが用意されていました。<br /> しかしながら、Compat Inspectorを使用するには検証対象となるWebページにjsファイルへの参照を追加する必要があったり、それを避けるためには無償のHTTPデバッガ<a title="Get Fiddler" href="http://fiddler2.com/" target="_blank" rel="fiddler2 へのリンク follow external noopener noreferrer" data-wpel-link="external">Fiddler</a> を使ったハックが必要でした。 (※)</p>

<p><figure></p>

<p>(※)Compat Inspectorについては、HTML5jえんぷら部の川田さんのブログに<a title="Compat Inspector - ソースコードからIE独自機能を機械的に検出しWeb標準へ置き換えさせる方法" href="http://furoshiki.hatenadiary.jp/entry/2014/01/06/030742" target="_blank" rel="ふろしき.js へのリンク follow external noopener noreferrer" data-wpel-link="external">詳細な記事</a>が投稿されていますのでぜひご覧ください。&nbsp;&nbsp; <br />『<a title="ソースコードからIE独自機能を機械的に検出しWeb標準へ置き換えさせる方法" href="http://furoshiki.hatenadiary.jp/entry/2014/01/06/030742" target="_blank" rel="ふろしき.js へのリンク follow external noopener noreferrer" data-wpel-link="external">ソースコードからIE独自機能を機械的に検出しWeb標準へ置き換えさせる方法</a>』- ふろしき.js &#8211; 実用的なWeb技術を発信</p>

<p></figure></p>

<p>modern.IE では、そういった面倒な設定をすることなく Compat Inspectorの機能を使用することができます。</p>

<p>この機能を使用するための具体的な手順は以下の通りです。</p>

<ol> <li>前述の[<a title="Webページのスキャン" href="#scan" target="_blank" rel="項目:Webページのスキャンへのリンク" data-wpel-link="internal">Webページのスキャン</a>]の手順に従い、検証対象となるWebページをスキャンします。</li> <li>Webページのスキャンが完了し、レポートが表示されたあと、[modern IE で現在サポートされないコードを検出します]タブをクリックし、同タブ内の [Begin scan]をクリックします。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image7.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="429" height="184" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb7.png" border="0"></a></p> </li> <li>指定されたWebページの検証が行われ、完了するとスキャン結果がレポートされます。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image8.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="424" height="544" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb8.png" border="0"></a></p> </li> <li>各レポートを示す行の右端にある[詳細を表示]ボタンをクリックすると、検出された問題についての説明と、問題のマークアップ、あるいはコードが使用されているファイル名と位置、より詳しい情報へのリンク(※)が表示されます。 

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image9.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="410" height="189" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb9.png" border="0"></a></p> </li> </ol>

<p><figure></p>

<p>(※)[詳細な情報]の中のfeature detectionリンクをクリックすると、検出された問題に関するmsdnライブラリ中のドキュメントが表示されます。このドキュメントは英語ですが、URLのドメイン名の後ろのen-usをja-jpに変えると日本語のドキュメントを表示させることができます。</p>

<p></figure></p>

<p>取得されたレポートは電子メール、Facebook、Twitterで共有することができます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image10.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="175" height="116" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb10.png" border="0"></a></p>

<h2 id="vmachine">仮想マシンの提供</h2>

<p>modern.IEから仮想マシンのイメージをダウンロードし、Webページの検証に使用することができます。仮想マシンは、Windowsはもちろん、Mac OS、Linux用も用意されており、仮想環境も複数の環境から任意のものを選択できます。(※Linuxは VirtualBoxのみです)<br /> 仮想マシンのイメージの入手方法は以下の通りです。</p>

<ol> <li>modern.IEにアクセスします。</li> <li>ページ内の黒いバーの中の[複数のブラウザーにわたってテストする]をクリックします。</li> <li> 遷移したページの「Mac、Linux、Windows用の仮想マシンをダウンロードします。」の囲みの中の[無料のVMを入手する]をクリックします。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image12.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="453" height="136" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb11.png" border="0"></a></p> </li> <li>OS と仮想環境を選択するドロップダウンリストボックスが表示されるので、指定します。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image13.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="449" height="133" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb12.png" border="0"></a></p> <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image14.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="449" height="180" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb13.png" border="0"></a></p> </li> <li>Windows、Internet Explorer の各バージョンの組み合わせの一覧が表示されるので、検証対象となる組み合わせの仮想マシンのイメージをダウンロードします。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image15.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="480" height="258" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb14.png" border="0"></a></p> 

<p>なお、仮想マシンのイメージは分割されているので、 Part1.exeから始まるrarファイルをすべて同一フォルダにダウンロードし、Part1.exeを実行して仮想イメージを生成してください。</p> 

<p>生成された仮想マシンのイメージの使用方法については、使用する仮想環境のマニュアルを参照してください。</p></li> </ol>

<h3>仮想マシンのイメージの有効期間について</h3>

<p>modern.IEで提供される仮想マシンのイメージは、90日間でライセンスが切れるようになっています。これは仮想マシンのイメージをWebページの検証目的以外で使用できないようにするためのものです。</p>

<p>90日経過してライセンスが切れた場合は、仮想マシンのイメージを再度ダウンロードすれば再度使用することができます。</p>

<p>以前の環境を引き継がせる際には、スナップショットを取得するなど、使用している仮想環境がサポートしている仕組みを使用してください。</p>

<h3>仮想マシンの日本語表示について</h3>

<p>提供されている仮想マシンのイメージは英語環境のものです。日本語環境にするには Language Pack を適用する必要があります。</p>

<p>コントロールパネルの Region and Launguages でダウンロードインストールしてください。</p>

<h2 id="remote">リモートデスクトップでの仮想環境の提供</h2>

<p>サードパーティーBrowserStackの提供するリモートデスクトップサービスを試用した検証環境を3か月間無償で試用することができます。<br /> クラウド上にある仮想デスクトップにWebブラウザーを介してアクセスするので検証環境をローカルに用意する必要がありません。</p>

<p>BrowserStackのサービスには以下の手順でアクセスします。</p>

<ol> <li>Webブラウザーでmodern.IEにアクセスします。</li> <li>ページ下部にある「キャンペーン」バナーの[BrowserStackを試す]をクリックします。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image16.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="480" height="64" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb15.png" border="0"></a></p> </li> <li>「クロス ブラウザー テストが簡単に」と書かれたページに遷移するので、 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image17.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="480" height="196" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb16.png" border="0"></a></p> <p>Internet Explorer以外のWebブラウザーを使用している場合は、使用しているWebブラウザー用のアドオンを入手してセットアップします。</p> <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image18.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="482" height="217" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb17.png" border="0"></a></p> </li> <li>Internet Explorerを使用している場合、または各Webブラウザー用のアドオンのセットアップが完了したら 「http://yoursite.com」とウォーターマークが表示されているテキストボックスに検証の対象となるWebページのURLを入力し、[Test/ on BrowserStack]ボタンをクリックします。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image19.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="388" height="115" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb18.png" border="0"></a></p> </li> <li>BrowserStackのフリートライアル用アカウントの登録ページに遷移するので、必要項目を入力してアカウントを作成しします。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image20.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="488" height="307" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb19.png" border="0"></a></p> </li> <li>作成したアカウントでBrowserStackにサインインし任意のOSとWebブラウザーを選択し、[Start Testing]ボタンをクリックして仮想マシンを起動します。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image21.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="488" height="492" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb20.png" border="0"></a></p> </li> <li>仮想マシンの起動が完了すると、Web ブラウザー内にクラウド上の仮想マシンのデスクトップに、Webブラウザーが起動した状態で表示されるので、Webページのテストを行います。 <p><a href="https://html5experts.jp/wp-content/uploads/2014/01/image22.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img width="482" height="271" title="image" style="border: 0px currentcolor;margin-right: auto;margin-left: auto;float: none" alt="image" src="/wp-content/uploads/2014/01/image_thumb21.png" border="0"></a></p> </li> </ol>

<p>BrowserStackでは、Windows OS以外のOSや、さまざまなWebブラウザーを、ローカルに検証環境を構築することなく検証作業を行うことができます。無償で使用できるのは90日間なので、試用してみて便利であれば、有償契約をご検討ください。</p>

<h2>まとめ</h2>

<p>今回はマイクロソフトが提供しているWebページの検証サイトmodern.IEを紹介しました。</p>

<p>機能が豊富で最初は戸惑うかもしれませんが、まずはWebページのスキャンからぜひお試しください。</p>
]]></content:encoded>
			</item>
		<item>
		<title>HTML5でWebの世界も変わる。IE11とWindows 8.1が対応する技術「HTML5 Conference2013」</title>
		<link>/miyuki-baba/3762/</link>
		<pubDate>Mon, 30 Dec 2013 01:00:41 +0000</pubDate>
		<dc:creator><![CDATA[馬場 美由紀]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[HTML5 Conference 2013]]></category>
		<category><![CDATA[IE11]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">/?p=3762</guid>
		<description><![CDATA[連載： HTML5 Conference 2013レポート (13)マイクロソフト春日井良隆氏のセッションテーマは「HTML5とIE11とWindows 8.1」。セッション冒頭、春日井氏は日常的に使用しているITデバイ...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/html5-conference-2013-2/" class="series-160" title="HTML5 Conference 2013レポート" data-wpel-link="internal">HTML5 Conference 2013レポート</a> (13)</div><p>マイクロソフト春日井良隆氏のセッションテーマは「HTML5とIE11とWindows 8.1」。セッション冒頭、春日井氏は日常的に使用しているITデバイスを披露露。ソニー VAIO Tap 20のほか、iPadmini、Surface、Kindle Paperwhite、そしてiPhoneというデバイスを、用途別に使いこなしているという。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/27977275ba7be210bcfd94a91401401b.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/27977275ba7be210bcfd94a91401401b.jpg" alt="春日井さん" width="700" height="483" class="alignnone size-full wp-image-3958" srcset="/wp-content/uploads/2013/12/27977275ba7be210bcfd94a91401401b.jpg 640w, /wp-content/uploads/2013/12/27977275ba7be210bcfd94a91401401b-300x207.jpg 300w, /wp-content/uploads/2013/12/27977275ba7be210bcfd94a91401401b-207x142.jpg 207w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>

<h2>HTML5とJavaScriptという標準技術にWindowsは対応</h2>

<p>「こういうデバイスの使い方は特別なことではなく、今後一般化する」と春日井氏は語り、今世の中で起こっていることを次のようにまとめた。</p>

<ol>
<li>デバイスの多様化</li>
<li>タッチインターフェイス</li>
<li>ローカルからクラウドへ</li>
</ol>

<p>そして「デバイスの多様化で期待されている技術がHTML5である」という。デバイスはPCとタブレット、スマートフォンと3つに大きく分かれるが、OSもPCはWindows 8やMac、Linux、タブレットはWindows 8とiOSやAndroid、スマートフォンはiOSやAndroid、WindowsPhoneのほか、Tizen、Firefox OSなどのリリースが予定されている。このような状況だからこそ「HTML5の存在感が出てきている。これは特に今日のセッションで強調したいこと」と春日井氏は力強く語った。</p>

<p>このような状況下で、WindowsとHTML5とどのように関係にあるか。HTML5の特徴の3本柱は「セマンティック」と「互換性」「Webアプリ」だが、第二の互換性においては、マイクロソフトは「IE9でSameMarkupというコンセプトを打ち出した。これはブラウザーによって、あるいは、ブラウザーのバージョンによって、異なるマークアップをする必要はないという今の我々の開発姿勢だ」と春日井氏は言う。</p>

<p>第三のWebアプリについても、Windows 8のアプリは、「HTML5とJavaScriptという標準技術で作れるようになっている」と春日井氏。当然、jQueryのようなJavaScriptライブラリーはそのまま使えるのだという。Objective-CとXCodeの知識が必要になるiOSアプリ、JavaとEclipseが必要になるAndoridアプリの開発と較べ、敷居はぐっと下がるだろう。</p>

<p>また最近ではTitaniumやPhoneGap、CreateJSなどのクロスプラットフォームフレームワークが非常に注目を集めている。これらのフレームワークで使う技術はいずれもHTMLとJavaScript。このようにWindowsアプリは特別な知識を身につける必要はないというわけだ。Windows 8では「WinJS.xhr」というというWebコンテンツを呼び出す関数が用意されており、これを使えば簡単にWeb上のコンテンツをダウンロードしてアプリから利用できるようになるという。</p>

<p>とはいえ、これまでJavaやC++などで開発してきた人にとって、JavaScriptと言う言語が持つゆるさが好きではないという人もいるだろう。そんな人にお勧めの技術があるとして春日井氏が紹介したのは、「aulJS」というJavaScriptを生成する中間言語だ。altJSにも複数あり、「TypeScriptはC♯を開発した人が開発した中間言語。同言語を紹介したサイト（http://www.typescriptlang.org/）に行くとJavaScriptとのコーディングの違いを体験でき、サンプルも手に入る」と言う。この際に試してみるものお勧めだ。</p>

<h2>Web系開発ツールとしても有効な「Visual Studio」</h2>

<p>次に春日井氏が取り上げたのが「Visual Studio」である。「Visual StudioはWindowsの開発ツールというイメージが強いが、Webアプリの開発する上で非常に効果的なツールになっている」と春日井氏。</p>

<p>それを証明するためデモを実施。例えば<code>&lt;video&gt;</code>というタグの後では次の設定内容はほぼ決まっている。Visual Studioではタブを2回押すことで、予想変換のように想定されたプログラム内容が勝手に表示されるようになっている。</p>

<p>CSSのカラー設定も「非常に効率的になる」と春日井氏はデモを実施。カラーパレットから指定することはもちろん、スポイトで直接色を抜き取り指定することができる。<br>
「和文フォントが出ないという弱点はあるが、コーディングの作業を効率化する機能がかなり入っている。Visual Studio Expressというフリー版もあるので、ぜひ一度、試してほしい」（春日井氏）</p>

<h2>IE11は「Touch」「WebGL」「MPEG-DASH」「Encripte Media Extension」サポート</h2>

<p>最後に春日井氏が説明したのはIEについて。「IEではJavaScriptの処理のスピードの高速化を図っている。IE10と比べてもIE11では処理時間は高速化されている。他のブラウザと比較しても処理時間は短い」</p>

<p>最新のIE11では「Touch」「WebGL」「MPEG-DASH」「Encripte Media Extension」という4つのWeb標準をサポートしている。これからのデバイスはタッチも使えばマウスやペンも使うため、Pointerという概念でまとめてAPIをつくっている。「pointer events」を使って実装することで、マルチタッチが可能になる。「この仕様を検討するワーキンググループがW3Cに設立された」と春日井氏。</p>

<p>次の「WebGL」とは3Dの表現がブラウザの中でできるという技術だ。「3Dはエンタメのコンテンツだけに必要な技術ではない。例えばCADのデータをブラウザの中で表現することができるようになる。ビジネスの世界でも使える」
残りの2つの技術については、http://ie.microsoft.com/testdrive/HTML5/eme/で紹介されているので、こちらを見てほしい。</p>

<p>WebRTCなど注目技術への対応はどうなっているのかなども気になるところだ。しかし、それは「IEというブラウザが抱えるユーザー層が大きく影響している」という。というのもIEはエンタープライズのお客さまが多いのはもちろん、いわゆるブラウザというと青いeのマークという風に覚えているITにそれほど詳しくない一般ユーザーが多いこと。</p>

<p>そのため、安定している仕様、セキュリティ面で不安のない仕様を実装することに気を配っているというのである。IE9でWebSocketに対応しなかったのもそれが理由だったと春日井氏は明かす。とはいえ「当然、研究、検証はしており、その成果はHTML5LABSで発表している。ここでOKが出ればIEに実装していくことになる」とのこと。新しいHTML5への対応については、HTML5　LABS（http://html5labs.interoperabilitybridges.com/）をで紹介されているので、ぜひチェックしてほしい。</p>

<h2>読み上げ機能や音声認識機能を標準で実装</h2>

<p>そのほかにも最新のIEでは強化・改善された機能がある。第一にアクセスビリティの強化だ。読み上げ機能や音声認識機能を標準で実装。マイクを使えば音声だけで検索することもできるという。第二はF12開発者ツールも用意していること。F12キーを押すだけで日本語化された開発者ツールが起動する。「ここにいる開発者の方にぜひ使って欲しい」と春日井氏。</p>

<p>第三はIE11からドキュメントモードは非推奨となっており、Edgeモードという最新のレンダリングエンジンが優先されるようになったこと。条件付コメントはただのコメントとなる。「ブラウザのバージョンを指定したい場合は、メタタグを使って指定する」こととなると、その指定の仕方を紹介した。</p>

<p>自分の書いたコードに不安がある場合は、正しいかどうか、チェックするサイトをマイクロソフトでは用意しているという。それが「modarn.IE（http://loc.modern.ie/ja）」である。春日井氏は同サイトでも紹介されている「Brouser Stack」という有償のサービスについて説明した。「Brouser Stack」Web上で仮想環境をエミュレートするサービスで、例えばiOS6のSafari6でレンダリングするとどうなる、WindowsXPのIE10でレンダリングするとどうなる、という見え方がわかるというサービスだ。「互換性のチェックなどに使えるので便利。3カ月間は無料で使えるので、試してほしい」</p>

<p>セッションの終了の間際に春日井氏はキネクトのデモを実施。「体のジェスチャーで操作ができる時代ももうすぐ。Webは何かを見るためではなく何かをするためのプラットフォームになる」と春日井氏。デザインはもちろん、使い方も変わっていかざるを得ない。開発者も変わっていくときにきているのかもしれない。</p>

<p><DIV align=right></p>

<p style="padding-top: 16px; line-height: 1.55; color: #60aa2a;">（レポート：中村仁美／撮影：串田幸江）</p>

<p></div></p>

<p>【講演資料・セッション映像】</p>

<iframe src="http://www.slideshare.net/slideshow/embed_code/28512836?rel=0" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>

<div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/ykasugai/web-28512836" title="HTML5とIE11とWindows 8.1　－最新の Web トレンドとマイクロソフトの関係" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">HTML5とIE11とWindows 8.1　－最新の Web トレンドとマイクロソフトの関係</a> </strong> from <strong><a href="http://www.slideshare.net/ykasugai" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Yoshitaka Kasugai</a></strong> </div>

<iframe width="560" height="315" src="//www.youtube.com/embed/12x-xi0ln20" frameborder="0" allowfullscreen></iframe>
]]></content:encoded>
		
		<series:name><![CDATA[HTML5 Conference 2013レポート]]></series:name>
	</item>
	</channel>
</rss>
