SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ASP.NET MVC3入門

ASP.NET MVC 3Tools UpdateとView周りの改良点

ASP.NET MVC3入門(2)


  • X ポスト
  • このエントリーをはてなブックマークに追加

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)。

図5 オプションからの設定
図5 オプションからの設定

 ViewPage上にHTML5のインテリセンスを利用できるようになります(図6)。

図6 HTML5要素入力時のインテリセンス
図6 HTML5要素入力時のインテリセンス

 ツールバーからこの設定を実施することもできます。[表示]-[ツール バー]-[HTML ソースの編集]と選択することで、図7のようなツールバーが表示されます。一番右のドロップダウンリストからHTML5を選択することで、上記同様にインテリセンスを利用できるようになります。

図7 オプションからの設定
図7 オプションからの設定

HTMLヘルパーで楽々HTML5アプリケーション

 MVC 3自身はHTML5対応のヘルパーは提供していませんが、CodePlexNuGet上にMVC Html5 Toolkitというツールがリリースされています。こちらを利用することでHTML5の要素のうちInputタグの拡張機能(Html5TextBox・Html5Number・Html5Rangeヘルパー)と強い型付けを実施したInputタグの拡張機能(Html5TextBoxForヘルパー)、Audio/Videoヘルパーが利用できるようになります(図8)。

図8 MVC Html5 Toolkitを利用したViewPage例
図8 MVC Html5 Toolkitを利用したViewPage例

 現時点ではまだブラウザにより対応していないInputタイプもありますが、今後開発の手助けになる可能性が高いため、今回はご紹介させていただきます。

MVC Html5 Toolkitのインストール

 NuGetを使うと簡単にインストールができます。Package Manager Consoleから以下のコマンドを入力するだけです。

NuGetのコマンドを利用したMVCHtml5Toolkitのインストール
PM> Install-Package MVCHtml5Toolkit

 入力すると、参照設定に"System.Web.Mvc.Html5"が追加されます。

 追加後、実際にViewPage上で使用するには、web.config上に名前空間を追加します。太字部分を追記して保存してください。

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タグの拡張と、それに対応しているブラウザは以下のとおりです。

MvcHtml5Toolkitで出力されるInput要素の種類
Inputタイプ 概要 IE9 Chrome11 Firefox4 Safari5 Opera11.11
Color 色の入力に使用 × × × ×
Date 日付の入力に使用 × × ×
DateTime UTCによる日時の入力に使用 × × ×
Email 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の構文は以下のようになります。

Html5TextBoxヘルパーの構文例
  // 構文
  @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ヘルパーを使用して記載します。

Audio・Videoヘルパーの構文例
  // 構文
  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にフォーカスをあてて新しい属性クラスなどを紹介予定です。お楽しみに。

参考文献

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET MVC3入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト ナオキ(ナオキ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5983 2011/06/22 17:45

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング