VS 2010 SP1でのHTML5 Intellisense
VS 2010 SP1では、IntelliSenseにHTML5を含めるよう、テキストエディタのツールバーにある『Target Schema for Validation』ドロップダウンで変更できるようになりました。
HTML5を検証のターゲットとして選択した場合、Visual Studio内のHTMLのIntelliSenseエンジンは、新しいHTML5要素や属性に対して適切なIntelliSenseを提供します。これは、<canvas>や<video>および<article>や<nav>のどちらの動作要素にも有効です。
次期リリースのVSでは、ページ上部の<!DOCTYPE>を確認して、デフォルトでIntelliSenseを操作するようにし、そこに表示されない（またはユーザーコントロール、およびパーシャル／エディタテンプレートで編集をしている）場合に、使用するデフォルトの基準を指定できるようにします。VS 2010およびそれ以前のバージョンでは、HTMLのどのバージョンをターゲットにするかを明示的に設定する必要があります。
Modernizr.jsライブラリ
HTML5セマンティックタグは、現代のすべてのブラウザベンダーがサポートしており、それで構築されたページのスタイル化やカスタマイズにCSSを使用できます。
1つ問題があるのですが、それは現在でもまだ、IE6などの多くの古いブラウザが存在しており、デフォルトでCSSを使用して、セマンティックのHTML5要素をスタイル化できません。この状況を回避できるライブラリを使用しない限り、現代のブラウザで見るときれいなセマンティックのHTML5サイトが、古いブラウザでは壊れて見えてしまう可能性があります。
Modernizr.js
Modernizrは、小さくて洗練されたオープンソースのJavaScriptライブラリで、HTML5やCSS3などの最新のWeb技術が利用できるようになると同時に、これらの新技術がサポートされていない古いブラウザとの互換性レベルも保てます。http://modernizr.com/ Webサイトで、Modernizrをより詳細に知ることができます。
ASP.NET MVC 3 Tools Update以降は、ASP.NET MVC 3と共にModernizrも出荷し、すべての新しいASP.NET MVC 3プロジェクトにデフォルトで追加します。ASP.NET MVC 3プロジェクト作成時に『Use HTML5 semantic markup』チェックボックスを選択した場合、Visual Studioは、layout.cshtmテンプレートに、デフォルトでModernizr.jsライブラリへの参照を追加します。
Modernizr.js と古いブラウザでセマンティックHTML5を使用CSS
Modernizr.jsスクリプト参照により、CSSを使用してセマンティック HTML5要素のスタイル化が可能になり、元々サポートされている現代のブラウザと、IE6を含む古いブラウザの両方で動作が可能になります。とりわけ、Modernizrは優れており、古いブラウザが初めて出合った見知らぬ要素でCSSのルールに従うようにする、小さなスクリプトを実行します。
IE9を使用して作成された、デフォルトのASP.NET MVC 3プロジェクトを実行すると、Modernizrがもたらす利点を確認できます。セマンティックのHTML5要素をサポートしている、デフォルトのIE9の描画モードを使用すると、サイトは以下の様になり、セマンティック HTML5に対するブラウザにビルトインされたCSSサポートを使用します。
ブラウザで『互換表示』（IEのナビゲーションバー上部にある2つ目のアイコン）を有効にすると、IE6／7／8でのページと同じように描画する『ダウンレベル』が確認できます。<header>、<footer>、<nav>、<section>など、元々古いIEの描画エンジンがサポートしていないものでも、Modernizrでは、CSS規則がこのダウンレベルモードで動作するようにします。
Modernizr.jsがページ上に含まれていない場合、古いブラウザを使用している人には以下のような壊れたサイトに見えてしまいます。
ご覧の様に、Modernizrにより、古いブラウザのユーザーには、見られなかったものが見られるようになるという、大きな改善がもたらされます。なによりも最高なのは、これを動作させるのに、コードを書くことも、代わりのCSSスタイルシートを用意する必要もないということです。このサイトではHTML5 セマンティックタグを使用しています。
Modernizrを使用してブラウザの機能を検知
上記のセマンティックHTML5タグの例は、Modernizrがもたらす利点のほんの一部です。
Modernizrにより、コード中にブラウザバージョンをハードコードしなくても、簡単にブラウザ機能をチェックでき、特定の機能がサポートされているかどうかを、簡単に検知および表示できるようにします。http://modernizr.com Webサイトで、この動作方法の詳細を確認できます。
Justin Schwartzenberger氏は、HTML5 localstorageを通じてユーザーがデータ保存するためのASP.NET MVC 3におけるModernizr の利用方法に焦点を当て、この動作を示した素晴らしいブログを公開しています。このチュートリアルでは、もしHTML5のlocalstorage機能が利用できればそれを使用し、古いブラウザでは単にクッキーを使用する、統合的なASP.NET MVC 3のサンプルが紹介されています。
まとめ
新しいASP.NET MVC 3 Tools Updateは、いいことづくめです。もしまだダウンロード・インストールしていない場合は、すぐに行うことをお勧めします。最新バージョンにするために、http://asp.net/mvc サイト上で、ASP.NET MVC 3インストーラ－が実行できます。
ASP.NET MVC 3でのHTML5セマンティックタグの改善により、HTML5および現代ブラウザをもっと上手く利用するサイトが設計できます。Modernizr.jsを使用すると、古いブラウザでも動作できるようにしたり、オプションで新しい機能が利用可能になった時だけ出現させることもできます。
Hope this helps,
Scott
P.S. 現在Twitterを使って簡単な更新やリンク共有を行っています。twitter.com/scottguで、私をフォローしてください。
