ASP.NET MVCにおけるHTML5対応について
ASP.NET MVCでは、HTML制御がASP.NET WebFormよりも行いやすいです。そのため、MVC 2やMVC 1の段階でもHTML5アプリケーション開発は実施しやすかったと言えます。しかし、Visual Studio 2010 SP1とTools Updateにより、HTML5開発のハードルはかなり低くなりました。Tools Updateの"HTML5 セマンティック マークアップを使用する"チェックにより、開発開始時の手間を削減させることができます。では、Visual Studio 2010 SP1ではなぜHTML5開発を実施しやすいのか？ それは、インテリセンスとHTMLヘルパーの2つが挙げられます。
HTML5要素をインテリセンスで入力
［ツール］-［オプション］で、オプションダイアログを展開します。その後、［テキスト エディター］-［HTML］-［検証］と掘り下げて、検証ターゲットを［HTML5］に設定します（図5）。
ViewPage上にHTML5のインテリセンスを利用できるようになります（図6）。
ツールバーからこの設定を実施することもできます。［表示］-［ツール バー］-［HTML ソースの編集］と選択することで、図7のようなツールバーが表示されます。一番右のドロップダウンリストからHTML5を選択することで、上記同様にインテリセンスを利用できるようになります。
HTMLヘルパーで楽々HTML5アプリケーション
MVC 3自身はHTML5対応のヘルパーは提供していませんが、CodePlexとNuGet上にMVC Html5 Toolkitというツールがリリースされています。こちらを利用することでHTML5の要素のうちInputタグの拡張機能（Html5TextBox・Html5Number・Html5Rangeヘルパー）と強い型付けを実施したInputタグの拡張機能（Html5TextBoxForヘルパー）、Audio/Videoヘルパーが利用できるようになります（図8）。
現時点ではまだブラウザにより対応していないInputタイプもありますが、今後開発の手助けになる可能性が高いため、今回はご紹介させていただきます。
MVC Html5 Toolkitのインストール
NuGetを使うと簡単にインストールができます。Package Manager Consoleから以下のコマンドを入力するだけです。
PM> Install-Package MVCHtml5Toolkit
入力すると、参照設定に"System.Web.Mvc.Html5"が追加されます。
追加後、実際にViewPage上で使用するには、web.config上に名前空間を追加します。太字部分を追記して保存してください。
<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Mvc.Html5" />
<add namespace="System.Web.Routing" />
</namespaces>
</pages>
</system.web.webPages.razor>
以上で利用の準備は完了です。
MVC Html5 Toolkitの使用例
実際に使用する前に、MVC Html5 ToolkitのTextBox・Html5Number・Html5Range・Html5TextBoxForヘルパーが出力するInputタグの拡張についてご紹介します。Inputタグの拡張と、それに対応しているブラウザは以下のとおりです。
| Inputタイプ | 概要 | IE9 | Chrome11 | Firefox4 | Safari5 | Opera11.11 |
| Color | 色の入力に使用 | × | × | × | × | ○ |
| Date | 日付の入力に使用 | × | ○ | × | × | ○ |
| DateTime | UTCによる日時の入力に使用 | × | ○ | × | × | ○ |
| Eメールの入力に使用 | × | ○ | ○ | × | ○ | |
| File | サーバーにファイルを送信する際に使用 | ○ | ○ | ○ | ○ | ○ |
| Number | 数値の入力に使用 | × | ○ | × | × | ○ |
| Month | 月の入力に使用 | × | ○ | × | × | ○ |
| Search | 検索テキストの入力に使用 | × | ○ | ○ | × | ○ |
| Tel | 電話番号の入力に使用 | × | ○ | ○ | × | ○ |
| Time | 時間の入力に使用 | × | ○ | × | × | ○ |
| Url | URLの入力に使用 | × | ○ | ○ | × | ○ |
| Week | 週の入力に使用 | × | ○ | × | × | ○ |
| Range | レンジ入力に使用 | × | ○ | × | × | ○ |
上記各要素は対応しているブラウザ上では各要素のコントローラーが出力されますが、未対応のブラウザではtype属性は反映されずにTextboxがそのまま表示されます。ご覧のとおり、Opera>Chrome>Firefox>Safari>IEという対応状況です。恐らく本格的にMVC Html5 Toolkitが活躍するのは全ブラウザが対応後になる可能性が高い部分ではありますが、近い将来これらのInputタイプが使用できることはアプリケーション開発をより容易にする可能性があります。まずは新しいInputタイプの雰囲気を掴むために利用して見てはいかがでしょうか。
それでは、実際に各種ヘルパーの構文例です。Html5TextBoxとHtml5TextBoxForの構文は以下のようになります。
// 構文
@Html.Html5TextBox("要素名",InputTypeの種類)
// 用例
@Html.Html5TextBox("txtFile",InputTypes.InputType.File)
// 構文
@Html.Html5TextBoxFor(model => model.モデルのプロパティ,InputTypeの種類)
// 用例
@Html.Html5TextBoxFor(model => model.CategoryID,InputTypes.InputType.Text)
なお、Audio・Videoヘルパーはsourceを入力する関係上String型で生成されます。そのため、実際にタグを出力するためには、Razor構文で記載したようにHTML文字列をそのままレンダリングするためにHtml.Rawヘルパーを使用して記載します。
// 構文
Html.Audio("/音楽ファイル名",コントロールの有無,オートプレイの有無)
// 用例
@Html.Raw(Html.Audio("/音楽ファイル名",true,false))
// 構文
Html.Video("/ビデオファイル名",コントロールの有無,オートプレイの有無)
// 用例
@Html.Raw(Html.Video("/音楽ファイル名",true,false))
Audio・Videoヘルパーの構文は同じです。
すぐにHTML5でアプリケーションを構築というのはまだ少ないかもしれませんが、Visual StudioやNuGetを活用することでHTML5アプリケーション開発が楽になる部分もあることを覚えておくとよいでしょう。
まとめ
今回はTools Updateと、MVC 2からMVC 3のView周りの変更点についてご紹介しました。 View周りは成熟しつつあります。そのため、トレンドのHTML5とより開発がしやすくなるビューエンジン。この2つを理解しより良いViewの作成に活かして頂ければ幸いです。
次回はModelにフォーカスをあてて新しい属性クラスなどを紹介予定です。お楽しみに。
